/* Falah — rose-white paper, royal maroon, a touch of desert gold. Soft edges, quiet
   surfaces, gentle shadows. The voice orb is the only loud thing; the rest stays calm. */

@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 400; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 500; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 600; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 700 800; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 400; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 500; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 600; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-display: swap; font-weight: 700 800; src: url(/vendor/ibm-plex-sans-arabic-5.3.0/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #faf7f8; --surface: #ffffff; --sunk: #f4eef0; --rail-bg: #fdfbfc;
  --ink: #1f2230; --ink-2: #565a69; --ink-3: #8b8e9b;
  --line: #eee5e9; --line-2: #e2d6dc;
  --accent: #8a1538; --accent-ink: #ffffff; --accent-soft: #fbeef2; --accent-line: #eec7d2;
  --gold: #c5a059; --gold-ink: #7a5a17; --gold-soft: #f8f0e1;
  --bubble: #f4e9ed;
  --gulf: #c5a059;
  --danger: #b3263f;
  --shadow: 0 1px 2px rgba(60, 20, 34, .05), 0 10px 28px rgba(60, 20, 34, .07);
  --shadow-sm: 0 1px 2px rgba(60, 20, 34, .06), 0 4px 12px rgba(60, 20, 34, .05);
  --r: 14px; --r-lg: 24px;
  --ease: .18s ease;
  --rail: 300px;
  --col: 880px;
  --font: "IBM Plex Sans Arabic", "SF Arabic", "SF Pro Text", "Segoe UI", "Noto Sans Arabic", system-ui, -apple-system, Tahoma, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16121a; --surface: #1f1924; --sunk: #1a1520; --rail-bg: #130f17;
    --ink: #f1ebef; --ink-2: #c3b8c0; --ink-3: #8f8590;
    --line: #2e2531; --line-2: #3b3040;
    --accent: #e48aa2; --accent-ink: #2a0b16; --accent-soft: #2d1a23; --accent-line: #5c3242;
    --gold: #d9b673; --gold-ink: #e9cf98; --gold-soft: #2c2418;
    --bubble: #2a2130;
    --gulf: #d9b673; --danger: #ff9aa6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .2);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4, p { margin: 0; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-2); font-size: .93rem; }
.pad { padding: 12px; }

/* ── shell ─────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); height: 100dvh; }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.rail { background: var(--rail-bg); display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 12px; min-height: 0; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 2px 6px 12px; border-bottom: 1px solid var(--line); }
.brand-logo { height: 52px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { .brand-logo { background: #faf7f8; border-radius: 12px; padding: 5px 9px; box-sizing: content-box; height: 44px; } }
.brand-tag { font-size: .76rem; color: var(--ink-3); }
.rail-new { display: flex; align-items: center; gap: 8px; justify-content: center; border: 0; background: var(--accent-soft); color: var(--accent); border-radius: var(--r); padding: 11px 12px; font-weight: 650; transition: background var(--ease), box-shadow var(--ease); }
.rail-new:hover { box-shadow: var(--shadow-sm); }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; background: transparent; border-radius: 12px; text-align: start; color: var(--ink-2); transition: background var(--ease), color var(--ease); }
.rail-link:hover { background: var(--line); color: var(--ink); }
.rail-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.rail-link em { margin-inline-start: auto; font-style: normal; font-size: .74rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 8px; line-height: 1.6; }
.rail-history { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.history-list { flex: 1; overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.group { font-size: .78rem; font-weight: 600; color: var(--ink-3); padding: 12px 8px 4px; }
.conv { display: flex; align-items: center; border-radius: 12px; transition: background var(--ease); }
.conv:hover, .conv.on { background: var(--line); }
.conv.on .conv-open { font-weight: 650; }
.conv-open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: start; padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.conv-act { border: 0; background: transparent; color: var(--ink-3); padding: 6px; border-radius: 8px; opacity: 0; }
.conv:hover .conv-act, .conv:focus-within .conv-act { opacity: 1; }
@media (hover: none) { .conv-act { opacity: .7; } .acts { opacity: 1; } }
.conv-act:hover { color: var(--ink); background: var(--line-2); }
.who { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: var(--surface); border-radius: var(--r); text-align: start; box-shadow: var(--shadow-sm); transition: box-shadow var(--ease); }
.who:hover { box-shadow: var(--shadow); }
.rail-save { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--accent-line); background: var(--surface); color: var(--accent); font-weight: 600; border-radius: var(--r); padding: 10px 12px; }
.rail-save:hover { background: var(--accent-soft); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; flex: none; }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.who-text strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text small { color: var(--ink-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search { display: flex; align-items: center; gap: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; padding: 0 10px; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; outline: none; color: var(--ink); }
.search.wide { min-width: 220px; flex: 1; }

/* ── top bar ───────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 60px; }
.topbar-title { font-size: 1rem; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon { width: 40px; height: 40px; border-radius: 14px; border: 0; transition: background var(--ease), color var(--ease); background: transparent; color: var(--ink-2); display: inline-grid; place-items: center; flex: none; text-decoration: none; }
.btn-icon:hover { background: var(--sunk); color: var(--ink); }
.btn-icon .ic { width: 22px; height: 22px; }
.topbar .menu-btn { display: none; }
.talk { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 650; border-radius: 999px; padding: 9px 18px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform var(--ease), box-shadow var(--ease); }
.talk:hover { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); }
.talk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }

/* ── views ─────────────────────────────────────────────── */
.view { flex: 1; overflow-y: auto; padding: 8px clamp(16px, 3vw, 32px) 24px; min-height: 0; outline: none; }
.col { max-width: var(--col); margin-inline: auto; }
.page { max-width: 860px; margin-inline: auto; padding-top: 6px; }
.page.narrow { max-width: 640px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2 { font-size: 1.5rem; flex: 1 1 100%; }
.page h2 { font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: 6px; }

.welcome { padding-top: min(9vh, 72px); }
.welcome h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.lede { color: var(--ink-2); font-size: 1.15rem; margin-top: 6px; }
.starters { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.starters button { width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; text-align: start; border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; color: var(--ink); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.starters button:hover { border-color: var(--accent-line); }
.starters .tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.starters li:nth-child(even) .tile { background: var(--gold-soft); color: var(--gold-ink); }
.starters .tile .ic { width: 1.35em; height: 1.35em; }
.starters .st-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.starters .st-text strong { font-weight: 600; font-size: 1rem; }
.starters .st-text small { color: var(--ink-3); font-size: .84rem; }
.starters button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.intro { display: block; margin-top: 18px; }
.resume { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 26px; border: 0; border-inline-start: 3px solid var(--accent-line); background: transparent; padding: 4px 14px; text-align: start; }
.resume span { font-size: .85rem; color: var(--ink-3); }
.resume strong { font-weight: 600; }
.guest-note { margin-top: 30px; padding: 16px 18px; background: var(--accent-soft); border-radius: var(--r); color: var(--ink-2); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: .95rem; }
.link { border: 0; background: transparent; color: var(--accent); font-weight: 650; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ── messages ──────────────────────────────────────────── */
.msg { margin: 20px 0; display: flex; flex-direction: column; }
.msg.you { align-items: flex-end; }
.msg.falah { align-items: stretch; }
.msg.falah .bubble { max-width: 100%; }   /* an answer reads across the column; what it holds is laid out inside */
.bubble { max-width: min(100%, 720px); overflow-wrap: anywhere; }
.msg.you .bubble { background: var(--bubble); color: var(--ink); padding: 11px 17px; border-radius: 20px 20px 6px 20px; }
[dir=ltr] .msg.you .bubble { border-radius: 20px 20px 20px 6px; }
.plain { white-space: pre-wrap; }
.prose p { margin: 0 0 .75em; } .prose p:last-child { margin: 0; }
.prose ul, .prose ol { margin: .2em 0 .8em; padding-inline-start: 1.5em; }
.prose h3 { font-size: 1.05rem; margin: 1em 0 .3em; }
.prose code { background: var(--sunk); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.prose pre { background: var(--sunk); padding: 12px; border-radius: 10px; overflow-x: auto; direction: ltr; text-align: left; }
.prose pre code { background: none; padding: 0; }
.prose a { color: var(--accent); }
.acts { display: flex; gap: 2px; margin-top: 6px; margin-inline-start: -8px; opacity: .55; }
.msg:hover .acts, .acts:focus-within { opacity: 1; }
.acts button { border: 0; background: transparent; color: var(--ink-2); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.acts button:hover, .acts button.on { background: var(--accent-soft); color: var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; background: var(--surface); padding: 2px 10px; border-radius: 999px; }
.dots { display: inline-flex; gap: 5px; padding: 10px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.table-wrap { overflow-x: auto; margin: .4em 0 1em; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { padding: 9px 14px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.prose th { color: var(--ink-2); font-weight: 600; font-size: .88rem; background: var(--sunk); }
.prose tr:last-child td { border-bottom: 0; }
.patience { display: block; font-size: .88rem; color: var(--ink-3); padding-bottom: 4px; }

/* While Falah answers: a quiet thinking line, then the words as they are written. */
.msg { animation: rise .28s ease-out both; }
@keyframes rise { from { opacity: 0; translate: 0 6px; } }
.thinking { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink-2); font-size: .95rem; }
.spark { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--gulf)); animation: breathe 1.6s ease-in-out infinite; }
.thinking .label { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 45%, var(--ink-3) 90%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 1.8s linear infinite; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.caret { display: inline-block; width: .5em; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; border-radius: 2px;
  background: var(--accent); opacity: .7; animation: blink 1s steps(2, start) infinite; }
.stopped { margin: 6px 0 0; font-size: .82rem; color: var(--ink-3); }
.legal-note { margin-top: 12px; font-size: .85rem; color: var(--ink-3); }
.legal-note a { color: var(--ink-2); }

/* ── composer ──────────────────────────────────────────── */
.composer { padding: 6px clamp(16px, 3vw, 32px) calc(12px + env(safe-area-inset-bottom)); }
.composer-box { max-width: var(--col); margin-inline: auto; display: flex; align-items: flex-end; gap: 2px; background: var(--surface); border-radius: var(--r-lg); padding: 7px; box-shadow: var(--shadow); transition: box-shadow var(--ease); }
.composer-box:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--accent-line); }
#input { flex: 1; border: 0; background: transparent; resize: none; outline: none; padding: 9px 8px; max-height: 200px; line-height: 1.55; }
.btn-icon.send { background: var(--accent); color: var(--accent-ink); }
.btn-icon.send:hover { background: var(--accent); filter: brightness(1.05); }
.btn-icon.send:disabled { opacity: .4; cursor: default; }
.btn-icon.send.stopping { background: var(--ink); color: var(--surface); }
.btn-icon.rec { background: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
.chips { max-width: var(--col); margin: 0 auto 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 3px 4px 3px 12px; font-size: .88rem; }
[dir=rtl] .chip { padding: 3px 12px 3px 4px; }
.chip button { border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; padding: 3px; border-radius: 50%; }
.caution { max-width: var(--col); margin: 6px auto 0; text-align: center; color: var(--ink-3); font-size: .78rem; min-height: 1.2em; }

/* ── lists, documents, library ─────────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.row.clickable { cursor: pointer; transition: background var(--ease); } .row.clickable:hover { background: var(--sunk); }
.rows.tight .row { padding: 8px 4px; }
.row-ic { color: var(--ink-3); display: grid; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.row-main strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { color: var(--ink-3); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.tag { font-size: .75rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 10px; flex: none; }
.empty { padding: 28px 4px; color: var(--ink-2); }
.drop { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed var(--accent-line); background: transparent; border-radius: var(--r-lg); padding: 22px; color: var(--ink-2); margin-bottom: 18px; }
.drop:hover, .drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: transparent; border-radius: 12px; transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); padding: 8px 14px; font-weight: 550; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn.ghost { border-color: transparent; color: var(--ink-2); }
.btn:disabled { opacity: .5; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.field { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); padding: 10px 14px; outline: none; }
.field:focus { border-color: var(--accent); }
.field.big { font-size: 1.25rem; font-weight: 650; margin-bottom: 12px; }
.field.area { min-height: 46vh; resize: vertical; line-height: 1.75; }
.reader { white-space: pre-wrap; max-height: 60vh; overflow: auto; background: var(--surface); padding: 16px; border-radius: var(--r); box-shadow: var(--shadow-sm); font: inherit; margin: 0 0 14px; }

.account .block { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.account h3 { font-size: 1.1rem; margin-bottom: 10px; }
.account h4 { font-size: .95rem; margin: 18px 0 6px; color: var(--ink-2); }
.prose-p { color: var(--ink); margin-bottom: 8px; max-width: 60ch; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── dialogs ───────────────────────────────────────────── */
.dlg { border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); width: min(440px, calc(100vw - 32px)); padding: 26px; box-shadow: 0 24px 70px rgba(15, 25, 45, .28); }
.dlg::backdrop { background: rgba(20, 30, 50, .42); backdrop-filter: blur(3px); }
.dlg h2 { font-size: 1.25rem; margin-bottom: 8px; }
.dlg-text { color: var(--ink-2); margin-bottom: 14px; font-size: .95rem; }
.dlg-field { display: block; margin: 12px 0; }
.dlg-field span { display: block; font-size: .85rem; color: var(--ink-2); margin-bottom: 4px; }
.dlg-field input, .dlg-field select { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 11px 13px; outline: none; transition: border-color var(--ease); }
.dlg-field input:focus, .dlg-field select:focus { border-color: var(--accent); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.form-error { color: var(--danger); font-size: .9rem; margin-top: 8px; }
.switch { margin-top: 16px; font-size: .9rem; color: var(--ink-2); }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.15rem; letter-spacing: .08em; text-align: center; background: var(--sunk); border: 1px dashed var(--accent-line); border-radius: 14px; padding: 14px 8px; user-select: all; }

.toast { position: fixed; inset-inline: 0; bottom: 92px; margin-inline: auto; width: fit-content; max-width: min(92vw, 460px); background: var(--ink); color: var(--paper); padding: 11px 20px; border-radius: 999px; font-size: .92rem; z-index: 90; box-shadow: var(--shadow); }

/* ── voice: the one loud thing ─────────────────────────── */
.voice { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8vh 24px calc(5vh + env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--surface) 92%, var(--accent)) 0%, var(--paper) 70%); }
.voice-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: min(560px, 100%); text-align: center; }
.voice-state { font-size: 1.3rem; font-weight: 700; margin-top: 18px; }
.voice-hint { color: var(--ink-3); font-size: .88rem; }
.voice-controls { display: flex; gap: 12px; }
.voice-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--surface); border-radius: 999px; padding: 13px 24px; font-weight: 600; box-shadow: var(--shadow-sm); }
.voice-btn.end { background: var(--accent); color: var(--accent-ink); }

.orb { --level: 0; position: relative; width: min(46vmin, 300px); aspect-ratio: 1; cursor: pointer; }
.orb-core { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, #cfe1f2 0%, #7fa1c8 45%, #d58bab 100%);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 -22px 44px rgba(38, 50, 74, .24);
  transform: scale(calc(1 + var(--level) * .28)); transition: transform .08s linear; }
.orb-core::before { content: ""; position: absolute; inset: -35%; z-index: -1;
  background:
    radial-gradient(38% 38% at 28% 38%, #f0a9c4 0, transparent 72%),
    radial-gradient(42% 42% at 72% 30%, #e4f0fa 0, transparent 70%),
    radial-gradient(44% 44% at 66% 72%, rgba(44, 62, 96, .62) 0, transparent 72%);
  filter: blur(16px); animation: swirl 14s linear infinite; }
.orb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 72% 88%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%); }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.orb[data-state=listening] .orb-core { animation: breathe 4.2s ease-in-out infinite; }
.orb[data-state=hearing] .orb-ring { opacity: .45; transform: scale(calc(1.02 + var(--level) * .2)); }
.orb[data-state=hearing] .orb-core::before { animation-duration: 6s; }
.orb[data-state=thinking] .orb-core::before { animation-duration: 2.6s; }
.orb[data-state=speaking] .orb-ring { opacity: .35; animation: ring 1.6s ease-out infinite; }
.orb[data-state=speaking] .orb-core::before { animation-duration: 7s; }
@keyframes swirl { to { rotate: 360deg; } }
@keyframes breathe { 50% { scale: 1.035; } }
@keyframes ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.22); opacity: 0; } }

