/* JuliaMono — единственный моноширинный шрифт, где есть все символы Claude Code (⏺ ⎿ ✻ ⏵ …) и кириллица.
   Урезан и лежит у нас: в имени — хэш содержимого, поэтому кэшируется навсегда */
@font-face { font-family: "JuliaMono"; src: url(fonts/JuliaMono-cde8c795.woff2) format("woff2"); font-display: block; }

:root {
  --bg: #0e0e0e; --surface: #1f1f24; --raised: #2a2a30; --line: #1a1a1a;
  --text: #e0e0e0; --dim: #888; --accent: #d97757; --link: #6cb6ff;
  --busy: #e0a84e; --ask: #e5645a; --idle: #5bb98c;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; scrollbar-width: thin; scrollbar-color: #3a3a42 transparent; } /* прокрутка тонкая, в цвет темы */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, sans-serif; }
/* у корня — иначе свайп вбок по прокручиваемому (просмотр файла) браузер считает жестом «назад» и уходит со страницы */
html { overscroll-behavior: none; }
body { display: flex; flex-direction: column; overflow: hidden; touch-action: none; }
textarea, .list, .downloads { touch-action: pan-y; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* Клавиатура (main.js — overlaysContent) и панель клавиш ложатся поверх страницы, размер терминала от них не
   меняется — Claude ничего не перерисовывает. Высота терминала — экран минус поле ввода без панели; страница
   прижата к низу, и клавиатура с панелью выталкивают верх терминала за край экрана — CSS, без скрипта.
   Кнопки в углах, сообщения и окна остаются на месте. */
:root { --kb: env(keyboard-inset-height, 0px); --field: calc(3.75 * 16px + 8px); } /* --field — поле в три строки */
body { padding-bottom: var(--kb); justify-content: flex-end; } /* без transform — по раскладке Chrome ставит курсор за ручку */
#term { flex: none; height: calc(100dvh - var(--field) - 10px); /* 10px — отступы .inbar */
  position: relative; isolation: isolate; padding: 6px 4px 0 8px; touch-action: none; }
/* заставка вместо терминала, когда сессий нет: CLAW'D пикселями с тенью */
.logo { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--bg); color: var(--dim); text-align: center; padding: 16px; }
.logo svg { width: min(340px, 90%); height: auto; stroke: none; shape-rendering: crispEdges; }
/* слои поверх терминала — листы, просмотр файла, копирование: открыт тот, у кого open (dom.js) */
.layer { display: none; }
.layer.open { display: flex; }
/* режим копирования: сообщения из журнала сессии, выделяются и копируются средствами браузера */
.copymode { position: fixed; inset: 0; z-index: 9; background: var(--bg); flex-direction: column; }
.jsonl { flex: 1; overflow-y: auto; padding: 8px 8px 24px; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.jsonl .msg { border-radius: 12px; padding: 8px 10px 10px; background: var(--surface); }
.jsonl .msg.user { background: var(--raised); margin-left: 24px; }
.jsonl .head { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-size: 12px; font-weight: 600; margin-bottom: 4px; user-select: none; }
.jsonl .copy { width: 32px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); margin: -4px -6px -4px 0; }
.jsonl .copy:active { background: var(--bg); color: var(--text); }
.jsonl .copy svg { width: 16px; height: 16px; }
.jsonl .md { line-height: 1.45; }
.jsonl .md :is(p, ul, ol, pre, blockquote, table) { margin: .5em 0; }
.jsonl .md > :first-child { margin-top: 0; }
.jsonl .md > :last-child { margin-bottom: 0; }
.jsonl .md :is(code, pre) { background: var(--bg); }
.jsonl .md pre { position: relative; }
.jsonl pre > .copy { position: absolute; top: 2px; right: 2px; margin: 0; background: var(--bg); }
.jsonl .more { align-self: center; padding: 8px 14px; border-radius: 10px; background: var(--surface); color: var(--dim); }
.xterm .xterm-viewport { background: var(--bg) !important; overflow: hidden !important; }
.xterm .xterm-scrollable-element > .scrollbar, .xterm .xterm-scrollable-element > .shadow { display: none; } /* полоса и тень прокрутки мелькали бы на каждом подлистывании к низу */

