/* panel-lite — стили. Основа — одобренный макет mockup/index.html (05.10.2026), плюс правила рабочей версии внизу.
   Создано 05.10.2026 — Claude-NL · чат «Привет! Давай напишем свою» · 89081230 */
  :root {
    --canvas: #fcfcfa;      /* полотно чата */
    --sidebar: #fafaf8;     /* сайдбар */
    --pill: #f0f0ee;        /* таблетка пользователя, пузырь, чипы */
    --hover: #eae9e5;       /* выбранная строка */
    --line: #e3e3e2;        /* рамки */
    --line-soft: #ededeb;
    --input: #fefefe;
    --text: #0e0e0e;
    --muted: #7e7c76;
    --faint: #a5a4a2;
    --blue: #256dd0;        /* рабочий синий: полосы, ползунок */
    --blue-soft: #dbe8fb;
    --select: #abd1fc;
    --coral: #d46c4d;       /* только звезда и точка активности */
    --ok: #3f9a5a;
    --warn: #c98a1b;
    --radius: 10px;
    /* ширина ленты и поля ввода — как в CloudCLI (panel-tweaks.css): до 68rem, но не шире окна */
    --col: min(68rem, 100%);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  ::selection { background: var(--select); }
  html, body { margin: 0; height: 100%; }
  body { font: 14px/1.5 var(--font); color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
  svg { display: block; }
  .icon { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  .app { display: grid; grid-template-columns: 268px 1fr; height: 100vh; }

  /* ═══ Сайдбар ═══ */
  .sidebar { background: var(--sidebar); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; }
  .sb-top { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; }
  .logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
  .sb-top .spacer { flex: 1; }
  .ghost { color: var(--muted); padding: 4px; border-radius: 6px; }
  .ghost:hover { background: var(--hover); color: var(--text); }
  .nav { padding: 2px 8px; }
  .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 8px; border-radius: 7px; text-align: left; }
  .nav-item:hover { background: var(--hover); }
  .nav-item.primary { background: var(--hover); }
  .nav-item .icon { color: var(--text); opacity: .8; }
  a.nav-item, a.pop-item { color: inherit; text-decoration: none; }
  .icon.ext { width: 12px; height: 12px; margin-left: auto; opacity: .45 !important; }
  .sidebar { position: relative; }
  #pop-user { left: 10px; right: 10px; bottom: 52px; }
  #pop-user .pop-item { white-space: nowrap; }
  .kbd { margin-left: auto; font-size: 11px; color: var(--faint); }
  .sb-scroll { flex: 1; overflow-y: auto; padding-bottom: 8px; }
  .sb-section { padding: 14px 8px 0; }
  .sb-head { display: flex; align-items: center; padding: 0 8px 4px; font-size: 12px; color: var(--muted); }
  .sb-head .tools { margin-left: auto; display: flex; gap: 6px; }
  .chat-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 8px; border-radius: 7px; text-align: left; white-space: nowrap; overflow: hidden; }
  .chat-row:hover { background: var(--hover); }
  .chat-row.active { background: var(--hover); }
  .chat-row .t { overflow: hidden; text-overflow: ellipsis; flex: 1; }
  .ring-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.3px solid var(--faint); flex: none; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; box-shadow: 0 0 0 3px rgba(212,108,77,.15); }
  .chat-row .when { font-size: 11px; color: var(--faint); }

  .sb-bottom { border-top: 1px solid var(--line-soft); padding: 10px; display: flex; align-items: center; gap: 8px; }
  .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; }
  .user { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; min-width: 0; flex: 1; }
  .user:hover { background: var(--hover); }
  .user .plan { color: var(--muted); font-size: 12px; }

  /* ═══ Основная область ═══ */
  .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
  .topbar { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 18px; border-bottom: 1px solid transparent; }
  .scene-chat .topbar { border-bottom-color: var(--line-soft); }
  .title { font-weight: 600; }
  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: var(--pill); font-size: 12px; color: var(--text); }
  .chip.outline { background: var(--input); border: 1px solid var(--line); }
  .topbar .spacer { flex: 1; }
  .status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 7px; position: relative; }
  .status:hover { background: var(--hover); }
  .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
  .limit-ring { position: relative; width: 18px; height: 18px; }
  .limit-ring svg { transform: rotate(-90deg); }

  .scroll { flex: 1; overflow-y: auto; }
  .column { max-width: var(--col); margin: 0 auto; padding: 28px 24px 24px; }

  /* стартовый экран */
  .greet { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 500; margin: 36px 0 26px; letter-spacing: -.01em; }
  .card { background: #f4f4f2; border-radius: 12px; padding: 12px; }
  .card-tabs { display: flex; gap: 4px; align-items: center; margin-bottom: 10px; font-size: 12px; }
  .tab { padding: 2px 8px; border-radius: 6px; color: var(--muted); }
  .tab.on { background: var(--hover); color: var(--text); font-weight: 500; }
  .card-tabs .r { margin-left: auto; display: flex; gap: 4px; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { background: var(--hover); border-radius: 8px; padding: 6px 9px; }
  .stat .k { font-size: 12px; color: var(--muted); }
  .stat .v { font-weight: 600; }
  .bars { margin-top: 12px; display: grid; gap: 9px; }
  .bar-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; }
  .bar-row .lbl { color: var(--muted); }
  .bar { height: 6px; background: #e6e6e3; border-radius: 3px; overflow: hidden; }
  .bar > i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
  .bar-row .pct { text-align: right; font-variant-numeric: tabular-nums; }
  .card-note { margin-top: 10px; font-size: 11px; color: var(--muted); }
  .recent-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .recent { border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 10px 12px; text-align: left; }
  .recent:hover { border-color: #cfcfcd; }
  .recent .rt { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recent .rs { font-size: 12px; color: var(--muted); }

  /* переписка */
  .msg-user { display: flex; justify-content: flex-end; margin: 6px 0 22px; }
  .bubble { background: var(--pill); border-radius: 10px; padding: 7px 12px; max-width: 80%; }
  .thinking { color: var(--muted); font-style: italic; margin: 0 0 10px; }
  .thinking-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-style: normal; margin-bottom: 4px; }
  .msg-ai p { margin: 0 0 10px; }
  .msg-ai code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--pill); padding: 1px 5px; border-radius: 5px; }
  .tools-group { margin: 8px 0 14px; border-left: 2px solid var(--line); padding-left: 12px; }
  .tool { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 0; color: var(--muted); font-size: 13px; text-align: left; }
  .tool:hover { color: var(--text); }
  .tool .name { color: var(--text); font-weight: 500; }
  .tool .arg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tool .ok { color: var(--ok); margin-left: auto; font-size: 12px; }
  .tool-out { display: none; margin: 2px 0 8px 23px; background: #f4f4f2; border-radius: 8px; padding: 8px 10px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #3d3d3d; white-space: pre-wrap; }
  .tool.open + .tool-out { display: block; }
  .tool .arg.desc { font-family: inherit; font-size: 13px; }
  /* живой вывод идущей команды — без раскрытия, хвост прижат к низу (v1.25.0) */
  .tool-tail { margin: 2px 0 8px 23px; background: #f4f4f2; border-left: 2px solid #d46c4d; border-radius: 0 8px 8px 0; padding: 6px 10px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: #555; white-space: pre-wrap; word-break: break-all; max-height: 8.9em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  .chev { transition: transform .15s; }
  .tool.open .chev { transform: rotate(90deg); }

  .perm { border: 1px solid var(--line); background: var(--input); border-radius: 12px; padding: 12px 14px; margin: 6px 0 16px; }
  .perm-h { display: flex; align-items: center; gap: 8px; font-weight: 500; }
  .perm-cmd { margin: 8px 0 10px; background: #f4f4f2; border-radius: 8px; padding: 8px 10px; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
  .perm-why { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
  .perm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .btn { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); font-size: 13px; }
  .btn:hover { background: var(--pill); }
  .btn.dark { background: var(--text); color: #fff; border-color: var(--text); }
  .btn.dark:hover { background: #2a2a2a; }
  .btn .k { color: var(--faint); font-size: 11px; margin-left: 6px; }
  .btn.dark .k { color: #9a9a9a; }

  .working { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 10px 0 0; }
  .spin { animation: spin 3s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ═══ Поле ввода ═══ */
  .composer-wrap { padding: 0 24px 16px; }
  .composer-in { max-width: var(--col); margin: 0 auto; position: relative; }
  .ctx-row { display: flex; gap: 6px; margin-bottom: 8px; }
  .box { border: 1px solid var(--line); background: var(--input); border-radius: 12px; display: flex; align-items: flex-end; padding: 10px 10px 10px 12px; }
  .box textarea { flex: 1; border: 0; outline: 0; resize: none; font: inherit; background: transparent; color: var(--text); min-height: 22px; max-height: 200px; }
  .box textarea::placeholder { color: var(--faint); }
  .send { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--faint); }
  .send.ready { background: var(--text); color: #fff; }
  .under { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; }
  .under .spacer { flex: 1; }
  .pick { padding: 3px 7px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
  .pick:hover, .pick.on { background: var(--hover); }
  .ctx-ring { margin-left: 4px; }

  /* всплывающие меню */
  .pop { position: absolute; bottom: 64px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.08); padding: 6px; font-size: 13px; display: none; z-index: 20; }
  .pop.show { display: block; }
  .pop-h { font-size: 12px; color: var(--muted); padding: 4px 8px; }
  .pop-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border-radius: 7px; text-align: left; }
  .pop-item:hover { background: var(--pill); }
  .pop-item .sub { color: var(--muted); font-size: 12px; }
  .pop-item .check { color: var(--blue); margin-left: auto; }
  .num { margin-left: 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--muted); padding: 0 5px; }
  .pop hr { border: 0; border-top: 1px solid var(--line-soft); margin: 5px 0; }
  .toggle { margin-left: auto; width: 26px; height: 15px; border-radius: 8px; background: #d9d9d6; position: relative; }
  .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .15s; }
  .toggle.on { background: var(--blue); }
  .toggle.on::after { left: 13px; }
  #pop-model { right: 70px; width: 230px; }
  #pop-effort { right: 0; width: 260px; padding: 10px 12px 12px; }
  #pop-mode { left: 0; width: 270px; }
  #pop-limits { position: absolute; top: 44px; right: 10px; bottom: auto; width: 290px; padding: 12px; }
  .eff-h { display: flex; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
  .eff-h b { color: var(--text); font-weight: 500; margin-left: 5px; }
  .eff-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .slider { position: relative; height: 18px; background: #ececea; border-radius: 6px; display: grid; grid-template-columns: repeat(5, 1fr); cursor: pointer; }
  .slider .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 6px; transition: width .15s; }
  .slider .knob { position: absolute; top: 1px; width: 10px; height: 16px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
  .slider span { position: relative; z-index: 1; }
  .lim-row { margin-bottom: 10px; }
  .lim-row .top { display: flex; font-size: 12px; margin-bottom: 4px; }
  .lim-row .top .r { margin-left: auto; color: var(--muted); }
  /* соседние счета — как в нынешнем виджете лимитов (limits-widget.js): точка, сумма, подпись про тариф */
  .side-row { padding: 4px 0 2px; }
  .side-row .top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
  .side-row .top .r { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
  .vdot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; flex: none; }
  .tariff { font-size: 12px; margin: 2px 0 0 14px; color: var(--muted); }
  .tariff.peak { color: #d97706; }
  .mini { display: grid; grid-template-columns: 34px 1fr 72px; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin: 5px 0 0 14px; }
  .mini .bar { height: 4px; }
  .mini span:last-child { text-align: right; }

  .demo-flag { position: fixed; left: 50%; transform: translateX(-50%); top: 4px; font-size: 11px; color: var(--faint); pointer-events: none; }
  .scene-switch { position: fixed; right: 12px; bottom: 10px; display: flex; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 2px; font-size: 12px; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
  .scene-switch button { padding: 3px 9px; border-radius: 7px; color: var(--muted); }
  .scene-switch button.on { background: var(--pill); color: var(--text); }

  /* выбор папки */
  .pick-chip { cursor: pointer; }
  .pick-chip:hover { background: var(--pill); }
  #pop-folder { left: 0; bottom: calc(100% + 6px); width: 340px; }
  .sb-filter { padding: 10px 16px 0; position: relative; }
  #pop-sbfolder { left: 12px; top: 40px; bottom: auto; width: 240px; }
  .ftag { font-size: 10.5px; color: var(--muted); background: var(--pill); border-radius: 4px; padding: 0 5px; flex: none; }
  .modal-back { position: fixed; inset: 0; background: rgba(20,20,18,.18); display: none; place-items: center; z-index: 50; }
  .modal-back.show { display: grid; }
  .modal { width: min(560px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.12); overflow: hidden; }
  .modal-h { display: flex; align-items: center; padding: 14px 16px 8px; font-weight: 600; }
  .crumbs { display: flex; align-items: center; gap: 2px; padding: 0 12px 8px; font-size: 13px; color: var(--muted); }
  .crumbs .ghost { color: var(--text); padding: 2px 6px; }
  .fd-list { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); max-height: 260px; overflow-y: auto; padding: 4px 6px; }
  .fd-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border-radius: 7px; text-align: left; }
  .fd-row:hover { background: var(--pill); }
  .fd-row.sel { background: var(--blue-soft); }
  .fd-row .meta { margin-left: auto; font-size: 12px; color: var(--muted); }
  .fd-info { padding: 10px 16px; font-size: 12.5px; color: var(--muted); min-height: 40px; }
  .fd-info b { color: var(--text); font-weight: 500; }
  .fd-new { display: flex; gap: 8px; padding: 0 16px 10px; }
  .fd-new[hidden] { display: none; }
  .fd-new input { flex: 1; min-width: 0; }
  .modal-f { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--sidebar); border-top: 1px solid var(--line-soft); }
  .modal-f .sub { font-size: 12px; color: var(--muted); }
  .modal-f .btn { white-space: nowrap; }

  .scene-home .only-chat, .scene-chat .only-home { display: none !important; }

  /* мобильный: сайдбар выезжает поверх */
  @media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: 4px 0 24px rgba(0,0,0,.08); }
    .app.sb-open .sidebar { transform: none; }
    .only-mobile { display: inline-flex !important; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .recent-grid { grid-template-columns: 1fr; }
    .bar-row { grid-template-columns: 96px 1fr 40px; }
    .column, .composer-wrap { padding-left: 14px; padding-right: 14px; }
    .hide-mobile { display: none !important; }
  }
  .only-mobile { display: none !important; }

/* ═══ Рабочая версия: дополнения к макету ═══ */
[hidden] { display: none !important; }   /* иначе display:grid у .login/.app перебивает атрибут hidden */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--canvas); z-index: 100; }
.login form { width: 320px; display: grid; gap: 12px; }
.login .greet { margin: 0 0 8px; }
.login input { border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 10px 12px; font: inherit; outline: none; }
.login input:focus { border-color: var(--blue); }
.login .err { color: #c74a3d; font-size: 13px; min-height: 18px; }
.login .btn { padding: 9px; }

.msg-ai .md h1, .msg-ai .md h2, .msg-ai .md h3 { font-size: 15px; margin: 14px 0 6px; }
.msg-ai .md h1 { font-size: 17px; }
.msg-ai .md ul, .msg-ai .md ol { margin: 0 0 10px; padding-left: 22px; }
.msg-ai .md li { margin: 2px 0; }
.msg-ai .md pre { background: #f4f4f2; border-radius: 8px; padding: 10px 12px; overflow-x: auto; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 10px;
  white-space: pre-wrap; overflow-wrap: anywhere; }   /* длинные строки переносятся, а не уезжают вбок (08.10.2026, Claude-NL · 84c03003) */
.msg-ai .md pre code { background: none; padding: 0; }
.msg-ai .md blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--line); color: #3d3d3d; }
.msg-ai .md table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px; display: block; overflow-x: auto; }
.msg-ai .md th, .msg-ai .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.msg-ai .md th { background: #f4f4f2; font-weight: 600; }
.msg-ai .md a { color: var(--blue); }
.msg-ai .md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-ai { margin-bottom: 18px; overflow-wrap: anywhere; }
.thinking { white-space: pre-wrap; display: none; }
.thinking-toggle.open + .thinking { display: block; }
.thinking-toggle.open .chev { transform: rotate(90deg); }
.tool.err .ok { color: #c74a3d; }
.tool-out .more { color: var(--muted); font-style: italic; }
.img-ph { display: inline-block; font-size: 12px; color: var(--muted); background: var(--pill); border-radius: 6px; padding: 2px 8px; margin: 2px 0; }

.empty { color: var(--muted); text-align: center; margin-top: 80px; }
.empty .greet { color: var(--text); }
.loading { color: var(--muted); font-size: 13px; padding: 20px 0; }
.chat-row .t small { color: var(--faint); }
.sb-note { padding: 6px 16px; font-size: 12px; color: var(--faint); }
.box.ro { background: #f6f6f4; }
.box.ro textarea { cursor: not-allowed; }
.ro-badge { font-size: 11px; color: var(--muted); background: var(--pill); border-radius: 5px; padding: 1px 7px; }
.nav-item[disabled] { opacity: .45; cursor: not-allowed; }
.nav-item[disabled]:hover { background: none; }
.earlier { display: block; margin: 0 auto 18px; }
.tool .name { flex: none; white-space: nowrap; }
.tool .arg { flex: 1; min-width: 0; }
.tool .ok { flex: none; }
.tools-group { margin: 6px 0 12px; }
/* таблицы в ленте: ячейки не сжимать до букв — лучше горизонтальная прокрутка */
.msg-ai .md th, .msg-ai .md td { min-width: 7em; max-width: 26em; }
/* телефон: правило .only-mobile{display:none} стоит в макете ПОСЛЕ медиазапроса и перебивало его */
@media (max-width: 760px) {
  .only-mobile { display: inline-flex !important; }
  .topbar .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ═══ Шаг 3: переписка ═══ */
.under .hint { font-size: 11.5px; color: var(--faint); }
.send.ready { background: var(--text); color: #fff; }
.send.stop { background: var(--text); color: #fff; }
#pop-folder { left: 0; bottom: calc(100% + 6px); width: 340px; max-height: 320px; overflow-y: auto; }
.perm.done { opacity: .55; }
.perm .perm-res { font-size: 12px; color: var(--muted); }
.run-err { color: #c74a3d; font-size: 13px; margin: 8px 0; white-space: pre-wrap; }
.run-meta { color: var(--faint); font-size: 11.5px; margin: 6px 0 18px; }
.chat-row .live-dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(212,108,77,.05); opacity: .55; } }
/* метка папки в списке чатов сжимается раньше названия */
.chat-row .t { flex: 1 1 auto; min-width: 45%; }
.chat-row .ftag { flex: 0 1 auto; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ Шаг 4: модель, усилие, режим ═══ */
.composer-in > #pop-mode { left: 0; bottom: 34px; }
.composer-in > #pop-model { right: 70px; bottom: 34px; width: 250px; }
.composer-in > #pop-effort { right: 0; bottom: 34px; }
.pick .dim { color: var(--faint); }
.pop-item[disabled] { opacity: .45; cursor: not-allowed; }
.pop-item .grow { flex: 1; }
.fd-row .fd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs { flex-wrap: wrap; }

/* ═══ Сворачивание бокового меню (как в Claude Desktop) ═══ */
.app { transition: grid-template-columns .18s ease; }
.app.sb-collapsed { grid-template-columns: 0 1fr; }
.app.sb-collapsed .sidebar { visibility: hidden; overflow: hidden; border-right: 0; }
.sb-expand { display: none; }
.app.sb-collapsed .sb-expand { display: inline-flex; }
@media (max-width: 760px) {
  .app.sb-collapsed { grid-template-columns: 1fr; }          /* на телефоне свёрнутость не действует */
  .app.sb-collapsed .sidebar { visibility: visible; }
  .sb-expand { display: inline-flex; }
}

/* ═══ Корзина чатов ═══ */
.chat-row .del { display: none; flex: none; color: var(--muted); padding: 2px; border-radius: 5px; }
.chat-row:hover .del { display: inline-flex; }
.chat-row:hover .when { display: none; }
.chat-row .del:hover { color: #c74a3d; background: #f3e4e1; }
@media (hover: none) { .chat-row.active .del { display: inline-flex; } .chat-row.active .when { display: none; } }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.tr-row:hover { background: var(--pill); }
.tr-row .grow { flex: 1; min-width: 0; }
.tr-row .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row .sub { font-size: 12px; color: var(--muted); }

/* ═══ Шаг 5: лимиты и статус API в шапке ═══ */
.sdot.warn { background: #d97706; } .sdot.down { background: #c74a3d; } .sdot.unknown { background: #a5a4a2; }
.lim-stale { font-size: 11.5px; color: #b45309; margin: -4px 0 8px; }
#pop-limits .pop-h { padding: 0 0 8px; }

/* ═══ Транскрибатор во всплывающем окне (как корзина) ═══ */
.modal.modal-wide { width: min(1100px, 96vw); height: min(860px, 92vh); display: flex; flex-direction: column; }
.modal-wide .modal-h { border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
#tr-frame { flex: 1; width: 100%; border: 0; background: var(--canvas); }
.tr-tab { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: none; }
button.nav-item, button.pop-item { font: inherit; }
@media (max-width: 760px) { .modal.modal-wide { width: 100vw; height: 100vh; border-radius: 0; } .tr-tab span { display: none; } }

/* корзина: размер, отметка о копии, кнопка удаления */
.tr-sum { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); }
.bk-yes { color: #3f9a5a; } .bk-no { color: #b45309; }
.btn-danger { color: #c74a3d; border-color: #ecc9c4; }
.btn-danger:hover { background: #f8e9e6; }
.btn:disabled { opacity: .45; cursor: default; }

/* закрепление: булавка у закреплённых видна всегда, у остальных — при наведении */
.chat-row .pin.on { display: inline-flex; color: var(--text); }
.chat-row .pin.on svg { fill: currentColor; }
.chat-row.pinned .when { display: none; }

/* кнопки «Сохранить и очистить» / «Сохранить и закрыть» в шапке чата */
.hbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.hbtn:hover { background: var(--hover); color: var(--text); }
.hbtn[disabled] { opacity: .4; cursor: not-allowed; }
.hbtn[disabled]:hover { background: none; }
.chat-row .closed-tag { font-size: 10.5px; color: var(--faint); flex: none; }

/* цитирование */
#quote-btn { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px;
  background: var(--text); color: #fff; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
#quote-btn[hidden] { display: none; }
#quote-btn .icon { width: 13px; height: 13px; }
@media (pointer: coarse) { #quote-btn { padding: 10px 16px; font-size: 15px; border-radius: 10px; } #quote-btn .icon { width: 16px; height: 16px; } }   /* 1.7.3: на телефоне крупнее */
.bubble .uq { display: block; border-left: 3px solid #cfcfcb; padding-left: 9px; color: #5a5a59; margin: 2px 0 6px; }

/* вложения-картинки */
.attach-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.attach-row[hidden] { display: none; }
.att { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--pill); }
.att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att .x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.composer-in.drag .box { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.bubble .bimgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bubble .bimgs img { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; }

/* шапка чата не переносится: название — многоточием; на средних экранах (планшет) подписи кнопок прячутся */
.topbar { min-width: 0; overflow: hidden; }
.topbar .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
#chat-folder { white-space: nowrap; flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.topbar .status, .topbar .hbtn { white-space: nowrap; flex: none; }
@media (max-width: 1280px) { .hbtn span { display: none; } }
@media (max-width: 1050px) { #chat-folder { display: none; } }

/* телефон: 100vh в мобильном Chrome не учитывает адресную строку — поле ввода уезжало вниз.
   dvh — видимая высота; body не прокручивается, прокручивается только лента */
html, body { height: 100%; overflow: hidden; }
.app { height: 100vh; height: 100dvh; }
.composer-wrap { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* очередь сообщений */
.msg-user.queued .bubble { opacity: .6; border: 1px dashed #cfcfcb; background: transparent; }
.qmeta { font-size: 11.5px; color: var(--muted); margin-top: 4px; text-align: right; }
.qcancel { color: var(--muted); text-decoration: underline; font-size: 11.5px; }
.qcancel:hover { color: #c74a3d; }

/* вложение-документ: плашка с типом, именем и размером */
.att.file { width: auto; max-width: 240px; height: 64px; display: flex; flex-direction: column; justify-content: center; padding: 6px 26px 6px 10px; background: var(--input); }
.att.file .fext { font-size: 10px; font-weight: 600; color: var(--blue); }
.att.file .fname { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att.file .fsize { font-size: 11px; color: var(--muted); }

/* окно «Вложения» */
.up-badge { margin-left: auto; font-size: 10.5px; color: #b45309; background: #fdf1e3; border-radius: 6px; padding: 0 6px; }
.up-badge[hidden] { display: none; }
.up-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.up-row:hover { background: var(--pill); }
.up-row input { flex: none; }
.up-row .grow { flex: 1; min-width: 0; }
.up-row .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row .sub { font-size: 12px; color: var(--muted); }
.up-day { font-size: 12px; color: var(--muted); padding: 8px 10px 2px; }

/* после /compact: линия «контекст сжат» и свёрнутая сводка */
.compact-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--faint); font-size: 12px; }
.compact-line::before, .compact-line::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.compact-sum { margin: 4px 0 14px; padding: 6px 10px; border-left: 2px solid var(--line); }
.compact-sum .thinking { font-style: normal; color: #3d3d3d; font-size: 13px; }

/* строка чата при наведении: значки (булавка, карандаш, корзина) не сжимаются, а метки папки и «закрыт»
   уступают им место — иначе корзину обрезало краем строки */
.chat-row .del { flex: none; }
.chat-row:hover .ftag, .chat-row:hover .closed-tag { display: none; }
.chat-row:hover .t { min-width: 0; }
@media (hover: none) { .chat-row.active .ftag, .chat-row.active .closed-tag { display: none; } .chat-row.active .t { min-width: 0; } }

/* ширина бокового меню тянется за правый край: от 268 до 536 px (только на компьютере/планшете) */
@media (min-width: 761px) {
  .app { grid-template-columns: var(--sbw, 268px) 1fr; }
  .sb-resize { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
  .sb-resize:hover, .app.sb-dragging .sb-resize { background: linear-gradient(90deg, transparent 2px, var(--blue) 2px, var(--blue) 4px, transparent 4px); opacity: .5; }
  .app.sb-dragging { transition: none; user-select: none; cursor: col-resize; }
  .app.sb-collapsed .sb-resize { display: none; }
}
@media (max-width: 760px) { .sb-resize { display: none; } }

/* ── окно «Настройки» (05.10.2026, Claude-NL · 89081230) ── */
#st-dialog .modal { width: min(620px, 94vw); max-height: 92dvh; display: flex; flex-direction: column; }
.st-body { overflow-y: auto; padding: 0 16px 8px; }
.st-sec { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.st-h { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.st-h .sub, .st-body .sub { font-weight: 400; font-size: 12px; color: var(--muted); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.st-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.st-grid .st-wide { grid-column: 1 / -1; }
.st-body select, .st-body input:not([type=checkbox]) { font: inherit; font-size: 13.5px; color: var(--text); padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.st-row { display: flex; gap: 8px; }
.st-row input { flex: 1; }
.st-body label.st-check { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); padding: 4px 0; }
.st-grid label.st-check { align-self: end; }
.st-act { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.st-msg { margin-right: auto; font-size: 12.5px; color: #3a7d44; }
.st-msg.bad, .st-info .bad { color: #c74a3d; }
.st-info { font-size: 13px; line-height: 1.6; }
.st-info b { font-weight: 500; }

/* карточки приложенных файлов в пузыре (06.10.2026, Claude-NL · 89081230) */
.bubble .fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; white-space: normal; }
.bubble .fchips:last-child { margin-bottom: 0; }
.fchip { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 10px 6px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.fext { flex: none; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 600; text-transform: uppercase; color: #fff; background: #8a8a86; }
.fx-xlsx, .fx-xls, .fx-csv, .fx-ods, .fx-tsv { background: #2e7d4f; }
.fx-docx, .fx-doc, .fx-rtf, .fx-odt { background: #2f5fb3; }
.fx-pptx, .fx-ppt, .fx-odp { background: #c4572e; }
.fx-pdf { background: #c0392b; }
.fx-zip { background: #7a6a4f; }
.fx-mp3, .fx-m4a, .fx-wav, .fx-ogg { background: #7b4fb3; }
.fmeta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsize { font-size: 11.5px; color: var(--muted); }

/* перенос вложений в аттачи (06.10.2026, Claude-NL · 89081230) */
.up-attach { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.up-attach .sub { font-size: 12.5px; color: var(--muted); min-width: 200px; }
.up-attach .sub b { color: var(--text); font-weight: 500; }
.up-attach .bad, .up-row .bad { color: #c74a3d; }
.up-chat { color: var(--blue); text-decoration: none; }
.up-chat:hover { text-decoration: underline; }
.up-chat.dim, .up-row .dim { color: var(--muted); }
.up-mv { color: #3a7d44; }
.up-mv.dup { color: #6b6b67; }
.up-row.moved .tt { color: #5a5a59; }

/* ─── Копирование: «Копировать» под ответом и «Таблица» над таблицей (06.10.2026 — Claude-NL · чат «Изображение» · cbb29bb6) ─── */
.cp-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: none; color: var(--muted);
  font: 12px/1 var(--font); padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.cp-btn:hover { background: var(--pill); color: var(--text); border-color: var(--line); }
.cp-btn .icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp-btn.done { color: var(--ok); }
.cp-btn.fail { color: #c0392b; }
.msg-actions { display: flex; gap: 4px; margin: -4px 0 6px -7px; opacity: .7; transition: opacity .15s; }
.msg-ai:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.tbl-wrap { position: relative; margin: 0 0 12px; width: fit-content; max-width: 100%; }
.tbl-wrap table { margin-bottom: 0 !important; }
.tbl-wrap .cp-tbl { display: flex; margin: 0 0 3px auto; opacity: .55; }
.tbl-wrap:hover .cp-tbl, .tbl-wrap .cp-tbl:focus { opacity: 1; }
.code-wrap { margin: 0 0 10px; max-width: 100%; }
.code-wrap pre { margin: 0 !important; }
.code-wrap .cp-code { display: flex; margin: 0 0 3px auto; opacity: .55; }
.code-wrap:hover .cp-code, .code-wrap .cp-code:focus { opacity: 1; }
@media (hover: none) { .msg-actions, .tbl-wrap .cp-tbl, .code-wrap .cp-code { opacity: 1; } }

/* терминал (06.10.2026, Claude-NL · 89081230) */
#term-box { flex: 1; min-height: 0; background: #1e1e1c; padding: 6px 4px 6px 8px; }
#term-box .xterm { height: 100%; }
.term-state { font-size: 12px; color: #3a7d44; margin-left: 10px; font-weight: 400; }
.term-state.bad { color: #c74a3d; }

/* терминал справа — боковая панель (06.11.2026); на узком экране кнопки нет, окно остаётся как раньше */
.term-resize, #term-dock { display: none; }
@media (min-width: 761px) {
  #term-dock { display: inline-flex; }
  #term-dialog.docked.show { display: block; inset: 0 0 0 auto; width: var(--term-w, 42vw); background: transparent; pointer-events: none; z-index: 35; }
  #term-dialog.docked .modal { pointer-events: auto; position: relative; width: 100%; height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: -4px 0 20px rgba(0,0,0,.06); }
  #term-dialog.docked .term-resize { display: block; position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
  #term-dialog.docked .term-resize:hover { background: var(--blue-soft); }
  #term-dialog.docked .tr-sum { display: none; }
  body.term-docked .app { width: calc(100vw - var(--term-w, 42vw)); }
}

/* название, версия, «Что нового» (06.10.2026, Claude-NL · 89081230) */
.logo { min-width: 0; }
.logo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ver { align-self: flex-start; font-size: 10.5px; color: var(--muted); padding: 0; margin-top: 1px; font-weight: 400; cursor: pointer; background: none; }
.ver:hover { color: var(--text); }
.cl-body { max-height: min(70vh, 640px); overflow-y: auto; padding: 4px 18px 16px; font-size: 13.5px; }
.cl-body h2 { font-size: 14.5px; margin: 14px 0 4px; }

/* корзина → база (06.10.2026, Claude-NL · 89081230) */
#trash-dialog .modal { width: min(760px, 96vw); }
.tr-row { flex-wrap: wrap; }
.tr-row .btn { white-space: nowrap; }
.tr-kb { margin: -2px 10px 8px; padding: 8px 10px; background: var(--sidebar); border-radius: 8px; font-size: 12.5px; color: var(--muted); }
.tr-kb .ok { color: #3a7d44; } .tr-kb .bad { color: #c74a3d; }
.tr-kb ul { margin: 4px 0 0 18px; padding: 0; } .tr-kb code { font-size: 12px; }
#trash-dialog .fd-list { max-height: min(60vh, 560px); }

/* навыки в настройках (07.10.2026, Claude-NL · 89081230) */
.sk-list { border: 1px solid var(--line-soft); border-radius: 10px; max-height: min(46vh, 420px); overflow-y: auto; }
.sk-group { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px 4px; background: var(--sidebar); position: sticky; top: 0; z-index: 1; }
.sk-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border-top: 1px solid var(--line-soft); }
.sk-group + .sk-row { border-top: 0; }
.sk-row input { margin-top: 3px; flex: none; }
.sk-main { flex: 1; min-width: 0; }
.sk-name { font-size: 13.5px; font-weight: 500; word-break: break-all; }
.sk-desc { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-row.off .sk-name, .sk-row.off .sk-desc { opacity: .5; }
.sk-row.removing { opacity: .5; }
.sk-row .ghost { flex: none; padding: 3px; }
.sk-note { margin-top: 6px; }
.sk-paste textarea { width: 100%; min-height: 180px; margin-top: 8px; font: 12.5px/1.45 ui-monospace, Menlo, monospace; padding: 8px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; box-sizing: border-box; }

/* модели и ключи, картинки в ленте (08.10.2026, Claude-NL · 89081230) */
.prov-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.prov-card .prov-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.prov-card .prov-h b { font-weight: 600; }
.prov-card .st-grid { margin-top: 8px; }
.prov-card .st-act { margin-top: 8px; }
.gen-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.gen-imgs a { display: block; }
.gen-imgs img { display: block; max-width: min(100%, 560px); max-height: 420px; border-radius: 10px; border: 1px solid var(--line-soft); }
/* карточка файла в ленте — инструмент present_files (10.10.2026, v1.8.10 — Claude-NL · чат «Проект дома из контейнеров» · 84c03003) */
.gen-imgs .file-card { display: flex; align-items: center; gap: 8px; flex-basis: 100%; max-width: min(100%, 560px); box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 10px; color: inherit; text-decoration: none; }
.gen-imgs .file-card .fc-name { font-weight: 600; word-break: break-all; }
.gen-imgs .file-card .sub { margin-left: auto; white-space: nowrap; }
.gen-imgs .file-card:hover { background: var(--bg-soft, rgba(0,0,0,.03)); }
/* картинки в тексте ответа: ![подпись](/путь.png) — страницы PDF и т.п. (10.10.2026, Claude-NL · 88f1ae1d).
   Несколько в одной строке — встают рядом; в разных строках — друг под другом. */
.md a.md-img { display: inline-flex; flex-direction: column; gap: 4px; margin: 4px 8px 4px 0; vertical-align: top; text-decoration: none; max-width: min(100%, 440px); }
.md a.md-img img { display: block; max-width: 100%; max-height: 640px; height: auto; border-radius: 8px; border: 1px solid var(--line-soft); background: #fff; }
.md a.md-img span { font-size: 12px; color: var(--muted); }

/* вкладки настроек (08.10.2026, v1.7.0, Claude-NL · 89081230) */
.st-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; flex: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { padding: 8px 10px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.st-tab:hover { color: var(--text); }
.st-tab.on { color: var(--text); border-bottom-color: #d46c4d; font-weight: 500; }
.st-sec[hidden] { display: none; }
.st-body > .st-sec { border-top: 0; }
.st-body > .st-sec:not([hidden]) ~ .st-sec:not([hidden]) { border-top: 1px solid var(--line-soft); }
#st-dialog .modal { height: min(680px, 92dvh); }
#st-dialog .st-body { flex: 1; min-height: 0; }
#st-dialog .sk-list { max-height: none; }

/* Gemini (09.10.2026, v1.8.0, Claude-NL · 89081230) */
.chat-row .gem-tag { font-size: 10px; color: #3b6fd8; border: 1px solid #c9d8f5; border-radius: 4px; padding: 0 4px; flex: none; }
.chat-row:hover .gem-tag { display: none; }
.denied-card code { font-size: 12.5px; word-break: break-all; }
.denied-card .perm-cmd { margin: 6px 0; }
.mini.wide { grid-template-columns: 62px 1fr 92px; }   /* Gemini в «Лимитах и счетах» (v1.8.1) */
.tariff a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
.chat-row .ds-tag { color: #4d6bfe; border-color: #cfd8ff; }   /* DeepSeek в списке чатов (v1.8.3) */
/* Codex-NL · чат «Untitled Codex Session» · 01a18be9 · 30.10.2026: метка Claude */
.chat-row .cl-tag { color: #b45b3e; border-color: #e8c7b9; }
.chat-row .cd-tag { color: #0e8f70; border-color: #c6e9df; }   /* ChatGPT (Codex CLI) в списке чатов, 29.10.2026 */

/* Вопросы модели — карточка AskUserQuestion (v1.8.7, DeepSeek · f13e0faa) */
.ask-card .perm-h { margin-bottom: 10px; }
.ask-q { margin: 0 0 12px; }
.ask-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); background: var(--pill); border-radius: 6px; padding: 2px 7px; margin-bottom: 6px; }
.ask-qtext { font-weight: 500; margin-bottom: 8px; }
.ask-opts { display: flex; flex-direction: column; gap: 6px; }
.ask-opt { display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 9px 11px; }
.ask-opt:hover { border-color: var(--blue); }
.ask-opt.on { border-color: var(--blue); background: var(--blue-soft); }
.ask-mark { flex: none; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 1.5px solid var(--line); border-radius: 50%; font-size: 12px; color: var(--blue); }
.ask-opt.on .ask-mark { border-color: var(--blue); background: var(--blue); color: #fff; }
.ask-opt.multi .ask-mark { border-radius: 5px; }
.ask-lab { display: block; }
.ask-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ask-input { width: 100%; border: 1px solid var(--line); background: var(--input); border-radius: 10px; padding: 9px 11px; font: inherit; }
.ask-input:focus { outline: none; border-color: var(--blue); }
.ask-card .perm-actions { margin-top: 4px; }
/* вкладка «Модели и ключи»: лимит и его сумма — один блок (10.10.2026, v1.8.11 — Claude-NL · чат «Проект дома из контейнеров» · 84c03003) */
.lim-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-grid.st-lim .st-info { font-size: 13px; line-height: 1.45; margin-top: 2px; }
@media (max-width: 760px) {
  .st-grid.st-lim { grid-template-columns: 1fr; gap: 14px; }
  .st-grid.st-lim .st-row input { min-width: 0; width: auto; }
}

/* Задачи удаления чатов (11.10.2026) */
.jobs { border-top: 1px solid #e5e2da; padding: 8px 10px; max-height: 240px; overflow: auto; font-size: 12.5px; }
.jobs-h { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.jobs-h .ghost { font-size: 11.5px; }
.job { padding: 5px 0; border-bottom: 1px dashed #e5e2da; }
.job .sub { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.job .btn { margin-left: 6px; font-size: 11px; padding: 1px 7px; }

/* статус в меню: строка задачи, время, полоса хода */
.job-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; line-height: 1.35; }
.job-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-time { flex: none; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.job-pulse { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3f9a5a; animation: job-pulse 1.2s ease-in-out infinite; }
@keyframes job-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.pbar { height: 4px; margin: 3px 0 2px; border-radius: 2px; background: #e5e2da; overflow: hidden; }
.pbar > i { display: block; height: 100%; width: 0; border-radius: 2px; background: #3f9a5a; transition: width .4s ease; }
.pbar.indet > i { width: 35%; animation: pbar-indet 1.4s linear infinite; }
@keyframes pbar-indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* уведомления о сохранении в блоке статуса */
.notice { padding: 6px 0 4px; border-top: 1px dashed #e5e2da; }
.notice-h { display: flex; align-items: flex-start; gap: 6px; }
.notice-t { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.notice.unread .notice-t::before { content: '●'; color: #3f9a5a; margin-right: 4px; font-size: 9px; vertical-align: 1px; }
.notice.err .notice-t { color: #c74a3d; }
.notice.err.unread .notice-t::before { color: #c74a3d; }
.notice-sub { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.notice-text { font-size: 11.5px; line-height: 1.45; margin-top: 2px; word-break: break-word; }
.notice-x { flex: none; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.notice-x:hover { color: var(--text); }
.notice-more { margin-top: 3px; border: 1px solid var(--line); background: var(--input); color: var(--text); border-radius: 6px; font-size: 11.5px; padding: 1px 8px; cursor: pointer; }
.notice-more:hover { background: #efece4; }

/* Кнопка «Перезагрузить панель» в окне «Терминал» (14.10.2026, v1.11.0 — Claude-NL · чат «Размещение бюста робота» · 05976339) */
.btn.btn-force { background: #c74a3d; border-color: #c74a3d; color: #fff; font-weight: 500; }
.btn.btn-force:hover { background: #b03e32; border-color: #b03e32; }
.btn.btn-force:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) {
  #term-dialog .modal-h { flex-wrap: wrap; row-gap: 8px; }
  #term-dialog .tr-sum { display: none; }
  #term-dialog #term-close { order: 3; margin-left: auto !important; }
  #term-dialog .modal-h::after { content: ''; order: 4; flex-basis: 100%; }
  #term-dialog .btn-force { order: 5; margin-left: 0 !important; }
  #term-dialog #term-new { order: 6; }
}

/* ─── Аватар «Кубик ИИ» (v1.12.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.ha-logo { width: 34px; flex: none; margin: -4px -2px -4px -4px; }
.ha-home { width: 76px; flex: none; }
.ha-login { width: 46px; flex: none; }
.empty .greet { gap: 14px; }
.working .ha-work { width: 18px; flex: none; }

/* ─── Кубик над полем ввода (v1.14.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.box { position: relative; }
.pet { position: absolute; bottom: calc(100% - 4px); left: 0; width: 64px; z-index: 4; cursor: grab; touch-action: none;
       user-select: none; -webkit-user-select: none; transition: left var(--walk, 0s) ease-in-out; }
.pet.dragging { cursor: grabbing; }
.app.scene-home .pet { display: none; }
.app.pet-on:not(.scene-home) #feed { padding-bottom: 92px; }
@media (max-width: 700px) { .pet { width: 48px; } .app.pet-on:not(.scene-home) #feed { padding-bottom: 74px; } }

/* ─── Облачко кубика вместо строки «Работаю…» (v1.15.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.app.pet-on.say-on:not(.scene-home) #live .working { display: none; }
.pet-say { position: absolute; left: calc(100% + 6px); top: 28%; line-height: 1.3; white-space: nowrap; pointer-events: none;
           font-size: 12.5px; color: var(--muted); background: var(--canvas); border: 1px solid var(--line); border-radius: 10px;
           padding: 3px 9px; box-shadow: 0 1px 3px rgba(0,0,0,.05); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.pet-say.left { left: auto; right: calc(100% + 6px); }
.pet-say[data-kind="waiting"] { color: var(--text); border-color: #e7b98f; background: #fff7ee; }
.pet-say[data-kind="error"] { color: #b4412f; border-color: #e8b3a8; }
.pet-say[data-kind="done"] { color: var(--text); }

/* ─── Плашка «Вышла новая версия» (v1.16.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.new-ver { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
           background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
           padding: 7px 8px 7px 14px; font-size: 13px; max-width: calc(100vw - 24px); }
.new-ver[hidden] { display: none; }
.new-ver .btn { padding: 4px 12px; }

/* ─── Подсказки кубика (v1.17.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.pet-mates { position: absolute; left: calc(100% + 6px); bottom: 2px; display: flex; gap: 4px; align-items: flex-end; line-height: 1; }
.pet-say:not([hidden]) ~ .pet-mates { bottom: -2px; }
.pet-mate { width: 18px; padding: 0; cursor: pointer; opacity: .9; }
.pet-mate:hover { opacity: 1; transform: translateY(-1px); }
.pet-more { font-size: 11px; color: var(--muted); }
.pet-say[data-kind="note"] { color: var(--text); }

/* ─── Вкладка «Кубик» в настройках (v1.22.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.st-body .st-kb label.st-check, .st-body section[data-tab="kubik"] label.st-check { align-items: flex-start; line-height: 1.4; }
.st-body section[data-tab="kubik"] label.st-check input { margin-top: 3px; flex: none; }

/* ─── Логотип: «Кубик» жирным, «ИИ» тонким (v1.23.1, 16.10.2026, Claude-NL · b783bc63) ─── */
.lt-k { font-weight: 700; letter-spacing: -.01em; }
.lt-ii { font-weight: 300; letter-spacing: .02em; }

/* ─── Хранилища (v1.24.0, 16.10.2026, Claude-NL · b783bc63) ─── */
.stg-intro { margin: 0 0 10px; line-height: 1.45; }
.stg-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--input); }
.stg-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.stg-st { margin-left: auto; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--pill); color: var(--muted); }
.stg-st.ok { background: #e7f6ec; color: #217a45; }
.stg-st.warn { background: #fdf0e1; color: #a85b0b; }
.stg-acc { margin-top: 6px; font-size: 13.5px; }
.stg-card .mini.wide { grid-template-columns: 44px 1fr auto; margin: 6px 0 2px; font-size: 12px; }
.stg-row { font-size: 13px; margin: 4px 0 2px; }
.stg-err { font-size: 12.5px; color: #c74a3d; margin-top: 6px; }
.stg-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stg-card details { margin-top: 10px; font-size: 13px; }
.stg-card summary { cursor: pointer; color: var(--text); }
.stg-f { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.stg-f input { font: inherit; font-size: 13px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
.stg-uri { display: flex; align-items: center; gap: 8px; }
.stg-uri code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--pill); border-radius: 6px; padding: 4px 6px; color: var(--text); font-size: 12px; }
.stg-help ol { margin: 8px 0 6px 18px; padding: 0; line-height: 1.5; }
.stg-help li { margin: 3px 0; }
.stg-help p { margin: 8px 0 0; }
.stg-card .btn:disabled { opacity: .45; cursor: default; }

/* ─── Окно «Настройки» крупнее (v1.24.1, 16.10.2026, Claude-NL · b783bc63): было 620 px и «по содержимому» ─── */
#st-dialog .modal { width: min(920px, 96vw); height: min(860px, 92dvh); max-height: none; }
#st-dialog .st-body { flex: 1; padding: 4px 24px 12px; }
#st-dialog .modal-h { padding: 18px 24px 10px; font-size: 16px; }
#st-dialog .st-tabs { padding-left: 16px; padding-right: 16px; }
@media (max-width: 760px) { #st-dialog .modal { width: 100vw; height: 100dvh; border-radius: 0; } #st-dialog .st-body { padding: 4px 14px 12px; } }
/* Вход в Claude (v1.26.0, 27.10.2026, Claude · 1e9360b7) */
.ca-flow { margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
/* 30.10.2026 · Codex, сервер NL: карточки подключений. */
.ai-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 16px 0; background: var(--bg, #fff); }
.ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ai-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ai-method { font-size: 12px; color: var(--muted); background: var(--line-soft); padding: 4px 9px; border-radius: 20px; }
.ai-key { width: 100%; box-sizing: border-box; }
.ai-key-label { display: block; font-size: 12px; margin: 12px 0 6px; color: var(--muted); }
.ai-device-code { display: inline-block; font: 600 20px monospace; letter-spacing: 2px; padding: 8px; user-select: all; }
.ai-card .st-act { flex-wrap: wrap; }
.ai-card .ca-steps li { margin-bottom: 12px; }
.ai-card .ca-steps a { margin-top: 8px; }
@media (max-width: 520px) { .ai-card { padding: 12px; } .ai-card-head { flex-wrap: wrap; } .ai-card .st-act .st-msg { flex-basis: 100%; } }
.ca-steps { margin: 0 0 8px; padding-left: 20px; }
.ca-steps li { margin: 6px 0 12px; line-height: 1.5; }
.ca-steps .st-row { margin-top: 6px; flex-wrap: wrap; }
.ca-steps input { font: inherit; font-size: 13px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: #fff; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.ca-hint { margin-top: 8px; white-space: normal; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 02.11.2026 · Codex-NL · чат «Untitled Codex Session» · 01a19b00 */
.msg-user { flex-direction: column; align-items: flex-end; }
.msg-time { display: block; margin: 5px 0 8px; color: var(--muted); font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.msg-user > .msg-time { margin: 5px 3px 0; }
.msg-time.unknown { font-style: italic; }
/* Статус API Anthropic — строка в окне «Лимиты и счета» (05.11.2026) */
.api-row { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-size: 13px; padding: 2px 0 8px; }