@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Glass Effect ─── */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dark .glass {
    background: rgba(14, 14, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── Sidebar Gradient ─── */
.sidebar-gradient {
    background: linear-gradient(180deg, #faf7ff 0%, #f1f0fb 100%);
}

.dark .sidebar-gradient {
    background: linear-gradient(180deg, #14131f 0%, #0e0e16 100%);
}

/* ─── Scrollbar ─── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.15);
    border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.3);
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.4);
}

.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ─── Animations ─── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}
.animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    background: linear-gradient(90deg, transparent 25%, rgba(139,92,246,0.08) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* ─── Form ─── */
textarea:focus { outline: none; }

/* ─── Light Mode Specific Polish ─── */
.light-input-area {
    background: rgba(250, 247, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ─── User Bubble Gradient ─── */
.user-bubble {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
}

/* ─── Assistant Bubble Light ─── */
.assistant-bubble-light {
    background: white;
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .assistant-bubble-light {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ─── Provider Dot Colors ─── */
.dot-gemini { background: #60a5fa; box-shadow: 0 0 8px rgba(96, 165, 250, 0.4); }
.dot-openai { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
.dot-anthropic { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, 0.4); }
.dot-unavailable { background: #ef4444 !important; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important; }

/* ─── Gate Overlay ─── */
#gate-overlay { transition: opacity 0.5s ease-out; }
#gate-overlay input:focus { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }

/* ─── Selection Colors ─── */
::selection {
    background: rgba(139, 92, 246, 0.25);
    color: inherit;
}