/* =====================================================================
   TITAN CONNECT — DESIGN LAYER v2
   Loaded LAST. Adds a real design-system foundation on top of the
   existing dark/violet identity without rewriting the legacy files:
   tokens · contrast (WCAG AA) · focus · motion · RTL-safe polish.
   Everything below is additive/override-only and theme-aware
   (uses var(--primary) so the 8 colour themes keep working).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---- Text: raise the low-contrast greys to AA on #050505 ---- */
  --text-low: #8593a8;            /* was #475569 (2.7:1) → ~6:1 */
  --text-mid: #a3b0c2;            /* was #94a3b8 (still AA, a bit brighter for body copy) */

  /* ---- Type scale (rem) ---- */
  --fs-2xs: .6875rem;   /* 11px – badges, timestamps (floor: never below 11px) */
  --fs-xs:  .75rem;     /* 12px */
  --fs-sm:  .8125rem;   /* 13px */
  --fs-md:  .9375rem;   /* 15px – body */
  --fs-lg:  1.0625rem;  /* 17px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */

  /* ---- Radius scale ---- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Elevation ---- */
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.25);
  --elev-2: 0 6px 18px -6px rgba(0,0,0,.65);
  --elev-3: 0 20px 50px -12px rgba(0,0,0,.8);
  --ring: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--primary);

  /* ---- Surfaces (derive from theme so ocean/rose/... recolour them too) ---- */
  --surface-1: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  --surface-2: color-mix(in srgb, var(--primary) 6%, var(--bg-elevated));
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.14);

  /* ---- Z-index scale (documented; legacy numbers untouched) ---- */
  --z-nav: 3000; --z-popup: 3500; --z-overlay: 20000; --z-modal: 100000; --z-toast: 150000; --z-consent: 2147483000;

  --font-main: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; font-synthesis: none; }
body { font-feature-settings: "kern", "liga"; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ---------------- Focus: visible for keyboard, quiet for mouse/touch ---------------- */
:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px; border-radius: var(--r-xs); }
input:focus-visible, textarea:focus-visible { outline-offset: 0; }
.input-bar:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent) !important; }

/* ---------------- Grey text that was hard-coded inline (fails AA) ---------------- */
[style*="color:#4b5563"], [style*="color: #4b5563"],
[style*="color:#374151"], [style*="color: #374151"],
[style*="color:#475569"], [style*="color: #475569"],
[style*="color:#64748b"], [style*="color: #64748b"] { color: var(--text-low) !important; }
.auth-divider-text, .saved-accounts-label, .auth-trust-item { color: var(--text-low) !important; }
.auth-trust-item { font-size: var(--fs-xs) !important; }

/* ---------------- Sidebar / chat list ---------------- */
.sidebar-header { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%); }
.user-chip { border-radius: var(--r-md); }
.user-chip:focus-visible { background: var(--surface-1); }
.avatar-main { border-radius: 14px; border-width: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

.tab-btn { font-size: var(--fs-sm); letter-spacing: .2px; opacity: 1; color: var(--text-mid); border-bottom-width: 2px; padding-block: 12px; }
.tab-btn:hover { color: var(--text-high); }
.tab-btn.active { color: var(--primary); text-shadow: none; }

.ghost-list { padding: var(--sp-2) var(--sp-3); }
.ghost-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  transition: background .18s ease, border-color .18s ease;
}
.ghost-item:hover { background: var(--surface-1) !important; transform: none !important; }   /* old hover nudged translateX(5px): wrong in RTL */
.ghost-item.active { background: var(--surface-2) !important; border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important; }
.ghost-item:focus-visible { background: var(--surface-1) !important; }
.ghost-item .ghost-name { font-size: var(--fs-md) !important; letter-spacing: .1px; }
.ghost-item .ghost-preview { font-size: var(--fs-sm) !important; }
.last-msg-time { font-size: var(--fs-2xs) !important; }
.unread-badge { min-width: 22px; height: 22px; font-size: var(--fs-2xs); box-shadow: 0 2px 8px rgba(244,63,94,.35); }

/* Search */
.input-bar { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-1); transition: border-color .18s, box-shadow .18s, background .18s; }
#search-input::placeholder, .input-bar input::placeholder, .input-bar textarea::placeholder { color: var(--text-low); opacity: 1; }

/* Floating action button */
.fab, #fab-add, .btn-fab { box-shadow: 0 10px 28px -8px var(--primary-glow), var(--elev-2); }

