/* Layout: одна колонка-«расшифровка разговора», без пузырей; строка ввода = следующая строка расшифровки; справа заметки. */
:root{
  --bg:#eef1f4; --surface:#fbfcfd; --ink:#16202b; --muted:#66727f; --line:#d5dbe2; --hand:#c4700f; --handbg:#fbeedd;
  --c0:#2259c4; --c1:#157a52; --c2:#a82f80; --c3:#b45f0e; --c4:#5f43c9; --c5:#0b7d8b;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-logo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1319; --surface:#151c24; --ink:#e4e9ef; --muted:#8793a0; --line:#27313c; --hand:#f0a347; --handbg:#2e2213;
  --c0:#7aa6ff; --c1:#55c995; --c2:#e47cc4; --c3:#f0a35a; --c4:#a993ff; --c5:#4fc9d8; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1319; --surface:#151c24; --ink:#e4e9ef; --muted:#8793a0; --line:#27313c; --hand:#f0a347; --handbg:#2e2213;
  --c0:#7aa6ff; --c1:#55c995; --c2:#e47cc4; --c3:#f0a35a; --c4:#a993ff; --c5:#4fc9d8; color-scheme:dark}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px}
*{box-sizing:border-box}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--c0);outline-offset:2px}

.app{height:100%;display:grid;grid-template-rows:auto 1fr;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-block:12px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--f-logo);font-size:17px;letter-spacing:.01em}
.people{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.pp{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:13px;position:relative}
.pp i{width:8px;height:8px;border-radius:50%;background:var(--sc)}
.pp b{font-weight:600;color:var(--sc)}
.pp .st{color:var(--muted)}
.pp.talking i{animation:pulse 1s infinite}
.pp.hand{border-color:var(--hand);background:var(--handbg)}
.pp .pop{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-size:12px;padding:1px 7px;border-radius:99px;background:var(--sc);color:var(--surface);animation:pop 2.2s forwards;pointer-events:none;white-space:nowrap}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:13px}
.btn:hover{border-color:var(--muted)}
.btn.on{border-color:var(--c0);color:var(--c0)}
.conn{font-size:12px;color:var(--muted)}
details.set{position:relative}
details.set summary{list-style:none}
details.set summary::-webkit-details-marker{display:none}
.setbox{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(300px,86vw);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:12px;box-shadow:0 8px 30px rgb(0 0 0 / .12)}
.setbox label{display:grid;gap:4px;font-size:13px}
.setbox .v{color:var(--muted);font-variant-numeric:tabular-nums}
.setbox input[type=text]{border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--bg)}
.setbox p{margin:0;font-size:12px;color:var(--muted);line-height:1.45}

