/* ---------------------------------------------------------------------------
   Everything Tailwind's utility classes cannot express: keyframes, scrollbars
   and the couple of components that repeat often enough to earn a class.
   Colours are the same tokens used across the site (slate-950/900/800,
   indigo-600, cyan-400).
   --------------------------------------------------------------------------- */

:root {
    --bg:            #020617;   /* slate-950 */
    --surface:       #0f172a;   /* slate-900 */
    --border:        #1e293b;   /* slate-800 */
    --muted:         #94a3b8;   /* slate-400 */
    --accent:        #4f46e5;   /* indigo-600 */
    --accent-soft:   #818cf8;   /* indigo-400 */
    --accent-cyan:   #22d3ee;   /* cyan-400 */
}

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* --- Landing page ---------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

.glow-bg {
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, .12) 0%, rgba(0, 0, 0, 0) 70%);
}

.lift-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.lift-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, .35);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5);
}

/* --- Scrollbars ------------------------------------------------------------ */
.scroll-slim { scrollbar-width: thin; scrollbar-color: #1e293b transparent; }
.scroll-slim::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-slim::-webkit-scrollbar-track { background: transparent; }
.scroll-slim::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
.scroll-slim::-webkit-scrollbar-thumb:hover { background: #334155; }

/* --- Dropdowns --------------------------------------------------------------
   Native <select> popups otherwise render with the OS's light-theme chrome —
   color-scheme plus styling the <option>s themselves is as far as CSS can
   reach into that popup, but both are respected by every browser that
   matters here. */
select { color-scheme: dark; }
select option {
    background-color: var(--surface);
    color: #e2e8f0;
}

/* --- Entrances ------------------------------------------------------------- */
@keyframes fade-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fade-slide-up .28s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes pop-in {
    0%   { opacity: 0; transform: scale(.85); }
    60%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop { animation: pop-in .32s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}
.animate-shake { animation: shake .4s ease both; }

@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.animate-slide-in { animation: slide-in-right .28s cubic-bezier(.16, 1, .3, 1) both; }

/* Double-tap-to-react burst — a short-lived emoji that pops up then fades. */
@keyframes react-pop {
    0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
    35%  { transform: translate(-50%, -60%) scale(1.25); opacity: 1; }
    100% { transform: translate(-50%, -110%) scale(1.1); opacity: 0; }
}
.react-pop {
    position: fixed; z-index: 90; font-size: 2.75rem; line-height: 1;
    pointer-events: none; animation: react-pop .7s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* --- Typing indicator ------------------------------------------------------ */
.typing-dot {
    width: 5px; height: 5px; border-radius: 9999px;
    background: currentColor; display: inline-block;
    animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .18s; }
.typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* --- Media spoilers -------------------------------------------------------- */
.spoiler {
    filter: blur(18px);
    transform: scale(1.03);
    cursor: pointer;
    transition: filter .35s ease, transform .35s ease;
}
.spoiler-wrap { position: relative; overflow: hidden; border-radius: .75rem; }
.spoiler-wrap .spoiler-label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; font-size: .75rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #e2e8f0; text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.spoiler-wrap.revealed .spoiler { filter: none; transform: none; cursor: default; }
.spoiler-wrap.revealed .spoiler-label { display: none; }

/* --- Small pieces ---------------------------------------------------------- */
.avatar-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(99, 102, 241, .35); }

.presence-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 9999px;
    background: #475569; border: 2px solid var(--bg);
    transition: background .25s ease;
}
.presence-dot.online { background: #34d399; }   /* emerald-400 */

.chat-scroll { overflow-anchor: none; }

/* Context menu (right-click on a group member). */
.context-menu {
    position: fixed; z-index: 80; min-width: 172px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: .75rem; padding: .3rem;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
}

/* Respect the OS "reduce motion" preference. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keyboard focus is always visible. */
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: .375rem; }

/* --- Per-chat customization -------------------------------------------------
   "Chat theme" only recolours the caller's own message bubbles (and the bits
   that key off --bubble-mine below) — everyone else's UI, and their view of
   this same chat, is unaffected: it is stored per-viewer, not shared. */
#conversation { --bubble-mine: var(--accent); --bubble-mine-text: #ffffff; }
#conversation[data-chat-theme="indigo"]  { --bubble-mine: #4f46e5; }
#conversation[data-chat-theme="rose"]    { --bubble-mine: #e11d48; }
#conversation[data-chat-theme="emerald"] { --bubble-mine: #059669; }
#conversation[data-chat-theme="amber"]   { --bubble-mine: #d97706; --bubble-mine-text: #1c1207; }
#conversation[data-chat-theme="violet"]  { --bubble-mine: #7c3aed; }
#conversation[data-chat-theme="slate"]   { --bubble-mine: #475569; }
.bubble-mine { background-color: var(--bubble-mine); color: var(--bubble-mine-text); }

/* "Chat background" — a subtle pattern behind the message list, also local
   to the viewer who picked it. */
#messages[data-chat-bg="dots"] {
    background-image: radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px);
    background-size: 18px 18px;
}
#messages[data-chat-bg="grid"] {
    background-image:
        linear-gradient(rgba(148, 163, 184, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .1) 1px, transparent 1px);
    background-size: 26px 26px;
}
#messages[data-chat-bg="diagonal"] {
    background-image: repeating-linear-gradient(135deg, rgba(148, 163, 184, .08) 0 10px, transparent 10px 22px);
}
#messages[data-chat-bg="plain"] { background-color: #0a1120; }