/* Transcripts (#190, 24 Oct 2026): light paper, ink text, one dark record button; drawn from render #190. */
:root{--p:#F5F3EE;--p2:#FFFFFF;--k:#17151C;--k2:#5F5B66;--k3:#8E8A94;--hl:#E6E2D9;--rec:#D93A3A;--acc:#2F6B3A;
  --st:env(safe-area-inset-top,0px);--sbm:env(safe-area-inset-bottom,0px);color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--p);color:var(--k);font:16px/1.5 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
#app{position:fixed;inset:0;display:flex;overflow:hidden}
@media (min-width:700px){html,body{font-size:17px}}

.pane-list{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;padding-top:var(--st)}
.pane-view{display:contents}
.ah{display:flex;align-items:center;justify-content:space-between;padding:1em 1.4em .2em}
.logo{font:400 1.9em/1 Anton,Impact,sans-serif;letter-spacing:.02em}
.hic{display:flex;gap:.3em;align-items:center}
.sync{display:inline-flex;align-items:center;gap:.45em;font:500 .66em/1 JetBrains Mono,monospace;letter-spacing:.05em;color:var(--k2);background:var(--p2);border:1px solid var(--hl);border-radius:2em;padding:.55em .8em;margin-right:.3em;white-space:nowrap}
.sync i{width:.6em;height:.6em;border-radius:50%;background:var(--k3)}
.sync.ok i{background:var(--acc)}.sync.bad i{background:var(--rec)}
.ib{width:2.6em;height:2.6em;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:var(--k)}
.ib svg{width:1.3em;height:1.3em}.ib:active{background:var(--hl)}
.search{padding:.4em 1.4em 0}.search input{width:100%;border:1px solid var(--hl);background:var(--p2);border-radius:2em;padding:.75em 1.1em;outline:none}
.ttl{font:700 1.4em/1.2 Inter,sans-serif;padding:.7em 1.1em .5em}
.chips{display:flex;gap:.5em;padding:0 1.4em .8em;overflow-x:auto;scrollbar-width:none;flex:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;font-weight:500;font-size:.92em;padding:.7em 1.1em;border-radius:2em;border:1px solid var(--hl);background:var(--p2);color:var(--k2)}
.chips button.on{background:var(--k);color:var(--p);border-color:var(--k)}
.list{flex:1;overflow-y:auto;padding:0 1.4em calc(7em + var(--sbm));-webkit-overflow-scrolling:touch}
.day{font-weight:600;font-size:.95em;padding:1.1em 0 .7em}
.it{display:block;width:100%;text-align:left;background:var(--p2);border:1px solid var(--hl);border-radius:1em;padding:1em 1.2em;margin-bottom:.6em;color:var(--k)}
.it b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it small{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font:400 .78em/1.6 JetBrains Mono,monospace;color:var(--k3);margin:.2em 0 .35em}
.it .lg{border:1px solid var(--hl);border-radius:.4em;padding:0 .35em;color:var(--k2)}
.it .lv{display:inline-flex;align-items:center;gap:.35em;color:var(--rec)}.it .lv:before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--rec)}
.it span.pv{display:block;color:var(--k2);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it.on{border-color:var(--k)}
.none{color:var(--k3);padding:2em 0;text-align:center}
.mic{position:absolute;right:1.4em;bottom:calc(1.6em + var(--sbm));width:4.4em;height:4.4em;border-radius:1.3em;border:0;background:var(--k);color:var(--p);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(23,21,28,.35);animation:breathe 3.2s ease-in-out infinite;z-index:2}
.mic svg{width:1.7em;height:1.7em}
@keyframes breathe{0%,100%{box-shadow:0 10px 30px rgba(23,21,28,.35),0 0 0 0 rgba(23,21,28,.18)}50%{box-shadow:0 10px 30px rgba(23,21,28,.35),0 0 0 .7em rgba(23,21,28,0)}}

.dim{position:fixed;inset:0;background:rgba(23,21,28,.38);opacity:0;pointer-events:none;transition:opacity .3s;z-index:5}
.dim.on{opacity:1;pointer-events:auto}
.rec{position:fixed;left:0;right:0;bottom:0;height:calc(84% - var(--st));background:var(--p);border-radius:1.6em 1.6em 0 0;display:flex;flex-direction:column;z-index:6;
  transform:translateY(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.18);padding-bottom:var(--sbm)}
.rec.on{transform:none}
.grab{width:3em;height:.3em;border-radius:1em;background:var(--hl);margin:.7em auto .2em;flex:none}
.rh{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;padding:.6em 1.5em .8em;flex:none}
.rh b{display:block;font:700 1.3em/1.2 Inter,sans-serif}
.rh small{display:flex;align-items:center;gap:.5em;font:500 .85em/1.8 JetBrains Mono,monospace;color:var(--k2)}
.rh small i{width:.6em;height:.6em;border-radius:50%;background:var(--rec);animation:blink 1.2s steps(2) infinite}
.rh small.paused i,.rh small.wait i{background:var(--k3);animation:none}
.rh small em{font-style:normal;border:1px solid var(--hl);border-radius:.4em;padding:0 .4em;margin-left:.2em}
.rh small em:empty{display:none}
@keyframes blink{50%{opacity:.25}}
.fold{display:inline-flex;align-items:center;gap:.4em;font-weight:500;font-size:.82em;padding:.6em .9em;border-radius:2em;border:1px solid var(--hl);background:var(--p2);color:var(--k2);white-space:nowrap}
.fold svg{width:1.1em;height:1.1em}
.box{position:relative;flex:1;min-height:0;margin:0 1.1em;background:var(--p2);border:1px solid var(--hl);border-radius:1.1em}
.txt{position:absolute;inset:0;overflow-y:auto;padding:1.2em 2.6em 1.6em 1.3em;scrollbar-width:none;font-size:1.06em;line-height:1.62;color:var(--k);-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.txt::-webkit-scrollbar{display:none}
.txt p{margin:0 0 .9em;white-space:pre-wrap;overflow-wrap:anywhere}
.txt .ts{display:block;font:500 .72em/1.6 JetBrains Mono,monospace;color:var(--k3);margin-bottom:.1em;user-select:none}
.txt .ts em{font-style:normal;margin-left:.6em;border:1px solid var(--hl);border-radius:.35em;padding:0 .35em}
.txt .int{color:var(--k3)}
.txt .hint{color:var(--k3)}
.sr{position:absolute;top:.6em;bottom:.6em;right:.25em;width:1.8em;touch-action:none;cursor:pointer}
.sr:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--hl);border-radius:2px}
.th{position:absolute;left:50%;width:.6em;margin-left:-.3em;border-radius:1em;background:var(--k2);min-height:2.4em;transition:width .15s,margin .15s}
.sr:hover .th,.sr.drag .th{width:.85em;margin-left:-.425em;background:var(--k)}
.sr[hidden]{display:none}
.live{position:absolute;left:50%;bottom:.9em;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.82em;padding:.7em 1.1em;border:0;border-radius:2em;background:var(--k);color:var(--p);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.live i{width:.55em;height:.55em;border-radius:50%;background:var(--rec)}
.live[hidden]{display:none}
.wave{height:3em;margin:.9em 1.4em .2em;display:flex;align-items:center;gap:2px;overflow:hidden;flex:none}
.wave b{flex:1;min-width:2px;max-width:5px;border-radius:2px;background:var(--k);opacity:.75;height:6%;transition:height .1s}
.ctl{display:flex;align-items:center;justify-content:center;gap:2.6em;padding:.6em 0 1.4em;flex:none}
.cb{width:3.2em;height:3.2em;border-radius:50%;border:0;background:none;color:var(--k);display:grid;place-items:center}.cb svg{width:1.5em;height:1.5em}
.cb:active{background:var(--hl)}
.stop{width:4.6em;height:4.6em;border-radius:50%;border:0;background:var(--rec);display:grid;place-items:center;box-shadow:0 8px 24px rgba(217,58,58,.35)}
.stop i{width:1.4em;height:1.4em;border-radius:.25em;background:#fff}
.stop:disabled{opacity:.5}

.view{position:fixed;inset:0;background:var(--p);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:4;padding-top:var(--st);padding-bottom:var(--sbm)}
.view.on{transform:none}
.vh{display:flex;justify-content:space-between;align-items:center;padding:.8em 1em .2em}
.vh div{display:flex;gap:.1em}
.vt{font:700 1.45em/1.25 Inter,sans-serif;padding:.4em 1.1em .2em;outline:none;border-radius:.3em;margin:0 .3em}
.vt:focus{background:var(--hl)}
.vm{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;padding:0 1.4em 1em;font:400 .8em/1.6 JetBrains Mono,monospace;color:var(--k3)}
.vm select{font:500 1em JetBrains Mono,monospace;color:var(--k2);background:var(--p2);border:1px solid var(--hl);border-radius:2em;padding:.25em .6em}
.vm .lv{color:var(--rec)}
.vb{position:relative;flex:1;min-height:0;margin:0 1.1em 1.4em}
.vb .txt{border-radius:1.1em;background:var(--p2);border:1px solid var(--hl)}
.empty{display:none}

.sheet{position:fixed;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:var(--p);border-radius:1.6em 1.6em 0 0;z-index:7;transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.2);padding-bottom:calc(1.5em + var(--sbm))}
.sheet.on{transform:none}
.sh{display:flex;justify-content:space-between;align-items:center;padding:1em 1em .4em 1.5em}.sh b{font:700 1.3em Inter,sans-serif}
.sb-body{padding:0 1.5em}
.row{padding:1em 0;border-bottom:1px solid var(--hl)}.row:last-child{border:0}
.row h4{font:500 .72em/1.6 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--k3);margin-bottom:.4em}
.row p{font-size:.92em;color:var(--k2);margin-bottom:.6em;max-width:60ch}
.kf{display:flex;gap:.5em}.kf input{flex:1;min-width:0;border:1px solid var(--hl);background:var(--p2);border-radius:.7em;padding:.7em .9em;outline:none;font-size:.9em}
.kf button,.seg button{border:1px solid var(--k);background:var(--k);color:var(--p);border-radius:.7em;padding:.7em 1.1em;font-weight:600;font-size:.88em}
.seg{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.6em}.seg button{background:var(--p2);color:var(--k2);border-color:var(--hl)}.seg button.on{background:var(--k);color:var(--p);border-color:var(--k)}
.tg{display:flex;align-items:center;gap:.7em;font-size:.95em}.tg input{width:1.3em;height:1.3em;accent-color:var(--k)}
.toast{position:fixed;left:50%;bottom:calc(2em + var(--sbm));transform:translate(-50%,1em);opacity:0;font-weight:500;font-size:.85em;background:var(--k);color:var(--p);padding:.8em 1.2em;border-radius:2em;transition:.25s;pointer-events:none;z-index:9;max-width:90%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* the Mac and the tablet across: the list at the side, the transcript beside it, the recording over the transcript */
@media (min-width:1000px){
  .pane-list{flex:none;width:400px;border-right:1px solid var(--hl);background:#EFECE5}
  .pane-view{display:flex;flex:1;position:relative;min-width:0;padding-top:var(--st)}
  .view{position:absolute;transform:none;opacity:0;pointer-events:none;transition:opacity .2s}
  .view.on{opacity:1;pointer-events:auto}
  #vBack{visibility:hidden}
  .empty{display:grid;place-items:center;flex:1;color:var(--k3);font-size:1.05em}
  .rec{left:400px;height:calc(100% - var(--st) - 1.5em);border-radius:1.6em 0 0 0}
  .dim{left:400px}
  .sheet{left:auto;right:1.5em;bottom:1.5em;width:480px;border-radius:1.4em}
}
.seg[hidden],.kf[hidden]{display:none}
.connect{position:fixed;inset:0;z-index:10;background:var(--p);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4em;padding:2em;text-align:center}
.connect[hidden]{display:none}.connect .logo{font-size:2.6em}.connect p{max-width:28em;color:var(--k2)}
.connect .go{background:var(--k);color:var(--p);text-decoration:none;font-weight:600;padding:.9em 2em;border-radius:2em}

/* the floating window's video plays out of sight; the window itself is Android's picture-in-picture */
.pipv{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
#rPip.on{color:var(--rec)}