/* ============================================================
   app.css — BRAIN Global Stylesheet
   Brand palette extracted from logo.svg:
     Primary blue : #1880c0
     Structural   : #767676
   ============================================================ */

@import url('fonts.css');
@import url('i18n.css');
/* Quota pop-up. Imported here rather than linked per page: it must exist
   wherever a quota can be hit, which is every page carrying the sidebar. */
@import url('quota-alert.css');

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
button               { cursor: pointer; font-family: inherit; background: none; border: none; }
input, textarea, select { font-family: inherit; }
a                    { text-decoration: none; color: inherit; }
img, svg             { display: block; }

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* ─ Brand colours (from logo) ─ */
  --brand:          #1880c0;
  --brand-light:    #2a9ad6;
  --brand-deep:     #1167a0;
  --brand-glow:     rgba(24,128,192,0.28);
  --brand-dim:      rgba(24,128,192,0.10);
  --brand-rim:      rgba(24,128,192,0.24);

  /* Structural grey from logo */
  --logo-grey:      #767676;

  /* ─ Backgrounds ─ */
  --bg-base:        #060c14;
  --bg-surface:     rgba(9,16,30,0.92);
  --bg-elevated:    rgba(14,24,44,0.80);
  --bg-overlay:     rgba(6,12,20,0.85);

  /* ─ Bubbles ─ */
  --bubble-user-bg:     rgba(18, 52, 90, 0.90);
  --bubble-user-border: rgba(24,128,192,0.30);
  --bubble-ai-bg:       rgba(12, 20, 36, 0.88);
  --bubble-ai-border:   rgba(255,255,255,0.08);

  /* ─ Borders ─ */
  --border-subtle:  rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-bubble:  rgba(255, 255, 255, 0.10);
  --border-focus:   rgba(24, 128, 192, 0.38);
  --border-strong:  rgba(24, 128, 192, 0.55);

  /* ─ Input states ─ */
  --input-idle:     rgba(255, 255, 255, 0.09);
  --input-focus:    rgba(24, 128, 192, 0.50);
  --input-glow:     rgba(24, 128, 192, 0.15);

  /* ─ Text — optimised for dark-mode legibility ─
     Pure #ffffff can feel harsh on very dark backgrounds.
     #e8eaed (Google's dark-mode body colour) is the sweet
     spot: bright, neutral, zero blue tint.               */
  --text-primary:   #e8eaed;   /* crisp neutral white — Google/VS Code standard */
  --text-secondary: #c1cbdb;   /* clearer, less washed-out than the old slate-gray */
  --text-tertiary:  #5b6b82;   /* metadata, timestamps — dim but still legible   */
  --text-disabled:  #2d3748;

  /* ─ Semantic ─ */
  --success:     #22c55e;  --success-dim: rgba(34,197,94,0.12);
  --warning:     #f59e0b;  --warning-dim: rgba(245,158,11,0.12);
  --danger:      #f43f5e;  --danger-dim:  rgba(244,63,94,0.12);
  --info:        #38bdf8;

  /* ─ Spacing (8pt grid) ─ */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ─ Radii ─ */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:9999px;

  /* ─ Typography ─
     Inter: the gold standard for dark-mode UI readability.
     Designed for screens, hinted for low DPI, renders
     crisply at every weight on dark backgrounds.
     Syne kept for display/hero headings only.
     Noto Sans Arabic rides along in every stack so Arabic
     text falls back to it automatically wherever it appears —
     Inter/Syne carry no Arabic glyphs.                    */
  --font-sans:    'Inter', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Noto Sans Arabic', sans-serif;
  --font-ui:      'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-mono:    'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.69rem;
  --text-sm:   0.80rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* ─ Motion ─ */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --t-fast: 0.12s var(--ease);
  --t:      0.20s var(--ease);
  --t-slow: 0.35s var(--ease);

  /* ─ Shadows ─ */
  --shadow-sm:     0 2px 8px  rgba(0,0,0,0.40);
  --shadow-md:     0 6px 20px rgba(0,0,0,0.50);
  --shadow-lg:     0 12px 36px rgba(0,0,0,0.65);
  --shadow-brand:  0 4px 20px var(--brand-glow);
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg-base);
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  /* Inter renders best with these two flags on dark bg */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11'; /* Inter optical extras */
}

