/* Squadra Design Kit · компоненты, тема «Десант».
   Каждый компонент описан классами и не зависит от экрана. Состав и правила: docs/design-kit.md,
   живой справочник: /ds/index.html. */

/* ---- Field ---- */
input, select { font: inherit; height: var(--control-h); padding: 0 var(--space-3); border-radius: 0; border: 0; border-bottom: 2px solid var(--field-line); background: var(--bg); color: var(--text); width: 100%; min-width: 0; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
input.mono { font-family: var(--font-mono); font-size: 14px; }
input::placeholder { color: var(--placeholder); }
input:focus, select:focus { background-color: var(--raised); border-bottom-color: var(--signal); }
input[readonly] { background: var(--bg); border-bottom-style: dashed; color: var(--muted); }
input[aria-invalid=true] { border-bottom-color: var(--danger); }
input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font: 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--control-h); cursor: pointer; }
.check-text { display: flex; flex-direction: column; }
.check-title { font-weight: 500; }

/* ---- Button ---- */
button { position: relative; overflow: hidden; font: 500 14px var(--font-display); letter-spacing: .04em; text-transform: uppercase; height: var(--control-h); padding: 0 18px; border-radius: 0; border: 0; background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; transition: background-color .18s, color .18s, transform .12s; }
button.plain { background: var(--raised); color: var(--text); }   /* вторичная кнопка: вид по умолчанию, класс фиксирует намерение */
button:hover { background: var(--line); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: default; color: var(--placeholder); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
button.primary, .dock-btn, .send { box-shadow: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
button.primary { background: var(--signal); color: var(--on-signal); font-weight: 700; }
button.primary:hover { background: var(--signal-hover); }
button.primary:focus-visible, .dock-btn:focus-visible, .send:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
button.big { height: var(--control-h-big); font-size: 16px; letter-spacing: .06em; }
button.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
button.danger:hover { background: var(--danger-bg); }
button.danger-fill { background: var(--danger); color: var(--on-danger); font-weight: 700; box-shadow: none; }
button.danger-fill:hover { background: var(--danger-text); }
button.primary::after, button.plain::after, .dock-btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent); transform: translateX(-120%); pointer-events: none; }
button.primary:hover::after, button.plain:hover::after, .dock-btn:hover::after { animation: beam .6s ease-out; }
button.link { height: auto; padding: 0; box-shadow: none; background: transparent; color: var(--signal-hover); font: 400 14px var(--font-ui); letter-spacing: 0; text-transform: none; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { background: transparent; color: var(--text); }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.logo { fill: var(--signal); flex: none; }

/* ---- Notice ---- */
.error:empty, .warning:empty, .ok:empty { display: none; }
.error { padding: var(--space-3) 14px; background: var(--danger-bg); color: var(--danger-text); animation: nudge .36s var(--ease) both; }
.warning { padding: var(--space-3) 14px; background: var(--warning-bg); color: var(--warning-text); animation: rise var(--dur-base) var(--ease) both; }
.warning::before, .confirm::before, .invite-result::before, .modal-card::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(115deg, var(--signal) 0 14px, transparent 14px 28px) 0 0 / 56px 6px; animation: stripes 2.4s linear infinite; }
.warning::before { margin: calc(-1 * var(--space-3)) -14px var(--space-3); }
.warning button { height: 32px; margin-left: var(--space-3); }
.ok { color: var(--ok); }
.ok:not(:empty) { padding: var(--space-3) 14px; background: var(--ok-bg); animation: nudge .36s var(--ease) both; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 2px; padding: 3px; background: var(--panel); }
.tab { height: 36px; padding: 0 14px; background: transparent; color: var(--muted); box-shadow: none; font-size: 13px; letter-spacing: .05em; }
.tab:hover { background: var(--raised); color: var(--text); }
.tab[aria-pressed=true] { background: var(--raised); color: var(--signal-hover); box-shadow: inset 0 -2px 0 var(--signal); }

