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

/* No @import here. fonts.css, i18n.css, quota-alert.css, privacy-consent.css
   and library.css used to be imported, but an @import URL carries no ?v= build
   stamp, so all five revalidated on every page and held back the first paint.
   Every page that links app.css links them first, in this order — the same
   cascade the imports gave; tests/unit/shared/test_page_assets.py keeps it so. */

/* ── 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 ─ */
  /* Deep blue base; every surface above it is see-through glass (see Glass). */
  --bg-base:        #051538;
  --bg-surface:     rgba(5,21,56,0.30);
  --bg-elevated:    rgba(255,255,255,0.06);
  --bg-overlay:     rgba(4,16,40,0.42);

  /* ─ Bubbles ─ */
  --bubble-user-bg:     rgba(24, 92, 160, 0.34);
  --bubble-user-border: rgba(42,154,214,0.34);
  --bubble-ai-bg:       rgba(10, 34, 74, 0.22);
  --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:  #8391a7;   /* metadata, timestamps — 6.1:1 on --bg-base (AA).
                                  Was #5b6b82, 3.6:1: below the 4.5:1 floor for
                                  the small text it is used for. */
  --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);

  /* ─ Glass ─
     One material for every frosted surface — sidebar, cards, menus, modals —
     so they read as the same OS, not a page each. Panels sit on the page;
     fills sit on a panel; dividers fade out at both ends instead of cutting
     across. Use these rather than a fresh rgba() per component.
     Names are deliberately distinct from the page-local aliases several
     stylesheets declare on :root (--glass, --glass-2 in user_profile.css,
     payment.css, todo.css…; --glass-border in auth.css): a shared name there
     would silently override these on that page. */
  /* One see-through material everywhere, popups included: a thin deep-blue
     tint and a LOW blur, so the network stays visible through every layer.
     Floating layers (menus, popovers, modals, drawers, toasts) only carry a
     little more tint than the panes, enough to read text over text. */
  --glass-blur:          blur(8px);
  --glass-blur-sm:       blur(5px);
  --glass-panel:         rgba(5,21,56,0.28);   /* menus, popovers, modals   */
  --glass-panel-solid:   rgba(5,21,56,0.38);    /* drawers, tooltips, sticky headers */
  --glass-cover:         rgba(5,21,56,0.80);    /* a pane slid over another pane's text (mobile reader) */
  --glass-field:         rgba(4,16,40,0.20);    /* inputs, text areas on glass */
  --glass-field-focus:   rgba(4,16,40,0.34);
  --glass-tint-1:        rgba(255,255,255,0.035); /* resting fill on a panel */
  --glass-tint-2:        rgba(255,255,255,0.06);  /* hover                   */
  --glass-tint-3:        rgba(255,255,255,0.09);  /* pressed / selected      */
  --glass-fill:          linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
  --glass-fill-raised:   linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.035) 100%);
  --glass-line:          rgba(255,255,255,0.08);
  --glass-line-strong:   rgba(255,255,255,0.12);
  --glass-highlight:     inset 0 1px 0 rgba(255,255,255,0.07);  /* lit top edge */
  --glass-glow:          0 0 0 1px rgba(24,128,192,0.10), 0 6px 18px -8px rgba(24,128,192,0.45);
  --glass-shadow:        0 18px 48px rgba(0,0,0,0.55);
  /* Structural panes — sidebar, notes rail, email panes, calendar column,
     cards, profile/settings — are one high-transparency "neural glass": a lit
     top sheen, a thin deep-blue tint, a low blur and bright specular edges.
     The tiers step the tint only slightly (left clearest), never to a block. */
  --lg-sheen:            linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 38%, rgba(255,255,255,0) 100%);
  --lg-fill:             var(--lg-sheen), rgba(5,21,56,0.08);
  --lg-blur:             none;
  --lg-edge:             inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(255,255,255,0.10), inset 1px 0 0 rgba(255,255,255,0.14), inset -1px 0 0 rgba(255,255,255,0.06);
  --lg-line:             rgba(255,255,255,0.16);
  --glass-side:          var(--lg-sheen), rgba(5,21,56,0.08);   /* app sidebar, docked notes rail */
  --glass-nav:           var(--lg-sheen), rgba(5,21,56,0.10);   /* email folders, calendar column */
  --glass-pane:          var(--lg-sheen), rgba(5,21,56,0.12);   /* lists, rails, cards           */
  --glass-read:          var(--lg-sheen), rgba(5,21,56,0.16);    /* reading panes, tables, forms  */
  --glass-side-blur:     blur(5px);
  --glass-nav-blur:      blur(5px);
  --glass-pane-blur:     blur(6px);
  --glass-pane-edge:     var(--lg-edge), 0 8px 30px rgba(0,0,0,0.25);
  --divider:             linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.08) 82%, transparent 100%);
  --r-tile:              7px;   /* app-icon squircle at 26px */
  /* The dim, softly blurred layer behind a dialog or drawer. */
  --scrim:               rgba(3,12,30,0.30);
  --scrim-blur:          blur(2px);
}