/* панель ввода: поле-пилюля, справа внутри — отправка; над ним — панель клавиш */
.keys { display: flex; height: 0; overflow: auto hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: height .2s; interpolate-size: allow-keywords; box-shadow: inset 0 -1px #2e2e36; }
/* страницы клавиш — листаются свайпом вбок */
.keys .page { flex: 0 0 100%; padding: 0 2px; display: grid; grid-template-columns: repeat(6, 1fr); align-content: start; gap: 2px; scroll-snap-align: start; }
.keys.open { height: auto; padding: 2px 0; }
.keys button { height: 21px; border-radius: 6px; background: var(--raised); color: var(--text); font: 13px/1 'JuliaMono', monospace; }
.keys button.on { color: var(--accent); }
.keys button:active { background: var(--bg); }
/* ручка панели клавиш: свайп вверх — выдвинуть, вниз — убрать. Видна полоской, ловит касания с запасом под палец */
.grip { position: absolute; top: -18px; left: 50%; width: 140px; height: 36px; margin-left: -70px; z-index: 3; touch-action: none; }
.grip::before { content: ''; position: absolute; left: 52px; right: 52px; top: 16px; height: 4px; border-radius: 2px; background: var(--dim); opacity: .5; }
.inbar { position: relative; flex-shrink: 0; display: flex; align-items: flex-end; gap: 6px; padding: 6px 4px 4px; background: var(--bg); }
.pill { position: relative; flex: 1; min-width: 0; background: var(--surface); border-radius: 20px; overflow: hidden; }
/* поле — всегда ровно три строки, дальше прокрутка внутри: растущее поле меняло высоту терминала — Claude
   перерисовывал весь экран на каждую новую строку */
.pill textarea { width: 100%; display: block; background: none; color: var(--text); border: none; padding: 4px 48px 4px 10px; font-size: 16px; line-height: 1.25; height: var(--field); outline: none; resize: none; scrollbar-width: none; font-family: inherit; }
.pill textarea.cache-low::placeholder { color: var(--busy); } /* кэшу осталось 10 минут и меньше */
/* круглая кнопка: отправка, панели, просмотр файла; big — низ левой панели; toggle — выключенная серая */
.round { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; }
.round svg { width: 16px; height: 16px; stroke-width: 2.4; }
.round.big { width: 40px; height: 40px; }
.round.big svg { width: 20px; height: 20px; }
.round.toggle:not(.on) { background: var(--raised); color: var(--dim); }
.round:disabled { opacity: .35; }
.pill .field { position: relative; }
/* переключатель во всю высоту поля: сверху отправка, снизу файлы. Выбранное — на кружке-ползунке, другое
   полупрозрачное (input.js) */
.sw { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 32px; display: grid; grid-template-rows: 1fr 1fr; border-radius: 16px; background: var(--raised); touch-action: none; }
.sw::before { content: ''; position: absolute; inset: 0 0 50%; border-radius: 16px; background: var(--accent); transition: transform .15s; }
.sw.pick::before { transform: translateY(100%); }
.sw button { position: relative; display: grid; place-items: center; color: var(--dim); opacity: .4; transition: opacity .15s, color .15s; }
.sw:not(.pick) #go, .sw.pick #pick { color: #fff; opacity: 1; }
.sw svg { width: 16px; height: 16px; stroke-width: 2.4; }
.sw button:disabled { opacity: .2; }
#msg:placeholder-shown + .sw #go:not(.offline) svg { display: none; } /* пустое поле — отправка шлёт Esc (input.js) */
#msg:placeholder-shown + .sw #go:not(.offline)::after { content: 'Esc'; font-size: 12px; font-weight: 600; }
.pill::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: calc(var(--up) * 100%); background: var(--accent); }