/* ---- Avatar: значок с первой буквой ---- */
.avatar { display: grid; place-items: center; flex: none; background: var(--raised); color: var(--text); font: 700 15px var(--font-display); transition: background-color .18s, color .18s; }
.avatar-s { width: 34px; height: 34px; }
.avatar-m { width: 64px; height: 64px; font-size: 26px; }
.avatar-l { width: 96px; height: 96px; font-size: 38px; }
.avatar.signal { background: var(--signal); color: var(--on-signal); }
.avatar.is-speaking { animation: halo 1.2s ease-out infinite; }
.avatar.is-ringing { position: relative; }
.avatar.is-ringing::before, .avatar.is-ringing::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--signal); opacity: 0; pointer-events: none; animation: ring-out 1.8s ease-out infinite; }
.avatar.is-ringing::after { animation-delay: .9s; }

/* ---- Логотип и радар ---- */
.brand, .wordmark { display: flex; align-items: center; gap: var(--space-3); font: 900 17px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.wordmark { height: var(--control-h); padding: 0 var(--space-4); box-shadow: none; background: transparent; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; }
.wordmark:hover { background: transparent; }
.kicker { font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-hover); }
.radar-field { position: relative; min-width: 0; min-height: 360px; overflow: hidden; display: grid; place-items: center; padding: var(--space-8); background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg); }
.radar { position: relative; width: min(66%, 440px); aspect-ratio: 1; animation: boot .6s var(--ease) both; }
.radar-ticks { position: absolute; inset: -16px; border: 1px dashed var(--field-line); border-radius: 50%; animation: spin-back 40s linear infinite; }
.radar-corner { position: absolute; width: 22px; height: 22px; border: 0 solid var(--signal); }
.radar-corner.tl { left: -30px; top: -30px; border-width: 2px 0 0 2px; --lx: -8px; --ly: -8px; }
.radar-corner.tr { right: -30px; top: -30px; border-width: 2px 2px 0 0; --lx: 8px; --ly: -8px; }
.radar-corner.bl { left: -30px; bottom: -30px; border-width: 0 0 2px 2px; --lx: -8px; --ly: 8px; }
.radar-corner.br { right: -30px; bottom: -30px; border-width: 0 2px 2px 0; --lx: 8px; --ly: 8px; }
.radar-corner { animation: lock 4s ease-in-out infinite; }
.radar-dish { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--field-line); background: repeating-radial-gradient(circle, transparent 0 15.5%, var(--line) 15.5% 15.9%); }
.radar-dish::before, .radar-dish::after { content: ""; position: absolute; background: var(--line); }
.radar-dish::before { top: 50%; left: 0; right: 0; height: 1px; }
.radar-dish::after { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar-ping { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 1px solid var(--signal); border-radius: 50%; animation: ping 5s ease-out infinite; }
.radar-ping.late { animation-delay: -2.5s; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 106, 43, 0) 0 72%, rgba(255, 106, 43, .42) 100%); animation: spin 5s linear infinite; }
.radar-blip { position: absolute; width: 10px; height: 10px; background: var(--signal); animation: blip 5s linear infinite; }
.radar-lock { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); transition: left .5s var(--ease), top .5s var(--ease); }
.radar-lock i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--text); }
.radar-lock i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.radar-lock i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.radar-lock i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.radar-lock i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }

/* ---- NavItem ---- */
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control-h); padding: 0 var(--space-4); box-shadow: none; background: transparent; text-align: left; transition: background-color var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast) var(--ease); }
.nav-item:hover { background: var(--raised); padding-left: 22px; }
.nav-item[aria-current=page], .nav-item[aria-current=page]:hover { background: var(--signal); color: var(--on-signal); font-weight: 700; padding-left: var(--space-4); }
.nav-item .count { margin-left: auto; font: 13px var(--font-mono); letter-spacing: 0; color: var(--muted); }
.nav-item.here .count { color: var(--signal-hover); }
.nav-item[aria-current=page] .count { color: var(--on-signal); }
.nav-item .room-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:has(.pdot) { font: 500 14px var(--font-ui); letter-spacing: 0; text-transform: none; }
.count.bump { display: inline-block; animation: bump .4s ease-out; }
.pdot { flex: none; width: 8px; height: 8px; border: 1px solid var(--field-line); }
.pdot.online { background: var(--ok); border-color: var(--ok); animation: live 2.4s ease-in-out infinite; }
.nav-item .unread { margin-left: auto; min-width: 18px; padding: 0 4px; background: var(--signal); color: var(--on-signal); font: 500 12px/18px var(--font-mono); text-align: center; }
.nav-item[aria-current=page] .unread { background: var(--on-signal); color: var(--signal); }
.nav-item .unread[hidden] { display: none; }

