:root {
  --bg: #101418; --panel: #1a2027; --ink: #e8eef4; --dim: #8a97a3;
  --accent: #4dd0a6; --hot: #e06c60; --chip: #232b34;
  --shell-css: e409c961;   /* audit cross-checks against the app build */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, sans-serif;
  display: flex; flex-direction: column; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

header { display: flex; align-items: center; gap: .6rem;
         padding: .5rem .8rem; }
.brand { font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.chips { display: flex; gap: .4rem; margin-left: auto; }
.chip  { background: var(--chip); color: var(--dim); border-radius: .6rem;
         padding: .15rem .55rem; font-size: .75rem; }
#btn-settings { background: none; border: 0; color: var(--dim);
                font-size: 1.2rem; }

main { flex: 1; display: flex; flex-direction: column; gap: .5rem;
       padding: 0 .8rem; min-height: 0; }
.pane { flex: 1; background: var(--panel); border-radius: 1rem;
        padding: .6rem .9rem; display: flex; flex-direction: column;
        min-height: 0; }
.pane h2 { margin: 0 0 .3rem; font-size: .8rem; color: var(--dim);
           text-transform: uppercase; letter-spacing: .1em; }
/* symmetric tabletop layout: the farsi pane mirrors the english
   one around the central button row — its header sits at the
   BOTTOM edge, content enters at the top and scrolls down */
#pane-fa h2 { margin: .3rem 0 0; }
.pane .lines { overflow-y: auto; flex: 1;
               display: flex; flex-direction: column; }
/* english populates bottom-to-top: sparse content hugs the
   bottom edge (nearest the buttons) and fills upward — the
   mirror of farsi's top-anchored top-to-bottom fill.  The
   spacer is a pseudo flex item, so anchoring holds no matter
   which child arrives first in the DOM. */
#pane-en .lines::before { content: ""; margin-top: auto; }

/* the seam order is STRUCTURAL, not insertion order: committed
   history sits innermost, the streaming caption next, and the
   typed input line always at the center-facing edge — history
   arriving mid-typing can never displace the input field */
#pane-en .lines p.partial        { order: 1; }
#pane-en .lines p.partial.typed  { order: 2; }
#pane-fa .lines p.partial        { order: -1; }
#pane-fa .lines p.partial.typed  { order: -2; }
/* the central button row: both speakers reach the middle —
   english left, farsi right, the conversation toggle between */
#talk-row { display: flex; gap: .5rem; }
#talk-row .talk { flex: 1; margin-top: 0; }
.pane p { margin: .2rem 0; }
.pane p.partial { color: var(--accent); }
.pane p.error   { color: var(--hot); font-size: .85rem; }

footer { padding: .4rem .8rem .8rem; display: flex;
         flex-direction: column; align-items: center; }
.talk {
  margin-top: .5rem; padding: .7rem .4rem; border-radius: 1rem;
  border: 0; background: var(--accent); color: #06251b;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
/* bilingual chrome: every control carries both languages */
.talk span, #btn-convo span { display: block; }
.talk .alt, #btn-convo .alt { font-size: .8em; opacity: .8;
                              margin-top: .15rem; }
.brand-fa { font-size: .7em; opacity: .7; margin-inline-start: .4em; }
h2 bdi { font-size: .85em; opacity: .7; margin-inline: .4em; }
#state-line { display: flex; gap: .8em; justify-content: center;
              flex-wrap: wrap; }
dialog label bdi { opacity: .8; margin-inline-start: .4em; }
#btn-talk-fa { background: #58a6e8; color: #082036; }
.talk.listening { background: var(--hot); color: #2b0d0a;
                  animation: pulse 1.1s ease-in-out infinite; }

/* typed input lives IN the pane: an editable caption line */
.partial.typed { min-height: 1.4em; outline: none;
                 border-bottom: 1px dashed #3a4a5c;
                 caret-color: var(--accent); }
.partial.typed:empty::before { content: 'type · بنویسید';
                               color: #5b6b7d; }

/* conversational mode toggle — between the two speak buttons,
   quiet until live */
#btn-convo {
  margin: 0; padding: .3rem .6rem;
  border-radius: 1rem; border: 1px solid var(--accent);
  background: transparent; color: var(--accent);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  -webkit-user-select: none; user-select: none;
}
#btn-convo span { display: block; line-height: 1.25; }
#btn-convo .alt { font-size: .6rem; opacity: .85; }
#btn-convo.live { background: var(--accent); color: #06251b;
                  animation: pulse 1.1s ease-in-out infinite; }

/* interlinear: word / aligned counterpart / its pronunciation */
.pane p.inter { margin: .45rem 0; padding-bottom: .4rem;
                border-bottom: 1px solid #232b34;
                line-height: 1.25; }
.pane span.w { display: inline-flex; flex-direction: column;
               align-items: center; vertical-align: top;
               margin-bottom: .15rem; touch-action: pan-y;
               border-radius: .3rem; cursor: pointer; }
.pane span.w.speaking { background: #2a4a3f; }
.pane span.w .sub1 { color: var(--accent); font-size: .68rem;
                     letter-spacing: .03em; }   /* own pron */
.pane span.w .sub2 { color: var(--dim); font-size: .82rem; }
                                            /* counterpart word */
.pane span.w .sub3 { color: var(--accent); font-size: .68rem;
                     letter-spacing: .03em; }   /* its pron */
@keyframes pulse { 50% { transform: scale(1.04); } }
#state-line { color: var(--dim); font-size: .8rem; min-height: 1.2em; }

dialog { background: var(--panel); color: var(--ink); border: 0;
         border-radius: 1rem; padding: 1.2rem; width: min(90vw, 22rem); }
dialog::backdrop { background: #000a; }
dialog h2 { margin-top: 0; font-size: 1rem; }
dialog label { display: block; margin: .8rem 0; font-size: .9rem;
               color: var(--dim); }
dialog select { width: 100%; margin-top: .25rem; padding: .45rem;
                background: var(--chip); color: var(--ink); border: 0;
                border-radius: .5rem; }
dialog button { margin-top: .6rem; padding: .5rem 1rem; border: 0;
                border-radius: .6rem; background: var(--accent);
                color: #06251b; font-weight: 600; }