:root{ --bg:#0f1115; --card:#171a21; --card2:#1e222b; --line:#262b36; --fg:#e8ecf2; --dim:#8b93a3; --accent:#3b9dff; --ok:#3ddc84; --warn:#ffb454; --bad:#ff5d5d; --q:#c78bff; --draft:#63b3ff; --shell:#6b7280; --quota-100:var(--fg); --radius:14px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --term-fs:11px; /* база терминала; на десктопе крупнее — см. медиа */ /* Безопасные поля. В обычном окне их даёт браузер (env), в полноэкранном Mini App — сам Telegram: сверху ложатся его кнопки «свернуть/закрыть», и под ними нельзя рисовать. Значения обновляет JS по contentSafeArea. */ --sa-top:env(safe-area-inset-top); --sa-bottom:env(safe-area-inset-bottom); /* Полоса контента: одна ширина и один боковой отступ для шапки и карточек. */ --page:780px; --pagepad:12px; --nav-h:56px; } /* Native layout standalone APK уже отодвигает весь WebView от status bar, выреза и navigation bar через WindowInsets. Повторный CSS safe-area давал двойной верхний отступ; Telegram продолжает использовать env/свои inset. */ html.android-app{--sa-top:0px;--sa-bottom:0px} body.light{ --bg:#f2f4f7; --card:#ffffff; --card2:#eef1f6; --line:#dfe4ec; --fg:#111827; --dim:#6b7280; --quota-100:#000000; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0;height:100%} body{ background:var(--bg); color:var(--fg); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; padding-bottom:0; overscroll-behavior-y:none; } a{color:var(--accent)} /* Ширина полосы контента одна на шапку и карточки: раньше на широком экране (фулскрин Telegram Desktop) .wrap растягивался до 1500, а header оставался на 1180 — заголовок и «live» уезжали от края карточек. */ .wrap{max-width:var(--page);margin:0 auto;padding:10px var(--pagepad) 0} /* высота нижней панели + запас: последняя карточка не должна прятаться под ней */ .navspacer{height:calc(84px + var(--sa-bottom));flex:none} .hidden{display:none!important} /* Pull-to-refresh свой, а не браузерный: Telegram WebView кэширует обычный reload, а его системный вертикальный свайп закрывает Mini App. */ #pull-refresh{ position:fixed;left:50%;top:calc(8px + var(--sa-top));z-index:65; min-width:156px;padding:7px 12px;border:1px solid var(--line);border-radius:18px; background:var(--card2);color:var(--dim);box-shadow:0 6px 22px #0005; display:flex;align-items:center;justify-content:center;gap:7px; font-size:12px;line-height:1;pointer-events:none;opacity:0; transform:translate(-50%,-48px);transition:transform .16s ease,opacity .16s ease; overflow:hidden; } #pull-refresh.show{opacity:1;transform:translate(-50%,var(--pull-y,0px))} #pull-refresh.armed{color:var(--fg);border-color:var(--accent)} #pull-refresh .pull-ic{font-size:17px;line-height:1;transform:rotate(var(--pull-r,0deg))} #pull-refresh.holding::after{ content:"";position:absolute;left:0;bottom:0;height:2px;background:var(--accent); animation:pullHold .7s linear forwards; } #pull-refresh.reloading .pull-ic{animation:pullSpin .7s linear infinite} @keyframes pullHold{from{width:0}to{width:100%}} @keyframes pullSpin{to{transform:rotate(360deg)}} /* Гостевой режим: у гостя нет Помощника, экрана ПК и выбора стенда — вкладки не «отключены», а убраны, чтобы не мозолили глаза кнопками, которые всё равно ответят «нельзя». */ body.guest nav [data-tab="assist2"], body.guest nav [data-tab="vnc"], body.guest #limits, body.guest #host, body.guest #n-mode, body.guest #n-model, body.guest #n-effort-wrap, body.guest #n-context-wrap, body.guest #n-attach-wrap, body.guest #n-ops, body.guest label[for], body.guest #n-key{display:none!important} body.guest .wrap{padding-top:4px} /* Вкладка VNC — в css/vnc.css (подключён в ) */ /* шапка */ header{ position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 72%,transparent); padding:calc(8px + var(--sa-top)) var(--pagepad) 6px;display:flex;align-items:center;gap:10px; max-width:var(--page);margin:0 auto;width:100%;box-sizing:border-box; } header h1{font-size:16px;margin:0;font-weight:650;letter-spacing:.2px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} header h1 small{color:var(--dim);font-weight:400;font-size:12px;margin-left:6px} .live{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dim)} /* Переключатели вида приложения: режима окна Telegram и темы. */ #dispbtn,#themebtn,#homebtn,#settingsbtn{ display:flex;align-items:center;gap:4px;background:var(--card2);color:var(--dim); border:1px solid var(--line);border-radius:8px;padding:4px 7px;font-size:11px; line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent; } #dispbtn:active,#themebtn:active,#homebtn:active,#settingsbtn:active{background:var(--line)} #dispbtn b,#themebtn b{font-weight:600;font-size:12px} .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)} .dot.on{background:var(--ok);box-shadow:0 0 8px var(--ok)} .dot.poll{background:var(--warn)} .dot.off{background:var(--bad)} /* плашка резервного узла */ .fallback-banner{ max-width:var(--page);margin:2px auto 6px;padding:8px 12px; background:rgba(255,180,84,0.14);border:1px solid var(--warn);border-radius:10px; display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fg); box-sizing:border-box; } .fallback-banner.recovered{background:rgba(61,220,132,0.14);border-color:var(--ok)} .fallback-warn-ic{width:20px;height:20px;color:var(--warn);flex:none} .fallback-banner.recovered .fallback-warn-ic{color:var(--ok)} .fallback-text{flex:1;min-width:0;line-height:1.35} .fallback-text code{font-family:var(--mono);font-size:12px;background:var(--card2);padding:1px 5px;border-radius:4px} .fallback-check-btn{ background:var(--card2);color:var(--dim);border:1px solid var(--line);border-radius:7px; padding:4px 9px;font-size:11px;cursor:pointer;flex:none;white-space:nowrap; } .fallback-check-btn:active,.fallback-check-btn:hover{color:var(--fg);border-color:var(--accent)} /* Лимиты Claude и Codex живут в общих плашках 5h/7d: окна одни и те же, а процент и время сброса у каждой подписки свои. */ .limits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:2px 0 8px} .lim{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:5px 7px} .lim .t{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:3px;min-width:0} .lim .t span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lim .v{font-size:16px;font-weight:650;line-height:1} .limrow+.limrow{border-top:1px solid var(--line);margin-top:3px;padding-top:3px} .limmeta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1px 6px;font-size:10px;color:var(--dim)} .limmeta b{font-size:14px;line-height:1;color:var(--fg);font-weight:650} .limname{grid-column:1;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)} .limval{grid-column:2;grid-row:1;justify-self:end;text-align:right;white-space:nowrap;display:inline-flex;align-items:baseline} .limval.dual b{font-size:12px} .limsep{color:var(--dim);margin:0 2px;font-weight:400;opacity:.7} .limmeta .reset{grid-column:1 / -1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.2;color:var(--dim)} .limmeta .reset svg{vertical-align:-1px;margin-right:2px} .limmeta .reset:empty{display:none} .limrow.compact .limmeta{grid-template-columns:minmax(0,1fr) auto;gap:1px 6px;align-items:baseline} .limrow.compact .limmeta b{font-size:14px} /* вместо полоски: у счёта нет «потолка», от которого её считать */ .lim .sub{font-size:10px;color:var(--dim);margin-top:5px;line-height:1.2} .money-compact{display:flex;flex-direction:column;justify-content:center;gap:3px} .money-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;line-height:1.25} .money-row b{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} .peak{font-size:11px;line-height:1} .money-row[data-spend]{cursor:pointer} .system-compact > .money-compact{border-top:1px solid var(--line);padding-top:3px} .system-compact > .money-compact:first-child{border-top:none;padding-top:0} .system-compact > .system-server:first-child{border-top:none;padding-top:0} .local-model-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;min-width:0;margin-top:1px!important} .local-model-label{white-space:nowrap;line-height:22px} .local-model-list{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:3px} .local-model-list b{min-width:0;line-height:1.25;white-space:normal;overflow-wrap:anywhere} .system-compact{display:flex;flex-direction:column;gap:3px} .system-memory{font-size:9px;color:var(--dim)} .system-server{border-top:1px solid var(--line);padding-top:3px} .system-server-head,.system-disk{display:flex;justify-content:space-between;gap:7px;line-height:1.25} .system-server-head{font-size:10px;align-items:baseline} .system-server-title{display:inline-flex;align-items:center;gap:5px;min-width:0} .server-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0;vertical-align:middle} .server-status-dot.online{background:var(--ok)} .server-status-dot.offline{background:var(--bad);animation:server-dot-blink 1s ease-in-out infinite} @keyframes server-dot-blink{0%,100%{opacity:1}50%{opacity:.18}} .system-server-head > span,.system-server-title > span{color:var(--warn);white-space:nowrap} .system-disk{font-size:9px;color:var(--dim);align-items:baseline} .system-disk b{font-size:10px;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap} .system-memory.bad,.system-disk.bad,.system-disk.bad b{color:var(--bad)} .system-server.stale{opacity:.72} .system-models{display:flex;flex-direction:column;gap:1px;margin-top:2px} .system-model{display:flex;justify-content:space-between;gap:6px;font-size:9px;color:var(--dim);line-height:1.25;align-items:baseline} .system-model span{flex-shrink:0} .system-model b{font-size:9px;color:var(--dim);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .model-status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;flex-shrink:0;vertical-align:middle;margin-right:4px} .model-status-dot.idle{background:var(--ok)} .model-status-dot.busy{background:var(--warn);animation:server-dot-blink 1s ease-in-out infinite} .model-status-dot.offline{background:var(--dim)} .system-model-btn{margin-left:4px;padding:0 3px;border:1px solid rgba(127,127,127,.35);border-radius:4px;font-size:9px;line-height:12px;height:14px;cursor:pointer;background:transparent;color:inherit;vertical-align:middle} .system-model-btn:hover{border-color:var(--fg);background:rgba(127,127,127,.15)} /* раздел на исходе — красным, но плашку целиком не красим: память при этом может быть в порядке, и общий красный врал бы про неё */ .lim .sub.bad{color:var(--bad)} /* Мало места — плашку видно сразу: кончившийся диск останавливает сессии, а не просто мешает, и заметить это надо до, а не после. */ .lim.hot{border-color:var(--bad)} .lim.hot .v{color:var(--bad)} .lim.hot .t{color:var(--bad)} .bar{height:4px;border-radius:3px;background:var(--card2);margin-top:5px;overflow:hidden} .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--warn));transition:width .4s} .bar i.hot{background:linear-gradient(90deg,var(--warn),var(--bad))} /* карточки сессий */ .cards{display:flex;flex-direction:column;gap:9px} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:11px 13px 11px 15px;position:relative;overflow:hidden;cursor:pointer; transition:transform .12s ease, background .2s; } .card:active{transform:scale(.985);background:var(--card2)} .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dim)} .card.busy::before{background:var(--warn)} .card.idle::before{background:var(--ok)} .card.question::before{background:var(--q);animation:pulse 1.6s infinite} .card.draft::before{background:var(--draft)} .card.limit::before{background:var(--bad);animation:pulse 1.6s infinite} .card.shell::before{background:var(--shell)} /* Карточку не удалось собрать: сессия жива, врёт про неё дашборд. Не кликается — деталь упадёт на том же месте, что и карточка. */ .card.broken::before{background:var(--bad)} .card.broken{cursor:default;border-color:var(--bad)} .card.broken:active{transform:none} .errline{color:var(--bad);font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;-webkit-line-clamp:4} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* сессия закончила ход, но её ещё не открывали — мигает, пока не посмотришь */ @keyframes attn{0%,100%{box-shadow:0 0 0 0 rgba(61,220,132,0)} 50%{box-shadow:0 0 0 3px rgba(61,220,132,.55)}} .card.attn{animation:attn 1.8s ease-in-out infinite} /* safeguards переключили модель — это стоит заметить */ @keyframes warn{0%,100%{box-shadow:0 0 0 0 rgba(255,180,84,0)} 50%{box-shadow:0 0 0 3px rgba(255,180,84,.65)}} .card.warnblink{animation:warn 1.4s ease-in-out infinite} .chip.hot{color:#111;background:var(--warn)} .chip.max{color:#fff;background:var(--bad)} .row1{display:flex;align-items:center;gap:8px} .nm{font-weight:640;font-size:15px} .st{font-size:12px;color:var(--dim);margin-left:auto;white-space:nowrap} .st b{color:var(--fg);font-weight:600} .row2{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;align-items:center} .chip{ font-size:11px;color:var(--dim);background:var(--card2);border-radius:8px; padding:2px 7px;white-space:nowrap; display:inline-flex;align-items:center;gap:4px; } .chip .ic{width:1.15em;height:1.15em;stroke-width:2} .chip.hi{color:var(--fg)} /* Уровень размышлений: без иконки, мельче остальных чипов, но той же высоты — line-height в px держит строку, текст центрируется по вертикали. */ .chip.effort{color:var(--fg);font-size:7px;line-height:calc(11px * 1.45);font-weight:600} .chip.q{color:#fff;background:var(--q)} .chip.w{color:#111;background:var(--warn)} .chip.b{color:#fff;background:var(--accent)} /* Пастельные бейджи профилей Antigravity и Codex */ .chip.chip-agy{border:1px solid transparent;font-weight:520} .chip.agy-p-0{background:rgba(180,160,240,.16);color:#cfc2f8;border-color:rgba(180,160,240,.28)} .chip.agy-p-1{background:rgba(125,205,175,.16);color:#9fe3cb;border-color:rgba(125,205,175,.28)} .chip.agy-p-2{background:rgba(240,175,140,.16);color:#f9c4ae;border-color:rgba(240,175,140,.28)} .chip.agy-p-3{background:rgba(135,195,245,.16);color:#a8d6fd;border-color:rgba(135,195,245,.28)} .chip.agy-p-4{background:rgba(235,160,190,.16);color:#f5b5cd;border-color:rgba(235,160,190,.28)} .chip.agy-p-5{background:rgba(230,200,130,.16);color:#eed897;border-color:rgba(230,200,130,.28)} .chip.chip-codex{border:1px solid transparent;font-weight:520} .chip.chip-codex:not([class*="agy-p-"]){background:rgba(100,160,240,.14);color:#a8d4ff;border-color:rgba(100,160,240,.25)} /* Пастельные кнопки режимов при создании новой сессии */ .btn-mode.chip-agy{border:1px solid transparent;font-weight:520} .btn-mode.agy-p-0{background:rgba(180,160,240,.16);color:#cfc2f8;border-color:rgba(180,160,240,.28)} .btn-mode.agy-p-1{background:rgba(125,205,175,.16);color:#9fe3cb;border-color:rgba(125,205,175,.28)} .btn-mode.agy-p-2{background:rgba(240,175,140,.16);color:#f9c4ae;border-color:rgba(240,175,140,.28)} .btn-mode.agy-p-3{background:rgba(135,195,245,.16);color:#a8d6fd;border-color:rgba(135,195,245,.28)} .btn-mode.agy-p-4{background:rgba(235,160,190,.16);color:#f5b5cd;border-color:rgba(235,160,190,.28)} .btn-mode.agy-p-5{background:rgba(230,200,130,.16);color:#eed897;border-color:rgba(230,200,130,.28)} .btn-mode.chip-codex{border:1px solid transparent;font-weight:520} .btn-mode.chip-codex:not([class*="agy-p-"]){background:rgba(100,160,240,.14);color:#a8d4ff;border-color:rgba(100,160,240,.25)} body.light .chip.agy-p-0{background:#f0ecfc;color:#543b91;border-color:#dcd2f6} body.light .chip.agy-p-1{background:#e4f7f0;color:#1f6850;border-color:#c2ece0} body.light .chip.agy-p-2{background:#fef0e9;color:#8c4524;border-color:#f9d2c2} body.light .chip.agy-p-3{background:#e7f3fd;color:#205e97;border-color:#c5e2fa} body.light .chip.agy-p-4{background:#fdedf4;color:#88385a;border-color:#f8cddf} body.light .chip.agy-p-5{background:#fcf5e3;color:#755b18;border-color:#f3e2b2} body.light .chip.chip-codex:not([class*="agy-p-"]){background:#edf5fd;color:#1e5b94;border-color:#c8e1fa} body.light .btn-mode.agy-p-0{background:#f0ecfc;color:#543b91;border-color:#dcd2f6} body.light .btn-mode.agy-p-1{background:#e4f7f0;color:#1f6850;border-color:#c2ece0} body.light .btn-mode.agy-p-2{background:#fef0e9;color:#8c4524;border-color:#f9d2c2} body.light .btn-mode.agy-p-3{background:#e7f3fd;color:#205e97;border-color:#c5e2fa} body.light .btn-mode.agy-p-4{background:#fdedf4;color:#88385a;border-color:#f8cddf} body.light .btn-mode.agy-p-5{background:#fcf5e3;color:#755b18;border-color:#f3e2b2} body.light .btn-mode.chip-codex:not([class*="agy-p-"]){background:#edf5fd;color:#1e5b94;border-color:#c8e1fa} .proj{font-size:11px;color:var(--dim);margin-top:6px;font-family:var(--mono); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Проект в карточке виден, когда группировка выключена: там его больше негде прочитать, а имя сессии теперь только про задачу. Иконка папки — та же, что в заголовке группы, чтобы строка читалась одинаково в обоих режимах. */ .proj .ic{width:12px;height:12px;stroke-width:1.9;vertical-align:-2px;margin-right:4px} /* заголовки секций */ h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim); margin:18px 4px 8px;font-weight:600} /* вопросы */ .ask{background:linear-gradient(180deg,rgba(199,139,255,.14),var(--card)); border:1px solid rgba(199,139,255,.45);border-radius:var(--radius);padding:12px;margin-bottom:9px} .ask .h{font-weight:640;margin-bottom:4px} .ask .q{font-size:13px;color:var(--fg);margin-bottom:9px;white-space:pre-wrap} .ask.btw .btwq{max-height:52vh;overflow:auto} .opt{display:block;width:100%;text-align:left;margin:5px 0;padding:9px 11px;border-radius:10px; background:var(--card2);border:1px solid var(--line);color:var(--fg);font-size:14px} .opt:active{background:var(--accent);color:#fff} .opt small{display:block;color:var(--dim);font-size:11px;margin-top:2px} .opt.sel{border-color:var(--q)} /* Тот же вопрос над лентой «Диалога». Панель фиксирована между вкладками и телом: лента длинная, и вопрос не должен уезжать вверх при прокрутке. */ #d-asks{padding:10px 12px 1px;max-height:42vh;overflow:auto;border-bottom:1px solid var(--line); background:var(--bg);flex:none} /* иконки: один инлайновый спрайт вместо эмодзи — они рисуются шрифтом системы и в Telegram WebView на Android/iOS/десктопе выглядят по-разному (цветные, разного кегля, часть подменяется квадратами). SVG наследует цвет и кегль. */ .ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; vertical-align:-.2em;pointer-events:none} .ic.sm{width:1em;height:1em;stroke-width:1.9} /* кнопки/формы */ button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} .btn{background:var(--card2);border:1px solid var(--line);border-radius:10px; padding:8px 12px;font-size:13px;color:var(--fg);white-space:nowrap; text-transform:none;letter-spacing:normal; display:inline-flex;align-items:center;justify-content:center;gap:6px} .btn:active{background:var(--accent);color:#fff} .btn.pri{background:var(--accent);color:#fff;border-color:transparent;font-weight:600} .btn.bad{color:var(--bad)} .btn.sm{padding:6px 9px;font-size:12px} .btns{display:flex;gap:7px;flex-wrap:wrap} #n-mode .btn-mode{transition:all .15s ease} #n-mode .btn-mode.pri{ outline:2px solid var(--accent); outline-offset:1px; box-shadow:0 0 8px rgba(199,139,255,.35); } #n-mode .btn-mode:disabled, #n-mode .btn-mode.disabled{ opacity:.42 !important; cursor:not-allowed !important; filter:grayscale(1) !important; background:var(--card2) !important; color:var(--dim) !important; border-color:var(--line) !important; box-shadow:none !important; outline:none !important; } .nmode-pct{ font-size:11px; font-variant-numeric:tabular-nums; font-weight:600; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.22); margin-left:2px; } body.light .nmode-pct{ background:rgba(0,0,0,.08); } input,textarea,select{ width:100%;background:var(--card2);border:1px solid var(--line);border-radius:10px; color:var(--fg);padding:10px 12px;font:inherit;outline:none;resize:none; } input:focus,textarea:focus{border-color:var(--accent)} #n-model{font-size:12px;padding:8px 10px} /* поиск над списком сессий */ .search{position:relative;display:flex;align-items:center;margin:0 0 10px} /* Только ПРЯМОЙ svg — иначе правило ловит и иконку внутри крестика, и та уезжает absolute'ом к лупе, а сама кнопка остаётся пустой справа. */ .search > svg.ic{position:absolute;left:11px;top:50%;transform:translateY(-50%); color:var(--dim);pointer-events:none} .search input{padding-left:36px;padding-right:38px} .search-toggle{display:none} #grp-toggle{height:31px} .qx{position:absolute;right:6px;top:50%;transform:translateY(-50%); background:none;border:none;color:var(--dim);padding:6px;cursor:pointer; display:flex;align-items:center;line-height:0} .found{margin:0 0 12px} .found h3{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px; margin:0 2px 7px;font-weight:600;display:flex;justify-content:space-between} .hitcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:9px 11px;margin-bottom:7px} .hitcard .nm{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px} .hitcard .nm .ic{color:var(--dim);flex:none} .hit{display:block;width:100%;text-align:left;background:var(--card2);border:1px solid var(--line); border-radius:9px;color:var(--fg);font:inherit;font-size:12.5px;line-height:1.45; padding:7px 9px;margin-top:6px;cursor:pointer} .hit:active{border-color:var(--accent)} .hit .who{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--dim); margin-bottom:3px;display:flex;justify-content:space-between;gap:8px} .hit mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:3px} /* реплика, на которую прыгнули из поиска */ .msg.jump,.tool.jump{box-shadow:inset 3px 0 0 var(--accent)} /* Закрытый разговор: сессии за ним уже нет, поэтому от панели остаётся только «Диалог» — ни экрана, ни промпта, ни кнопок управления. */ #detail.ro .dhead .btn:not(#d-back), #detail.ro .tabs [data-dtab]:not([data-dtab="chat"]), #detail.ro .dfoot{display:none} .rotag{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px} /* Пометка режима — псевдоэлементом: вложенный span распирал .nm, у которого nowrap и ellipsis, и шапка разъезжалась на длинном заголовке. */ #detail.ro .dhead .nm::after{content:" · закрытый разговор";color:var(--dim); font-size:11px;font-weight:400} #detail.ro .dbody{padding-bottom:env(safe-area-inset-bottom)} label{display:block;font-size:11px;color:var(--dim);margin:10px 2px 4px;text-transform:uppercase;letter-spacing:.5px} .check{display:flex;align-items:flex-start;gap:9px;background:var(--card2); border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:10px 0 4px; color:var(--fg);font-size:13px;line-height:1.35;text-transform:none;letter-spacing:0;cursor:pointer} .check input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)} /* нижняя навигация */ nav{ position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex; background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(14px);border-top:1px solid var(--line); padding-bottom:var(--sa-bottom); } nav button{flex:1;padding:9px 0 7px;font-size:10px;color:var(--dim);display:flex; flex-direction:column;align-items:center;gap:3px} nav button.on{color:var(--accent)} nav button .ic{width:21px;height:21px;stroke-width:1.6} nav .badge{position:absolute;transform:translate(14px,-4px);background:var(--bad); color:#fff;border-radius:9px;font-size:9px;padding:1px 5px;font-weight:700} /* экран сессии */ #detail-backdrop{display:none} #detail{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex; flex-direction:column;transform:translateX(100%);transition:transform .22s ease; visibility:hidden;pointer-events:none} #detail.open{transform:none;visibility:visible;pointer-events:auto} #detail.term-dark{ --bg:#0f1115; --card:#171a21; --card2:#1e222b; --line:#262b36; --fg:#e8ecf2; --dim:#8b93a3; color-scheme:dark; background:var(--bg); color:var(--fg); } #detail.term-dark .dhead, #detail.term-dark .tabs{background:var(--bg)} #detail.term-dark .dbody{background:#101217} #detail.term-dark input::placeholder, #detail.term-dark textarea::placeholder{color:var(--dim)} .dhead{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line); padding-top:calc(10px + var(--sa-top))} .dhead .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .dhead-gap{flex:1 1 auto;min-width:0} /* Состояние сессии — только иконка (подпись в title), чтобы строка заголовка вместе с кнопками оставалась одной строкой. */ .dstate{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--dim);line-height:1} .dstate .ic{width:16px;height:16px;stroke-width:1.9} .dstate.busy{color:var(--accent);animation:pulse 1.6s ease-in-out infinite} .dstate.hidden{display:none!important} /* Имя — инлайн-правка по тапу. */ .dhead .nm.editing{overflow:visible;text-overflow:clip} .dname-input{width:min(46vw,240px);font:inherit;font-weight:640;font-size:15px; color:var(--fg);background:var(--card2);border:1px solid var(--accent); border-radius:7px;padding:1px 6px;min-width:0} /* Лимиты подписки текущей сессии: на десктопе рядом с названием, на телефоне отдельной строкой под шапкой и над вкладками «Диалог/Экран» (см. media). */ .dhead-limits{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;min-width:0;max-width:100%} .dhead-limits.hidden{display:none!important} .dlim-win{display:inline-flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:10.5px;line-height:1.45;white-space:nowrap} .dlim-wlbl{display:inline-flex;align-items:center;color:var(--dim);font-weight:650;font-size:9.5px;text-transform:uppercase;letter-spacing:.3px} .dlim-wlbl .ic{width:12px;height:12px;stroke-width:2} .dlim-bar{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;flex:none} .dlim-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .3s ease} .dlim-pct{font-variant-numeric:tabular-nums;font-weight:700;min-width:29px;text-align:right} .dlim-win.normal .dlim-pct{color:var(--fg)} .dlim-win.warning .dlim-pct{color:var(--warn)} .dlim-win.critical .dlim-pct{color:var(--bad)} .dlim-win.unknown .dlim-pct{color:var(--dim)} .dlim-reset{color:var(--dim);font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap} .dlim-gname{display:inline-flex;align-items:center;color:var(--dim);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px} /* Брендовые метки/иконки агентов (заливка, не обводка): Gemini, OpenAI, OpenCode, Claude, DeepSeek. Кегль — как у .ic, чтобы совпадать в чипах. */ .dic{width:1.15em;height:1.15em;flex:none;display:inline-block;fill:currentColor; stroke:none;vertical-align:-.2em;pointer-events:none} .dlim-gname .dic{width:14px;height:14px;vertical-align:0} .dlim-money .dlim-wlbl .dic{width:13px;height:13px;vertical-align:0} .dlim-stale{color:var(--warn);font-size:11px;line-height:1} /* Затраты текущего разговора OpenCode (RouterAI, DeepSeek) — те же пилюли, что у лимитов, но без прогресс-бара. */ .dlim-money .dlim-pct{min-width:0;font-weight:650} /* Модель и уровень размышления сессии в шапке (десктоп) — те же пилюли. */ .dlim-model{color:var(--fg);font-weight:600} /* Та же высота, что у соседних бейджей в шапке (10.5px * 1.45). */ .dlim-effort{font-size:7px;line-height:calc(10.5px * 1.45)} body.light .dlim-bar{background:rgba(0,0,0,.12)} body.light .dlim-win.warning .dlim-pct{color:#925200} body.light .dlim-win.critical .dlim-pct{color:#b42332} .tabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);overflow-x:auto} .tabs button{font-size:12px;padding:6px 11px;border-radius:9px;background:var(--card2);color:var(--dim)} .tabs button.on{background:var(--accent);color:#fff} .dbody{flex:1;overflow:auto;-webkit-overflow-scrolling:touch; padding-bottom:16px;scroll-padding-bottom:16px} #term{margin:0;padding:10px env(safe-area-inset-right) 10px env(safe-area-inset-left);font-family:var(--mono);font-size:var(--term-fs,11px);line-height:1.34; white-space:pre;overflow-x:auto;color:var(--fg)} .msg{padding:10px 13px;border-bottom:1px solid var(--line);font-size:14px;white-space:pre-wrap; word-break:break-word;overflow-wrap:anywhere} .msg .who{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin-bottom:5px} .msg.user{background:var(--card2)} .msg.user .who{color:var(--accent)} .msg.pending{background:color-mix(in srgb,var(--q,var(--accent)) 9%,var(--bg)); border-left:3px solid var(--q,var(--accent));opacity:.88} .msg.pending .who{color:var(--q,var(--accent))} /* Вывод подагентов — не основная реплика: заметен в ленте, но не смешивается ни с сообщениями Сергея, ни с итогом ведущего агента. */ .msg.subagent{background:color-mix(in srgb,var(--q,var(--accent)) 8%,var(--card)); border-left:3px solid var(--q,var(--accent))} .msg.subagent .who{color:var(--q,var(--accent))} /* уведомление о фоновой задаче: не реплика, а служебная строка */ .msg.note{display:flex;align-items:center;gap:7px;white-space:normal; color:var(--dim);font-size:12px;padding:7px 13px} .msg.note .ic{color:var(--q,var(--accent));flex:none} .msg.note span{flex:1;overflow-wrap:anywhere} /* Вызов инструмента — свёрнутая карточка: в ленте видно, ЧТО делалось, а простыни вывода не мешают читать сам разговор. */ .tool{white-space:normal;padding:0;background:transparent} .tool summary,.toolgrp>summary{display:flex;align-items:center;gap:7px;padding:8px 13px;cursor:pointer; color:var(--dim);font-size:12px;font-family:var(--mono);list-style:none} .tool summary::-webkit-details-marker,.toolgrp>summary::-webkit-details-marker{display:none} .tool summary span,.toolgrp>summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .tool summary .ic,.toolgrp>summary .ic{color:var(--shell);flex:none} .tool[open]>summary,.toolgrp[open]>summary{color:var(--fg);border-bottom:1px solid var(--line)} .tool pre,.tool .tres{margin:0;padding:9px 13px;font-family:var(--mono);font-size:11.5px; white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:340px;overflow:auto} .tool pre{background:var(--card2);color:var(--fg)} .tool .tres{background:var(--card);color:var(--dim);border-top:1px solid var(--line)} /* Второй уровень: цепочка вызовов между двумя репликами складывается целиком. Свёрнутых карточек подряд бывает по три десятка — сам разговор в них тонет, а раскрывать их поштучно надо редко (10.08.2026). */ .toolgrp{white-space:normal;padding:0;background:transparent} .toolgrp>summary{background:var(--card2)} .toolgrp>summary b{font-family:inherit;color:var(--fg);font-weight:600} .toolgrp>summary b.err{color:var(--bad)} /* Провалившийся вызов краснеет целиком — и строка-заголовок, и результат: ошибку видно в аккордеоне без раскрытия и не приходится искать её глазами. */ .tool.err>summary{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--card2))} .tool.err>summary .ic{color:var(--bad)} .tool.err[open]>summary{color:var(--bad);border-bottom-color:var(--bad)} .tool .tres.err{color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--card))} .tgrp{border-left:2px solid var(--line);margin-left:13px} /* Внутри одного аккордеона могут чередоваться вызовы и рассуждения: строку между ними рисуем на верхней границе каждого следующего элемента. */ .tgrp>*+*{border-top:1px solid var(--line)} .tgrp .service{border-bottom:none} /* Инструкции harness/оркестратора бывают длиннее самого диалога. Показываем факт их получения, а тело оставляем в обычном нативном аккордеоне. */ .service{white-space:normal;padding:0;background:var(--card2);border-bottom:1px solid var(--line)} .service summary{display:flex;align-items:center;gap:7px;padding:8px 13px;cursor:pointer; color:var(--dim);font-size:12px;list-style:none} .service summary::-webkit-details-marker{display:none} .service summary span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .service summary .ic{color:var(--shell);flex:none} .service[open]>summary{color:var(--fg);border-bottom:1px solid var(--line)} .service .service-body{margin:0;padding:9px 13px;max-height:340px;overflow:auto; white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere; color:var(--dim);font:11.5px/1.4 var(--mono)} .msg code{font-family:var(--mono);font-size:12px;background:var(--card2);border-radius:5px;padding:1px 4px} .msg.md{white-space:normal;overflow-wrap:anywhere} /* Панель не должна ездить вбок: широкое (код, таблицы) скроллится внутри своих блоков, у них для этого есть overflow-x. */ .dbody{overflow-x:hidden} #chat,#chat .msg,#chat .tool{max-width:100%} /* Режим выделения сообщений (удержание → короткие тапы). Системный вызов контекстного меню перехватил бы удержание, поэтому в ленте он выключен; на тач-устройствах заодно запрещено выделение текста — иначе оно спорит с отметками. На десктопе выделение текста остаётся. */ #chat{-webkit-touch-callout:none} @media (hover:none){ #chat{user-select:none;-webkit-user-select:none} } #chat.selmode [data-b]{cursor:pointer} #chat.selmode .selon{outline:2px solid var(--accent);outline-offset:-2px; background:color-mix(in srgb,var(--accent) 12%,transparent)} .selbar{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line); padding:9px 12px;background:var(--card)} .selbar.hidden{display:none} .selbar .selcount{flex:1;min-width:0;font-size:12px;color:var(--dim)} #detail.ro .selbar{padding-bottom:calc(9px + var(--sa-bottom))} .msg.md p{margin:0 0 8px} .msg.md h1,.msg.md h2,.msg.md h3{font-size:14px;margin:12px 0 6px;font-weight:660; letter-spacing:.2px;text-transform:none;color:var(--fg)} .msg.md h1{font-size:16px} .msg.md ul,.msg.md ol{margin:0 0 8px;padding-left:20px} .msg.md li>ul,.msg.md li>ol{margin:4px 0 2px;padding-left:20px} .msg.md li{margin:2px 0} .msg.md .md-task{display:inline-flex;align-items:baseline;gap:5px} .msg.md .md-task input{margin:0;accent-color:var(--accent)} .msg.md pre{background:var(--card2);border:1px solid var(--line);border-radius:9px; padding:8px 10px;overflow-x:auto;margin:0 0 8px} .msg.md pre code{background:none;padding:0;font-size:11.5px;line-height:1.4;display:block} .msg.md blockquote{margin:0 0 8px;padding:2px 0 2px 10px;border-left:3px solid var(--line);color:var(--dim)} .msg.md table{border-collapse:collapse;margin:0 0 8px;font-size:12px;display:block;overflow-x:auto} .msg.md th,.msg.md td{border:1px solid var(--line);padding:4px 7px;text-align:left} .msg.md th{background:var(--card2)} .msg.md .a-c{text-align:center}.msg.md .a-r{text-align:right}.msg.md .a-l{text-align:left} .msg.md hr{border:none;border-top:1px solid var(--line);margin:10px 0} #chat a{color:var(--accent);word-break:break-all;cursor:pointer} #chat a:hover{text-decoration:underline} #chat a.md-file{font-family:var(--mono);font-size:12px;text-decoration-style:dotted} #chat a.md-tyaptask{text-decoration-style:dashed} .tool pre a,.tres a,.service-body a,.msg.note a{text-decoration:underline} .msg.md a{word-break:break-all} .msg.md .md-callout{margin:8px 0;padding:8px 10px;border:1px solid var(--line); border-left:3px solid var(--accent);border-radius:8px;background:var(--card2)} .msg.md .md-callout.service{border-left-color:var(--q,var(--accent))} .msg.md .md-callout-title{font-size:10px;letter-spacing:.45px;text-transform:uppercase; color:var(--accent);font-weight:650;margin-bottom:4px} .msg.md .md-callout.service .md-callout-title{color:var(--q,var(--accent))} .msg.md .md-callout p:last-child{margin-bottom:0} .msg.md :last-child{margin-bottom:0} /* Прокрутка экрана — плавающими кнопками поверх терминала: в общем ряду они уезжали за правый край и их «не было» (06.08.2026). */ #scrollbtns{position:absolute;right:12px;bottom:150px;z-index:45; display:flex;flex-direction:column;gap:8px} #scrollbtns button{width:40px;height:40px;border-radius:50%;font-size:17px; display:flex;align-items:center;justify-content:center; color:var(--fg);border:1px solid var(--line);backdrop-filter:blur(8px); background:color-mix(in srgb,var(--card2) 88%,transparent); box-shadow:0 4px 14px rgba(0,0,0,.35)} #scrollbtns button:active{background:var(--accent);color:#fff} .dfoot{border-top:1px solid var(--line);padding:9px 12px calc(9px + var(--sa-bottom)); background:var(--card);display:flex;flex-direction:column;gap:8px} .sendrow{display:flex;gap:8px;align-items:flex-end; /* Высота пустого поля промпта: строка (15px × 1.45) + padding 2×10 + рамки. У .btn свои padding и line-height:1, а внутри только иконка, поэтому кнопки выходили на ~9px ниже поля — задаём им ту же высоту явно (08.08.2026). Заодно спиннер при отправке не меняет размер кнопки. */ --sendh:calc(1.45 * 15px + 22px)} .sendrow .btn{height:var(--sendh)} .sendrow textarea{height:var(--sendh);max-height:130px;min-height:var(--sendh)} #d-rec,#n-rec,#d-clip{flex:0 0 auto} /* Push-to-talk сам владеет жестом: WebView не должен превращать небольшое движение пальца в scroll и присылать pointercancel вместо pointerup. */ #d-rec,#n-rec{touch-action:none;user-select:none;-webkit-user-select:none} /* Длинный промпт получает всю ширину строки. Три действия остаются рядом, но складываются в узкую колонку: так на телефоне видно около шести строк текста вместо двух-трёх, а кнопки не перекрывают поле. */ .sendrow.prompt-tall{display:grid;grid-template-columns:minmax(0,1fr) var(--sendh); grid-template-rows:repeat(3,var(--sendh));--sendstack:calc(var(--sendh) + var(--sendh) + var(--sendh) + 16px)} .sendrow.prompt-tall textarea{grid-column:1;grid-row:1/4;min-height:var(--sendstack); max-height:var(--sendstack)} .sendrow.prompt-tall #d-clip{grid-column:2;grid-row:1} .sendrow.prompt-tall #d-rec{grid-column:2;grid-row:2} .sendrow.prompt-tall #d-send{grid-column:2;grid-row:3} /* margin, text-transform и цвет — от общего правила `label` (подписи полей): из-за его `margin:10px 2px 4px` скрепка висела на 4px выше соседних кнопок */ #d-clip,#n-clip{position:relative;overflow:hidden;cursor:pointer;margin:0; display:inline-flex;align-items:center;justify-content:center} /* input внутри скрепки: невидим, но остаётся в потоке — display:none в Telegram WebView глотает событие change */ #d-file,#n-file{position:absolute;inset:0;width:100%;height:100%;opacity:0; cursor:pointer;font-size:0} /* прикреплённые файлы: чипы над строкой ввода, крестик снимает */ .attrow{display:flex;flex-wrap:wrap;gap:6px} .attrow .att{display:flex;align-items:center;gap:6px;max-width:100%; background:var(--card2);border:1px solid var(--line);border-radius:8px; padding:3px 6px 3px 8px;font-size:12px;color:var(--fg)} .attrow .att span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:180px} .attrow .att small{color:var(--dim)} .attrow .att b{cursor:pointer;color:var(--dim);font-weight:700;padding:0 2px} .attrow .att.up{opacity:.6} /* спиннер на цветных кнопках: рамка берётся от текста, чтобы не теряться на accent-фоне. Disabled остаётся заметным, но явно не нажимаемым. */ #d-send.sending .spin,#n-go.creating .spin{border-color:currentColor;border-top-color:transparent} #d-send:disabled,#n-go:disabled{opacity:.75;cursor:wait} /* группы по проектам: заголовок с путём, карточки под ним; сворачивание по клику */ .pgroup{margin-bottom:14px} .pgroup.collapsed{margin-bottom:6px} .phead{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim); text-transform:uppercase;letter-spacing:.4px;margin:0 2px 6px;font-weight:600; cursor:pointer;user-select:none;padding:3px 4px;border-radius:6px;transition:background .15s ease} .phead:hover{color:var(--fg);background:rgba(255,255,255,.04)} .phead .pchevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease} .phead .pchevron svg{width:11px;height:11px} .phead .pfolder svg{width:13px;height:13px} .phead .pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .phead .pbadges{margin-left:auto;display:flex;align-items:center;gap:4px} .phead .pcount{background:var(--card2);border-radius:8px;padding:1px 7px;font-size:11px;color:var(--dim)} .pgroup.collapsed .pchevron{transform:rotate(-90deg)} .pgroup.collapsed .card{display:none !important} .card.waits{border-color:var(--q);box-shadow:inset 3px 0 0 var(--q)} .chip.wait{background:var(--q);color:#fff} .waithint{color:var(--fg)!important;opacity:.95;white-space:normal} /* последняя фраза сессии: по ней видно, какая про что, без захода внутрь */ .lastline{white-space:normal;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;margin-top:2px} .sumbox{white-space:pre-wrap;font-size:12.5px;line-height:1.5;color:var(--fg); background:var(--card2);border:1px solid var(--line);border-radius:10px; padding:10px 12px;margin-top:8px} .sumbox .when{color:var(--dim);font-size:11px;display:block;margin-bottom:6px} #att .item.dim{opacity:.55} #att .item[data-att]{cursor:pointer} #att .att-actions{display:flex;justify-content:flex-end;margin-top:8px} #d-rec.rec,#n-rec.rec{color:#fff;background:var(--danger,#e5484d);animation:recdot 1.2s ease-in-out infinite} #d-rec.rec.pause,#n-rec.rec.pause{animation:none;opacity:.6} @keyframes recdot{50%{opacity:.55}} .quick{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px} .quick::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none} /* раскрытые группы («клавиши», «экран»): своя строка над быстрыми командами */ .keyrow{margin-bottom:6px} .keyrow .ar{padding:6px 11px} .quick [data-row].on{background:var(--accent);color:#fff;border-color:var(--accent)} .quick .btn.on{background:var(--accent);color:#fff;border-color:var(--accent)} /* пауза живого экрана видна на свёрнутой группе — иначе замерший кадр читается как зависшая сессия */ .quick [data-row].warnrow,.quick [data-row].on.warnrow{ background:var(--card2);color:var(--warn);border-color:var(--warn)} /* лента и списки */ .item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px} .item .t{font-size:11px;color:var(--dim);display:flex;gap:8px;margin-bottom:4px} .item .x{font-size:13px;white-space:pre-wrap;word-break:break-word} .mono{font-family:var(--mono);font-size:12px} .empty{color:var(--dim);text-align:center;padding:30px 10px;font-size:13px} /* тост */ /* Свои диалоги вместо confirm()/prompt(): Telegram Mini App нативные подавляет — «Всё равно отправить?» молча отменялось, и промпт не уходил (баг 06.08.2026). */ #modal,#stop-modal,#switch-modal{position:fixed;inset:0;z-index:90;background:#000a;display:flex; align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)} #stop-modal.hidden,#switch-modal.hidden{display:none!important} #modal .mbox,#stop-modal .mbox,#switch-modal .mbox{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:16px;width:min(420px,100%);box-shadow:0 20px 50px rgba(0,0,0,.5)} #modal .mtitle,#stop-modal .mtitle,#switch-modal .mtitle{font-size:14px;line-height:1.4;white-space:pre-wrap;margin-bottom:10px} #switch-modal .switch-body{max-height:60vh;overflow:auto;margin:0 -4px;padding:0 4px} #switch-modal .switch-sec{margin-bottom:12px} #switch-modal .switch-sec:last-child{margin-bottom:0} #switch-modal .switch-h{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin:0 0 6px} #switch-modal .opt.sel{border-color:var(--q)} #switch-modal .switch-body .empty{padding:6px 2px} .switch-cols{display:flex;flex-wrap:wrap;gap:6px} .switch-cols .opt{width:auto;flex:1 1 calc(50% - 6px);margin:0;min-width:120px;text-align:center} #stop-modal .check{margin-top:2px} #stop-modal .btns .btn{display:inline-flex;align-items:center;gap:5px} .a2tyapmanage{display:flex;flex-direction:column;gap:10px} .a2tyapmanage label{font-size:11px;color:var(--dim);display:flex;flex-direction:column;gap:5px} .a2tyapdeadline{width:100%;font-size:14px} .a2tyapquick,.a2tyapstatus,.a2tyapfoot{display:flex;gap:7px;flex-wrap:wrap} .a2tyapstatus .btn{flex:1;min-width:88px} .a2tyapfoot{justify-content:space-between;border-top:1px solid var(--line);padding-top:10px} .a2tyapstatus .danger{color:#fff;background:var(--danger,#e5484d);border-color:var(--danger,#e5484d)} #toast{position:fixed;left:50%;bottom:calc(78px + var(--sa-bottom));transform:translate(-50%,20px); background:#000d;color:#fff;border-radius:12px;padding:10px 15px;font-size:13px;z-index:60; opacity:0;transition:.22s;pointer-events:none;max-width:92vw;text-align:center} #toast.on{opacity:1;transform:translate(-50%,0)} .spin{display:inline-block;width:13px;height:13px;border:2px solid var(--dim);border-top-color:transparent; border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px} @keyframes sp{to{transform:rotate(360deg)}} @media (min-width:900px){ :root{--term-fs:13.5px} :root{--page:1180px; --pagepad:20px} .wrap{padding-top:14px} header{padding-top:calc(10px + var(--sa-top))} /* карточки в несколько колонок — на широком экране список в одну колонку превращается в километр пустоты справа */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:stretch} .cards > .card{display:flex;flex-direction:column} /* Виджет лимитов шире и воздушнее, но не на всю страницу: ячейки растут до comfortable предела. Строки не переносим — при нехватке ширины прокрутка, а не рост в высоту. */ .limits{display:flex;gap:9px;margin:2px 0 12px;flex-wrap:nowrap;width:min(100%,900px);max-width:100%;overflow-x:auto} .lim{flex:1 1 auto;min-width:0;border-radius:var(--radius);padding:7px 10px} .quota-account{flex:1 1 auto;min-width:220px} .quota-group{flex-direction:row;align-items:center;gap:6px} .quota-group-name{font-size:11px} .quota-windows{gap:5px} .quota-window{font-size:10px} .quota-window b,.quota-val{font-size:11.5px} .quota-resets{font-size:10.5px} .quota-group{padding:3px 0} .money-compact{gap:4px} .system-compact{gap:4px} .quota-block-title{font-size:10.5px} .lim .t{font-size:11px;margin-bottom:3px} .lim .v{font-size:19px} .limrow+.limrow{margin-top:8px;padding-top:8px} .limmeta{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;font-size:11px} .limmeta b{font-size:15px} .limmeta .reset{font-size:9.5px} .limrow.compact+.limrow.compact{margin-top:4px;padding-top:4px} .limrow.compact .limmeta{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px} .limrow.compact .limmeta b{font-size:15px} .limval.dual b{font-size:12.5px} .lim .sub{font-size:11px;margin-top:8px} .bar{height:5px;margin-top:8px} nav{z-index:50;justify-content:center;gap:40px} nav button{flex:0 0 120px} /* На десктопе деталь оставляет список видимым, но не активным: отдельный слой размывает его и закрывает сессию по клику. Нижняя навигация выше обоих слоёв и не попадает под blur. */ #detail-backdrop{display:block;position:fixed; inset:0 0 calc(var(--nav-h) + var(--sa-bottom));z-index:35; background:rgba(3,5,8,.48);backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden; pointer-events:none;transition:opacity .22s ease,visibility .22s ease} #detail-backdrop.open{opacity:1;visibility:visible;pointer-events:auto} #detail{left:auto;bottom:calc(var(--nav-h) + var(--sa-bottom)); width:min(860px,72vw);border-left:1px solid var(--line); box-shadow:-24px 0 60px rgba(0,0,0,.45)} } @media (max-width:899px){ .search{display:none} .search.open{display:flex} .search-toggle{display:inline-flex;margin:0 0 10px} /* Телефон: лимиты уходят на отдельную строку под заголовком сессии, но остаются над вкладками. Строку не переносим: у agy недельное окно уже скрыто проекцией, остальное при нехватке ширины прокручивается по горизонтали, а не растёт в высоту. */ .dhead{flex-wrap:wrap;row-gap:7px} .dhead-limits{order:5;flex:1 0 100%;gap:6px;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .dhead-limits::-webkit-scrollbar{display:none} .dhead-limits .dlim-win{flex:0 0 auto;padding:1px 7px;gap:4px} .dhead-limits .dlim-bar{width:30px} .dhead-limits .dlim-reset{font-size:8.5px} .dhead-limits .dlim-gname{font-size:9px} } @media (min-width:1500px){ #detail{width:min(1040px,62vw)} :root{--page:1500px; --term-fs:14.5px} } /* capture-pane is a terminal, not page text. Page theme previously made default foreground and inverse SGR unreadable, especially OpenCode menus. */ #term { color:#eeeeec; background:#101217; color-scheme:dark; } #term::selection, #term *::selection { color:#101217; background:#cdd6f4; } /* Compact quota matrix: only window and percentage are visible; reset stays in tooltip. */ .quota-account{min-width:0} .quota-title{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:3px} .quota-title .limname{font-size:11px;font-weight:650;color:var(--fg)} .quota-title small,.quota-note{font-size:9px;color:var(--dim)} .quota-col-header{font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .quota-title-left{display:inline-flex;align-items:center;gap:6px} .btn-touch-limits{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:5px;width:19px;height:19px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease} .btn-touch-limits:hover{color:var(--accent);border-color:var(--accent);background:rgba(255,255,255,.06)} .btn-touch-limits.busy{pointer-events:none;opacity:.6;animation:sp .8s linear infinite} .btn-touch-limits .ic{width:11px;height:11px;stroke-width:2} .limits-modal-head .btn-touch-limits{width:auto;height:24px;padding:0 8px;gap:4px;font-size:11px;font-weight:600;border-radius:6px} .limits-modal-head .btn-touch-limits .ic{width:12px;height:12px} .quota-stale{border-style:dashed} .quota-stale .quota-title small{color:var(--warn)} .quota-block{margin-top:2px} .quota-block-title{font-size:10px;font-weight:700;color:var(--fg);padding:2px 0 1px 0} .quota-block+.quota-block .quota-block-title{border-top:1px solid var(--line);margin-top:3px;padding-top:3px} .quota-group{display:flex;gap:4px;align-items:center;justify-content:flex-start;padding:2px 0;border-top:1px solid var(--line)} .quota-block-title+.quota-group{border-top:none} .quota-group-name{flex:0 1 auto;min-width:48px;font-size:10px;line-height:1.2;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:4px} .quota-group-name .chip{font-size:9.5px;padding:1px 6px;border-radius:5px;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis} .quota-values{flex:0 0 auto;margin-left:auto;display:flex;align-items:baseline;justify-content:flex-end;gap:2px;min-width:0} /* Десктоп: время/дата сброса — слева после имени, значения — справа. */ .quota-resets{flex:0 0 auto;display:flex;align-items:baseline;gap:2px 8px;font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap} .quota-reset-bit b{color:var(--fg);font-weight:600} .quota-val{text-align:right;font-size:11px;font-variant-numeric:tabular-nums;font-weight:600} .quota-val.warning{color:var(--warn)} .quota-val.critical{color:var(--bad)} .quota-val.unknown{color:var(--dim)} .quota-sep{color:var(--dim);font-size:10px;opacity:0.6;padding:0 1px} .quota-windows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;min-width:0;flex:1} .quota-window{display:flex;align-items:baseline;justify-content:space-between;gap:3px;min-width:0;font-size:9px;line-height:1.1} .quota-window span{color:var(--dim)} .quota-window b{text-align:right;font-size:11px;font-variant-numeric:tabular-nums} .quota-window.warning b{color:var(--warn)} .quota-window.critical b{color:var(--bad)} .quota-window.unknown b{color:var(--dim)} .quota-note{margin:2px 0;overflow-wrap:anywhere} .flow-toggle{display:flex;gap:7px;align-items:center;flex-wrap:wrap;color:var(--fg);font-size:13px;cursor:pointer} .flow-toggle input{width:17px;height:17px;margin:0;accent-color:var(--accent)} .flow-toggle small{flex-basis:100%;font-size:11px;color:var(--dim)} .flow-toggle.compact{flex:0 0 auto;white-space:nowrap;font-size:12px;margin:0;padding:4px 8px;border:1px solid var(--line);border-radius:8px} .prompt-queue{border:1px solid var(--warn);background:var(--card);border-radius:9px;padding:8px 12px;margin:8px 12px;min-width:0} .queue-heading{display:flex;justify-content:space-between;gap:8px;font-size:12px} .queue-heading strong{color:var(--warn)} .queue-heading small,.queue-reason{color:var(--dim);font-size:10px} .queue-preview{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:3px 0} .queue-actions{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:11px} .queue-actions details{min-width:0} .queue-actions details[open]{flex-basis:100%} .queue-actions pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:150px;overflow:auto;font-family:var(--mono);font-size:11px;margin:4px 0} .queue-actions summary{cursor:pointer;color:var(--dim)} body.light .quota-window.warning b,body.light .quota-val.warning,body.light .quota-stale .quota-title small,body.light .queue-heading strong{color:#925200} body.light .quota-window.critical b,body.light .quota-val.critical{color:#b42332} .quota-account[data-open-limits="1"]{cursor:pointer;transition:border-color .15s ease} .quota-account[data-open-limits="1"]:hover{border-color:var(--accent)} #limits-modal{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)} #limits-modal.hidden{display:none!important} .limits-mbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;width:min(540px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden} .limits-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)} .limits-modal-head h3{font-size:15px;font-weight:700;margin:0;color:var(--fg)} .limits-close-btn{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:7px;width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;line-height:1} .limits-close-btn:hover{color:var(--fg);border-color:var(--fg)} .limits-modal-body{overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;padding-right:2px} .limits-modal-body::-webkit-scrollbar{width:5px} .limits-modal-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .fl-sec{display:flex;flex-direction:column} .fl-sec-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);padding:6px 0 3px;border-bottom:1px solid var(--line)} .fl-sec:first-child .fl-sec-title{padding-top:0} .fl-item{padding:7px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px} .fl-item:last-child{border-bottom:none} .fl-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .fl-name{font-size:12.5px;font-weight:600;color:var(--fg);display:inline-flex;align-items:center} .fl-name .chip{font-size:11px;padding:2px 7px;border-radius:6px;line-height:1.3} .fl-resets{font-size:10px;color:var(--dim);background:var(--line);padding:1px 5px;border-radius:4px} .fl-resets b{color:var(--accent)} .fl-wins{display:flex;flex-direction:column;gap:3px;margin-top:1px} .fl-win{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:11px;padding:1px 0} .fl-win-lbl{font-size:10.5px;font-weight:600;color:var(--dim);min-width:44px} .fl-win-val{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;min-width:32px;text-align:right} .fl-win-val.normal{color:var(--fg)} .fl-win-val.warning{color:var(--warn)} .fl-win-val.critical{color:var(--bad)} .fl-win-val.unknown{color:var(--dim)} .fl-win-kind{font-size:9.5px;color:var(--dim);margin-right:2px} .fl-bar-bg{width:50px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;flex-shrink:0} .fl-bar{height:100%;border-radius:2px;transition:width .2s ease} .fl-bar.normal{background:var(--accent)} .fl-bar.warning{background:var(--warn)} .fl-bar.critical{background:var(--bad)} .fl-win-reset{font-size:10.5px;color:var(--dim);margin-left:auto;white-space:nowrap} .fl-win-reset strong{color:var(--fg);font-weight:600} .fl-win-reset small{color:var(--dim);margin-left:3px} @media(max-width:480px){ .fl-win{justify-content:flex-start} .fl-win-reset{flex-basis:100%;margin-left:0;font-size:9.5px;padding-left:44px} } body.light .fl-bar-bg{background:rgba(0,0,0,.08)} body.light .fl-win-val.warning{color:#925200} body.light .fl-win-val.critical{color:#b42332} .fl-stale-warn{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--warn,#f5a623);background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.2);border-radius:6px;padding:3px 8px;margin:2px 0} .fl-stale-ic{font-size:11px;flex-shrink:0} .fl-no-data{font-size:11px;color:var(--dim);font-style:italic;padding:2px 0} body.light .fl-stale-warn{color:#925200;background:rgba(146,82,0,.08);border-color:rgba(146,82,0,.2)}