/* ---- Level: проверка микрофона ---- */
.mic-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.mic-test button { flex: none; }
.mic-meter { flex: 1 1 200px; min-width: 0; display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.mic-meter i { flex: 1 1 0; min-width: 0; height: 4px; background: var(--decor); transition: height .08s linear, background-color .08s linear; }
.mic-meter i.on { height: 100%; background: var(--signal); }

/* ---- Table ---- */
.table-box { overflow-x: auto; background: var(--panel); animation: rise var(--dur-base) var(--ease) both; }
table { width: 100%; min-width: 620px; border-collapse: collapse; }
th { padding: 10px 14px; font: 400 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--muted); }
td { padding: 6px 14px; height: 56px; border-top: 1px solid var(--line); transition: color .25s; overflow-wrap: anywhere; }
tbody tr { transition: background-color var(--dur-fast); }
tbody tr:hover { background: var(--raised); }
td.td-name { font-weight: 500; }
td.td-muted { color: var(--muted); }
td.td-mono { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
td.td-action { text-align: right; white-space: nowrap; }
td.st-ok, td.st-bad, td.st-off { font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
td.st-ok { color: var(--ok); }
td.st-bad { color: var(--danger); }
td.st-off { color: var(--muted); }
tr.flash td { animation: flash 1.6s ease-out; }

/* ---- Confirm, Invite result ---- */
.confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: 0 var(--space-4) var(--space-4); background: var(--warning-bg); animation: nudge .36s var(--ease) both; }
.confirm::before { flex: 0 0 calc(100% + 2 * var(--space-4)); margin: 0 calc(-1 * var(--space-4)) var(--space-1); }
.confirm p { flex: 1 1 320px; color: var(--warning-text); text-wrap: pretty; }
.invite-result { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--space-4) var(--space-4); background: var(--warning-bg); animation: rise var(--dur-base) var(--ease) both; }
.invite-result::before { margin: 0 calc(-1 * var(--space-4)) var(--space-1); }
.invite-result-title { font-weight: 600; color: var(--warning-text); }
.invite-result-note { font-size: 13px; color: var(--warning-text); }
.invite-result .grow { flex: 1 1 320px; background: var(--bg); color: var(--text); }

/* ---- Status ---- */
.room-status { display: flex; align-items: center; gap: var(--space-2); font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.room-status .dot { width: 8px; height: 8px; background: currentColor; }
.room-status[data-state=ok] { color: var(--ok); }
.room-status[data-state=ok] .dot, .room-status[data-state=listener] .dot { animation: live 2.4s ease-in-out infinite; }
.room-status[data-state=reconnecting], .room-status[data-state=connecting] { color: var(--warning-text); }
.room-status[data-state=reconnecting] .dot, .room-status[data-state=connecting] .dot { animation: live .7s ease-in-out infinite; }
.room-status[data-state=lost] { color: var(--danger); }

/* ---- Прицельные уголки и бегущий луч: общая подсветка карточек ---- */
.person, .lobby-room { position: relative; overflow: hidden; }
.person::before, .lobby-room::before { content: ""; position: absolute; inset: 7px; opacity: 0; pointer-events: none; background: linear-gradient(var(--signal), var(--signal)) 0 0 / 9px 2px, linear-gradient(var(--signal), var(--signal)) 0 0 / 2px 9px, linear-gradient(var(--signal), var(--signal)) 100% 0 / 9px 2px, linear-gradient(var(--signal), var(--signal)) 100% 0 / 2px 9px, linear-gradient(var(--signal), var(--signal)) 0 100% / 9px 2px, linear-gradient(var(--signal), var(--signal)) 0 100% / 2px 9px, linear-gradient(var(--signal), var(--signal)) 100% 100% / 9px 2px, linear-gradient(var(--signal), var(--signal)) 100% 100% / 2px 9px; background-repeat: no-repeat; transition: opacity .14s, inset .22s var(--ease); }
.person.speaking::before, .lobby-room.busy::before, .lobby-room:hover::before { opacity: 1; inset: 0; }
.person.speaking::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 32%; background: linear-gradient(90deg, transparent, rgba(255, 106, 43, .16), transparent); animation: beam 1.5s linear infinite; pointer-events: none; }