/* ---------------- Messages ---------------- */
.bubble { font-size: var(--fs-md); line-height: 1.55; border-radius: 18px; box-shadow: var(--elev-1); }
.bubble.me   { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: 18px 18px 6px 18px; }
.bubble.peer { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; color: #e8e8ee; }
.bubble.peer .msg-meta { color: var(--text-low) !important; }
.bubble.me  .msg-meta { color: rgba(255,255,255,.82) !important; }
.msg-meta { font-size: var(--fs-2xs) !important; }

/* Chat header + composer */
.chat-header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-panel) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.chat-title-text { font-size: var(--fs-lg); font-weight: 700; }
.chat-subtitle-text { font-size: var(--fs-xs); color: var(--text-mid); }
.input-panel { border-top: 1px solid var(--line); }

/* ---------------- Empty state (replaces opacity:.1 placeholder) ---------------- */
.tc-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-8) var(--sp-4); gap: var(--sp-2);
  background: radial-gradient(60% 50% at 50% 40%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
}
.tc-empty-logo {
  width: 88px; height: 88px; border-radius: 26px; display: grid; place-items: center; margin-bottom: var(--sp-4);
  font-size: 2.4rem; color: var(--primary);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow: 0 0 40px -6px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,.08);
}
.tc-empty-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: .3px; color: var(--text-high); margin: 0; }
.tc-empty-sub { color: var(--text-mid); font-size: var(--fs-md); margin: 0 0 var(--sp-5); max-width: 32ch; }
.tc-empty-tips { list-style: none; display: grid; gap: var(--sp-2); padding: 0; margin: 0; }
.tc-empty-tips li {
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface-1); border: 1px solid var(--line); color: var(--text-mid); font-size: var(--fs-sm);
}
.tc-empty-tips i { color: var(--primary); width: 1.1em; text-align: center; }

/* ---------------- Bottom navigation (mobile) ---------------- */
.tbn-item { font-size: var(--fs-2xs) !important; color: var(--text-low) !important; font-weight: 600; letter-spacing: .1px; min-height: 52px; }
.tbn-item span { font-size: var(--fs-2xs) !important; }
.tbn-item.active, .tbn-item:hover { color: var(--primary) !important; }
.tbn-popup { border-radius: var(--r-lg); border: 1px solid var(--line-strong); box-shadow: var(--elev-3); }
.tbn-popup-item { border-radius: var(--r-md); }
.tbn-popup-item span { font-size: var(--fs-xs); }

/* ---------------- Auth card ---------------- */
.titan-auth-card { border-radius: var(--r-xl); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), var(--elev-3), inset 0 1px 0 rgba(255,255,255,.06); }
.titan-auth-subtitle { color: var(--text-mid) !important; font-size: var(--fs-sm); }
.btn-google-signin { gap: var(--sp-3); min-height: 52px; font-weight: 700; border-radius: var(--r-md); transition: transform .15s var(--ease-out), box-shadow .2s; }
.btn-google-signin:hover { box-shadow: 0 8px 24px -8px rgba(255,255,255,.25); transform: translateY(-1px); }
.btn-google-signin:active { transform: translateY(0) scale(.99); }
.btn-google-signin svg { flex: 0 0 auto; }
.auth-lang-btn { color: var(--text-mid) !important; }
.gateway-btn, .gateway-btn * { text-align: start; }

/* ---------------- Notification menu: RTL-safe positioning ---------------- */
.notif-menu { right: auto !important; inset-inline-end: 15px !important; }
.notif-item.unread { border-left: 0 !important; border-inline-start: 3px solid var(--primary); }
.notif-time { text-align: start !important; }

/* ---------------- Touch targets ---------------- */
@media (pointer: coarse) {
  .btn-util, .btn-icon-sm, .header-icon-btn, .tab-btn { min-width: 40px; min-height: 40px; }
}

/* ---------------- Perf: heavy blur only where the device can afford it ---------------- */
@media (max-width: 900px) and (pointer: coarse) {
  .tbn-popup, .notif-menu, .swal2-container { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .tbn-popup { background: var(--bg-elevated) !important; }
}

/* ---------------- Motion: respect the user's setting ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Forced colours / high contrast ---------------- */
@media (forced-colors: active) {
  .ghost-item.active, .tab-btn.active, .tbn-item.active { outline: 2px solid Highlight; }
}

/* Auth footer: was ~1.6:1 */
.auth-version { color: var(--text-low) !important; letter-spacing: .5px !important; font-size: var(--fs-xs) !important; }