/* ============================================================
   Theme tokens — Silsila AI chat home (handoff: AI.zip, 2026-07-19)
   Light = warm off-white + green ink. Dark = neutral warm near-black + gold.
   Existing components keep using --gold / --panel / --paper etc.; those are
   aliased to the semantic tokens below, so both themes flow through unchanged.
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #FFFCF8;
  --surface: #F6F0E4;
  --surface-raised: #FFFFFF;
  --ink-strong: #13281F;
  --accent: #234433;              /* brand green */
  --accent-soft: #A5661F;         /* ochre text */
  --ochre: #C17834;
  --italic-sub: #A5763C;
  --copy: rgba(35,35,31,.82);
  --muted: rgba(35,35,35,.6);
  --dim: rgba(35,35,35,.45);
  --faint: rgba(35,35,35,.35);
  --section-label: rgba(35,35,35,.38);
  --line: rgba(35,40,31,.1);
  --chip-line: rgba(35,40,31,.16);
  --accent-line: rgba(193,120,52,.42);
  --active-bg: rgba(35,68,51,.09);
  --send-bg: #234433;
  --send-fg: #FFFCF8;
  --composer-shadow: 0 14px 44px rgba(35,40,31,.09);
  --card-shadow: 0 14px 44px rgba(35,40,31,.08);
  --glow: transparent;

  /* back-compat aliases (do not remove — the rest of this file uses them) */
  --ink: var(--bg);
  --panel: var(--surface);
  --panel-raised: var(--surface-raised);
  --paper: var(--ink-strong);
  --gold: var(--accent);
  --gold-soft: var(--ochre);
  --gold-line: var(--accent-line);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505;
  --surface: #121110;
  --surface-raised: #171614;
  --ink-strong: #FFFCF8;
  --accent: #E7BE8A;              /* gold */
  --accent-soft: #E7BE8A;
  --ochre: #C17834;
  --italic-sub: rgba(231,190,138,.8);
  --copy: rgba(255,252,248,.82);
  --muted: rgba(255,252,248,.6);
  --dim: rgba(255,252,248,.45);
  --faint: rgba(255,252,248,.3);
  --section-label: rgba(255,252,248,.3);
  --line: rgba(255,252,248,.08);
  --chip-line: rgba(255,252,248,.12);
  --accent-line: rgba(231,190,138,.32);
  --active-bg: rgba(231,190,138,.12);
  --send-bg: #C17834;
  --send-fg: #050505;
  --composer-shadow: 0 14px 44px rgba(0,0,0,.5);
  --card-shadow: 0 18px 50px rgba(0,0,0,.4);
  --glow: rgba(231,190,138,.05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -15%, var(--glow), transparent 34rem),
    var(--ink);
  color: var(--copy);
  font-family: "Space Grotesk", system-ui, sans-serif;
}
button, textarea { font: inherit; }
button { color: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-shell {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.topbar { display:flex; align-items:center; min-height:32px; gap:12px; }
.brand { border:0; background:none; padding:4px 0; color:var(--gold); font:500 15px "Lora",serif; letter-spacing:.05em; cursor:pointer; }
.trust-mark { margin-left:auto; color:var(--dim); font-size:10px; letter-spacing:.04em; display:flex; gap:6px; align-items:center; }
.trust-mark i { width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(224,192,137,.6); }
.avatar { width:30px; height:30px; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:transparent; color:var(--muted); font:500 12px "Lora",serif; }

.view { flex:1; animation:view-in .35s ease both; }
@keyframes view-in { from { opacity:0; transform:translateY(6px); } }
.today-view { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:48px 0 28px; }
.today-intro { text-align:center; }
.eyebrow { margin:0 0 9px; color:var(--gold); text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:.16em; }
h1 { margin:0; color:var(--paper); font:400 27px/1.35 "Lora",serif; letter-spacing:-.02em; }
.gentle-line { margin:10px 0 0; color:rgba(237,210,164,.68); font:italic 400 14px/1.6 "Lora",serif; }

.daily-card { position:relative; overflow:hidden; padding:20px 19px; border:1px solid var(--gold-line); border-radius:24px; background:linear-gradient(145deg, rgba(224,192,137,.055), transparent 50%),var(--panel); box-shadow:0 18px 50px rgba(0,0,0,.28); }
.daily-card::after { content:""; position:absolute; inset:auto -30px -50px auto; width:130px; height:130px; border:1px solid rgba(224,192,137,.07); border-radius:50%; }
.card-kicker { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.verified-dot { color:var(--gold); text-transform:none; letter-spacing:0; font-size:10px; }
.daily-copy { position:relative; z-index:1; margin:0; color:var(--copy); font:400 15px/1.75 "Lora",serif; }
.daily-reference { display:block; margin-top:13px; color:var(--gold); font:500 10px "Space Grotesk",sans-serif; }
.loading-line { color:var(--dim); }

.ask-entry { width:100%; border:1px solid var(--line); border-radius:20px; background:var(--panel-raised); padding:17px 16px 17px 19px; display:flex; align-items:center; text-align:left; cursor:pointer; transition:border-color .2s, transform .2s; }
.ask-entry:hover, .ask-entry:focus-visible { border-color:var(--gold-line); transform:translateY(-1px); }
.ask-entry strong { display:block; color:var(--paper); font:500 14px "Lora",serif; }
.ask-entry small { display:block; margin-top:4px; color:var(--dim); font-size:11px; }
.ask-entry .arrow { margin-left:auto; width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:var(--ink); }

.ask-view:not([hidden]) { display:flex; flex-direction:column; min-height:calc(100dvh - 80px); }
.ask-heading { display:flex; align-items:flex-start; gap:12px; padding:31px 0 22px; }
.ask-heading h1 { font-size:22px; }
.back-button { border:0; background:transparent; color:var(--muted); padding:0 5px 0 0; font-size:25px; cursor:pointer; }
.conversation { flex:1; display:flex; flex-direction:column; gap:24px; padding:8px 0 24px; }
.empty-state { margin:auto 0; text-align:center; }
.empty-state > p { max-width:320px; margin:0 auto 22px; color:var(--muted); font:400 14px/1.75 "Lora",serif; }
.suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.suggestions button { padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.suggestions button:hover, .suggestions button:focus-visible { color:var(--gold-soft); border-color:var(--gold-line); }
.user-message { align-self:flex-end; max-width:84%; padding:12px 16px; border-radius:18px 18px 5px 18px; background:var(--panel-raised); color:#cfcbc2; font-size:14px; line-height:1.55; }
.assistant-message { display:flex; flex-direction:column; gap:14px; }
.trace { color:var(--dim); font-size:11px; }
.preface, .answer-copy { margin:0; color:var(--copy); font:400 15.5px/1.8 "Lora",serif; white-space:pre-wrap; }
.preface { color:#bcb6aa; font-style:italic; }
.help-nudge { margin:0; padding:12px 14px; border-left:1px solid var(--gold); background:rgba(224,192,137,.04); color:#aaa59b; font-size:12px; line-height:1.6; }
.refusal { padding:25px 20px; border:1px solid var(--gold-line); border-radius:22px; background:linear-gradient(150deg, rgba(224,192,137,.06), transparent),var(--panel); text-align:center; }
.refusal-mark { display:block; width:30px; height:30px; margin:0 auto 13px; border:1px solid var(--gold-line); border-radius:50%; color:var(--gold); font:italic 17px "Lora",serif; }
.refusal strong { display:block; color:var(--paper); font:500 16px/1.6 "Lora",serif; }
.refusal small { display:block; margin-top:8px; color:var(--dim); font-size:11px; }
.route-out { text-align:left; }
.route-out small { line-height:1.6; }

.receipt { border:1px solid var(--gold-line); border-radius:17px; background:var(--panel); overflow:hidden; }
.receipt summary { list-style:none; display:flex; align-items:center; gap:11px; padding:13px; cursor:pointer; }
.receipt summary::-webkit-details-marker { display:none; }
.receipt-icon { width:29px; height:29px; flex:0 0 auto; border:1px solid var(--gold-line); border-radius:9px; display:grid; place-items:center; color:var(--gold); font:600 11px "Lora",serif; }
.receipt-label { min-width:0; display:flex; flex-direction:column; gap:2px; }
.receipt-label small { color:var(--dim); font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.receipt-label strong { overflow:hidden; color:var(--paper); font-size:11px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.grade-badge { margin-left:auto; padding:4px 7px; border-radius:999px; background:rgba(224,192,137,.1); color:var(--gold); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.chevron { color:var(--dim); transition:transform .2s; }
.receipt[open] .chevron { transform:rotate(180deg); }
.receipt-body { padding:4px 14px 16px 53px; border-top:1px solid var(--line); }
.arabic { margin:15px 0 9px; color:var(--paper); font:400 22px/1.9 "Amiri",serif; text-align:right; }
.arabic:empty { display:none; }
.receipt-text { margin:13px 0; color:#aaa59b; font:400 12.5px/1.75 "Lora",serif; }
.source-link { color:var(--gold); font-size:10px; text-decoration:none; }

.composer { position:sticky; bottom:max(0px,env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:23px; background:rgba(16,20,27,.97); padding:14px 14px 10px; box-shadow:0 -12px 34px rgba(10,13,19,.9); }
.composer textarea { width:100%; max-height:130px; resize:none; border:0; outline:0; background:transparent; color:var(--paper); font-size:14px; line-height:1.5; }
.composer textarea::placeholder { color:var(--dim); }
.composer-foot { display:flex; align-items:center; margin-top:8px; }
.composer-promise { color:var(--dim); font-size:9px; letter-spacing:.05em; }
.send-button { margin-left:auto; width:36px; height:36px; border:0; border-radius:50%; background:var(--gold); color:var(--ink); font-weight:600; cursor:pointer; }
.send-button:disabled { opacity:.4; cursor:wait; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

@media (min-width: 760px) {
  .app-shell { width:min(100% - 48px, 760px); }
  .today-view { width:430px; align-self:center; }
  .ask-view:not([hidden]) { width:560px; align-self:center; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.auth-dialog { width:min(390px,calc(100% - 32px)); border:1px solid var(--gold-line); border-radius:24px; background:var(--panel); color:var(--copy); padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.65); }
.auth-dialog::backdrop { background:rgba(4,6,10,.78); backdrop-filter:blur(4px); }
.auth-dialog h2,.paywall-card h2,.legal-page h2 { margin:0 0 9px; color:var(--paper); font:500 21px/1.4 "Lora",serif; }
.auth-dialog p { color:var(--muted); font:400 13px/1.6 "Lora",serif; }
.dialog-close-row { display:flex; justify-content:flex-end; }
.dialog-close-row button { border:0; background:transparent; color:var(--muted); font-size:22px; cursor:pointer; }
.auth-dialog label { display:block; margin:18px 0 7px; color:var(--muted); font-size:11px; }
.auth-dialog input { width:100%; border:1px solid var(--line); border-radius:12px; background:var(--ink); color:var(--paper); padding:12px; outline:0; }
.primary-button { border:0; border-radius:999px; background:var(--gold); color:var(--ink); padding:11px 17px; font-weight:600; cursor:pointer; }
.auth-dialog .primary-button { width:100%; margin-top:12px; }
.dialog-status { min-height:22px; }
.dialog-status a,.privacy-link { color:var(--gold); }
.account-controls { margin:18px 0; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sync-control { display:flex!important; align-items:center; gap:9px; margin:0 0 6px!important; color:var(--copy)!important; font-size:13px!important; cursor:pointer; }
.sync-control input { width:auto; accent-color:var(--gold); }
.account-controls small { display:block; color:var(--dim); font-size:10px; line-height:1.5; }
.account-actions,.paywall-actions { display:flex; gap:8px; margin-top:14px; }
.secondary-button,.danger-button { flex:1; border:1px solid var(--line); border-radius:999px; background:transparent; padding:10px 12px; cursor:pointer; }
.danger-button { color:#d99b94; border-color:rgba(217,155,148,.25); }
.paywall-card { padding:22px; border:1px solid var(--gold-line); border-radius:22px; background:linear-gradient(145deg,rgba(224,192,137,.06),transparent),var(--panel); }
.paywall-card p { color:var(--muted); font:400 13px/1.7 "Lora",serif; }
.paywall-actions .primary-button { flex:1; }
.paywall-status { min-height:20px; margin:10px 0 0!important; color:#d99b94!important; }
.legal-page { width:min(100% - 40px,680px); margin:0 auto; padding:48px 0 80px; }
.legal-page h1 { margin:22px 0 28px; font-size:34px; }
.legal-page h2 { margin-top:30px; font-size:19px; }
.legal-page p { color:#b5afa4; font:400 15px/1.8 "Lora",serif; }
.legal-page .legal-note { margin-top:40px; color:var(--dim); font-size:12px; }

/* Chat thinking indicator */
.assistant-message.thinking { flex-direction:row; align-items:center; gap:10px; }
.thinking-dots { display:inline-flex; gap:4px; }
.thinking-dots i { width:6px; height:6px; border-radius:50%; background:var(--dim); animation:thinking-pulse 1.2s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay:0.15s; }
.thinking-dots i:nth-child(3) { animation-delay:0.3s; }
@keyframes thinking-pulse { 0%, 60%, 100% { opacity:0.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .thinking-dots i { animation:none; opacity:0.6; } }

/* Tafsir receipt note */
.tafsir-note { display:block; margin-top:8px; color:var(--dim); font-size:11px; line-height:1.6; }

/* Corpus transparency line */
.corpus-line { max-width:340px; margin:-12px auto 22px; color:var(--dim); font-size:11.5px; line-height:1.7; }

/* ---- 2026-07-19 feature batch: tabs, checker, reader, times, chips, share, voice ---- */
.streak { margin-left:auto; margin-right:10px; font-size:13px; color:var(--muted); }
.streak b { color:var(--gold); }
.tabbar { display:flex; gap:4px; padding:6px 16px 0; border-bottom:1px solid var(--line); }
.tabbar button { background:none; border:none; color:var(--muted); font:inherit; font-size:13.5px; padding:9px 14px; cursor:pointer; border-bottom:2px solid transparent; }
.tabbar button.on { color:var(--gold); border-bottom-color:var(--gold); }
.alt-view { padding:18px 16px 40px; overflow-y:auto; }
.alt-view h1 { font-size:22px; margin:0 0 6px; }
.surah-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin-top:14px; }
.surah-list button { text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:10px; color:var(--copy); font:inherit; font-size:13px; padding:9px 10px; cursor:pointer; }
.surah-list button:hover { border-color:var(--gold-line); }
.surah-number { color:var(--gold); font-size:11.5px; margin-right:4px; }
.ayah-block { border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0; background:var(--panel); }
.ayah-ref { font-size:11.5px; color:var(--gold); letter-spacing:.04em; }
.ayah-block .arabic { font-size:22px; line-height:1.9; margin:8px 0; }
.ayah-text { font-size:14.5px; line-height:1.65; color:var(--copy); }
.back-button { margin-bottom:10px; }
.check-form textarea { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--copy); font:inherit; padding:12px; margin:12px 0 8px; resize:vertical; }
.check-verdict { border-radius:12px; padding:14px 16px; margin:14px 0 10px; border:1px solid var(--line); background:var(--panel); }
.check-verdict.fabricated { border-color:rgba(224,90,90,.5); }
.check-verdict.found { border-color:rgba(120,200,140,.4); }
.check-verdict strong { display:block; margin-bottom:6px; }
.check-verdict p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.55; }
.times-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.time-cell { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
.time-cell small { display:block; color:var(--muted); font-size:11.5px; margin-bottom:4px; }
.time-cell strong { color:var(--gold-soft); font-size:16px; }
.qibla-line { color:var(--gold); font-size:14px; }
.asr-toggle { display:inline-flex; align-items:center; gap:6px; margin-left:12px; font-size:13px; color:var(--muted); }
.adhkar-box { margin-top:22px; }
.adhkar-box h3 { font-size:15px; color:var(--gold-soft); margin-bottom:8px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chip { background:none; border:1px solid var(--gold-line); border-radius:99px; color:var(--gold); font:inherit; font-size:12.5px; padding:6px 12px; cursor:pointer; }
.chip:hover { background:rgba(224,192,137,.12); }
.composer-actions { display:flex; align-items:center; gap:8px; }
.icon-button { background:none; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:15px; width:34px; height:34px; cursor:pointer; }
.icon-button.listening { border-color:var(--gold); color:var(--gold); animation:micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 50% { box-shadow:0 0 10px 2px rgba(224,192,137,.35); } }
.speak-button { margin-top:8px; }
.share-receipt { display:block; margin-top:10px; background:none; border:1px solid var(--gold-line); border-radius:99px; color:var(--gold); font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; }
.share-receipt:hover { background:rgba(224,192,137,.12); }
.new-chat { background:none; border:1px solid var(--gold-line); border-radius:99px; color:var(--gold); font:inherit; font-size:12.5px; padding:6px 12px; cursor:pointer; margin-right:10px; }
.new-chat:hover { background:rgba(224,192,137,.12); }

/* ==== Chat home relayout — AI.zip handoff (2026-07-19) ==== */
.app-frame { display:grid; grid-template-columns:264px 1fr; height:100dvh; }

/* Sidebar */
.sidebar { display:flex; flex-direction:column; gap:22px; padding:24px 16px 18px; border-right:1px solid var(--line); background:var(--surface); }
.side-brand { display:flex; align-items:baseline; gap:6px; padding:0 8px; }
.side-brand .brand { font:500 19px "Lora",serif; letter-spacing:.04em; color:var(--accent); }
.brand-ai { color:var(--muted); font:400 10px "Space Grotesk",sans-serif; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.side-new { display:block; width:100%; text-align:center; background:transparent; border:1px solid var(--accent-line); border-radius:10px; color:var(--accent-soft); font:500 13px "Space Grotesk",sans-serif; padding:10px 0; cursor:pointer; transition:background .15s,border-color .15s; }
.side-new .plus { color:var(--ochre); }
.side-new:hover { background:var(--active-bg); }

/* Nav — buttons and the Stories anchor share styling */
.side-nav { display:flex; flex-direction:column; gap:3px; border:0; padding:0; }
.side-nav button, .side-nav .nav-link { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; border-radius:9px; color:var(--muted); font:400 13.5px "Space Grotesk",sans-serif; padding:9px 12px; cursor:pointer; text-decoration:none; }
.nav-glyph { flex:0 0 auto; width:16px; text-align:center; font-size:13px; line-height:1; opacity:.85; }
.side-nav button:hover, .side-nav .nav-link:hover { background:var(--active-bg); color:var(--ink-strong); }
.side-nav button.on { background:var(--active-bg); color:var(--ink-strong); font-weight:500; }
.side-nav button.on .nav-glyph { color:var(--accent); opacity:1; }

/* Recent chats — fills the remaining sidebar height */
.side-recent { flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.recent-heading { margin:0 0 2px; padding:0 12px; color:var(--section-label); font:500 10.5px "Space Grotesk",sans-serif; letter-spacing:.2em; }
.recent-list { display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.recent-list button { display:block; width:100%; text-align:left; background:none; border:0; border-radius:8px; color:var(--copy); font:400 12.5px "Space Grotesk",sans-serif; padding:7px 12px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-list button:hover { background:var(--active-bg); }
.recent-empty { padding:7px 12px; color:var(--faint); font-size:12px; }

/* Theme toggle pill */
.theme-toggle { display:flex; padding:3px; border:1px solid var(--line); border-radius:999px; }
.theme-seg { flex:1; background:none; border:0; border-radius:999px; color:var(--muted); font:400 11px "Space Grotesk",sans-serif; padding:5px 12px; cursor:pointer; transition:background .15s,color .15s; }
.theme-seg[aria-pressed="true"] { background:var(--send-bg); color:var(--send-fg); }

/* Profile row */
.side-profile { display:flex; align-items:center; gap:10px; padding:14px 8px 0; border-top:1px solid var(--line); }
.side-profile .avatar { flex:0 0 auto; }
.profile-name { flex:1; min-width:0; color:var(--copy); font:400 13px "Space Grotesk",sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-more { background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:0 4px; }
.avatar { width:30px; height:30px; border:1px solid var(--accent-line); border-radius:50%; background:transparent; color:var(--accent); font:500 12.5px "Lora",serif; cursor:pointer; }

.mobile-top { display:none; }

/* Main column */
.main-col { min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.main-col .view { overflow-y:auto; height:100%; }
.ask-view:not([hidden]) { display:flex; flex-direction:column; min-height:0; height:100%; width:auto; align-self:stretch; }
.conversation { flex:1; overflow-y:auto; padding:28px 24px 16px; }
.conversation > * { width:min(100%, 720px); margin-left:auto; margin-right:auto; }
.conversation > * + * { margin-top:22px; }

/* ---- Empty state: greeting + composer + chips + footnote centered as ONE group ---- */
.hero-extras { display:none; }
.ask-view:not(.has-messages) { justify-content:center; align-items:center; gap:32px; padding:24px; }
.ask-view:not(.has-messages) .conversation { flex:0 0 auto; overflow:visible; padding:0; width:min(100%,660px); }
.ask-view:not(.has-messages) .composer-zone { flex:0 0 auto; width:min(100%,660px); padding:0; }
.ask-view:not(.has-messages) .hero-extras { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:20px; width:min(100%,660px); }

.empty-state { text-align:center; display:flex; flex-direction:column; align-items:center; }
.empty-state .hero-hijri { margin:0 0 14px; color:var(--muted); font:400 11.5px "Space Grotesk",sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.empty-state h1.greeting { margin:0; color:var(--ink-strong); font:400 44px/1.25 "Lora",serif; letter-spacing:-.01em; }
.empty-state h1.greeting::before { content:none; }
.hero-sub { max-width:480px; margin:16px 0 0; color:var(--italic-sub); font:italic 400 15.5px/1.7 "Lora",serif; }
.hero-extras .corpus-line { max-width:none; margin:0; color:var(--faint); font:400 11.5px/1.6 "Space Grotesk",sans-serif; }

/* Suggestion chips */
.suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.suggestions button { padding:8px 16px; border:1px solid var(--chip-line); border-radius:999px; background:transparent; color:var(--muted); font:400 12.5px "Space Grotesk",sans-serif; cursor:pointer; transition:border-color .15s,color .15s; }
.suggestions button:hover, .suggestions button:focus-visible { color:var(--ink-strong); border-color:var(--accent-line); }

/* Composer */
.ask-view.has-messages .composer-zone { position:sticky; bottom:0; padding:8px 24px max(14px, env(safe-area-inset-bottom)); background:linear-gradient(transparent, var(--bg) 30%); }
.composer { width:min(100%, 660px); margin:0 auto; position:static; border:1px solid var(--accent-line); border-radius:22px; background:var(--surface-raised); padding:22px 20px 15px; box-shadow:var(--composer-shadow); transition:border-color .15s; }
.composer:focus-within { border-color:var(--ochre); }
.composer textarea { caret-color:var(--ochre); }
.composer-foot { display:flex; align-items:center; gap:12px; margin-top:22px; }
.attach-button { flex:0 0 auto; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; background:none; color:var(--muted); font-size:17px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0; }
.attach-button:hover { border-color:var(--accent-line); color:var(--accent); }
.composer-promise { flex:1; color:var(--faint); font-size:11.5px; }
.send-button { flex:0 0 auto; margin:0; width:38px; height:38px; background:var(--send-bg); color:var(--send-fg); }

/* Assistant rows with the accent S mark */
.assistant-message:not(.thinking) { position:relative; padding-left:44px; }
.assistant-message:not(.thinking)::before { content:"S"; position:absolute; left:0; top:2px; width:28px; height:28px; border:1px solid var(--accent-line); border-radius:50%; display:grid; place-items:center; color:var(--accent); font:italic 600 13px "Lora",serif; background:var(--surface-raised); }
.assistant-message.thinking { padding-left:44px; position:relative; }
.assistant-message.thinking::before { content:"S"; position:absolute; left:0; top:-4px; width:28px; height:28px; border:1px solid var(--accent-line); border-radius:50%; display:grid; place-items:center; color:var(--accent); font:italic 600 13px "Lora",serif; background:var(--surface-raised); }
.user-message { max-width:min(78%, 560px); margin-right:0; margin-left:auto; }

.alt-view { width:100%; padding:26px 24px 60px; }
.alt-view > * { width:min(100%, 760px); margin-left:auto; margin-right:auto; }

/* Bottom tab bar — mobile only */
.bottom-nav { display:none; }

/* Mobile: sidebar → top header + bottom tab bar */
@media (max-width: 880px) {
  .app-frame { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  .sidebar { display:none; }
  .mobile-top { display:flex; align-items:center; justify-content:space-between; padding:24px 22px 12px; border:0; background:var(--bg); }
  .mobile-top .brand { display:inline-flex; align-items:baseline; gap:5px; font:500 16px "Lora",serif; letter-spacing:.04em; color:var(--accent); background:none; padding:0; cursor:default; }
  .mobile-actions { display:flex; align-items:center; gap:12px; }
  .round-btn { width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); font-size:14px; display:grid; place-items:center; cursor:pointer; padding:0; }
  .round-btn.mobile-new { border-color:var(--accent-line); color:var(--ochre); }
  .mobile-top .avatar { width:28px; height:28px; }
  .conversation { padding:0 22px 10px; }
  .empty-state h1.greeting { font-size:30px; }
  .hero-sub { max-width:300px; font-size:13.5px; }
  .ask-view:not(.has-messages) { padding:16px 22px; gap:24px; }
  .composer { border-radius:20px; padding:18px 16px 12px; }
  .composer-foot { margin-top:16px; }
  .bottom-nav { display:flex; padding:10px 6px calc(18px + env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--line); background:var(--surface); }
  .bottom-nav button, .bottom-nav .nav-link { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:44px; background:none; border:0; padding:2px 0; color:var(--muted); font:400 9.5px "Space Grotesk",sans-serif; cursor:pointer; text-decoration:none; }
  .bottom-nav .nav-glyph { width:auto; font-size:15px; opacity:.85; }
  .bottom-nav button.on { color:var(--accent); font-weight:500; }
  .bottom-nav button.on .nav-glyph { opacity:1; color:var(--accent); }
}
.ayah-actions { display:flex; gap:8px; margin-top:6px; }
.recitation-credit { color:var(--dim); font-size:11.5px; line-height:1.6; margin:10px 0 2px; }