:root {
  --bg: #1a1a18;
  --bg-side: #161614;
  --bg-2: #242422;
  --bg-3: #2e2e2b;
  --line: #38383420;
  --border: #36363270;
  --text: #ece9e3;
  --muted: #9a958c;
  --accent: #cc785c;
  --accent-2: #d98c70;
  --user: #2b2b28;
  --ok: #6cab74;
  --err: #d9695f;
  --amber: #d8a657;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* Light theme — same variable names, so every component follows without extra rules. */
:root[data-theme="light"] {
  --bg: #f7f6f3;
  --bg-side: #efede8;
  --bg-2: #ffffff;
  --bg-3: #f0eee9;
  --line: #00000012;
  --border: #d8d4cc;
  --text: #23221f;
  --muted: #6f6a62;
  --accent: #c2683f;
  --accent-2: #a9552f;
  --user: #eae7e0;
  --ok: #3f8a4d;
  --err: #c0392b;
  --amber: #a97514;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(115% 85% at 100% -5%, rgba(194,104,63,.07), transparent 48%),
    radial-gradient(95% 70% at -10% 105%, rgba(194,104,63,.05), transparent 45%);
}
:root[data-theme="light"] .msg.user { background: linear-gradient(140deg, #eee9e0, #e6e2da); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
:root[data-theme="light"] .msg.assistant { color: var(--text); }
:root[data-theme="light"] #modalText { background: #fff; }
:root[data-theme="light"] .chip-sel {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236f6a62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
:root[data-theme="light"] .drop-zone { background: rgba(255,255,255,.75); }
:root[data-theme="light"] pre, :root[data-theme="light"] code { background: #f2f0ec; }
/* Spots that hardcode dark colours instead of using the variables */
:root[data-theme="light"] .login { background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--bg) 60%); }
:root[data-theme="light"] .login-card { box-shadow: 0 18px 50px rgba(0,0,0,.12); }
:root[data-theme="light"] .msg.error { background: #fdeceb; border-color: #f0c4c0; }
:root[data-theme="light"] .conn-banner { background: #fdeceb; color: #a33227; border-bottom-color: #f0c4c0; }
:root[data-theme="light"] .logline.warn { background: #fbf3e0; }
:root[data-theme="light"] .logline.error { background: #fdeceb; }
:root[data-theme="light"] .toast, :root[data-theme="light"] .dz-card { box-shadow: 0 10px 30px rgba(0,0,0,.15); }
:root[data-theme="light"] .sb-new { color: #fff; }
:root[data-theme="light"] #providerSel.codex, :root[data-theme="light"] .chip-sel.danger { background-color: #fff; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
/* Interface scale: body is zoomed (see ui.js); size it in viewport units divided by the
   scale so the zoomed box keeps exactly filling the screen. */
body { width: calc(100vw / var(--ui-scale, 1)); height: calc(100dvh / var(--ui-scale, 1)); overflow: hidden; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
button { cursor: pointer; font: inherit; color: inherit; border: none; background: none; }
input, textarea, select { font: inherit; color: var(--text); }
.icon-btn { font-size: 17px; color: var(--muted); padding: 5px 8px; border-radius: 8px; }
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--err); transition: background .3s; flex: none; }
.dot.on { background: var(--ok); }

/* ---------- Login ---------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 80% at 50% 0%, #26241f 0%, var(--bg) 60%); z-index: 100; }
.login-card { width: 100%; max-width: 360px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-card .logo { font-size: 40px; color: var(--accent); }
.login-card h1 { margin: 0; font-size: 22px; font-weight: 650; }
.login-card p { margin: 0 0 8px; }
.login-card input, .login-card button { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-3); }
.login-card button { background: var(--accent); color: #fff; border: none; font-weight: 650; margin-top: 4px; }
.error-text { color: var(--err); font-size: 14px; min-height: 18px; }

/* ---------- App shell ---------- */
.app { display: flex; height: 100%; overflow: hidden; }

/* Sidebar */
.sidebar { width: 272px; flex: none; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: margin-left .2s ease; }
.app.collapsed .sidebar { margin-left: -272px; }
.sb-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.sb-brand { font-weight: 650; color: var(--accent); }
.sb-actions { padding: 6px 12px; display: flex; gap: 6px; }
.sb-new { flex: 1; background: var(--accent); color: #fff; border-radius: 10px; padding: 9px 10px; font-size: 13.5px; font-weight: 600; }
.sb-new.ghost { flex: none; background: var(--bg-3); color: var(--text); border: 1px solid var(--border); }
.sb-new:active { filter: brightness(1.1); }
.sb-section { padding: 14px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sb-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.sb-item:hover { background: var(--bg-2); }
.sb-item.active { background: var(--bg-3); }
.sb-item .bdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bdot.code { background: #9cc06a; } .bdot.chat { background: #6fa8d6; }
.sb-item .it { flex: 1; min-width: 0; }
.sb-item .it .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.sb-item .it .m { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item .x { font-size: 15px; color: var(--muted); opacity: 0; padding: 0 2px; }
.sb-item:hover .x { opacity: 1; }
/* Закреплённые: слегка выделены и отбиты от обычной ленты. На телефоне «⋯» не появляется по
   наведению, поэтому кнопка действий у закреплённых видна всегда. */
.gone { display: none !important; } /* скрыт навсегда, переключатели .hidden его не оживят */
.sb-item.pinned { background: var(--bg-2); }
.sb-item.pinned .x { opacity: .75; }
.sb-item .pin-ic { font-size: 10px; opacity: .8; margin-right: 1px; }
.sb-item.after-pins { margin-top: 10px; position: relative; }
.sb-item.top-pin { background: color-mix(in srgb, var(--accent) 13%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; margin: 2px 0 4px; }
.sb-item.top-pin .t { font-weight: 600; }
.sb-item.top-pin .pin-ic { display: none; }
.sb-item.top-pin .t::before { content: '⭐'; font-size: 11px; margin-right: 4px; }
.sb-item.after-top { margin-top: 12px; position: relative; }
.sb-item.after-top::before { content: ''; position: absolute; left: 10px; right: 10px; top: -6px; height: 1px; background: var(--border); }
.sb-item.after-pins::before { content: ''; position: absolute; left: 10px; right: 10px; top: -5px; height: 1px; background: var(--border); }
.sb-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--border); }
.acct { flex: 1; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-backdrop { display: none; }

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
#sbOpen { display: none; }
/* На широком экране ☰ в шапке появляется, как только сайдбар свёрнут — иначе после «Свернуть»
   его было нечем вернуть (в шапке кнопка была только для мобильной раскладки). */
.app.collapsed #sbOpen { display: inline-block; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn { padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); font-weight: 550; }
.seg-btn.active { background: var(--bg-3); color: var(--text); }
.main-title { flex: 1; min-width: 0; text-align: center; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-banner { background: #3a2622; color: #e6b0a8; text-align: center; font-size: 13px; padding: 7px; border-bottom: 1px solid #5a3a34; }

.content { flex: 1; min-height: 0; display: flex; }
.messages { flex: 1; overflow-y: auto; padding: 22px 16px; display: flex; flex-direction: column; gap: 16px; font-size: var(--chat-font, 15px); }
.messages > * { width: 100%; max-width: 760px; margin: 0 auto; }

/* messages */
.msg { border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); border: 1px solid var(--border); padding: 11px 14px; max-width: min(85%, 760px); border-bottom-right-radius: 5px; }
.msg.assistant { align-self: flex-start; padding: 2px 2px; }
.msg.system { align-self: center; color: var(--muted); font-size: 13px; text-align: center; }
.msg.error { align-self: center; background: #3a2622; color: var(--err); border: 1px solid #5a3a34; padding: 10px 14px; border-radius: 12px; font-size: 14px; max-width: 760px; }
.msg.user, .msg.system, .msg.error { margin-left: auto; margin-right: auto; }
.msg.user { margin-right: 0; } /* keep user bubble right within centered column */
.part { white-space: pre-wrap; }
.part + .part { margin-top: 8px; }
.thinking { color: var(--muted); font-size: 13px; font-style: italic; border-left: 2px solid var(--border); padding-left: 8px; }

.tool { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; font-size: 13px; overflow: hidden; }
.tool summary { padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; }
.tool summary::-webkit-details-marker { display: none; }
.tool .tname { font-weight: 650; color: var(--accent-2); }
.tool .tsum { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tool pre { margin: 0; padding: 10px 12px; background: #1112; border-top: 1px solid var(--border); overflow-x: auto; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfcabf; }
.tool pre.res { color: #b8d8bb; } .tool pre.err { color: #e0a39c; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.meta { font-size: 12px; color: var(--muted); margin-top: 6px; }

.perm { align-self: stretch; background: #2c2a20; border: 1px solid #4d4733; border-radius: 12px; padding: 12px; font-size: 14px; }
.perm .pq { margin-bottom: 10px; } .perm .pq b { color: var(--accent-2); }
.perm-actions { display: flex; gap: 10px; }
.perm-actions button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 600; }
.perm-allow { background: var(--ok); color: #14210f; }
.perm-deny { background: var(--bg-3); border: 1px solid var(--border); }

/* Composer */
.composer { border-top: 1px solid var(--border); padding: 12px 16px calc(12px + var(--safe-b)); }
.composer > * { max-width: 760px; margin: 0 auto; }
.composer-box { display: flex; align-items: flex-end; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; padding: 8px 8px 8px 14px; }
#input { flex: 1; resize: none; max-height: 180px; min-height: 26px; background: none; border: none; padding: 6px 0; outline: none; }
.send-btn, .stop-btn { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; color: #fff; flex: none; }
.send-btn { background: var(--accent); } .send-btn:disabled { opacity: .5; }
.send-btn.wide { width: auto; padding: 0 20px; }
.stop-btn { background: var(--err); }
/* Control bar — a symmetric grid of identical chips (desktop 4/row, mobile 2/row).
   Every chip shares one geometry: equal flex basis + fixed height + centred, ellipsised text. So
   picking a longer value ("🔓 Полный доступ", "effort: medium") only changes COLOUR, never width —
   the row can no longer reflow into the ragged, overlapping two lines it used to.
   .cb-left/.cb-right are display:contents so their selects are direct flex items: when app.js hides
   a group (chat = 2 chips, Codex = 3) the rest simply grow and stay even, with no leftover holes. */
/* ONE row: model · effort · access · ⏰. The three selects share the width equally and the clock is
   a fixed-width icon, so the row stays symmetric whatever the chosen values are. */
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cb-icon { flex: 0 0 auto; width: 38px; height: 34px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 15px; position: relative; }
.cb-icon:hover { color: var(--text); border-color: var(--accent); }
.chip-sel {
  flex: 1 1 0; min-width: 0; height: 34px;
  appearance: none; -webkit-appearance: none;
  background-color: var(--bg-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239a958c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
  border: 1px solid var(--border); color: var(--muted); border-radius: 10px;
  padding: 0 21px 0 9px; font-size: 12px;
  text-align: center; text-align-last: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-sel:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204,120,92,.18); }
.chip-sel.amber { color: var(--amber); border-color: #574a2e; }
/* Engine as a single header icon */
#provBtn { font-size: 16px; font-weight: 650; color: var(--accent-2); }
#provBtn.codex { color: #74c0a8; }
.chip-sel.danger { color: var(--err); border-color: #5a3330; background-color: #2e1d1a; }
/* Context read-out gets its own full-width line under the chips (order:9 = always last), and
   collapses entirely while empty so it never leaves a phantom gap. */
.ctx-info { order: 9; flex: 1 0 100%; text-align: center; min-width: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px 0; }
.ctx-info:empty { display: none; }
.ctx-info.warn { color: var(--amber); }
.ctx-info.full { color: var(--err); }

/* Files */
.files-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.files-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.breadcrumb { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 14px; }
.breadcrumb a { color: var(--accent-2); text-decoration: none; cursor: pointer; }
.breadcrumb span.sep { color: var(--muted); margin: 0 4px; }
.files-actions { display: flex; gap: 6px; }
.ghost-btn { background: var(--bg-3); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.ghost-btn:active { background: var(--line); }
.upload-bar { height: 4px; background: var(--bg-3); }
#uploadProgress { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.file-list { flex: 1; overflow-y: auto; }
.file-list > * , .file-row { max-width: 860px; margin: 0 auto; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.file-row .ic { font-size: 19px; flex: none; } .file-row .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.file-row.dir .fn { font-weight: 550; }
.file-row .fmeta { font-size: 12px; color: var(--muted); flex: none; }
.file-row .fact { font-size: 17px; color: var(--muted); padding: 4px 6px; }
.empty { text-align: center; color: var(--muted); padding: 44px 20px; }

/* Modals */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 200; }
.modal-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 760px; height: calc(80dvh / var(--ui-scale, 1)); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-head span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalText { flex: 1; resize: none; border: none; background: #1112; padding: 14px; font: 13px/1.5 ui-monospace, monospace; }
.modal-foot { padding: 10px 16px calc(10px + var(--safe-b)); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* Diagnostics */
.diag-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 14px; }
.health-grid div { font-size: 13px; }
.health-grid b { color: var(--muted); font-weight: 500; }
.logline { font: 12px/1.4 ui-monospace, monospace; padding: 4px 8px; border-radius: 6px; margin-bottom: 3px; white-space: pre-wrap; word-break: break-word; }
.logline.info { color: #b9b4aa; } .logline.warn { color: var(--amber); background: #2a2410; }
.logline.error { color: #e7a59d; background: #2e1d1a; }
.logline .lt { color: var(--muted); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 300; max-width: 90%; box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  .sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; margin-left: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .app.sb-open .sidebar { transform: translateX(0); }
  .app.collapsed .sidebar { margin-left: 0; }
  .app.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
  #sbOpen { display: inline-block; }
  .main-title { display: none; }
  .seg-btn { padding: 6px 9px; font-size: 12.5px; }
  /* Stay in ONE row on phones too — the three selects just get tighter and ellipsise. */
  .chip-sel { height: 36px; font-size: 12px; padding: 0 17px 0 6px; background-position: right 5px center; }
  .cb-icon { height: 36px; width: 34px; }
  .messages { padding: 16px 12px; }
  .seg { padding: 2px; }
}

/* ============ POLISH — atmosphere, motion, refined components ============ */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(115% 85% at 100% -5%, rgba(204,120,92,.10), transparent 48%),
    radial-gradient(95% 70% at -10% 105%, rgba(204,120,92,.06), transparent 45%);
  background-attachment: fixed;
}
.seg-btn, .chip-sel, .sb-new, .send-btn, .stop-btn, .ghost-btn, .icon-btn, .mic-btn, .tab, .sb-item, .file-row { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; }
.send-btn:active, .stop-btn:active, .ghost-btn:active, .sb-new:active, .mic-btn:active, .seg-btn:active, .icon-btn:active { transform: scale(.93); }

.msg { animation: msgIn .34s cubic-bezier(.22,.68,.18,1) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.msg.user { background: linear-gradient(140deg, #34332e, #2a2a26); box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.seg-btn.active { box-shadow: inset 0 -2px 0 rgba(204,120,92,.55); }

.composer-box { box-shadow: 0 6px 22px rgba(0,0,0,.28); transition: border-color .2s, box-shadow .2s; }
.composer-box:focus-within { border-color: rgba(204,120,92,.55); box-shadow: 0 6px 26px rgba(204,120,92,.14); }

.mic-btn { width: 38px; height: 38px; border-radius: 11px; flex: none; font-size: 16px; background: var(--bg-3); border: 1px solid var(--border); color: var(--muted); }
.mic-btn:hover { color: var(--text); }
.mic-btn.listening { background: var(--accent); color: #fff; border-color: var(--accent); animation: micPulse 1.3s infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(204,120,92,.55); } 50% { box-shadow: 0 0 0 9px rgba(204,120,92,0); } }

.thinking-ind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; }
.thinking-ind .td { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tdot 1.25s infinite ease-in-out; }
.thinking-ind .td:nth-child(2) { animation-delay: .18s; }
.thinking-ind .td:nth-child(3) { animation-delay: .36s; }
.thinking-ind .tl { color: var(--muted); font-size: 13px; margin-left: 5px; opacity: .85; }
@keyframes tdot { 0%,65%,100% { transform: translateY(0); opacity: .35; } 32% { transform: translateY(-5px); opacity: 1; } }

.app.sb-open .sb-backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sb-new { background: linear-gradient(135deg, var(--accent), #b76a50); box-shadow: 0 2px 10px rgba(204,120,92,.22); }
.sb-new.ghost { background: var(--bg-3); box-shadow: none; }
.dot.on { box-shadow: 0 0 7px rgba(108,171,116,.7); }

.limit { margin: 6px 0 16px; }
.limit-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.limit-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.limit-pct.warn { color: var(--amber); } .limit-pct.full { color: var(--err); }
.limit-track { height: 9px; background: var(--bg-3); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.limit-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .7s cubic-bezier(.22,.68,.18,1); }
.limit-fill.warn { background: linear-gradient(90deg, #c98f3e, #d8a657); }
.limit-fill.full { background: linear-gradient(90deg, #c8554b, #d9695f); }
.limit-sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

@media (max-width: 899px) {
  .messages { padding: 18px 13px; gap: 14px; }
  .msg.user { padding: 12px 15px; }
  .seg-btn { padding: 9px 12px; }
  .sb-item { padding: 13px 12px; }
  .sb-item .it .t { font-size: 14.5px; }
  .file-row { padding: 15px 16px; }
  .composer { padding: 10px 12px calc(12px + var(--safe-b)); }
  .composer-box { border-radius: 18px; padding: 9px 9px 9px 16px; }
  #input { font-size: 16px; }
  .mic-btn, .send-btn, .stop-btn { width: 42px; height: 42px; }
  .icon-btn { padding: 8px 10px; font-size: 18px; }
}

/* ============ Guest (simple) page ============ */
.gapp { display: flex; height: 100%; overflow: hidden; }
.g-drawer { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: 282px; max-width: 84vw; background: var(--bg-side); border-right: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); }
.gapp.open .g-drawer { transform: translateX(0); }
.gapp.open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 40; }
.g-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; }
.g-drawer .sb-new { margin: 8px 12px 4px; font-size: 14.5px; padding: 13px; }
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.g-top .icon-btn { font-size: 20px; }
.g-title { flex: 1; text-align: center; font-weight: 650; font-size: 16.5px; }
.g-welcome { margin: auto; text-align: center; color: var(--muted); padding: 28px; max-width: 460px; animation: msgIn .5s both; }
.g-welcome .wl-logo { font-size: 50px; color: var(--accent); margin-bottom: 14px; filter: drop-shadow(0 4px 16px rgba(204,120,92,.35)); }
.g-welcome h2 { color: var(--text); font-weight: 650; margin: 0 0 10px; font-size: 22px; }
.g-welcome p { margin: 6px 0; font-size: 15.5px; line-height: 1.55; }
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 0 auto 8px; }
.attach-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; max-width: 220px; }
.attach-chip .acn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .acx { color: var(--muted); cursor: pointer; font-size: 15px; }
.g-main .composer-box { border-radius: 18px; }
.g-main #input { font-size: 16px; }
.g-main .mic-btn, .g-main .send-btn, .g-main .stop-btn { width: 42px; height: 42px; }

/* Inline download chips for generated files (rendered inside chat messages) */
.file-dl { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; font-size: 13.5px; color: var(--text); text-decoration: none; max-width: 100%; transition: background .15s, border-color .15s, transform .12s; }
.file-dl:hover { background: var(--bg-3); border-color: var(--accent); }
.file-dl:active { transform: scale(.96); }
.file-dl .fdn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.file-dl .fdi { color: var(--accent-2); font-weight: 700; }

/* Send-while-busy mode picker — only visible while a task is running */
.steer-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 760px; margin: 0 auto 8px; }
.sr-label { font-size: 11.5px; color: var(--muted); margin-right: auto; }
.sr-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); border-radius: 9px; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.sr-btn.active { color: var(--text); border-color: var(--accent); background: #2f241f; }
.sr-btn:active { transform: scale(.94); }

/* A message injected into a running answer: shown inline, where the answer was cut off */
.steer-in { margin: 10px 0; padding: 8px 11px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: #2f241f; color: var(--text); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

/* VPN profiles */
.vpn-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.vpn-name { font-size: 15px; font-weight: 600; }
.vpn-note { font-size: 12.5px; color: var(--muted); margin: 3px 0 8px; }
.vpn-state { font-size: 13px; margin-bottom: 10px; }
.vpn-on { color: var(--ok); font-weight: 600; }
.vpn-off { color: var(--muted); }
.vpn-warn { color: var(--amber); }
.vpn-card .send-btn.wide, .vpn-card .ghost-btn { width: 100%; }

/* Sidebar: phone vs imported-PC session tabs */
.sb-tabs { display: flex; gap: 6px; margin: 4px 10px 8px; }
.sb-tab { flex: 1; padding: 8px 6px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.sb-tab.active { background: var(--bg-3); color: var(--text); border-color: var(--accent); }

/* Settings sheet: quick links to Files / Photos / session folder */
.set-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.set-nav-btn { flex: 1 1 30%; padding: 12px 8px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.set-nav-btn:hover { border-color: var(--accent); }
.set-nav-btn:active { transform: scale(.97); }

/* Sidebar search + running indicator */
.sb-search { margin: 0 10px 8px; padding: 9px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text); outline: none; display: block; width: calc(100% - 20px); }
.sb-search:focus { border-color: var(--accent); }
.bdot.run { background: var(--accent); animation: runPulse 1.15s ease-in-out infinite; }
.run-ind { color: var(--accent-2); font-weight: 600; }
@keyframes runPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(204,120,92,.55); } 50% { box-shadow: 0 0 0 5px rgba(204,120,92,0); } }

/* Copy-answer button */
.msg.assistant { position: relative; }
.copy-btn { position: absolute; top: 6px; right: 6px; font-size: 14px; line-height: 1; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; opacity: .55; }
.copy-btn:hover, .copy-btn:active { opacity: 1; color: var(--text); }

/* Scheduled prompts */
#schedBtn { position: relative; }
.sched-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center; font-weight: 650; }
.sched-text { width: 100%; resize: vertical; min-height: 84px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; font-size: 14.5px; outline: none; }
.sched-text:focus { border-color: var(--accent); }
.sched-lab { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
.sched-at { width: 100%; background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 15px; color: var(--text); outline: none; }
.sched-at:focus { border-color: var(--accent); }
.sched-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sched-list { display: flex; flex-direction: column; gap: 6px; }
.sched-item { display: flex; align-items: center; gap: 9px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 11px; font-size: 13px; }
.sched-when { color: var(--accent-2); white-space: nowrap; font-weight: 600; }
.sched-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.sched-del { color: var(--muted); cursor: pointer; font-size: 15px; flex: none; padding: 0 2px; }
.sched-empty { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }

/* Drag & drop overlay — pointer-events:none so the drop still reaches the document handler */
.drop-zone { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(18,18,16,.72); pointer-events: none; }
.dz-card { border: 2px dashed var(--accent); border-radius: 18px; padding: 26px 30px; background: var(--bg-2); color: var(--text); font-size: 15px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.dz-ico { font-size: 34px; margin-bottom: 8px; }

/* Empty chat: shortcuts to recent conversations */
.recents { max-width: 720px; margin: 10px auto; display: flex; flex-direction: column; gap: 6px; }
.rc-title { font-size: 12px; color: var(--muted); padding: 0 2px 2px; }
.rc-item { display: flex; align-items: center; gap: 9px; text-align: left; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 14px; color: var(--text); }
.rc-item:hover { border-color: var(--accent); }
.rc-item:active { transform: scale(.985); }
.rc-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-m { font-size: 11.5px; color: var(--muted); flex: none; }
.rc-hint { font-size: 12.5px; color: var(--muted); text-align: center; padding: 12px 4px 0; line-height: 1.5; }

/* Jump-to-bottom FAB */
#jumpBtn { position: fixed; right: 18px; bottom: calc(118px + var(--safe-b)); z-index: 60; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s, transform .18s; }
#jumpBtn.show { opacity: 1; pointer-events: auto; transform: none; }

/* Codex badge in session lists */
.pbadge { color: #74c0a8; font-weight: 700; }

/* Queued message: waits for the current task, promoted to a normal bubble when it starts */
.msg.user.queued { opacity: .62; border: 1px dashed var(--border); box-shadow: none; }
.msg.user.queued::after { content: '⏳ в очереди — отправится после завершения'; display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ===== Images ===== */
/* Inline in chat: adaptive previews — natural aspect, fill width up to a cap. */
.chat-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.chat-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chat-img { position: relative; margin: 0; flex: 1 1 240px; max-width: min(100%, 380px); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #0b0b0a; }
.chat-img img { display: block; width: 100%; height: auto; max-height: 46dvh; object-fit: contain; cursor: zoom-in; }
/* Gallery / many: responsive square grid that fills the container width. */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 8px 0; }
.img-grid.gallery { padding: 12px 14px calc(14px + var(--safe-b)); }
.img-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-2); }
.img-cell img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.img-dl { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; background: rgba(0,0,0,.6); color: #fff; border-radius: 9px; font-size: 15px; text-decoration: none; }
.img-dl:active, .img-dl:hover { background: var(--accent); }
/* Lightbox */
.img-modal { z-index: 400; padding: 10px; }
.img-view { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.img-view img { max-width: min(96vw, 900px); max-height: calc(88dvh - 52px); object-fit: contain; background: #000; }
.img-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + var(--safe-b)); }
.img-bar .imn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.gallery-pane { flex: 1; min-width: 0; overflow-y: auto; }
.gallery-card { height: calc(84dvh / var(--ui-scale, 1)); }
.gallery-body { flex: 1; overflow-y: auto; padding: 0; }
@media (max-width: 899px) {
  .img-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
  .chat-img img { max-height: 52dvh; }
  .img-dl { min-width: 34px; height: 34px; }
}

/* Guest engine toggle */
.g-provider-row { max-width: 760px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 12px 0; }
.gp-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.gp-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.gp-btn.active { color: var(--text); background: var(--bg-3); border-color: var(--accent); }
.gp-btn[data-p="codex"].active { color: #74c0a8; border-color: #2f5a4c; background: #16241f; }

/* Attach (paperclip) button — crisp SVG, centered */
#attachBtn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#attachBtn svg { display: block; opacity: .92; }
#attachBtn:active { transform: scale(.93); }

/* ============ Rendered Markdown (assistant messages) ============ */
.part > :first-child { margin-top: 0; }
.part > :last-child { margin-bottom: 0; }
.part h1, .part h2, .part h3, .part h4, .part h5, .part h6 { margin: 13px 0 6px; line-height: 1.3; font-weight: 650; }
.part h1 { font-size: 1.34em; } .part h2 { font-size: 1.22em; } .part h3 { font-size: 1.12em; } .part h4 { font-size: 1.04em; }
.part h5, .part h6 { font-size: 1em; color: var(--muted); }
.part p { margin: 8px 0; }
.part ul, .part ol { margin: 8px 0; padding-left: 22px; }
.part li { margin: 3px 0; }
.part li > ul, .part li > ol { margin: 2px 0; }
.part a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.part code { background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; }
.part pre { background: rgba(8,8,7,.85); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; }
.part pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.5; color: #d7d2c7; }
.part blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 2px 0 2px 12px; color: var(--muted); }
.part hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.part table { border-collapse: collapse; margin: 10px 0; font-size: 13.5px; display: block; overflow-x: auto; max-width: 100%; }
.part th, .part td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.part th { background: var(--bg-3); font-weight: 600; }
.part strong { font-weight: 700; }
.part em { font-style: italic; }
.part del { opacity: .65; }

/* ============ Code block actions (copy / download) ============ */
.code-wrap { position: relative; }
.code-wrap pre { padding-top: 34px; }
.code-bar { position: absolute; top: 6px; right: 8px; display: flex; gap: 6px; z-index: 1; }
.code-btn { background: var(--bg-3); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 4px 9px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
.code-btn:hover { color: var(--text); background: var(--bg-2); }
.code-btn:active { transform: scale(.93); }

/* Per-message export bar (download answer as Word / Excel) */
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--accent-2); border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ex-btn:hover { background: var(--bg-3); color: var(--text); }
.ex-btn:active { transform: scale(.95); }
.ex-btn:disabled { opacity: .6; }

/* ============ Appearance settings dialog ============ */
.settings-card { height: auto; max-width: 460px; }
.settings-body { padding: 18px 18px calc(18px + var(--safe-b)); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.set-row { display: flex; flex-direction: column; gap: 8px; }
.set-row label { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.set-row label b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.set-hint { font-size: 12.5px; color: var(--muted); }
.set-sample { background: var(--bg-3); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 5px; background: var(--bg-3); border: 1px solid var(--border); outline: none; accent-color: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid #fff2; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid #fff2; cursor: pointer; }
.settings-body .ghost-btn { align-self: flex-start; padding: 9px 14px; }

/* Theme picker in settings */
.set-nav-btn.active { border-color: var(--accent); background: var(--bg-2); color: var(--text); font-weight: 600; }

/* «Показать ещё» — подгрузка старой части переписки */
.tx-more { display: block; margin: 4px auto 10px; padding: 10px 18px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.tx-skel { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 0; color: var(--muted); font-size: 14px; }
.sb-item.loading { opacity: .55; }
.tx-more:hover { border-color: var(--accent); color: var(--text); }
.tx-more:disabled { opacity: .6; }

/* Правка сообщения, ждущего в очереди */
.msg.user.queued { cursor: pointer; }
.msg.user.queued:hover { filter: brightness(1.12); }
.q-edit { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; resize: vertical; }
.q-edit:focus { outline: none; border-color: var(--accent); }
.q-edit-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.q-edit-actions .ghost-btn.danger { color: #e7a59d; border-color: #5a3430; }

/* Расход по дням в панели статуса */
.usage-days { display: flex; align-items: flex-end; gap: 6px; padding: 2px 0 4px; }
.ud { flex: 1; text-align: center; min-width: 0; }
.ud-bar { position: relative; height: 46px; background: var(--bg-3); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.ud-fab { width: 100%; background: var(--amber); }
.ud-n { font-size: 10px; color: var(--muted); margin-top: 3px; }
.ud-d { font-size: 9px; color: var(--muted); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v81 */
/* Ответ не получен — причина и кнопка «Повторить» вместо немого «(пусто)» */
.no-answer { color: var(--err); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.retry-btn { background: var(--bg-3); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; font-size: 13px; line-height: 1.2; cursor: pointer; }
.retry-btn:hover { border-color: var(--accent); }
.meta .retry-btn, .msg.error .retry-btn { margin-left: 8px; }
.msg.error .retry-btn { display: inline-block; margin-top: 6px; }
.tool-wait { color: var(--muted); font-size: 12px; padding: 4px 10px; }
details.tool.tool-err > summary .tname { color: var(--err); }

/* ======================================================================
   v82 — REDESIGN: warm graphite + clay, serif display, Claude-style composer,
   account card. Overrides only; light theme follows through the variables.
   ====================================================================== */
:root {
  --bg: #181716; --bg-side: #131211; --bg-2: #211f1d; --bg-3: #2b2926;
  --border: #3a37336b; --text: #efebe4; --muted: #a09a90;
  --accent: #d97757; --accent-2: #e8906f; --user: #2a2522;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --r-lg: 22px; --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
}
:root[data-theme="light"] { --accent: #c96442; --accent-2: #a9502f; --bg: #f6f4ef; --bg-side: #eeebe4; --shadow-lg: 0 18px 50px rgba(0,0,0,.14); }
body { letter-spacing: .005em; }
body::before { /* тонкое «зерно», чтобы фон не был плоским */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.app, .login, .gapp { position: relative; z-index: 1; }
.login { position: fixed; z-index: 100; }
.cfg-hidden { display: none !important; }

/* ---- Buttons: rounded squares with a soft hover ---- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 11px; }
.icon-btn svg { display: block; }

/* ---- Login ---- */
.login-card { border-radius: 26px; padding: 38px 26px 30px; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.login-card .logo { font-size: 50px; line-height: 1; animation: slowspin 24s linear infinite; filter: drop-shadow(0 6px 20px rgba(217,119,87,.4)); }
.login-card h1 { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.01em; }
.login-card h1 em, .sb-brand em { font-style: italic; color: var(--accent); }
.login-card button { background: linear-gradient(135deg, var(--accent), #c0603f); box-shadow: 0 8px 22px rgba(217,119,87,.3); }
@keyframes slowspin { to { transform: rotate(360deg); } }

/* ---- Sidebar ---- */
.sb-top { justify-content: space-between; padding: 14px 10px 10px 16px; }
.sb-brand { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text); display: inline-flex; align-items: center; gap: 7px; letter-spacing: -.01em; }
.sb-logo { color: var(--accent); font-size: 21px; display: inline-block; transition: transform .6s ease; }
.sb-brand:hover .sb-logo { transform: rotate(90deg); }
.sb-actions { padding: 4px 12px 8px; gap: 8px; }
.sb-new { border-radius: 12px; padding: 10px 12px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sb-new-ic { font-size: 16px; line-height: 1; }
#newChatBtn { width: 44px; padding: 0; font-size: 16px; }
.sb-tabs { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; margin: 2px 12px 10px; }
.sb-tab { border: none; background: none; border-radius: 9px; padding: 7px 4px; }
.sb-tab.active { background: var(--bg-3); border: none; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sb-search { margin: 0 12px 8px; width: calc(100% - 24px); border-radius: 11px; padding: 9px 12px 9px 34px;
  background: var(--bg-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a09a90' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 11px center; }
.sb-item { border-radius: 10px; position: relative; }
.sb-item.active { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }

/* ---- Account card + menu ---- */
.acct-foot { position: relative; padding: 8px 10px calc(10px + var(--safe-b)); border-top: 1px solid var(--border); }
.acct-card { width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 14px; text-align: left; transition: background .18s; }
.acct-card:hover, .acct-card.open { background: var(--bg-2); }
.acct-av { position: relative; width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font-size: 18px;
  background: linear-gradient(140deg, var(--accent), #a8492b); box-shadow: 0 4px 12px rgba(217,119,87,.28); }
.acct-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bg-side); background: var(--muted); }
.acct-dot.ok { background: var(--ok); } .acct-dot.bad { background: var(--err); animation: runPulse 1.3s infinite; }
.acct-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.acct-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card.bad .acct-sub { color: var(--err); }
.acct-chev { color: var(--muted); flex: none; transition: transform .2s; }
.acct-card.open .acct-chev { transform: rotate(180deg); }
.acct-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 4px); background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; padding: 6px; box-shadow: var(--shadow-lg); z-index: 5; animation: popIn .16s ease both; transform-origin: bottom center; }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.am-head { padding: 10px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.am-title { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-sub { font-size: 12px; margin-top: 2px; }
.am-ok { color: var(--ok); } .am-bad { color: var(--err); }
.am-lims:not(:empty) { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.am-lim { display: grid; grid-template-columns: 52px 1fr 38px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.am-lim .limit-track { height: 6px; }
.am-lim b { text-align: right; font-size: 11.5px; }
.am-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 10px; font-size: 14px; text-align: left; }
.am-item:hover { background: var(--bg-3); }
.am-item.danger { color: var(--err); }
.am-ic { width: 22px; text-align: center; font-size: 15px; }
.am-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ---- Header ---- */
.main-top { gap: 8px; padding: 8px 12px; min-height: 56px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; z-index: 3; }
.seg { border-radius: 12px; padding: 3px; }
.seg-btn { border-radius: 9px; padding: 6px 13px; }
.seg-btn.active { background: var(--bg-3); box-shadow: 0 1px 3px rgba(0,0,0,.28); color: var(--text); }
.main-title { font-family: var(--serif); font-size: 15.5px; color: var(--text); opacity: .85; }
#connDot { margin: 0 4px 0 2px; }

/* ---- Empty state hero ---- */
.recents { margin: auto; padding-bottom: 6vh; }
.hero { text-align: center; padding: 8px 0 22px; animation: msgIn .5s both; }
.hero-logo { font-size: 44px; line-height: 1; color: var(--accent); display: inline-block; animation: slowspin 30s linear infinite; filter: drop-shadow(0 6px 22px rgba(217,119,87,.38)); }
.hero h2 { font-family: var(--serif); font-weight: 500; font-size: 31px; letter-spacing: -.015em; margin: 12px 0 6px; color: var(--text); }
.hero-sub { color: var(--muted); font-size: 13.5px; }
.hero.still { animation: none; }
.rc-title { text-transform: uppercase; letter-spacing: .07em; font-size: 11px; padding: 0 4px 4px; }
.rc-item { border-radius: 14px; padding: 13px 14px; transition: border-color .18s, transform .12s, background .18s; }
.rc-item:hover { background: var(--bg-3); }

/* ---- Messages ---- */
.msg.user { background: linear-gradient(140deg, #3a2c25, #2c2522); border-color: rgba(217,119,87,.22); border-radius: 18px; border-bottom-right-radius: 6px; }
:root[data-theme="light"] .msg.user { background: linear-gradient(140deg, #f3e6de, #ece2da); border-color: #e2cdbf; }
.msg.assistant { line-height: 1.65; }
.tool { border-radius: 12px; }

/* ---- Composer: one card — text on top, controls inside along the bottom ---- */
.composer { border-top: none; padding: 6px 16px calc(14px + var(--safe-b)); }
.composer-box.stack { flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 10px 8px 16px; border-radius: var(--r-lg); background: var(--bg-2); }
.composer-box.stack #input { padding: 2px 4px 6px 0; min-height: 28px; }
.cbx-row { display: flex; align-items: center; gap: 6px; }
.cbx-sp { flex: 1; min-width: 0; }
.cbx-row .mic-btn, .cbx-row .cb-icon { width: 36px; height: 36px; border-radius: 11px; background: none; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cbx-row .mic-btn:hover, .cbx-row .cb-icon:hover { background: var(--bg-3); color: var(--text); border-color: transparent; }
.cbx-row .mic-btn.listening { background: var(--accent); color: #fff; }
.cbx-row .send-btn, .cbx-row .stop-btn { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.cbx-row .send-btn { background: linear-gradient(135deg, var(--accent), #c0603f); box-shadow: 0 4px 12px rgba(217,119,87,.3); }
.cfg-pill { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 62%; height: 32px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.cfg-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-pill svg { flex: none; opacity: .7; }
.cfg-pill:hover { color: var(--text); border-color: var(--accent); }
.cfg-pill.danger { color: var(--err); border-color: #5a3330; }
.composer-bar { margin-top: 4px; }
.composer-bar:has(.ctx-info:empty) { display: none; }

/* ---- Bottom sheet (model / effort / access) ---- */
.modal.sheet { place-items: end center; padding: 0; background: rgba(0,0,0,.5); animation: fadeIn .16s both; }
.modal.sheet.closing { opacity: 0; transition: opacity .16s; }
@keyframes fadeIn { from { opacity: 0; } }
.sheet-card { height: auto; max-height: 86dvh; max-width: 560px; border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + var(--safe-b)); overflow-y: auto; animation: sheetUp .24s cubic-bezier(.22,.68,.18,1) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } }
@media (min-width: 900px) { .modal.sheet { place-items: center; padding: 16px; } .sheet-card { border-radius: 22px; padding-top: 18px; } .sheet-grab { display: none; } }
.sheet-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--border); margin: 4px auto 10px; }
.cs-group { margin-bottom: 16px; }
.cs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 2px 8px; }
.cs-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-opt { flex: 1 1 auto; padding: 10px 12px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
.cs-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); box-shadow: 0 0 0 3px rgba(217,119,87,.14); }
.cs-model .cs-opt { flex: 1 1 40%; }
.cs-mode { flex-direction: column; }
.cs-mode .cs-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
.cs-ic { font-size: 20px; flex: none; }
.cs-tx { display: flex; flex-direction: column; } .cs-tx small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cs-mode .cs-opt[data-v="full"].active { border-color: var(--err); box-shadow: 0 0 0 3px rgba(217,105,95,.16); }
.cs-done { width: 100%; height: 46px; border-radius: 14px; margin-top: 2px; }

/* ---- Account switch dialog ---- */
.acct-sw { height: auto; max-height: 88dvh; max-width: 480px; }
.sw-cur { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--border); margin-bottom: 16px; }
.sw-cur.bad { border-color: #5a3330; }
.sw-av { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(140deg, var(--accent), #a8492b); flex: none; }
.sw-info { min-width: 0; }
.sw-name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-meta { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.sw-cur.ok .sw-meta { color: var(--ok); } .sw-cur.bad .sw-meta { color: var(--err); }
.sw-new { display: flex; flex-direction: column; gap: 10px; }
.sw-new .sched-lab { margin: 0; }
.sw-new .send-btn.wide, .sw-steps .send-btn.wide { width: 100%; height: 46px; border-radius: 14px; font-weight: 650; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sw-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.sw-steps li::marker { color: var(--accent); font-weight: 700; }
.sw-steps .set-hint { margin-top: 8px; line-height: 1.5; }
.sw-code { display: flex; gap: 8px; margin-bottom: 10px; }
.sw-code .sched-at { flex: 1; font: 13px ui-monospace, monospace; }
.sw-busy:not(:empty) { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; margin-top: 12px; }
.sw-cancel, .sw-back { width: 100%; margin-top: 14px; padding: 11px; }
.sw-done { background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--text); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.sw-err { margin-bottom: 14px; padding: 10px 12px; }

/* ---- Modals: softer ---- */
.modal-card { border-radius: 20px; box-shadow: var(--shadow-lg); }

@media (max-width: 899px) {
  .main-top { padding: 6px 8px; min-height: 52px; gap: 4px; }
  .seg-btn { padding: 8px 12px; }
  .composer { padding: 4px 10px calc(10px + var(--safe-b)); }
  .composer-box.stack { padding: 11px 8px 7px 14px; border-radius: 20px; }
  .cbx-row { gap: 4px; }
  .cbx-row .mic-btn, .cbx-row .cb-icon, .cbx-row .send-btn, .cbx-row .stop-btn { width: 38px; height: 38px; }
  .cfg-pill { max-width: 55%; }
  .hero h2 { font-size: 27px; }
  .acct-card { padding: 10px; }
}

/* ======================================================================
   v83 — FILES: toolbar in two rows, thumbnails, grid view, media viewer
   ====================================================================== */
.files-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px 10px; }
.files-toolbar > * { width: 100%; max-width: 860px; margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 2px; font-size: 13.5px; scrollbar-width: none; padding: 2px 0; mask-image: linear-gradient(90deg, transparent 0, #000 14px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px); }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a { flex: none; padding: 5px 9px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { background: var(--bg-2); color: var(--text); }
.breadcrumb a:last-child { color: var(--text); background: var(--bg-2); border: 1px solid var(--border); font-weight: 600; }
.breadcrumb span.sep { flex: none; margin: 0; opacity: .5; }
.files-actions { display: flex; align-items: center; gap: 6px; }
.fa-sp { flex: 1; }
.fa-btn { flex: none; height: 36px; min-width: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 14px; cursor: pointer; }
.fa-btn:hover { color: var(--text); border-color: var(--accent); }
.fa-btn:active { transform: scale(.94); }
.fa-primary { background: linear-gradient(135deg, var(--accent), #c0603f); color: #fff; border: none; padding: 0 14px; font-weight: 600; font-size: 13.5px; box-shadow: 0 4px 12px rgba(217,119,87,.28); }
.fa-primary:hover { color: #fff; filter: brightness(1.06); }

/* list rows */
.file-list { padding: 6px 10px calc(16px + var(--safe-b)); }
.file-row { gap: 12px; padding: 8px 10px; border-bottom: none; border-radius: 12px; cursor: pointer; }
.file-row:hover { background: var(--bg-2); }
.file-row .ic { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.file-row.dir .ic { background: color-mix(in srgb, var(--amber) 14%, var(--bg-2)); }
.file-row .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.file-row .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.file-row .fmeta { font-size: 12px; }
.file-row .fact { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.file-row .fact:hover { background: var(--bg-3); color: var(--text); }

/* grid view */
.file-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 10px 14px calc(16px + var(--safe-b)); width: 100%; max-width: 1100px; margin: 0 auto; align-content: start; box-sizing: border-box; }
.file-list.grid > * { max-width: none; margin: 0; }
.file-list.grid .file-row { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: var(--bg-2); border: 1px solid var(--border); position: relative; } /* no overflow:hidden — it lets the grid squash the tile below its content */
.file-list.grid .file-row:hover { border-color: var(--accent); }
.file-list.grid .file-row .ic { width: 100%; height: auto; aspect-ratio: 1; border: none; border-radius: 11px 11px 0 0; font-size: 42px; background: var(--bg-3); }
.file-list.grid .fbody { flex: none; padding: 8px 10px 9px; }
.file-list.grid .fn { font-size: 13px; }
.file-list.grid .fmeta { font-size: 11px; }
.file-list.grid .fact { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; width: 30px; height: 30px; }
.file-list.grid .empty { grid-column: 1 / -1; }

/* header in files / photos mode: back + title instead of the chat tabs (phones) */
.main-top #backBtn { order: -1; }
.main-top #sbOpen { order: -2; }
@media (max-width: 899px) {
  body[data-mode="files"] .seg, body[data-mode="images"] .seg { display: none; }
  body[data-mode="files"] .main-title, body[data-mode="images"] .main-title { display: block; text-align: left; font-size: 17px; opacity: 1; }
  .files-toolbar { padding: 8px 10px; }
  .file-list.grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 8px 10px calc(16px + var(--safe-b)); }
  .file-list.grid .ic { font-size: 34px; }
  .file-list.grid .fact { opacity: .9; }
  .fa-primary span { display: none; }
  .fa-primary { padding: 0 12px; }
}
@media (min-width: 420px) and (max-width: 899px) { .fa-primary span { display: inline; } }

/* ---- media viewer ---- */
.viewer { position: fixed; inset: 0; z-index: 450; background: rgba(8,8,7,.985); display: flex; flex-direction: column; animation: fadeIn .15s both; color: #eee; }
.vw-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 16px; }
.vw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.vw-count { font-size: 12.5px; color: #aaa; font-variant-numeric: tabular-nums; margin-right: 6px; }
.vw-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #eee; text-decoration: none; font-size: 17px; background: rgba(255,255,255,.08); }
.vw-btn:hover { background: rgba(255,255,255,.16); }
.vw-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; overflow: auto; touch-action: pan-y pinch-zoom; }
.vw-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: msgIn .22s both; cursor: zoom-in; }
.vw-img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.vw-video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.vw-audio-ic { font-size: 64px; margin-bottom: 18px; }
.vw-audio { width: min(92vw, 520px); }
.vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; font-size: 34px; line-height: 1; }
.vw-nav:hover { background: rgba(255,255,255,.18); }
.vw-nav.prev { left: 12px; } .vw-nav.next { right: 12px; }
.vw-meta { text-align: center; font-size: 12px; color: #999; padding: 8px 0 calc(12px + var(--safe-b)); }
@media (max-width: 899px) { .vw-nav { display: none; } }

/* ======================================================================
   v85 — API keys: mode banner, tabs, key cards
   ====================================================================== */
.sw-now { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.sw-now.api { background: color-mix(in srgb, var(--amber) 13%, transparent); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.sw-fb { margin-bottom: 12px; padding: 9px 11px; }
.sw-tabs { display: flex; width: 100%; margin-bottom: 14px; }
.sw-tabs .seg-btn { flex: 1; padding: 9px 6px; }
.key-card { background: var(--bg-3); border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.key-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,119,87,.12); }
.kc-top { display: flex; align-items: center; gap: 10px; }
.kc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); flex: none; }
.kc-name { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-name small { font-weight: 400; color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; margin-left: 8px; }
.kc-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 9px; flex: none; }
.kc-st { font-size: 13px; margin-top: 9px; line-height: 1.4; }
.kc-st.ok { color: var(--ok); } .kc-st.warn { color: var(--amber); } .kc-st.bad { color: var(--err); }
.kc-rl { font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kc-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kc-act { display: flex; gap: 8px; margin-top: 11px; }
.kc-act .send-btn.wide { flex: 1; height: 38px; border-radius: 11px; }
.kc-act .ghost-btn { height: 38px; }
.kc-act .ghost-btn.danger { color: var(--err); }
.key-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.key-add .sched-at[type=password] { font-family: ui-monospace, monospace; }
.acct-card.api .acct-av { background: linear-gradient(140deg, #d8a657, #a8762b); }
.kc-sp { flex: 1; }

/* v86 — relay (посредник) */
.sw-now.relay { background: color-mix(in srgb, #6fa8d6 14%, transparent); border-color: color-mix(in srgb, #6fa8d6 45%, transparent); }
.sw-tabs .seg-btn { font-size: 12.5px; padding: 9px 4px; }
.key-card.relay .kc-ic { background: color-mix(in srgb, #6fa8d6 18%, var(--bg-2)); }
.kc-models { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kc-m { font: 11px ui-monospace, monospace; padding: 3px 7px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); }
.kc-m.opus { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.acct-card.relay .acct-av { background: linear-gradient(140deg, #6fa8d6, #3f7aa8); }
.sw-tabs .seg-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fb { font-family: inherit; font-size: 12.5px; line-height: 1.5; }

/* ======================================================================
   v89 — header actions: one capsule on the right (folder · engine · settings),
   connection status as a small badge on the capsule instead of a loose dot
   ====================================================================== */
.top-actions { position: relative; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none;
  padding: 3px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.main-title + .top-actions { margin-left: 0; } /* on desktop the flexible title already pushes it right */
.ta-btn { min-width: 36px; height: 34px; padding: 0 8px; border-radius: 11px; color: var(--muted); }
.ta-btn:hover { background: var(--bg-3); color: var(--text); }
.ta-btn:active { transform: scale(.92); }
.ta-btn svg { display: block; }
#provBtn.ta-btn { font-size: 17px; font-weight: 700; color: var(--accent); }
#provBtn.ta-btn.codex { color: #74c0a8; }
/* status badge: top-right corner of the capsule, ringed with the header colour so it reads as a badge */
.top-actions #connDot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; margin: 0;
  border: 2px solid var(--bg); box-sizing: content-box; }
.top-actions #connDot.on { box-shadow: 0 0 6px rgba(108,171,116,.65); }
.top-actions #connDot:not(.on) { animation: runPulse 1.4s ease-in-out infinite; }
@media (max-width: 899px) {
  .main-top { gap: 6px; }
  .main-top .seg { flex: none; }
  .main-top .top-actions, .main-title + .top-actions { margin-left: auto; } /* title is hidden on phones — push the capsule to the right edge */
  .ta-btn { min-width: 38px; height: 36px; }
  .seg-btn { padding: 8px 11px; }
}

/* v92 — attachments as thumbnails: in sent messages and in the composer */
.msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.msg.user.only-atts { padding: 6px; }
.msg.user.only-atts .msg-atts { margin-top: 0; }
.ma-img { width: 92px; height: 92px; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-3); cursor: zoom-in; flex: none; }
.ma-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ma-img:hover img { transform: scale(1.05); }
.ma-img:active { transform: scale(.96); }
.ma-img.broken { width: auto; height: auto; padding: 8px 10px; font-size: 12.5px; cursor: default; }
.msg-atts:has(.ma-img:only-child) .ma-img { width: 180px; height: auto; max-height: 220px; }
.msg-atts:has(.ma-img:only-child) .ma-img img { height: auto; max-height: 220px; }
.ma-file { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 8px 11px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--border); font-size: 12.5px; color: var(--text); }
.ma-file .ma-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-file:hover { border-color: var(--accent); }
.msg.user.queued .ma-img, .msg.user.queued .ma-file { opacity: .9; }
/* composer chips */
.attach-chip { padding: 5px 9px 5px 5px; gap: 8px; }
.attach-chip .ac-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; cursor: zoom-in; flex: none; background: var(--bg-3); }
.attach-chip .ac-ic { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-3); font-size: 18px; flex: none; }
.attach-chip .acn { max-width: 150px; }

/* v94 — profile access picker */
.pa-list { display: flex; flex-direction: column; gap: 8px; }
.pa-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); }
.pa-opt.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,119,87,.14); }
.pa-opt.off { opacity: .5; }
.pa-ic { font-size: 20px; width: 28px; text-align: center; flex: none; }
.pa-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-tx b { font-size: 14px; } .pa-tx b small { font-weight: 400; color: var(--muted); font-family: ui-monospace, monospace; }
.pa-tx small { font-size: 12px; color: var(--muted); }
.pa-tx .pa-m { color: var(--accent-2); }

/* v90 — поле ввода: росло не больше 2 строк (flex:1 в колонке зажимал высоту), убран ползунок,
   добавлена «ручка» сверху — потянуть вверх, чтобы поле стало выше */
.composer-box.stack { position: relative; }
.composer-box.stack #input { flex: none; max-height: 70vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.composer-box.stack #input::-webkit-scrollbar { display: none; width: 0; height: 0; }
.input-grip { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; display: grid; place-items: center;
  cursor: ns-resize; touch-action: none; z-index: 2; }
.input-grip i { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--border); transition: background .15s, width .15s; }
.input-grip:hover i, .input-grip.on i { background: var(--accent); width: 48px; }
body.grip-drag, body.grip-drag * { cursor: ns-resize !important; user-select: none !important; }
@media (max-width: 899px) { .input-grip { top: -11px; height: 22px; width: 80px; } .input-grip i { background: color-mix(in srgb, var(--muted) 55%, transparent); } }

/* v91 — время у сообщений */
.msg-time { font-size: 11px; color: var(--muted); opacity: .75; margin-top: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg.user .msg-time { text-align: right; }
.msg.assistant > .msg-time { margin-top: 8px; }

/* v92 — ожидание фоновых задач внутри хода */
.bg-note { margin: 10px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--muted);
  background: color-mix(in srgb, var(--amber) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); }

/* v93 — свайп списка сессий на телефоне: пока тянем, без анимации; подложка видна и при закрытой панели */
@media (max-width: 899px) {
  .app.sb-drag .sidebar { transition: none; }
  .app.sb-drag .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
}

/* v94 — строку «🧠 контекст» под полем ввода убрали по просьбе владельца (селекты в ней и так скрыты) */
.composer-bar { display: none !important; }

/* v95 — на телефоне список сессий шире: 75% экрана (свайп считает ширину сам) */
@media (max-width: 899px) { .sidebar { width: 75vw; max-width: 75vw; } }

/* v96 — выбор иконки Android-приложения */
.apk-icons-card { height: auto; max-width: 420px; }
.apk-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.apk-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; background: var(--bg-3); border: 2px solid transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.apk-icon img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.apk-icon.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-3)); }
.apk-icons-hint { padding: 0 18px 16px; }

/* v97 — свайп вкладок «Мои / Комп / ФТП» в списке сессий */
.sb-tab { transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sb-swipe-hint { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; pointer-events: none; opacity: 0;
  padding: 8px 12px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--accent); color: var(--text);
  font-size: 13px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: opacity .12s; }
.sb-swipe-hint[data-side="right"] { right: 10px; }
.sb-swipe-hint[data-side="left"] { left: 10px; }

/* v98 — умный поиск по сессиям */
.sb-chips { display: none; gap: 6px; margin: -2px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.sb-chips::-webkit-scrollbar { display: none; }
.sb-chips.show { display: flex; }
.sb-chip { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap; }
.sb-chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.sb-sum { padding: 2px 10px 8px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sb-sum .spinner { width: 10px; height: 10px; }
.sb-tip { padding: 16px 12px; font-size: 12.5px; line-height: 1.6; }
.sb-item.sr { align-items: flex-start; }
.sb-item.sr .bdot { margin-top: 6px; }
.sb-item mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.sb-snip { display: flex; gap: 6px; align-items: baseline; margin-top: 5px; padding: 6px 8px; border-radius: 8px; background: var(--bg-2);
  font-size: 12px; line-height: 1.4; color: var(--muted); cursor: pointer; }
.sb-snip:active, .sb-snip:hover { background: var(--bg-3); color: var(--text); }
.sb-snip .who { flex: none; font-size: 11px; }
.sb-snip .tx { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.sb-snip .when { flex: none; font-size: 10.5px; opacity: .7; }
.sr-grp { font-size: 11px; opacity: .85; }
.msg.sr-flash { animation: srFlash 2.4s ease; }
@keyframes srFlash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 12%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

.msg mark.sr-hit { background: color-mix(in srgb, var(--accent) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; animation: srHit 4s ease forwards; }
@keyframes srHit { 0%, 70% { background: color-mix(in srgb, var(--accent) 45%, transparent); } 100% { background: transparent; } }

/* v99 — аналитика диска в «Статус, лимиты, логи» */
.disk-spark { width: 100%; height: 44px; display: block; margin: 2px 0 2px; }
.disk-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.disk-cat { margin: 4px 0 10px; }
.disk-cat summary { list-style: none; cursor: pointer; }
.disk-cat summary::-webkit-details-marker { display: none; }
.disk-cat[open] summary { margin-bottom: 6px; }
.disk-cat summary .limit-top b::after { content: ' ▸'; color: var(--muted); font-weight: 400; }
.disk-cat[open] summary .limit-top b::after { content: ' ▾'; }
.disk-top { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px 5px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.disk-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.disk-top span i { display: block; font-style: normal; font-size: 11px; opacity: .75; }
.disk-top b { flex: none; font-weight: 600; }

/* v100 — режим «📋 План» */
.plan-card { margin: 10px 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); overflow: hidden; }
.plan-card > pre, .plan-card > .spinner { display: none; }
.plan-head { padding: 9px 14px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.plan-body { padding: 4px 14px; }
.plan-actions { display: flex; gap: 8px; padding: 10px 14px 12px; flex-wrap: wrap; }
.plan-actions .send-btn { width: auto; height: auto; padding: 9px 16px; border-radius: 10px; font-size: 14px; }
body.plan-mode #cfgPill { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--accent); }

/* v101 — «Поделиться» */
.chat-files .file-share { flex: none; align-self: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); font-size: 16px; }
.chat-img { position: relative; }
.chat-img .img-share { position: absolute; right: 42px; bottom: 6px; min-width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; border: none; }
@media (max-width: 899px) { .chat-img .img-share { right: 46px; min-width: 34px; height: 34px; } }
.share-ready { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400; padding: 12px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v96 — slash command menu */
.cmd-menu { max-width: 760px; margin: 0 auto 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 5px; box-shadow: var(--shadow-lg); max-height: 46dvh; overflow-y: auto; animation: popIn .14s ease both; }
.cm-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-align: left; font-size: 13.5px; color: var(--text); }
.cm-item:hover { background: var(--bg-3); }
.cm-item code, .cm-row code { font: 13px ui-monospace, monospace; color: var(--accent-2); flex: none; min-width: 84px; }
.cm-item span { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item i { font-style: normal; font-size: 10.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; flex: none; }
.cm-row { display: flex; gap: 10px; padding: 6px 2px; font-size: 13.5px; align-items: baseline; }
.cm-row span { color: var(--muted); }

/* ---- Окно «Статус»: вкладки + нагрузка (29.09) ---- */
.diag-tabs { position: sticky; top: -14px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -14px -16px 12px; padding: 10px 16px 8px; background: var(--bg-2); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.diag-tabs::-webkit-scrollbar { display: none; }
.dt-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 4px !important; padding-right: 4px !important; background: var(--bg); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.dt-btn.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.dt-mini { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 2px 8px; font-size: 11.5px; margin-left: 4px; cursor: pointer; }
.dt-mini.active { color: var(--text); border-color: var(--accent); }
.ld-verdict { font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 10px; }
.ld-verdict.warn { border-color: #c98f3e; background: color-mix(in srgb, #c98f3e 12%, var(--bg)); }
.ld-verdict.full { border-color: #c8554b; background: color-mix(in srgb, #c8554b 14%, var(--bg)); }
.ld-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.ld-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ld-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ld-v { font-size: 24px; font-weight: 650; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.ld-v.warn { color: #d8a657; } .ld-v.full { color: #d9695f; }
.ld-card .limit-sub { margin-top: 5px; }
.ld-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px; }
.ld-chart { width: 100%; height: 90px; display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.ld-chart polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ld-cpu { stroke: var(--accent); } .ld-mem { stroke: #6fa8dc; }
.ld-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ld-axis { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ld-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: middle; }
.ld-dot.cpu { background: var(--accent); } .ld-dot.mem { background: #6fa8dc; }
.ld-row { margin-bottom: 9px; }
.ld-rt, .ld-unit { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 3px; }
.ld-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-num { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.limit-track.thin { height: 5px; }
.ld-units { display: flex; flex-direction: column; gap: 6px; }
.ld-unit { align-items: center; margin: 0; }
.ld-unit .ld-name { flex: 1; }
.ld-st { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8a857c; }
.ld-st.on { background: #6fbf73; box-shadow: 0 0 6px #6fbf7388; } .ld-st.off { background: #c8554b; }
@media (max-width: 380px) { .ld-cards { grid-template-columns: 1fr; } }

.dt-ic { margin-right: 4px; }
@media (max-width: 460px) { .dt-ic { display: none; } .dt-btn { font-size: 12.5px; } }

/* phones: current session name as a thin second line of the header (code/chat modes) */
@media (max-width: 899px) {
  body:not([data-mode="files"]):not([data-mode="images"]) .main-top { flex-wrap: wrap; row-gap: 2px; padding-bottom: 4px; }
  body:not([data-mode="files"]):not([data-mode="images"]) .main-title { display: block; order: 10; flex: 1 0 100%;
    font-size: 13px; line-height: 1.25; text-align: center; opacity: .75; padding: 0 8px; }
}

/* статичная плашка «отдельно сверху» под поиском (не прокручивается вместе со списком).
   NB: класс .sb-top уже занят шапкой сайдбара — поэтому .sb-pinbar */
.sb-pinbar { flex: none; display: block; min-width: 0; padding: 0 8px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.sb-pinbar.hidden { display: none; }
.sb-pinbar .sb-item { min-width: 0; width: 100%; box-sizing: border-box; }
.sb-pinbar .sb-item.top-pin { margin: 0 0 4px; }
.sb-pinbar .sb-item .it { flex: 1; min-width: 0; overflow: hidden; }
.sb-pinbar .sb-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* вкладка-ссылка «📨 Жалобы» (/dima) в переключателе Code/Чат */
.seg-link { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 420px) { .seg-link { font-size: 0; } .seg-link::before { content: "📨"; font-size: 15px; } }