/* ── Page-to-page transitions ─────────────────────────────────
   Every app is its own page, so moving between them is a navigation. A
   cross-document view transition makes it read as one app: the old and new
   page are cross-faded instead of flashing to blank, and the sidebar — which
   is identical on both — is matched by name and shown as-is, so it never
   blinks. Browsers without support navigate exactly as before. */
@view-transition { navigation: auto; }
.BRAIN-sidebar { view-transition-name: brain-sidebar; }
::view-transition-old(brain-sidebar) { display: none; }
::view-transition-new(brain-sidebar) { animation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── 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 ─────────────────────────────────────
   The one definition for every app page: page stylesheets used to carry
   their own copies in off-brand blues. #neural-canvas is drawn by
   utils/neural-bg.js on every app page, chat included. */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    /* One flat deep blue on every page: no light corners, no gradient. */
    var(--bg-base);
  overflow: hidden;
  pointer-events: none;
}
.bg-layer .neural-network { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Vignette, painted over the canvas and orbs: darker top and bottom push
   the network back so the glass panes in front read as floating above it.
   Top and bottom only — the sidebar and notes rail sit on the left and right
   edges, and a darkened edge behind them made the glass look solid. */
.bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 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: 760px; height: 760px;
  background: radial-gradient(circle, rgba(18,52,130,0.10) 0%, transparent 70%);
  top: -180px; inset-inline-end: -80px;
}
.bg-orb-2 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(18,52,130,0.08) 0%, transparent 70%);
  bottom: -110px; inset-inline-start: -70px;
  animation-duration: 42s;
  animation-direction: reverse;
}
.bg-orb-3 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(18,52,130,0.06) 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: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-default);
}
.glass-elevated {
  background: var(--bg-elevated);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  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: var(--scrim);
  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; }
/* ── Floating tooltip (utils/tooltip.js) ──────────────────────
   One node on <body>, positioned against the hovered [data-tip]
   element, so no overflow:hidden ancestor can clip it. */
.ui-tip {
  position: fixed;
  z-index: 200000;           /* above modals (the sidebar's sit at 100000) */
  max-width: 260px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--glass-panel-solid); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid #334155;
  color: #e2e8f0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.ui-tip[hidden] { display: none; }
.ui-tip.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-tip { transition: none; } }

/* ═══ Contacts ↔ Calls section tabs ═══════════════════════════════════════════
   Contacts and Calls are one section now (a single sidebar entry). Both pages
   show this little tab bar at the top so you can switch between them. */
.cc-section-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(148, 178, 235, 0.06);
    border: 1px solid rgba(148, 178, 235, 0.10);
}
.cc-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3, #94a3b8);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.cc-tab:hover { color: var(--ink-1, #f2f6fc); }
.cc-tab.is-active {
    background: rgba(59, 139, 255, 0.16);
    color: var(--ink-1, #f2f6fc);
    box-shadow: inset 0 0 0 1px rgba(74, 144, 255, 0.30);
}

.cc-section-tabs--call { margin-top: 18px; }

/* ═══ Smooth page navigation ═══════════════════════════════════════════════════
   The app is multi-page: each sidebar link is a real navigation, which flashed
   white on every switch (Calendar ⇄ Meeting Intelligence, etc.). This opts every
   page into the browser's cross-document View Transitions, so navigations
   cross-fade smoothly instead of hard-reloading. Unsupported browsers ignore it
   (plain navigation, no regression). Both the page you leave and the one you land
   on carry this rule (app.css is shared), which is what the API requires. */
@view-transition { navigation: auto; }

/* Keep it quick + calm. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ═══ Frame mode ═══════════════════════════════════════════════════════════════
   When a page is loaded inside the overlay manager's iframe (?frame), the
   sidebar, background orbs and loading overlay are stripped so only the app
   content fills the frame. The parent page owns chrome and navigation. */
html[data-frame] .bg-layer        { display: none; }
html[data-frame] .loading-overlay { display: none; }
html[data-frame] .app-shell       { display: block; overflow: auto; height: 100vh; }
html[data-frame] body             { background: transparent; }