/* Кнопки в верхних углах, почти прозрачные: режим копирования — везде, панели — на ПК с мышью (на телефоне свайп) */
.edge { position: fixed; top: 6px; z-index: 4; opacity: .15; transition: opacity .15s; }
.edge.copy { right: 6px; }
.edge.left, .edge.right { display: none; }
.waiting { position: absolute; right: 6px; bottom: calc(100% + 6px); z-index: 4; background: var(--ask); } /* над терминалом у правого края, отступы — как у .edge */
.compacted { background: var(--idle); } #waiting:not(.hidden) + .compacted { right: 44px; } /* сжатие закончилось — рядом с «ждут ответа» */
/* ПК с мышью: кнопки панелей и подсветка кнопок при наведении */
@media (hover: hover) and (pointer: fine) {
  .edge.left, .edge.right { display: grid; }
  .edge.copy { right: 44px; }
  .edge:hover { opacity: 1; }
  .item:hover, .line > :first-child:hover, .keys button:hover, .jsonl .copy:hover { background: var(--raised); }
  .ico:hover { color: var(--text); } .del:hover { color: var(--ask); }
  .item .kill:hover { background: var(--ask); color: #fff; } .item .reopen:hover { background: var(--accent); color: #fff; }
  .round:not(:disabled):hover, .actions button:hover, .stepper button:hover, .chips button:hover, .ask .keep:hover { filter: brightness(1.25); }
  .edge.left { left: 6px; } .edge.right { right: 6px; }
}
::selection { background: var(--accent); color: #fff; }
.shade { position: fixed; inset: 0; background: #0008; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.side { position: fixed; inset: 0 auto 0 0; width: min(300px, 82vw); background: var(--surface); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .2s; z-index: 6; display: flex; flex-direction: column; }
.side.right { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); transform: translateX(100%); }
body.menu .shade, body.project .shade { opacity: 1; pointer-events: auto; }
body.menu #menu, body.project #project { transform: none; }
body.dragging .side, body.dragging .shade, body.dragging .viewer { transition: none; }
.head { display: flex; align-items: center; }
.head h2 { flex: 1; }
#logout { padding: 8px 12px 2px; color: var(--dim); }
.side h2 { margin: 0; padding: 12px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
#curName { display: flex; align-items: center; gap: 6px; }
#curName .st { width: 14px; height: 14px; }
.list { flex: 1; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; } /* зазор: подсветка открытой и наведённой не сливаются */
.item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; line-height: 1.25; }
.item.cur { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); } /* как у выбранного аккаунта (.opt.sel) */
.item .grow { flex: 1; min-width: 0; }
.item .acts { display: flex; flex-direction: column; margin: -4px -4px -4px 0; } /* сверху — переоткрыть, снизу — завершить */
.item .acts i { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 13px; }
.item .kill { color: var(--ask); }
.item .reopen { color: var(--dim); }
.item .reopen:active { background: var(--bg); }
.item .reopen svg { width: 14px; height: 14px; stroke-width: 2.6; } /* стрелка во всю рамку, квадрат «стоп» — в половину: на глаз вровень с ним */
.item.new { color: var(--dim); }
.item.new svg { width: 16px; height: 16px; }
.item .kill:active { background: var(--bg); }
.item .kill svg { width: 20px; height: 20px; }
.item b { font-weight: 600; }
.item .pos { align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; place-items: center; margin: -4px 0; flex: none; } /* сверху номер, снизу статус — напротив кнопок .acts */
.item .num { font-style: normal; font-size: 12px; color: var(--dim); line-height: 1; }
.item .st { width: 16px; height: 16px; flex: none; }
.st.busy { color: var(--busy); animation: spin 1.2s linear infinite; } .st.asking { color: var(--ask); } .st.idle { color: var(--idle); } .st.compacting { color: var(--busy); }
@keyframes spin { to { transform: rotate(360deg); } }
.item em { font-style: normal; color: var(--dim); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.item small { display: block; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj { flex: 1; overflow-y: auto; padding: 0 4px 12px; touch-action: pan-y; }
.proj h2 { padding-left: 6px; }
.proj .empty { padding: 4px 6px; font-size: 13px; }
.chips { display: flex; gap: 6px; padding: 2px 4px 6px; overflow-x: auto; scrollbar-width: thin; touch-action: pan-x; }
.chips button { flex-shrink: 0; white-space: nowrap; padding: 6px 10px; border-radius: 14px; background: var(--raised); font-size: 13px; }
.chips button.missing { opacity: .45; }
.chips button.on { background: var(--accent); color: #fff; }
/* Строки: итог со снимка и изменившиеся файлы */
.lines .head { display: flex; align-items: center; gap: 10px; padding: 0 0 6px 6px; }
.lines .head > div { flex: 1; min-width: 0; }
.lines .head small { color: var(--dim); font-size: 12px; }
.lines .sum { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 14px; }
.lines .sum small { margin-left: auto; }
.lines .ratio { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--raised); }
.lines .ratio i:first-child { background: var(--idle); } .lines .ratio i:last-child { background: var(--ask); }
.lines .up { color: var(--idle); } .lines .down { color: var(--ask); }
/* строка файла в списках панели (fileRow): значок, имя, приписка; справа — копировать и удалить */
.line { display: flex; align-items: center; }
.line > :first-child { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; padding: 2px 2px 2px 6px; border-radius: 8px; text-align: left; font-size: 14px; }
.line > :first-child:active { background: var(--raised); }
.chips button:active { background: var(--bg); }
.line .n { flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; line-height: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* длинное имя — в две строки */
.line small { flex-shrink: 0; color: var(--dim); font-size: 11px; }
.line > :first-child svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--dim); }
.line > .dir svg { color: var(--busy); }
.line.new .n, .line.new > :first-child svg { color: var(--idle); }
.line.gone .n, .line.gone > :first-child svg { color: var(--ask); }
.sub { padding-left: 12px; } /* содержимое раскрытой папки */
.viewer { position: fixed; inset: 0; z-index: 9; background: var(--bg); flex-direction: column; }
/* закрытый просмотр не выпадает из отрисовки, а прячется: в нём живут свёрнутые (.docked) — страница .html
   с display: none при развороте рисовалась бы заново со вспышкой */
.viewer:not(.open) { display: flex; visibility: hidden; }
.viewer { transition: transform .2s; }
.viewer .body.docked { position: absolute; inset: 0; visibility: hidden; }
/* шапка экранов поверх терминала: просмотр файла, режим копирования; кнопки — там же, где угловые (.edge) */
.bar { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
#viewerStar.on svg { fill: currentColor; }
#find { flex: 1; min-width: 0; outline: none; }
#find::-webkit-search-cancel-button { display: none; } /* свой крестик — #findClear */
#find:placeholder-shown + #findClear { display: none; }
::highlight(find) { background: var(--accent); color: #fff; } /* найденное в журнале (copy.js) */
.bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.viewer .body { flex: 1; overflow: auto; padding: 12px 14px 32px; touch-action: pan-x pan-y; user-select: text; -webkit-user-select: text; }
.viewer pre.text { margin: 0; font: 12.5px/1.45 'JuliaMono', monospace; white-space: pre-wrap; word-break: break-word; }
.viewer .edit { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; resize: none; background: none; color: var(--text); font: 13px/1.45 'JuliaMono', monospace; }
.diff :is(ins, del) { display: block; text-decoration: none; } .diff ins { background: #2ea04333; } .diff del { background: #f8514933; }
.diff .hunk { color: var(--dim); }
.viewer img, .viewer video { max-width: 100%; }
.dock { position: fixed; right: 0; top: 30%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.dock button { writing-mode: vertical-rl; max-height: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 5px;
  font-size: 11px; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; }
.viewer .body:has(> .page) { padding: 0; } .viewer .page { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.viewer audio { width: 100%; }
.md { line-height: 1.55; word-break: break-word; }
.md h1, .md h2, .md h3 { margin: 1.2em 0 .5em; line-height: 1.25; }
.md h1 { font-size: 22px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; }
.md a { color: var(--link); }
.md code { font: 13px 'JuliaMono', monospace; background: var(--surface); padding: 1px 4px; border-radius: 4px; }
.md pre { background: var(--surface); padding: 10px; border-radius: 8px; overflow-x: auto; }
.md pre code { font-size: 12.5px; }
pre code.hljs { padding: 0; background: none; } /* подсветка (highlight.js) — на нашем фоне, без своих отступов */
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--raised); padding: 4px 8px; }
.md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--raised); color: var(--dim); }
.downloads { max-height: 40vh; overflow-y: auto; }
.del, .ico { width: 24px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); flex-shrink: 0; }
.del svg, .ico svg { width: 17px; height: 17px; }
.del:active, .ico:active { background: var(--raised); } .del:active { color: var(--ask); }
.empty { color: var(--dim); padding: 10px; }
.side footer { border-top: 1px solid var(--line); padding: 8px; display: flex; justify-content: space-around; }

.sheet { position: fixed; inset: 0; background: #000a; z-index: 8; align-items: center; justify-content: center; padding: 16px; touch-action: pan-y; }
.sheet-box { width: min(480px, 100%); max-height: calc((100dvh - var(--kb)) * .7); background: var(--surface); border-radius: 18px; padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } /* заголовок и кнопки стоят, листается середина */
.sheet h3 { margin: 0 4px 4px; font-size: 17px; }
.setting { display: flex; align-items: center; justify-content: space-between; padding: 4px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 40px; height: 40px; border-radius: 10px; background: var(--raised); font-size: 20px; }
#pairBtn, #idleBtn { min-width: 96px; padding: 10px 14px; border-radius: 10px; background: var(--raised); font-weight: 600; letter-spacing: .08em; }
#pairBtn.on, #idleBtn.on { background: var(--accent); color: #fff; }
.stepper b { min-width: 34px; text-align: center; font-weight: 600; }
.sheet .label { margin: 8px 4px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.opts { display: flex; flex-direction: column; gap: 2px; }
.opt { text-align: left; padding: 10px 12px; border-radius: 10px; }
.opt small { display: block; color: var(--dim); font-size: 12px; }
.opt.sel { background: var(--raised); box-shadow: inset 3px 0 0 var(--accent); }
.opt.off { opacity: .45; }
.side .accounts { padding: 0 8px 8px; }
/* сервер: диск, память, процессор (accounts.js) — свободно и полоска занятого; красное — пора вмешаться */
.sys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px 10px; }
.sys small { display: block; font-size: 11px; color: var(--dim); }
.sys b { display: block; font-size: 13px; font-weight: 600; margin: 1px 0 4px; }
.sys i { display: block; height: 3px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.sys i::after { content: ''; display: block; height: 100%; width: var(--used); background: var(--dim); }
.sys .low b { color: var(--ask); }
.sys .low i::after { background: var(--ask); }
#newDir, #find { padding: 10px 12px; border-radius: 10px; border: 1px solid #2e2e36; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.retry { padding: 10px; border-radius: 10px; margin: 0 4px; }
.hint { padding: 0 4px; font-size: 12px; color: var(--dim); }
.check { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.actions { display: flex; gap: 8px; margin-top: 6px; }
.actions button { flex: 1; padding: 12px; border-radius: 12px; font-weight: 600; }
.primary { background: var(--accent); color: #fff; }
/* запрос Claude — модалка поверх всего, по центру видимой части (над клавиатурой): в раскладке он отнимал место
   у терминала — перерисовка экрана при каждом появлении и закрытии. Затемнение вокруг — тенью; тап мимо её
   не закрывает — только ответ */
.ask { position: fixed; z-index: 7; left: 50%; top: calc((100dvh - var(--kb)) / 2); transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc((100dvh - var(--kb)) * .7); padding: 10px 12px 10px 9px; border-radius: 14px; background: var(--surface); border-left: 3px solid var(--ask); box-shadow: 0 0 0 100vmax #000a; overflow-y: auto; touch-action: pan-y; }
.ask h4 { margin: 0 0 6px; font-size: 14px; }
.ask pre { margin: 0 0 6px; padding: 8px; border-radius: 8px; background: var(--bg); font: 12.5px/1.35 'JuliaMono', monospace; white-space: pre-wrap; word-break: break-all; }
.ask > small { display: block; color: var(--dim); margin-bottom: 6px; }
.ask .opts { margin-bottom: 8px; }
.ask .keep { display: block; width: 100%; margin-bottom: 6px; padding: 8px 12px; border-radius: 12px; background: var(--raised); text-align: left; font-size: 13px; word-break: break-all; }
.ask .keep small { display: block; color: var(--dim); }
.ask .opt { background: var(--raised); }
.ask .other { width: 100%; margin: -2px 0 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--raised); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.ask .actions { position: sticky; bottom: -10px; margin: 2px -12px -10px -9px; padding: 6px 12px 10px 9px; background: var(--surface); } /* кнопки видны без прокрутки */
.ghost { background: var(--raised); }
/* уведомления — под шапкой экранов (.bar), по ширине текста, не шире 480px */
.notes { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 10; pointer-events: none; }
.notes > * { max-width: 480px; padding: 10px 14px; border-radius: 12px; font-size: 14px; text-align: center; }
.toast { background: var(--raised); border: 1px solid var(--line); opacity: 0; transition: opacity .2s; }
.toast.show { opacity: 1; }
.note { background: var(--raised); border: 1px solid var(--accent); pointer-events: auto; }

#login { margin: auto; width: min(320px, 88vw); display: flex; flex-direction: column; gap: 10px; }
#login h2 { margin: 0 0 6px; text-align: center; }
#login input { padding: 12px; text-align: center; letter-spacing: .1em; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
#login button { padding: 12px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
.hidden { display: none !important; }
/* ручки выделения: острый угол — у края выделенного текста, ::before — площадка под палец */
.handle { position: absolute; z-index: 12; display: none; width: 20px; height: 20px; background: var(--accent); border-radius: 0 50% 50%; touch-action: none; }
.handle.start { border-radius: 50% 0 50% 50%; transform: translateX(-100%); }
.handle::before { content: ''; position: absolute; inset: -4px -12px -16px; }