/* ---- Participant ---- */
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 56px; padding: var(--space-2) var(--space-3); background-color: var(--panel); animation: deploy .55s var(--ease) both; transition: background-color .2s; min-width: 0; }
.person.speaking { background-color: var(--raised) !important; }
.person-top { display: contents; }
.person .avatar { width: 34px; height: 34px; }
.person.speaking .avatar { background: var(--signal); color: var(--on-signal); animation: halo 1.2s ease-out infinite; }
.person.muted .avatar { color: var(--muted); }
.meter { display: none; align-items: flex-end; gap: 2px; height: 20px; order: 2; flex: none; }
.meter i { display: block; width: 3px; height: 100%; background: var(--signal); transform-origin: bottom; animation: level 1s ease-in-out infinite; }
.meter i:nth-child(2) { animation-duration: .75s; animation-delay: -.17s; }
.meter i:nth-child(3) { animation-duration: 1.25s; animation-delay: -.34s; }
.meter i:nth-child(4) { animation-duration: .9s; animation-delay: -.51s; }
.person.speaking .meter { display: flex; animation: fade .2s both; }
.person-mic { display: none; order: 2; color: var(--muted); }
.person.muted:not(.speaking) .person-mic { display: block; }
.person-text { order: 1; flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.person-name { font: 500 15px var(--font-display); letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-status { font: 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.speaking .person-status { color: var(--signal-hover); }

/* ---- Signal: качество связи участника, 0–3 деления; состояние дублируется title и aria-label ---- */
.signal { order: 2; flex: none; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.signal[hidden] { display: none; }
.signal i { display: block; width: 3px; background: var(--decor); }
.signal i:nth-child(1) { height: 5px; }
.signal i:nth-child(2) { height: 9px; }
.signal i:nth-child(3) { height: 14px; }
.signal[data-level="3"] i, .signal[data-level="2"] i:nth-child(-n+2) { background: var(--ok); }
.signal[data-level="1"] i:nth-child(1) { background: var(--warning-text); }
.signal[data-level="0"] i { background: var(--danger); }

/* ---- Person tools: громкость и «заглушить у себя» (только для собеседников) ---- */
.person-tool { order: 3; flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; background: transparent; border-color: transparent; color: var(--muted); }
.person-tool:hover, .person.open .person-tool { background: var(--raised); color: var(--text); }
.person-controls { order: 4; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.person-controls[hidden] { display: none; }
.person-controls label { flex: 1 1 160px; display: flex; align-items: center; gap: var(--space-3); min-width: 0; font: 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.person-controls .vol-value { flex: none; width: 4ch; text-align: right; color: var(--text); }
.person-controls button { height: 32px; }
.person.hushed .person-name { text-decoration: line-through; text-decoration-color: var(--muted); }
input[type=range] { flex: 1 1 auto; min-width: 0; height: 20px; padding: 0; border: 0; background: transparent; accent-color: var(--signal); cursor: pointer; }
input[type=range]:disabled { cursor: default; opacity: .5; }

/* ---- Dock ---- */
.dock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dock-btn { display: flex; align-items: center; gap: var(--space-2); background: var(--signal); color: var(--on-signal); }
.dock-btn:hover { background: var(--signal-hover); }
.dock-btn.muted { background: var(--raised); color: var(--text); }
.dock-btn.muted:hover { background: var(--line); }
.dock-btn svg { animation: pop .2s var(--ease) both; }

/* ---- Message ---- */
.messages { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: 14px; }
.chat-empty:not([hidden]) ~ .messages { display: none; }
.chat-empty { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-6); animation: rise var(--dur-slow) var(--ease) both; }
.idle { display: flex; align-items: flex-end; gap: var(--space-1); height: 32px; margin-bottom: var(--space-2); }
.idle span { width: 5px; height: 100%; background: var(--decor); transform-origin: bottom; animation: level 2.6s ease-in-out infinite; }
.idle span:nth-child(2) { animation-duration: 3.1s; }
.idle span:nth-child(3) { animation-duration: 2.2s; }
.idle span:nth-child(4) { animation-duration: 3.4s; }
.idle .on { background: var(--signal); }
.msg { display: flex; gap: var(--space-3); min-width: 0; padding: 2px 6px; margin: -2px -6px; animation: rise .28s var(--ease) both, msg-flash 1.2s ease-out both; }
.msg .avatar { display: none; }
.msg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-meta { display: flex; align-items: baseline; gap: var(--space-2); }
.msg-who { font: 700 14px var(--font-display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.msg.own .msg-who { color: var(--signal-hover); }
.msg-time { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.msg-text { overflow-wrap: anywhere; white-space: pre-wrap; text-wrap: pretty; }
.msg-text.undecrypted { color: var(--muted); font-style: italic; }
.system { font: 12px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); animation: rise .28s var(--ease) both; }
.date-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.date-divider::before, .date-divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }

/* ---- Composer ---- */
.composer { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); }
.composer input { flex: 1 1 auto; }
.send { flex: none; width: var(--control-h); padding: 0; display: grid; place-items: center; background: var(--signal); color: var(--on-signal); }
.send:hover { background: var(--signal-hover); }

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-6); background: var(--scrim); animation: fade .2s both; }
.modal-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: min(100%, 360px); padding: 40px var(--space-6) var(--space-6); background: var(--panel); box-shadow: var(--shadow-pop); text-align: center; animation: boot .3s var(--ease) both; }
.modal-card::before { position: absolute; left: 0; right: 0; top: 0; }
.modal-card .avatar { --ring-scale: 1.55; margin-bottom: var(--space-2); }
.modal-card .row { width: 100%; flex-wrap: nowrap; margin-top: var(--space-2); }
.modal-card .row > button { flex: 1 1 0; min-width: 0; padding: 0 var(--space-2); }

/* ---- Call card: звонок 1 на 1. data-state: ringing → connecting → active ---- */
.call-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: min(100%, 420px); text-align: center; animation: rise var(--dur-base) var(--ease) both; }
.call-card .avatar { --ring-scale: 1.5; margin-bottom: var(--space-4); transition: opacity var(--dur-base); }
.call-card h1 { font-size: 34px; overflow-wrap: anywhere; }
.call-status { font: 500 14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.call-card[data-state=ringing] .call-status { color: var(--warning-text); }
.call-card[data-state=connecting] .avatar { opacity: .8; }
.call-card[data-state=active] .call-status { color: var(--ok); }
.call-controls { justify-content: center; margin-top: var(--space-4); }
.call-controls button[hidden] { display: none; }

/* ---- Callout ---- */
.callout { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); background: var(--raised); }
.callout-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; background: var(--bg); color: var(--signal); }
.callout[data-kind=ok] .callout-mark { color: var(--ok); }
.callout[data-kind=danger] .callout-mark { color: var(--danger); }
.callout-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.callout-title { font: 700 15px var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.callout-text { color: var(--muted); text-wrap: pretty; }

/* ---- Toast ---- */
.toasts { position: fixed; z-index: var(--z-toast); right: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--raised); box-shadow: inset 0 0 0 1px var(--decor), var(--shadow-pop); animation: toast-in var(--dur-base) var(--ease) both; }
.toast.leaving { animation: toast-out .2s var(--ease) forwards; }
.toast-dot { flex: none; width: 8px; height: 8px; margin-top: 9px; background: var(--signal); }
.toast[data-kind=ok] .toast-dot { background: var(--ok); }
.toast[data-kind=danger] .toast-dot { background: var(--danger); }
.toast[data-kind=warning] .toast-dot { background: var(--warning-text); }
.toast-text { flex: 1 1 auto; min-width: 0; padding-top: 3px; text-wrap: pretty; overflow-wrap: anywhere; }
.toast-close { flex: none; width: 28px; height: 28px; padding: 0; box-shadow: none; background: transparent; color: var(--muted); font: 18px/1 var(--font-ui); letter-spacing: 0; text-transform: none; }
.toast-close:hover { background: var(--line); color: var(--text); }
@media (max-width: 860px) { .toasts { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); width: auto; } }