/* Рация: узкая колонка «трубки» — шапка канала, журнал, панель передачи снизу */
:root{
  --bg:#E7E9E2; --panel:#F6F7F2; --ink:#1C221E; --muted:#5E675F; --line:#CBD0C4;
  --accent:#B85A12; --accent-ink:#FFFFFF; --led:#2F8F4E; --mine:#E9DCCB; --theirs:#FFFFFF;
  --warn:#9B2C2C; --amber:#8A5A00;
  --f-display:"Oswald","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141815; --panel:#1C211D; --ink:#E6EAE3; --muted:#9AA39B; --line:#2E352F;
  --accent:#E8A33D; --accent-ink:#1A1405; --led:#5BD483; --mine:#3A3022; --theirs:#232924;
  --warn:#F08A8A; --amber:#E8C46A; color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:600px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-block:16px;gap:14px}
h1{font-family:var(--f-display);font-weight:600;font-size:30px;letter-spacing:.03em;text-transform:uppercase;margin:0}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 18px;font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.ghost.danger{color:var(--warn)}
.link{background:none;border:0;color:var(--accent);text-decoration:underline;padding:0;font-size:13px}
.small{font-size:13px;color:var(--muted)}
.err{color:var(--warn);font-size:14px}
.warn{color:var(--amber);font-size:13px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.tight{gap:8px}
.row>*{min-width:0}
.block{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
textarea,select,input[type=text],#code{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;max-width:100%}

#join{display:flex;flex-direction:column;gap:18px}
.dial,.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.dial>label{font-weight:600}
#code{font-family:var(--f-mono);font-size:24px;font-weight:700;letter-spacing:.04em;text-align:center;padding:14px;width:100%}
.modes{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.modes legend{font-weight:600;margin-bottom:6px;padding:0}
.modes label{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.how{display:grid;gap:10px;padding:0;margin:0;list-style:none;counter-reset:s}
.how li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.how li::before{counter-increment:s;content:counter(s);font-family:var(--f-mono);font-weight:700;color:var(--accent);
  border:1px solid var(--line);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:12px}

#chan{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chinfo{min-width:0}
.chcode{font-family:var(--f-mono);font-weight:700;font-size:18px;overflow-wrap:anywhere}
.status{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.led{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.led.on{background:var(--led);box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 25%,transparent)}
.led.half{background:var(--amber)}
.links{font-family:var(--f-mono);font-size:11px}
.sas{border:1px dashed var(--accent);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.sas-words{font-family:var(--f-mono);font-weight:700;font-size:20px;color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:8px;justify-content:center}
.checks label{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--ink)!important}
.packet{font-family:var(--f-mono);font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;
  overflow-wrap:anywhere;max-height:90px;overflow-y:auto;user-select:all}
#qr{align-self:center;background:#fff;padding:10px;border-radius:8px;max-width:100%;image-rendering:pixelated}

#log{flex:1;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.msg{max-width:85%;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.msg.me{align-self:flex-end;background:var(--mine);border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:var(--theirs);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys{align-self:center;color:var(--muted);font-size:13px;text-align:center;max-width:95%;padding:2px 8px}
.msg.sys.bad{color:var(--warn)}
.msg .t{overflow-wrap:anywhere}
.msg .orig{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.msg .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.msg .meta button{background:none;border:0;color:var(--accent);font:inherit;padding:0;text-decoration:underline}
.compose{display:flex;gap:8px;align-items:flex-end}
#text{flex:1;min-width:0;resize:none;background:var(--panel);padding:12px;max-height:140px}
.ptt{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--accent);background:var(--panel);display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.ptt svg{width:26px;height:26px;fill:var(--accent)}
.ptt.live{background:var(--accent)}
.ptt.live svg{fill:var(--accent-ink)}
.ptt[hidden]{display:none}
.hint{font-size:12px;color:var(--muted);flex:1}
.foot{justify-content:space-between}

.scanner{position:fixed;inset:0;background:#000;z-index:20;display:flex;flex-direction:column}
.scanner video{flex:1;width:100%;object-fit:cover;min-height:0}
.scan-ui{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#fff;
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}