/* =====================================================================
   TITAN CONNECT — DESIGN LAYER v3  "World-Class Refresh"
   ---------------------------------------------------------------------
   Loaded LAST (after design-v2.css / desktop.css / immersion-reader.css).
   Additive & override-only — no legacy file is edited.

   What this layer does:
   1. Depth      — warm near-black surfaces instead of pure #000
   2. De-neon    — glow becomes a whisper; color appears where it matters
   3. Bubbles    — theme-aware "me" gradient, RTL-correct tails, grouping
   4. Motion     — spring entrances, press feedback, reduced-motion safe
   5. Light mode — body.theme-light full surface system
   6. Auth       — slow aurora drift behind the gateway card
   7. Type       — calmer weights (max 700), themed selection
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1) DEPTH — same hue per theme, lifted off pure black so layers read
   ───────────────────────────────────────────────────────────────────── */
body.theme-titan  { --bg-deep:#0b0b10; --bg-panel:#101018; --bg-elevated:#181824; }
body.theme-ocean  { --bg-deep:#070d14; --bg-panel:#0a1420; --bg-elevated:#10202f; }
body.theme-matrix { --bg-deep:#060c08; --bg-panel:#091410; --bg-elevated:#0f2018; }
body.theme-rose   { --bg-deep:#0e070a; --bg-panel:#150a10; --bg-elevated:#21101a; }
body.theme-gold   { --bg-deep:#0c0905; --bg-panel:#140f08; --bg-elevated:#201708; }
body.theme-teal   { --bg-deep:#060c0b; --bg-panel:#0a1514; --bg-elevated:#102221; }
body.theme-dark   { --bg-deep:#0a0a0c; --bg-panel:#101014; --bg-elevated:#17171d; }
body.theme-cosmic { --bg-deep:#0b0710; --bg-panel:#120b1a; --bg-elevated:#1b1226; }

/* Glow: from neon sign → soft halo (used by buttons, active states…) */
body[class*="theme-"], body.mode-ghost, body.mode-social {
    --primary-glow: color-mix(in srgb, var(--primary) 30%, transparent);
    --shadow-neon: 0 4px 24px -6px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Missing-var safety net (e.g. scroll-down-btn uses var(--border)) */
:root { --border: var(--line, rgba(255,255,255,.07)); }

/* ─────────────────────────────────────────────────────────────────────
   2) DE-NEON — text-shadows that were pure glow, not legibility
   ───────────────────────────────────────────────────────────────────── */
.boot-logo           { filter: drop-shadow(0 2px 14px color-mix(in srgb, var(--primary) 45%, transparent)); animation: none; }
.tab-btn.active      { text-shadow: none; }
.role-badge          { text-shadow: none; }
.streak-fire, .xp-glow { text-shadow: none; }

/* ─────────────────────────────────────────────────────────────────────
   3) BUBBLES — follow the active theme (were hard-coded violet),
      logical radii so the "tail" sits on the outer side in RTL & LTR,
      grouped messages merge, press feedback
   ───────────────────────────────────────────────────────────────────── */
.bubble {
    transition: transform .12s var(--ease-out, ease), box-shadow .2s ease;
    line-height: 1.5;
}
.bubble.me {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 92%, #fff 8%),
        var(--primary-dark));
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    border-end-start-radius: 18px;
    border-end-end-radius: 5px;     /* tail on the outer side (RTL-aware) */
    box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--primary) 40%, transparent);
}
.bubble.peer {
    background: color-mix(in srgb, var(--bg-elevated) 88%, #fff 4%);
    border: 1px solid var(--line);
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    border-end-start-radius: 5px;   /* tail beside the avatar */
    border-end-end-radius: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.bubble:active { transform: scale(.985); }

/* Consecutive messages from the same sender: melt together */
.msg-row.grouped           { margin-bottom: 1px !important; }
.msg-row.grouped .msg-avatar-mini { visibility: hidden; }
.msg-row:not(.grouped)     { margin-top: 10px; }
.msg-row.grouped .bubble.me   { border-start-start-radius: 9px; border-start-end-radius: 9px; }
.msg-row.grouped .bubble.peer { border-start-start-radius: 9px; border-start-end-radius: 9px; }

/* Links read as links */
.bubble.peer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.bubble.me a   { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Deleted / system states: quieter */
.msg-deleted-text { opacity: .6; font-style: italic; }

/* ─────────────────────────────────────────────────────────────────────
   4) MOTION — spring-y entrance, and a real typing bubble
   ───────────────────────────────────────────────────────────────────── */
.msg-row { animation: tc-msg-in .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes tc-msg-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Typing indicator: ghost bubble with three bouncing dots */
#typing-indicator-ui { pointer-events: none; }
.typing-bubble {
    display: inline-flex; align-items: center; gap: 5px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, #fff 4%);
    border: 1px solid var(--line);
    padding: 11px 15px;
    border-start-start-radius: 18px; border-start-end-radius: 18px;
    border-end-start-radius: 5px; border-end-end-radius: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    animation: tc-msg-in .25s cubic-bezier(.22,1,.36,1) both;
}
.typing-bubble span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-mid);
    animation: tc-typing 1.2s infinite ease-in-out;
}
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes tc-typing {
    0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Date separator: centered floating pill (static — sticky stacked all
   separators on top of each other inside the shared scroll container) */
.date-separator {
    display: flex; align-items: center; justify-content: center;
    margin: 18px 0 8px;
}
.date-sep-line { display: none; }
.date-sep-label {
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    color: var(--text-mid);
    font-size: var(--fs-xs, .75rem); font-weight: 600;
    padding: 5px 14px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ─────────────────────────────────────────────────────────────────────
   5) LIGHT MODE — body.theme-light (appears in Settings → Themes)
   ───────────────────────────────────────────────────────────────────── */
body.theme-light {
    color-scheme: light;
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-glow: rgba(124, 58, 237, .22);
    --bg-deep: #eef0f5;
    --bg-panel: #ffffff;
    --bg-elevated: #ffffff;
    --text-high: #0f172a;
    --text-mid: #475569;
    --text-low: #64748b;
    --accent: #e11d48;
    --glass-overlay: rgba(255,255,255,.72);
    --glass-panel: rgba(255,255,255,.85);
    --glass-border: 1px solid rgba(15,23,42,.08);
    --neon-border: 1px solid rgba(124,58,237,.22);
    --line: rgba(15,23,42,.08);
    --line-strong: rgba(15,23,42,.16);
    --surface-1: rgba(255,255,255,.78);
    --surface-2: color-mix(in srgb, var(--primary) 6%, #ffffff);
    --shadow-soft: 0 10px 30px -12px rgba(15,23,42,.25);
    --elev-1: 0 1px 2px rgba(15,23,42,.08);
    --elev-2: 0 6px 18px -6px rgba(15,23,42,.16);
    --elev-3: 0 20px 50px -12px rgba(15,23,42,.28);
    background-color: var(--bg-deep); color: var(--text-high);
}

/* Global chrome */
body.theme-light .sidebar,
body.theme-light .sidebar-header,
body.theme-light .chat-header,
body.theme-light .settings-panel,
body.theme-light .settings-container,
body.theme-light .tbn-popup,
body.theme-light .overlay-panel {
    background: var(--bg-panel) !important;
    border-color: var(--line) !important;
    color: var(--text-high);
}
body.theme-light .input-panel {
    background: rgba(255,255,255,.85) !important;
    border-top: 1px solid var(--line) !important;
}
body.theme-light .input-bar {
    background: rgba(15,23,42,.05) !important;
    border-color: rgba(15,23,42,.1) !important;
    color: var(--text-high) !important;
}
body.theme-light .input-bar input,
body.theme-light .input-bar textarea { color: var(--text-high) !important; }
body.theme-light .input-bar input::placeholder { color: var(--text-low) !important; }

/* Chat list */
body.theme-light .ghost-item { color: var(--text-high); }
body.theme-light .ghost-item:hover,
body.theme-light .ghost-item.active { background: rgba(15,23,42,.05) !important; }
body.theme-light .tab-btn { color: var(--text-mid); }
body.theme-light .tab-btn.active { color: var(--primary); }

/* Bubbles */
body.theme-light .bubble.peer {
    background: #ffffff; color: #1e293b;
    border: 1px solid rgba(15,23,42,.09);
    box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
body.theme-light .bubble.peer .msg-meta { color: #94a3b8; }
body.theme-light .typing-bubble { background: #ffffff; border-color: rgba(15,23,42,.09); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
body.theme-light .date-sep-label { background: rgba(255,255,255,.85); color: var(--text-mid); border-color: rgba(15,23,42,.1); box-shadow: 0 1px 4px rgba(15,23,42,.1); }
body.theme-light .msg-reply-context { background: rgba(15,23,42,.06); }
body.theme-light #scroll-down-btn { background: #ffffff !important; border-color: rgba(15,23,42,.12) !important; box-shadow: 0 4px 14px rgba(15,23,42,.15); }

/* Buttons & utils */
body.theme-light .btn-util { background: rgba(15,23,42,.05); color: var(--text-mid); border-color: transparent; }
body.theme-light .btn-util:hover { background: rgba(15,23,42,.09); color: var(--text-high); }
body.theme-light .key-btn { background: #ffffff; color: var(--text-high); border-color: rgba(15,23,42,.1); }
body.theme-light .keypad-display { background: #ffffff; color: var(--text-high); border-color: rgba(15,23,42,.15); }

/* Boot / gateway / auth */
body.theme-light #app-transition-loader { background: var(--bg-deep) !important; }
body.theme-light #gateway-layer { background: linear-gradient(180deg, #f4f1fd, #eef0f7); }
body.theme-light #gateway-layer::after { background-image: linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px); }
body.theme-light .titan-auth-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 24px 70px -20px rgba(15,23,42,.3), inset 0 1px 0 #ffffff;
    color: var(--text-high);
}
body.theme-light .titan-auth-card h1,
body.theme-light .titan-auth-card h2 { color: var(--text-high); }
body.theme-light .titan-auth-title    { color: #0f172a; }
body.theme-light .titan-auth-subtitle { color: #64748b; }
body.theme-light .auth-trust-item     { color: #94a3b8 !important; }
body.theme-light .auth-trust-item i   { color: #64748b; }
body.theme-light .auth-version        { color: #94a3b8; }
body.theme-light .auth-divider-line   { background: rgba(15,23,42,.08); }
body.theme-light .auth-lang-btn {
    background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); color: #64748b;
}
body.theme-light .auth-lang-btn:hover { background: rgba(15,23,42,.08); color: #0f172a; }
body.theme-light .acc-card { background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.08); }
body.theme-light .acc-card:hover { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); }
body.theme-light .acc-name { color: #1e293b; }
body.theme-light .acc-avatar { background: #e2e8f0; border-color: rgba(15,23,42,.1); }
body.theme-light .acc-remove { background: #ffffff; border-color: rgba(15,23,42,.12); color: #64748b; }
body.theme-light .btn-google-signin { box-shadow: 0 2px 12px rgba(15,23,42,.18); border: 1px solid rgba(15,23,42,.08); }
body.theme-light .saved-accounts-label,
body.theme-light .auth-divider-text { color: #94a3b8 !important; }

/* Popups (SweetAlert) */
body.theme-light .swal2-popup {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    color: var(--text-high) !important;
}
body.theme-light .swal2-title,
body.theme-light .swal2-html-container { color: var(--text-high) !important; }

/* Scrollbar & inputs */
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); }
body.theme-light input, body.theme-light textarea { color-scheme: light; }

/* ── Nav rail (desktop) & bottom nav (mobile) ── */
body.theme-light .titan-bottom-nav {
    background: rgba(255,255,255,.94);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(15,23,42,.08);
}
body.theme-light #titan-bottom-nav.titan-bottom-nav {
    background: rgba(255,255,255,.94);
    border-inline-end: 1px solid var(--line);
    box-shadow: none;
}
body.theme-light #titan-bottom-nav .tbn-item { color: var(--text-low); }
body.theme-light #titan-bottom-nav .tbn-item:hover { background: rgba(15,23,42,.05); color: var(--text-high); }
body.theme-light #titan-bottom-nav .tbn-item.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
body.theme-light .tbn-item.active i { filter: none; }
body.theme-light .tbn-popup {
    background: rgba(255,255,255,.97);
    border: 1px solid var(--line);
    color: var(--text-high);
    box-shadow: 0 20px 50px -12px rgba(15,23,42,.3);
}
body.theme-light .tbn-popup-item { color: var(--text-high); }
body.theme-light .tbn-popup-item:hover { background: rgba(15,23,42,.05); }

/* ── Sidebar: tabs strip, search, user chip, chat list ── */
body.theme-light .sidebar { border-left: 1px solid rgba(15,23,42,.08) !important; }
body.theme-light .sidebar-header { border-bottom: 1px solid var(--line); }
body.theme-light .sidebar-tabs {
    background: transparent;
    border-bottom: 1px solid var(--line);
}
body.theme-light #search-input { color: var(--text-high) !important; }
body.theme-light #search-input::placeholder { color: var(--text-low) !important; }
body.theme-light .user-chip:hover { background: rgba(15,23,42,.05); }
body.theme-light .ghost-item { background: transparent; border-color: transparent; }
body.theme-light .ghost-item.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
body.theme-light .ghost-item.unread-active {
    background: linear-gradient(90deg, rgba(225,29,72,.07), transparent);
    border-left: 3px solid var(--accent);
}
body.theme-light .ghost-item.unread-active .ghost-name { color: var(--text-high) !important; }
body.theme-light .ghost-item.unread-active .ghost-preview { color: var(--accent) !important; }
body.theme-light .ghost-name { color: var(--text-high); }
body.theme-light .ghost-preview { color: var(--text-mid); }
body.theme-light .online-dot { border-color: var(--bg-panel); }

/* ── Chat stage chrome ── */
body.theme-light .chat-stage::before {
    background: rgba(255,255,255,var(--overlay-opacity, 0));
    backdrop-filter: none;
}
body.theme-light #chat-name-view { color: var(--text-high); }
body.theme-light .group-members-bar { color: var(--text-mid); }
body.theme-light .members-count-badge {
    background: rgba(15,23,42,.06);
    border-color: rgba(15,23,42,.08);
    color: var(--text-mid);
}
body.theme-light .btn-nav-back { background: rgba(15,23,42,.05); color: var(--text-high); }
body.theme-light #pinned-bar-container {
    background: var(--surface-1);
    color: var(--text-high);
    border-color: var(--line);
}
body.theme-light .last-seen-text, body.theme-light .chat-status-text { color: var(--text-mid) !important; }

/* ─────────────────────────────────────────────────────────────────────
   6) AUTH AURORA — slow drifting light behind the gateway card
   ───────────────────────────────────────────────────────────────────── */
@property --tc-ax { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --tc-ay { syntax: '<percentage>'; initial-value: 20%; inherits: false; }

#gateway-layer::before {
    inset: -25%;
    background:
        radial-gradient(ellipse 55% 45% at var(--tc-ax, 20%) var(--tc-ay, 20%), color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at calc(100% - var(--tc-ax, 20%)) calc(100% - var(--tc-ay, 20%)), rgba(59,130,246,.12) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 50% 55%, rgba(16,185,129,.05) 0%, transparent 70%);
    animation: tc-aurora 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes tc-aurora {
    0%   { --tc-ax: 18%; --tc-ay: 22%; transform: translate3d(0,0,0) scale(1); }
    50%  { --tc-ax: 30%; --tc-ay: 14%; transform: translate3d(2%, -1%, 0) scale(1.06); }
    100% { --tc-ax: 14%; --tc-ay: 30%; transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

/* ─────────────────────────────────────────────────────────────────────
   7) TYPE & MICRO-POLISH
   ───────────────────────────────────────────────────────────────────── */
h1, h2, h3, .setting-title, .tc-empty-title, .ban-title { font-weight: 700; }
.tc-empty-sub { font-weight: 400; }

::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: #fff; }
body.theme-light ::selection { color: var(--text-high); }

/* Empty chat state: softer logo, calmer presence */
.tc-empty-logo {
    filter: none !important;
    opacity: .9;
}
.tc-empty-tips li i { opacity: .8; }

/* Skeleton shimmer (reusable: add .tc-skeleton to any placeholder) */
.tc-skeleton {
    position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--bg-elevated) 80%, #fff 3%);
    border-radius: var(--r-sm, 10px);
}
.tc-skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
    animation: tc-shimmer 1.4s infinite;
}
body.theme-light .tc-skeleton::after {
    background: linear-gradient(100deg, transparent 30%, rgba(15,23,42,.06) 50%, transparent 70%);
}
@keyframes tc-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ─────────────────────────────────────────────────────────────────────
   8) REDUCED MOTION — respect the OS setting
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .msg-row, .typing-bubble { animation: none !important; }
    #gateway-layer::before { animation: none !important; }
    .bubble { transition: none; }
    .typing-bubble span { animation-duration: 2s; }
}