/* ── Arabic text ──────────────────────────────────────────────
   Any non-zero letter-spacing (headings, uppercase labels, etc.
   use -0.02em to 0.1em all over the CSS) breaks Arabic cursive
   joining — letters render isolated instead of connected. Force
   it back to normal wherever the text is actually Arabic.
   chat.js/meeting.js flag Arabic content with dir="rtl" (not
   lang="ar"), so match on both. */
:lang(ar), :lang(ar) *,
[dir="rtl"], [dir="rtl"] * {
  letter-spacing: normal !important;
}

/* ── Focus ────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Scrollbars ───────────────────────────────────────────── */
.scrollbar-styled {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.07) transparent;
}
.scrollbar-styled::-webkit-scrollbar       { width: 4px; height: 4px; }
.scrollbar-styled::-webkit-scrollbar-track { background: transparent; }
.scrollbar-styled::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: var(--r-pill); }
.scrollbar-styled::-webkit-scrollbar-thumb:hover { background: rgba(24,128,192,0.28); }

.scrollbar-brand {
  scrollbar-width: thin;
  scrollbar-color: rgba(24,128,192,0.18) transparent;
}
.scrollbar-brand::-webkit-scrollbar       { width: 4px; }
.scrollbar-brand::-webkit-scrollbar-track { background: transparent; }
.scrollbar-brand::-webkit-scrollbar-thumb {
  background: rgba(24,128,192,0.18);
  border-radius: var(--r-pill);
  transition: background 0.2s;
}
.scrollbar-brand::-webkit-scrollbar-thumb:hover { background: rgba(24,128,192,0.42); }

.scrollbar-none              { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ── Animated background ─────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 18% 6%, rgba(18,52,90,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 82% 90%, rgba(24,128,192,0.10) 0%, transparent 60%),
    #060c14;
  overflow: hidden;
  pointer-events: none;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
  animation: orb-drift 34s ease-in-out infinite;
}
.bg-orb-1 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(24,128,192,0.18) 0%, transparent 70%);
  top: -180px; inset-inline-end: -80px;
}
.bg-orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(17,103,160,0.12) 0%, transparent 70%);
  bottom: -110px; inset-inline-start: -70px;
  animation-duration: 42s;
  animation-direction: reverse;
}
.bg-orb-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(24,128,192,0.08) 0%, transparent 70%);
  top: 46%; inset-inline-start: 46%;
  animation-duration: 28s;
  animation-delay: -11s;
}
@keyframes orb-drift {
  0%,100% { transform: translate(0,0)       scale(1.00); }
  33%      { transform: translate(65px,-85px) scale(1.10); }
  66%      { transform: translate(-45px,55px) scale(0.90); }
}

/* ── Glass utilities ──────────────────────────────────────── */
.glass {
  background: var(--bg-surface);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border-default);
}
.glass-elevated {
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border-subtle);
}

/* ── Typography Utilities ─────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-ui      { font-family: var(--font-ui); }
.font-mono    { font-family: var(--font-mono); }

.heading-hero {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ui-label {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: 500;
}

.ui-chip {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 400;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.ui-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.text-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 400;
}

.font-mono-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

::placeholder {
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  font-size: var(--text-base);
  opacity: 1;
}

/* ── Utilities ────────────────────────────────────────────── */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only  { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ── Loading overlay ──────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(6,12,20,0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000;
}
.loading-overlay.hidden { display: none; }
.loading-inner  { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.loading-spinner {
  width:36px; height:36px;
  border: 2px solid rgba(24,128,192,0.20);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.72s linear infinite;
}
.loading-inner p { font-size:var(--text-sm); color:var(--text-secondary); }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fade-up  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes scale-in { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes pulse-brand {
  0%,100% { box-shadow: 0 0 0 0   var(--brand-glow); }
  50%      { box-shadow: 0 0 0 6px rgba(24,128,192,0); }
}

/* ── App Shell ────────────────────────────────────────────── */
.app-shell { position:relative; z-index:1; display:flex; height:100vh; overflow:hidden; }
.neural-css {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.neural-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(43, 127, 255, 0.45);
    animation: neural-float linear infinite;
    will-change: transform;
}

@keyframes neural-float {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(var(--dx1), var(--dy1)); }
    50%  { transform: translate(var(--dx2), var(--dy2)); }
    75%  { transform: translate(var(--dx1), var(--dy2)); }
    100% { transform: translate(0, 0); }
}

.neural-css.paused .neural-dot {
    animation-play-state: paused;
}