.main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;min-height:0}
.talk{display:grid;grid-template-rows:1fr auto;min-height:0;min-width:0}
.scroll{overflow-y:auto;padding-block:18px 8px;min-height:0}
.log,.holds{max-width:760px}
.row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:12px;font-size:17px;line-height:1.5;padding-block:1px;transition:opacity .4s}
.row .who{font-size:13px;font-weight:600;color:var(--sc);text-align:right;padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.first{margin-top:10px}
.row .bd{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.row.live .bd::after{content:"";display:inline-block;width:2px;height:1.05em;vertical-align:-2px;margin-left:1px;background:var(--sc);animation:blink 1s steps(1) infinite}
.row .mk{font-size:12px;color:var(--hand);margin-right:6px;font-weight:600}
.g{color:var(--muted);text-decoration:line-through;animation:ghost 1.4s forwards}
.nod{display:inline-block;font-size:12px;line-height:1;padding:3px 7px;margin-left:6px;border-radius:99px;color:var(--sc);border:1px solid currentColor;vertical-align:2px}
.hold-row .bd{color:var(--hand)}
.dots{letter-spacing:2px;animation:breathe 1.6s infinite}

.intro{max-width:620px;margin:24px 0 0 calc(6.5rem + 12px);display:grid;gap:12px;line-height:1.55}
.intro h1{font-family:var(--f-logo);font-size:22px;margin:0;text-wrap:balance;font-weight:600}
.intro ul{margin:0;padding-left:18px;display:grid;gap:4px}
.intro .act{display:flex;gap:8px;flex-wrap:wrap}
.intro small{color:var(--muted)}

.composer{border-top:1px solid var(--line);padding-block:10px 12px;max-width:760px}
.crow{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:12px;align-items:start}
.crow .who{font-size:13px;font-weight:600;color:var(--sc);text-align:right;padding-top:6px}
#ta{width:100%;resize:none;border:0;background:transparent;font-size:17px;line-height:1.5;padding:2px 0;min-height:32px;outline:none;caret-color:var(--sc)}
.composer.hold #ta{color:var(--hand)}
.fbar{height:2px;background:var(--line);margin:6px 0 8px calc(6.5rem + 12px);border-radius:2px;overflow:hidden}
.fbar i{display:block;height:100%;width:0;background:var(--sc)}
.composer.hold .fbar i{width:100%!important;background:var(--hand);animation:breathe 1.6s infinite}
.cfoot{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-left:calc(6.5rem + 12px)}
.hint{font-size:12px;color:var(--muted);flex:1;min-width:200px}
.composer.hold .hint{color:var(--hand)}
.nods{display:flex;gap:4px}
.nods button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:2px 9px;font-size:12px}
.holdbtns{display:none;gap:6px}
.composer.hold .holdbtns{display:flex}
.btn.warn{border-color:var(--hand);color:var(--hand)}
kbd{font-family:inherit;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 4px}

.pad{display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding-block:16px 12px;min-height:0}
.pad h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pad p{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
#pad{width:100%;resize:none;border:1px dashed var(--line);border-radius:10px;background:var(--surface);padding:10px;font-size:14px;line-height:1.5;min-height:120px}
.padbtns{display:flex;gap:6px;flex-wrap:wrap}
#padToggle{display:none}

@media (max-width:900px){
  .main{grid-template-columns:minmax(0,1fr)}
  .pad{display:none}
  .app.padopen .main{grid-template-rows:minmax(0,1fr) 34%}
  .app.padopen .pad{display:grid;border-top:1px solid var(--line);padding-block:10px}
  #padToggle{display:inline-block}
  .row,.crow{grid-template-columns:4.2rem minmax(0,1fr);gap:8px;font-size:16px}
  .intro,.fbar,.cfoot{margin-left:calc(4.2rem + 8px)}
  #ta{font-size:16px}
}
@keyframes blink{50%{opacity:0}}
@keyframes ghost{0%{opacity:.9}100%{opacity:0}}
@keyframes pulse{50%{transform:scale(1.5)}}
@keyframes breathe{50%{opacity:.35}}
@keyframes pop{0%{opacity:0;transform:translate(-50%,4px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── сайт: вход, старт разговора, приватность ── */
.logo{font-weight:700;letter-spacing:-.01em}
.page{min-height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px 48px}
.page-in{max-width:880px;margin:0 auto;display:grid;gap:28px}
.hero h1{font-size:clamp(28px,5vw,40px);line-height:1.1;margin:0 0 10px;text-wrap:balance;letter-spacing:-.02em}
.hero p{margin:0;max-width:60ch;line-height:1.55;color:var(--muted);font-size:16px}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:760px){.split{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:12px}
.card h2{margin:0;font-size:16px}
.tabs{display:flex;gap:6px}
.field{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.field input{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--bg);color:var(--ink);font-size:15px}
.primary{border:0;border-radius:8px;padding:10px 14px;background:var(--c0);color:var(--surface);font-weight:600;font-size:15px}
.err{color:var(--hand);font-size:13px;min-height:1em;margin:0}
.facts{margin:0;padding-left:18px;display:grid;gap:6px;line-height:1.5}
.facts b{font-weight:600}
.small{font-size:13px;color:var(--muted);line-height:1.5}
.small a,.facts a{color:var(--c0)}
.linkbox{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linkbox code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.banner{font-size:13px;padding:8px 12px;border-radius:8px;background:var(--handbg);color:var(--hand);margin-top:10px;max-width:760px}
.prose{max-width:68ch;line-height:1.6;font-size:16px}
.prose h1{font-size:30px;letter-spacing:-.02em;margin:0 0 8px}
.prose h2{font-size:18px;margin:28px 0 8px}
.prose li{margin-bottom:6px}
.prose a{color:var(--c0)}
[hidden]{display:none!important}
.formgrid{display:grid;gap:12px}
a.logo{color:inherit;text-decoration:none}
.setbox code{font-size:11px;overflow-wrap:anywhere}