/* ── privacy and terms page ────────────────────────────── */
.doc-body { height: auto; }
.doc { max-width: 680px; margin-inline: auto; padding: 28px 20px 64px; }
.doc h1 { font-size: 1.9rem; margin: 18px 0 6px; }
.doc h2 { font-size: 1.1rem; margin: 26px 0 6px; }
.doc ul { padding-inline-start: 1.3em; margin: 6px 0; }
.doc li { margin: 4px 0; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.doc section[lang=en] { font-size: .97rem; }

/* ── scrim, small screens, motion ──────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(20, 30, 50, .4); z-index: 40; backdrop-filter: blur(2px); }
@media (max-width: 880px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(88vw, 340px); z-index: 50; transform: translateX(100%); transition: transform .22s ease; }
  [dir=ltr] .rail { transform: translateX(-100%); }
  .rail.open { transform: none; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar { padding-inline: 10px; }
  .talk span { display: none; }
  .talk { padding: 10px; }
  .view { padding-inline: 14px; }
  .composer { padding-inline: 10px; }
  .row:has(.row-acts) { flex-wrap: wrap; row-gap: 4px; }
  .row-acts { flex-basis: 100%; justify-content: flex-end; }
  .row-acts .btn { padding: 7px 10px; font-size: .85rem; margin-inline-end: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── what Falah made: pages, pictures, code, charts, tables, diagrams (widgets.js) ── */
.prose .widget, .widget { margin: 14px 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); overflow: hidden; max-width: 760px; }
.w-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
[dir=rtl] .w-head { padding: 10px 14px 10px 10px; }
.w-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.w-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.w-name strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-name small { color: var(--ink-3); font-size: .78rem; }
.w-acts { display: flex; gap: 2px; flex: none; }
.w-body { padding: 0; }
.w-body .table-wrap { margin: 0; border-radius: 0; box-shadow: none; }
.w-frame { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.w-img, .w-diagram { display: block; max-width: 100%; margin: 14px auto; max-height: 520px; }
.prose .w-src, .w-src { margin: 0; border-radius: 0; padding: 14px 16px; background: var(--sunk); overflow: auto; max-height: 420px; font-size: .86rem; line-height: 1.55; direction: ltr; text-align: left; }
.w-wait { padding: 18px 16px; color: var(--ink-3); font-size: .9rem; }
.chart-wrap { padding: 12px 10px 6px; overflow-x: auto; }
.chart { display: block; width: 100%; height: auto; min-width: 320px; font-family: inherit; }
.chart text { fill: var(--ink-2); font-size: 13px; }
.chart .val { fill: var(--ink); font-weight: 600; font-size: 11.5px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .c0 { fill: var(--accent); stroke: var(--accent); } .chart .c1 { fill: var(--gulf); stroke: var(--gulf); }
.chart .c2 { fill: #c99a4b; stroke: #c99a4b; } .chart .c3 { fill: #5f9e8a; stroke: #5f9e8a; }
.chart .c4 { fill: #8e7cc3; stroke: #8e7cc3; } .chart .c5 { fill: #d4826b; stroke: #d4826b; }
.chart .c6 { fill: #7a8aa0; stroke: #7a8aa0; } .chart .c7 { fill: #b8a14d; stroke: #b8a14d; }
.chart .line.c0 { fill: none; }
.chart path { stroke: var(--surface); stroke-width: 2; }
.widget.big { max-width: none; margin: 0; }
.widget.big .w-frame { height: min(72vh, 900px); }
.widget.big .w-img, .widget.big .w-diagram { max-height: 72vh; }
.widget.big .w-src { max-height: 72vh; }
/* while the answer is still being written */
.chip-w { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; max-width: 100%; }
[dir=rtl] .chip-w { padding: 8px 8px 8px 14px; }
.chip-w small { color: var(--ink-3); animation: sheen 1.8s linear infinite; }
.dlg.wide { width: min(1040px, calc(100vw - 24px)); padding: 18px; }
.page.wide-page { max-width: 1040px; }
.actions.top { margin: 0 0 14px; align-items: center; }
.actions .grow { flex: 1; }
.page-lede { margin: -6px 0 14px; max-width: 70ch; }
.prose .w-src code { background: none; padding: 0; font-size: inherit; }
.w-diagram { width: auto; min-width: min(100%, 320px); }
[dir=rtl] .ic.flip { transform: scaleX(-1); }
/* laid out (so Mermaid can measure its text) but out of sight */
.diagram-painter { position: fixed; top: 0; inset-inline-start: -12000px; width: 1000px; height: 800px; border: 0; visibility: hidden; pointer-events: none; }

/* The home screen: greeting, the message box in the middle of the page, then what to try. */
.below { padding: 4px clamp(16px, 3vw, 32px) 28px; }
.below-col { max-width: var(--col); margin-inline: auto; }
.below-col .starters { margin-top: 18px; }
.stage.hero { overflow-y: auto; }
.stage.hero .view { flex: 0 0 auto; overflow: visible; margin-top: auto; padding-bottom: 4px; }
.stage.hero .below { margin-bottom: auto; }
.stage.hero .welcome { padding-top: 0; text-align: center; }
.stage.hero .welcome h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.stage.hero .welcome .lede { margin-inline: auto; }
.stage.hero .composer { padding-top: 14px; }
.stage.hero .composer-box { padding: 10px; box-shadow: var(--shadow), 0 0 0 1px var(--accent-line); }
.stage.hero .composer-box textarea { min-height: 52px; }
.below-col .resume, .below-col .intro { margin-top: 16px; }
.below-col .guest-note { margin-top: 22px; }

/* The library's three sections. */
.tabs { display: flex; gap: 6px; margin: 4px 0 16px; padding: 4px; background: var(--sunk); border-radius: 14px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tab { border: 0; background: transparent; color: var(--ink-2); font-weight: 600; padding: 8px 18px; border-radius: 10px; white-space: nowrap; transition: background var(--ease), color var(--ease); }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }