/* Agent Hub — визуальный слой журнала работ.
   Лежит поверх work-log.css: разметка и семантика не меняются, поэтому один и
   тот же файл оформляет Mini App в Telegram и панель расширения VS Code.

   Тема задаётся атрибутом html[data-theme]; без него действует «Орбита».
   Тема меняет не только палитру, но и геометрию, текстуру и типографику:
     orbit  — станция: стекло, кольца орбит, мягкие скругления;
     nebula — туманность: размытые облака, крупные радиусы, свечение вместо рамок;
     pulsar — HUD: жёсткие углы, уголки-скобки, сканлайны, моноширинные числа;
     gothic — крепость: сырой камень, руны, угли и холодное старое золото;
     graphite — нейтральная рабочая плоскость: сетка, матовые панели, минимум декора. */

:root {
  color-scheme: dark;

  /* ---- типографика ---- */
  --font-body: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  --font-display: var(--font-body);
  --font-title: var(--font-display);
  --font-numeric: var(--font-body);
  --display-weight: 620;
  --display-spacing: -0.02em;
  --display-transform: none;
  --display-shadow: none;
  --title-weight: 545;
  --label-spacing: 0.15em;
  --label-transform: uppercase;

  /* ---- геометрия ---- */
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 8px;
  --radius-chip: 999px;
  --rail-width: 2px;

  /* ---- поверхности ---- */
  --bg: #080b11;
  --surface-1: rgba(255, 255, 255, 0.026);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.07);
  --sunken: rgba(0, 0, 0, 0.18);

  --line: rgba(150, 178, 214, 0.13);
  --line-strong: rgba(150, 178, 214, 0.24);

  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016));
  --card-bg-open: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --card-texture: none;
  --card-border: var(--line);
  --card-border-open: var(--line-strong);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px -26px rgba(0, 0, 0, 0.9);

  --plate-bg: var(--surface-2);
  --plate-texture: none;
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --turn-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

  /* ---- текст ---- */
  --text: #e9eff8;
  --text-soft: #b6c3d5;
  --text-muted: #8797ab;
  --text-faint: #667689;

  /* ---- акцент ---- */
  --accent: #6cb2ff;
  --accent-soft: rgba(108, 178, 255, 0.13);
  --accent-line: rgba(108, 178, 255, 0.4);
  --accent-glow: 0 0 18px -8px rgba(108, 178, 255, 0.85);
  --selection: rgba(108, 178, 255, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(108, 178, 255, 0.28), rgba(126, 78, 190, 0.22));
  --brand-shadow: 0 6px 18px -10px rgba(108, 178, 255, 0.7);

  --provider-none: #8797ab;
  --provider-codex: #6cb2ff;
  --provider-claude: #e08a63;

  /* Геометрия Phosphor Icons Regular 2.1.1 для CSS-маркеров раскрытия. */
  --ph-mask-caret-right:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='96 48 176 128 96 208' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
  --ph-mask-caret-double-up:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='48 200 128 120 208 200' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='48 120 128 40 208 120' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");

  --ok: #4fd08a;
  --pending: #f0b95b;

  /* ---- маркеры категорий расхода ---- */
  --dot-input: #6cb2ff;
  --dot-cache: #62d3b4;
  --dot-output: #f0b95b;
  --dot-think: #b58cf0;

  /* ---- фон ---- */
  --space-glow-a: rgba(56, 124, 196, 0.24);
  --space-glow-b: rgba(126, 78, 190, 0.16);
  --space-base: linear-gradient(180deg, #0d1219 0, var(--bg) 32rem);
  --space-star: rgba(188, 220, 255, 0.32);
  --star-opacity: 0.34;
  --decor-opacity: 1;

  /* ---- раскладка ---- */
  --header-height: 4.15rem;
  --content-width: 92rem;
  --gutter-left: max(0.9rem, env(safe-area-inset-left));
  --gutter-right: max(0.9rem, env(safe-area-inset-right));

  /* work-log.css использует эти переменные для раскрытого хода */
  --vscode-focusBorder: var(--accent);
  --vscode-foreground: var(--text);
}

[hidden] {
  display: none !important;
}

/* ===================================================== тема «Туманность» === */

html[data-theme="nebula"] {
  --display-weight: 560;
  --display-spacing: 0.005em;
  --title-weight: 520;
  --label-spacing: 0.2em;

  --radius-lg: 26px;
  --radius-md: 19px;
  --radius-sm: 15px;
  --rail-width: 3px;

  --bg: #0f0819;
  --surface-1: rgba(255, 240, 255, 0.035);
  --surface-2: rgba(255, 236, 255, 0.062);
  --surface-3: rgba(255, 228, 255, 0.1);
  --sunken: rgba(24, 6, 38, 0.42);

  --line: rgba(214, 168, 255, 0.11);
  --line-strong: rgba(224, 186, 255, 0.2);

  --card-bg: linear-gradient(158deg, rgba(126, 62, 186, 0.22), rgba(38, 14, 64, 0.5) 58%, rgba(20, 8, 36, 0.55));
  --card-bg-open: linear-gradient(158deg, rgba(146, 74, 208, 0.28), rgba(44, 16, 74, 0.55) 58%, rgba(24, 9, 42, 0.6));
  --card-border: rgba(214, 168, 255, 0.1);
  --card-border-open: rgba(224, 186, 255, 0.2);
  --card-shadow:
    inset 0 1px 0 rgba(255, 236, 255, 0.09),
    0 26px 60px -34px rgba(140, 60, 220, 0.75),
    0 0 60px -30px rgba(255, 130, 220, 0.4);

  --plate-bg: linear-gradient(150deg, rgba(255, 232, 255, 0.075), rgba(255, 220, 255, 0.03));
  --plate-shadow: inset 0 1px 0 rgba(255, 236, 255, 0.12), 0 8px 22px -18px rgba(160, 70, 230, 0.9);
  --turn-shadow: 0 10px 26px -22px rgba(150, 70, 220, 0.9);

  --text: #f6ecff;
  --text-soft: #d8c6ea;
  --text-muted: #ac98be;
  --text-faint: #837093;

  --accent: #d79bff;
  --accent-soft: rgba(215, 155, 255, 0.16);
  --accent-line: rgba(215, 155, 255, 0.42);
  --accent-glow: 0 0 26px -8px rgba(215, 155, 255, 0.95);
  --selection: rgba(215, 155, 255, 0.32);
  --brand-gradient: radial-gradient(circle at 32% 26%, rgba(255, 190, 245, 0.45), transparent 58%),
    linear-gradient(150deg, rgba(196, 106, 255, 0.4), rgba(72, 96, 255, 0.3));
  --brand-shadow: 0 10px 26px -12px rgba(200, 110, 255, 0.9);

  --provider-codex: #8fb8ff;
  --provider-claude: #ff9ec4;

  --ok: #7ff0c8;
  --pending: #ffc98a;

  --dot-input: #8fb8ff;
  --dot-cache: #7ff0c8;
  --dot-output: #ffc98a;
  --dot-think: #e79bff;

  --space-glow-a: rgba(196, 74, 255, 0.3);
  --space-glow-b: rgba(60, 118, 255, 0.24);
  --space-base: linear-gradient(180deg, #1b0d2c 0, var(--bg) 38rem);
  --space-star: rgba(240, 212, 255, 0.5);
  --star-opacity: 0.5;
}

/* ======================================================== тема «Пульсар» === */

html[data-theme="pulsar"] {
  --font-numeric: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", "Roboto Mono", monospace;
  --display-weight: 600;
  --display-spacing: 0.12em;
  --display-transform: uppercase;
  --title-weight: 560;
  --label-spacing: 0.28em;

  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-chip: 2px;
  --rail-width: 3px;

  --bg: #03151a;
  --surface-1: rgba(198, 255, 250, 0.028);
  --surface-2: rgba(198, 255, 250, 0.055);
  --surface-3: rgba(198, 255, 250, 0.095);
  --sunken: rgba(0, 12, 16, 0.5);

  --line: rgba(74, 226, 214, 0.22);
  --line-strong: rgba(74, 226, 214, 0.42);

  --card-bg: linear-gradient(180deg, rgba(6, 32, 38, 0.86), rgba(3, 19, 24, 0.9));
  --card-bg-open: linear-gradient(180deg, rgba(8, 42, 49, 0.9), rgba(4, 24, 30, 0.92));
  --card-texture: repeating-linear-gradient(0deg, rgba(120, 255, 244, 0.035) 0 1px, transparent 1px 3px);
  --card-border: rgba(74, 226, 214, 0.3);
  --card-border-open: rgba(74, 226, 214, 0.5);
  --card-shadow:
    inset 0 0 0 1px rgba(3, 25, 30, 0.9),
    inset 0 1px 0 rgba(140, 255, 246, 0.16),
    0 0 24px -14px rgba(60, 230, 216, 0.8);

  --plate-bg: linear-gradient(180deg, rgba(198, 255, 250, 0.07), rgba(198, 255, 250, 0.02));
  --plate-texture: repeating-linear-gradient(0deg, rgba(120, 255, 244, 0.03) 0 1px, transparent 1px 3px);
  --plate-shadow: inset 0 1px 0 rgba(150, 255, 247, 0.14);
  --turn-shadow: 0 0 14px -10px rgba(60, 230, 216, 0.9);

  --text: #e2fbf8;
  --text-soft: #a9d8d3;
  --text-muted: #74a9a5;
  --text-faint: #57827f;

  --accent: #3ce6d4;
  --accent-soft: rgba(60, 230, 212, 0.12);
  --accent-line: rgba(60, 230, 212, 0.55);
  --accent-glow: 0 0 16px -6px rgba(60, 230, 212, 1);
  --selection: rgba(60, 230, 212, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(60, 230, 212, 0.32), rgba(16, 92, 120, 0.4));
  --brand-shadow: 0 0 20px -8px rgba(60, 230, 212, 0.95);

  --provider-codex: #3ce6d4;
  --provider-claude: #ffa96a;

  --ok: #3ce6d4;
  --pending: #ffc861;

  --dot-input: #3ce6d4;
  --dot-cache: #59b7ff;
  --dot-output: #ffc861;
  --dot-think: #b98cff;

  --space-glow-a: rgba(0, 214, 196, 0.22);
  --space-glow-b: rgba(20, 96, 190, 0.2);
  --space-base: linear-gradient(180deg, #05242c 0, var(--bg) 30rem);
  --space-star: rgba(170, 255, 246, 0.34);
  --star-opacity: 0.26;
}

/* ========================================================= тема «Gothic» === */

html[data-theme="gothic"] {
  /* Оригинальная тема мрачного средневекового RPG: сырой камень, старое
     железо, холодное золото и живой огонь. Системные антиквы сохраняют
     кириллицу и не требуют внешнего шрифта. */
  --font-body: "Constantia", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-display: "Palatino Linotype", "Book Antiqua", "Constantia", Georgia, serif;
  --font-title: "Felix Titling", "Perpetua Titling MT", "Palatino Linotype", Georgia, serif;
  --font-numeric: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --display-weight: 700;
  --display-spacing: 0.045em;
  --display-transform: uppercase;
  --display-shadow:
    0 2px 1px #050302,
    0 -1px 0 rgba(255, 226, 156, 0.18),
    0 0 18px rgba(190, 126, 42, 0.18);
  --title-weight: 600;
  --label-spacing: 0.18em;

  --radius-lg: 5px;
  --radius-md: 4px;
  --radius-sm: 2px;
  --radius-chip: 2px;
  --rail-width: 3px;

  --bg: #090806;
  --surface-1: rgba(222, 200, 154, 0.035);
  --surface-2: rgba(222, 200, 154, 0.065);
  --surface-3: rgba(222, 200, 154, 0.105);
  --sunken: rgba(3, 2, 1, 0.58);

  --line: rgba(189, 159, 101, 0.2);
  --line-strong: rgba(211, 178, 110, 0.38);

  --card-bg:
    linear-gradient(176deg, rgba(43, 40, 33, 0.94), rgba(18, 17, 14, 0.96) 56%, rgba(10, 9, 8, 0.98));
  --card-bg-open:
    linear-gradient(176deg, rgba(51, 46, 36, 0.95), rgba(23, 20, 16, 0.97) 56%, rgba(11, 10, 8, 0.99));
  --card-texture:
    linear-gradient(92deg, transparent 0 48%, rgba(236, 210, 154, 0.022) 49% 50%, transparent 51%),
    radial-gradient(44% 54% at 18% 16%, rgba(239, 218, 170, 0.06), transparent 72%),
    radial-gradient(36% 46% at 82% 76%, rgba(0, 0, 0, 0.44), transparent 76%);
  --card-border: rgba(176, 143, 82, 0.28);
  --card-border-open: rgba(218, 179, 102, 0.52);
  --card-shadow:
    inset 0 1px 0 rgba(244, 218, 164, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.86),
    inset 0 0 28px rgba(0, 0, 0, 0.2),
    0 24px 46px -30px rgba(0, 0, 0, 0.95);

  --plate-bg: linear-gradient(176deg, rgba(50, 45, 35, 0.95), rgba(22, 20, 16, 0.98) 58%, rgba(12, 11, 9, 0.99));
  --plate-texture:
    linear-gradient(90deg, rgba(232, 204, 145, 0.025), transparent 18% 82%, rgba(0, 0, 0, 0.18)),
    radial-gradient(52% 60% at 22% 24%, rgba(231, 207, 158, 0.055), transparent 74%),
    radial-gradient(46% 54% at 82% 78%, rgba(0, 0, 0, 0.38), transparent 76%);
  --plate-shadow:
    inset 0 1px 0 rgba(238, 211, 157, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82);
  --turn-shadow: 0 12px 26px -18px rgba(0, 0, 0, 1);

  --text: #ede5d2;
  --text-soft: #c4b89e;
  --text-muted: #948873;
  --text-faint: #6f6656;

  --accent: #d4aa58;
  --accent-soft: rgba(212, 170, 88, 0.12);
  --accent-line: rgba(212, 170, 88, 0.5);
  --accent-glow: 0 0 20px -8px rgba(230, 164, 55, 0.76);
  --selection: rgba(212, 170, 88, 0.28);
  --brand-gradient:
    radial-gradient(68% 72% at 32% 24%, rgba(250, 216, 145, 0.2), transparent 70%),
    linear-gradient(176deg, #4b3d27, #15110c 68%, #080705);
  --brand-shadow:
    inset 0 1px 0 rgba(246, 219, 164, 0.16),
    inset 0 -8px 14px rgba(0, 0, 0, 0.48),
    0 0 22px -10px rgba(224, 151, 43, 0.9);

  --provider-none: #827766;
  --provider-codex: #d0c5ad;
  --provider-claude: #c88956;

  --ok: #b8b07c;
  --pending: #c78445;

  --dot-input: #b8c0c7;
  --dot-cache: #a69a79;
  --dot-output: #d4aa58;
  --dot-think: #8e8296;

  --space-glow-a: rgba(214, 154, 56, 0.08);
  --space-glow-b: rgba(84, 104, 119, 0.09);
  --space-base: linear-gradient(176deg, #16130f 0, #0d0b09 24rem, var(--bg) 100%);
  --space-star: transparent;
  --star-opacity: 0;
}

/* ====================================================== тема «BlackHole» === */

html[data-theme="blackhole"] {
  --display-weight: 600;
  --display-spacing: 0.02em;
  --label-spacing: 0.2em;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --rail-width: 2px;

  --bg: #000000;
  --surface-1: rgba(232, 238, 252, 0.026);
  --surface-2: rgba(232, 238, 252, 0.05);
  --surface-3: rgba(232, 238, 252, 0.085);
  --sunken: rgba(0, 0, 0, 0.6);

  --line: rgba(226, 232, 244, 0.12);
  --line-strong: rgba(226, 232, 244, 0.26);

  --card-bg: linear-gradient(180deg, rgba(8, 10, 14, 0.9), rgba(0, 0, 0, 0.94));
  --card-bg-open: linear-gradient(180deg, rgba(11, 14, 20, 0.92), rgba(0, 0, 0, 0.95));
  --card-border: rgba(226, 236, 255, 0.14);
  --card-border-open: rgba(122, 190, 255, 0.36);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 42px -22px rgba(96, 176, 255, 0.6),
    0 30px 60px -34px rgba(0, 0, 0, 1);

  --plate-bg: linear-gradient(180deg, rgba(226, 238, 255, 0.06), rgba(0, 0, 0, 0.35));
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --turn-shadow: 0 0 26px -18px rgba(110, 186, 255, 0.9);

  --text: #f2f6fd;
  --text-soft: #c0c9da;
  --text-muted: #8a93a5;
  --text-faint: #626b7c;

  --accent: #9ecbff;
  --accent-soft: rgba(158, 203, 255, 0.12);
  --accent-line: rgba(158, 203, 255, 0.42);
  --accent-glow: 0 0 22px -8px rgba(140, 200, 255, 0.95);
  --selection: rgba(110, 186, 255, 0.32);
  --brand-gradient:
    radial-gradient(circle at 50% 50%, #000 0 36%, rgba(150, 205, 255, 0.95) 44%,
      rgba(70, 140, 255, 0.5) 64%, rgba(0, 0, 0, 0.92) 88%);
  --brand-shadow: 0 0 26px -8px rgba(110, 186, 255, 0.95);

  --provider-none: #7c8494;
  --provider-codex: #9ecbff;
  --provider-claude: #c9a6ff;

  --ok: #a9d6ff;
  --pending: #7c8494;

  --dot-input: #9ecbff;
  --dot-cache: #7ee3ff;
  --dot-output: #eef4ff;
  --dot-think: #c9a6ff;

  --space-glow-a: rgba(70, 150, 255, 0.1);
  --space-glow-b: rgba(120, 90, 220, 0.08);
  --space-base: radial-gradient(120% 80% at 50% -6%, #04060c 0, #000 62%);
  --space-star: rgba(240, 248, 255, 0.5);
  --star-opacity: 0.32;
}

/* =========================================================== тема «Rain» === */

html[data-theme="taiga"] {
  --display-weight: 600;
  --display-spacing: -0.005em;
  --title-weight: 545;
  --label-spacing: 0.18em;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #060a0d;
  --surface-1: rgba(200, 226, 220, 0.028);
  --surface-2: rgba(200, 226, 220, 0.05);
  --surface-3: rgba(200, 226, 220, 0.088);
  --sunken: rgba(2, 6, 8, 0.5);

  --line: rgba(152, 194, 186, 0.13);
  --line-strong: rgba(152, 194, 186, 0.26);

  /* карточки лежат на фотографии, поэтому базовая заливка полупрозрачная */
  --card-bg: linear-gradient(180deg, rgba(9, 16, 17, 0.44), rgba(4, 8, 10, 0.52));
  --card-bg-open: linear-gradient(180deg, rgba(9, 16, 17, 0.5), rgba(4, 8, 10, 0.58));
  --card-texture: none;
  --card-border: rgba(152, 198, 188, 0.16);
  --card-border-open: rgba(126, 191, 174, 0.4);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 56px -34px rgba(0, 0, 0, 0.95);

  --plate-bg: linear-gradient(180deg, rgba(202, 228, 220, 0.07), rgba(4, 9, 10, 0.28));
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --turn-shadow: 0 0 28px -20px rgba(126, 191, 174, 0.85);

  --text: #e4eeec;
  --text-soft: #b4c5c1;
  --text-muted: #859794;
  --text-faint: #637270;

  /* мшисто-бирюзовый: голубой уже занят «Орбитой» и «Чёрной дырой» */
  --accent: #7ebfae;
  --accent-soft: rgba(126, 191, 174, 0.13);
  --accent-line: rgba(126, 191, 174, 0.4);
  --accent-glow: 0 0 22px -10px rgba(126, 191, 174, 0.9);
  --selection: rgba(126, 191, 174, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(150, 185, 205, 0.3), rgba(70, 110, 95, 0.28));
  --brand-shadow: 0 0 24px -10px rgba(126, 191, 174, 0.85);

  --provider-none: #77878a;
  --provider-codex: #8fc4e0;
  --provider-claude: #e0a468;
  --ok: #8fd0b8;
  --pending: #d9a866;

  --dot-input: #8fc4e0;
  --dot-cache: #7ebfae;
  --dot-output: #d9a866;
  --dot-think: #9c9cc4;

  --space-glow-a: rgba(109, 155, 183, 0.08);
  --space-glow-b: rgba(71, 112, 108, 0.08);
  --space-base: #070c12;
  --space-star: transparent;
  --star-opacity: 0;
}

/* ====================================================== тема «Мегаполис» === */

html[data-theme="metropolis"] {
  --display-weight: 610;
  --display-spacing: -0.012em;
  --title-weight: 555;
  --label-spacing: 0.17em;

  --radius-lg: 15px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #050b12;
  --surface-1: rgba(198, 223, 236, 0.032);
  --surface-2: rgba(198, 223, 236, 0.058);
  --surface-3: rgba(198, 223, 236, 0.095);
  --sunken: rgba(1, 6, 11, 0.54);

  --line: rgba(145, 190, 216, 0.14);
  --line-strong: rgba(145, 190, 216, 0.29);

  --card-bg: linear-gradient(180deg, rgba(7, 16, 24, 0.52), rgba(3, 9, 15, 0.64));
  --card-bg-open: linear-gradient(180deg, rgba(9, 20, 29, 0.58), rgba(3, 9, 15, 0.7));
  --card-texture: none;
  --card-border: rgba(148, 194, 220, 0.17);
  --card-border-open: rgba(104, 195, 231, 0.42);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 26px 58px -36px rgba(0, 0, 0, 0.96);

  --plate-bg: linear-gradient(180deg, rgba(204, 228, 239, 0.075), rgba(2, 8, 13, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --turn-shadow: 0 0 30px -21px rgba(91, 192, 232, 0.92);

  --text: #e5eef3;
  --text-soft: #b5c6cf;
  --text-muted: #8297a3;
  --text-faint: #5f727d;

  --accent: #68c3e7;
  --accent-soft: rgba(104, 195, 231, 0.14);
  --accent-line: rgba(104, 195, 231, 0.43);
  --accent-glow: 0 0 24px -9px rgba(104, 195, 231, 0.96);
  --selection: rgba(104, 195, 231, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(111, 204, 237, 0.28), rgba(221, 163, 88, 0.18));
  --brand-shadow: 0 0 24px -10px rgba(104, 195, 231, 0.9);

  --provider-none: #78909c;
  --provider-codex: #74d2ef;
  --provider-claude: #e5a05f;
  --ok: #6fd3ad;
  --pending: #e3ab64;

  --dot-input: #74d2ef;
  --dot-cache: #6fd3ad;
  --dot-output: #e3ab64;
  --dot-think: #a6a1d5;

  --space-glow-a: rgba(60, 145, 190, 0.1);
  --space-glow-b: rgba(219, 147, 74, 0.05);
  --space-base: #050b12;
  --space-star: transparent;
  --star-opacity: 0;
  --metropolis-image: url("/metropolis-night.png");
}

/* ========================================================== тема «Storm» === */

/* Ночной шторм за иллюминатором. Палитра холоднее «Мегаполиса» и почти без
   тёплых нот: единственный тёплый источник в кадре — маяк, и его роль отдана
   свету, а не интерфейсу. */
html[data-theme="stormglass"] {
  --display-weight: 620;
  --display-spacing: -0.01em;
  --title-weight: 550;
  --label-spacing: 0.16em;

  /* обводки помягче «Мегаполиса»: за стеклом нет прямых линий города */
  --radius-lg: 14px;
  --radius-md: 11px;
  --radius-sm: 8px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #05090f;
  --surface-1: rgba(186, 214, 232, 0.03);
  --surface-2: rgba(186, 214, 232, 0.055);
  --surface-3: rgba(186, 214, 232, 0.092);
  --sunken: rgba(1, 5, 9, 0.55);

  --line: rgba(140, 180, 208, 0.14);
  --line-strong: rgba(140, 180, 208, 0.28);

  --card-bg: linear-gradient(180deg, rgba(8, 17, 26, 0.5), rgba(3, 8, 13, 0.62));
  --card-bg-open: linear-gradient(180deg, rgba(10, 21, 32, 0.56), rgba(3, 8, 13, 0.68));
  --card-texture: none;
  --card-border: rgba(140, 180, 208, 0.17);
  --card-border-open: rgba(142, 199, 226, 0.4);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 26px 58px -36px rgba(0, 0, 0, 0.96);

  --plate-bg: linear-gradient(180deg, rgba(196, 222, 238, 0.07), rgba(2, 7, 12, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --turn-shadow: 0 0 30px -21px rgba(142, 199, 226, 0.9);

  --text: #e4edf4;
  --text-soft: #b6c7d3;
  --text-muted: #8296a4;
  --text-faint: #61717e;

  /* холодный свет маяка */
  --accent: #8ec7e2;
  --accent-soft: rgba(142, 199, 226, 0.14);
  --accent-line: rgba(142, 199, 226, 0.42);
  --accent-glow: 0 0 24px -9px rgba(142, 199, 226, 0.95);
  --selection: rgba(142, 199, 226, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(142, 199, 226, 0.3), rgba(30, 58, 82, 0.32));
  --brand-shadow: 0 0 24px -10px rgba(142, 199, 226, 0.9);

  --provider-none: #78909c;
  --provider-codex: #7fc9e6;
  --provider-claude: #e0a06d;
  --ok: #74cfae;
  --pending: #ddac68;

  --dot-input: #7fc9e6;
  --dot-cache: #74cfae;
  --dot-output: #e0a06d;
  --dot-think: #a3a6d8;

  --space-glow-a: rgba(80, 140, 180, 0.1);
  --space-glow-b: rgba(30, 60, 90, 0.12);
  --space-base: #05090f;
  --space-star: transparent;
  --star-opacity: 0;
  --stormglass-image: url("/storm-sea.png");
  --stormglass-flash: url("/storm-flash.png");
}

/* Фон отдаёт снимок как есть, а поверх идёт только гроза: стекло с каплями
   на ночном море читалось мутью и перекрывало сам шторм. */
html[data-theme="stormglass"] body::after {
  background-color: #05090f;
  background-image:
    linear-gradient(90deg, rgba(3, 7, 12, 0.45), rgba(3, 7, 12, 0.06) 52%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.04) 46%, rgba(2, 6, 10, 0.3)),
    var(--stormglass-image);
  background-position: center, center, 62% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="stormglass"] body::before {
  content: none;
}

html[data-theme="stormglass"] .theme-atmosphere {
  display: block;
}

/* У «Storm» нет стекла: холст темы оживляет саму сцену — волны, дрейф неба и
   разряды. Пока шейдер не готов, виден CSS-фон под ним. */
html[data-theme="stormglass"] .theme-atmosphere[data-ready="true"] canvas[data-storm-glass] {
  opacity: 1;
}

html[data-theme="stormglass"] .theme-atmosphere [data-metropolis-glass],
html[data-theme="metropolis"] .theme-atmosphere [data-storm-glass] {
  display: none;
}

html[data-theme="stormglass"] .app-header {
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  background: rgba(3, 7, 12, 0.62);
}

html[data-theme="stormglass"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(142, 199, 226, 0.55), transparent);
}

html[data-theme="stormglass"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(5px) saturate(110%);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  background-color: rgba(3, 7, 12, 0.46);
  background-image: none;
}

html[data-theme="stormglass"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(5, 11, 18, 0.4);
  background-image: none;
}

/* ========================================================= тема «Магма» === */

html[data-theme="magma"] {
  --display-weight: 640;
  --display-spacing: -0.012em;
  --title-weight: 550;
  --label-spacing: 0.15em;

  /* колотый базальт: углы жёстче «Орбиты», но мягче «Пульсара» */
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #0a0605;
  --surface-1: rgba(255, 226, 205, 0.028);
  --surface-2: rgba(255, 226, 205, 0.05);
  --surface-3: rgba(255, 226, 205, 0.088);
  --sunken: rgba(8, 3, 2, 0.5);

  --line: rgba(226, 168, 128, 0.14);
  --line-strong: rgba(232, 178, 140, 0.28);

  --card-bg: linear-gradient(180deg, rgba(20, 11, 8, 0.5), rgba(9, 5, 4, 0.58));
  --card-bg-open: linear-gradient(180deg, rgba(20, 11, 8, 0.56), rgba(9, 5, 4, 0.64));
  --card-texture: none;
  --card-border: rgba(226, 168, 128, 0.17);
  --card-border-open: rgba(255, 154, 92, 0.4);
  --card-shadow:
    inset 0 1px 0 rgba(255, 226, 205, 0.05),
    0 24px 56px -34px rgba(0, 0, 0, 0.95);

  --plate-bg: linear-gradient(180deg, rgba(255, 226, 205, 0.07), rgba(9, 5, 4, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(255, 226, 205, 0.06);
  --turn-shadow: 0 0 28px -20px rgba(255, 138, 61, 0.85);

  --text: #f1e7e0;
  --text-soft: #ccbcb2;
  --text-muted: #9c8b81;
  --text-faint: #766862;

  /* акцент светлее и мягче оранжевого бейджа kcr, чтобы рамки не спорили
     с цветовым кодом расхода */
  --accent: #ff9a5c;
  --accent-soft: rgba(255, 154, 92, 0.13);
  --accent-line: rgba(255, 154, 92, 0.42);
  --accent-glow: 0 0 22px -10px rgba(255, 138, 61, 0.9);
  --selection: rgba(255, 154, 92, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(255, 138, 61, 0.32), rgba(120, 40, 20, 0.3));
  --brand-shadow: 0 0 24px -10px rgba(255, 138, 61, 0.85);

  /* провайдер Codex холодный: тонкий рейл на чёрном базальте иначе теряется
     среди лавы */
  --provider-none: #8a7a72;
  --provider-codex: #86b6cf;
  --provider-claude: #ffb066;
  --ok: #c6d18a;
  --pending: #d9a866;

  --dot-input: #86b6cf;
  --dot-cache: #d0a07a;
  --dot-output: #ffb066;
  --dot-think: #b09ad0;

  --space-glow-a: rgba(255, 138, 61, 0.1);
  --space-glow-b: rgba(120, 50, 30, 0.1);
  --space-base: #0a0605;
  --space-star: transparent;
  --star-opacity: 0;
}

html[data-theme="storm"] {
  --display-weight: 620;
  --display-spacing: -0.008em;
  --title-weight: 540;
  --label-spacing: 0.16em;

  /* мокрый графит: скругления заметнее «Магмы», но далеко от «Тайги» */
  --radius-lg: 12px;
  --radius-md: 9px;
  --radius-sm: 6px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #070b12;
  --surface-1: rgba(198, 218, 245, 0.03);
  --surface-2: rgba(198, 218, 245, 0.055);
  --surface-3: rgba(198, 218, 245, 0.095);
  --sunken: rgba(4, 7, 12, 0.5);

  --line: rgba(160, 190, 230, 0.14);
  --line-strong: rgba(170, 200, 240, 0.29);

  --card-bg: linear-gradient(180deg, rgba(15, 22, 34, 0.5), rgba(6, 10, 17, 0.58));
  --card-bg-open: linear-gradient(180deg, rgba(15, 22, 34, 0.56), rgba(6, 10, 17, 0.64));
  --card-texture: none;
  --card-border: rgba(160, 190, 230, 0.17);
  --card-border-open: rgba(157, 180, 255, 0.42);
  --card-shadow:
    inset 0 1px 0 rgba(198, 218, 245, 0.055),
    0 24px 56px -34px rgba(0, 0, 0, 0.95);

  --plate-bg: linear-gradient(180deg, rgba(198, 218, 245, 0.075), rgba(6, 10, 17, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(198, 218, 245, 0.07);
  --turn-shadow: 0 0 28px -20px rgba(157, 180, 255, 0.8);

  --text: #e8eefa;
  --text-soft: #c0cbdd;
  --text-muted: #8e9bb0;
  --text-faint: #6b788c;

  /* разряд отдаёт в лиловое: так акцент не сливается с синевой «Орбиты» */
  --accent: #9db4ff;
  --accent-soft: rgba(157, 180, 255, 0.13);
  --accent-line: rgba(157, 180, 255, 0.42);
  --accent-glow: 0 0 22px -10px rgba(157, 180, 255, 0.9);
  --selection: rgba(157, 180, 255, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(157, 180, 255, 0.3), rgba(30, 45, 80, 0.32));
  --brand-shadow: 0 0 24px -10px rgba(157, 180, 255, 0.85);

  /* Claude держим тёплым: на сплошном холодном фоне это единственный
     надёжный признак провайдера */
  --provider-none: #77839a;
  --provider-codex: #7fb8e6;
  --provider-claude: #e0956f;
  --ok: #86cfae;
  --pending: #d2b070;

  --dot-input: #7fb8e6;
  --dot-cache: #9db4ff;
  --dot-output: #e0956f;
  --dot-think: #b39ada;

  --space-glow-a: rgba(157, 180, 255, 0.1);
  --space-glow-b: rgba(40, 60, 100, 0.12);
  --space-base: #070b12;
  --space-star: transparent;
  --star-opacity: 0;
}

html[data-theme="meadow"] {
  --display-weight: 620;
  --display-spacing: -0.006em;
  --title-weight: 540;
  --label-spacing: 0.14em;

  /* всё живое округлое: набор мягче «Орбиты», но без вытянутости «Тайги» */
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #070d08;
  --surface-1: rgba(214, 240, 190, 0.032);
  --surface-2: rgba(214, 240, 190, 0.058);
  --surface-3: rgba(214, 240, 190, 0.1);
  --sunken: rgba(5, 10, 6, 0.5);

  --line: rgba(176, 214, 138, 0.15);
  --line-strong: rgba(186, 222, 150, 0.29);

  --card-bg: linear-gradient(180deg, rgba(14, 24, 15, 0.56), rgba(6, 12, 7, 0.64));
  --card-bg-open: linear-gradient(180deg, rgba(14, 24, 15, 0.62), rgba(6, 12, 7, 0.7));
  --card-texture: none;
  --card-border: rgba(176, 214, 138, 0.18);
  --card-border-open: rgba(159, 211, 86, 0.42);
  --card-shadow:
    inset 0 1px 0 rgba(214, 240, 190, 0.055),
    0 24px 56px -34px rgba(0, 0, 0, 0.95);

  --plate-bg: linear-gradient(180deg, rgba(214, 240, 190, 0.075), rgba(6, 12, 7, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(214, 240, 190, 0.07);
  --turn-shadow: 0 0 28px -20px rgba(159, 211, 86, 0.8);

  --text: #eef4e6;
  --text-soft: #c7d3ba;
  --text-muted: #94a487;
  --text-faint: #6f7f65;

  /* лайм, а не хвойная зелень «Тайги»: тема про солнце, а не про сумерки */
  --accent: #9fd356;
  --accent-soft: rgba(159, 211, 86, 0.14);
  --accent-line: rgba(159, 211, 86, 0.44);
  --accent-glow: 0 0 22px -10px rgba(159, 211, 86, 0.9);
  --selection: rgba(159, 211, 86, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(159, 211, 86, 0.32), rgba(30, 70, 35, 0.34));
  --brand-shadow: 0 0 24px -10px rgba(159, 211, 86, 0.85);

  /* провайдеры уводим из зелени в воду и охру, иначе рельсы теряются на лугу */
  --provider-none: #869180;
  --provider-codex: #79c8e4;
  --provider-claude: #efa06a;
  --ok: #8fd0a0;
  --pending: #dcc06a;

  --dot-input: #79c8e4;
  --dot-cache: #c8d98a;
  --dot-output: #efa06a;
  --dot-think: #b8a6e0;

  --space-glow-a: rgba(159, 211, 86, 0.1);
  --space-glow-b: rgba(40, 90, 45, 0.12);
  --space-base: #070d08;
  --space-star: transparent;
  --star-opacity: 0;
}

/* ======================================================== тема «Графит» === */

html[data-theme="graphite"] {
  --font-numeric: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
    "SF Mono", "Roboto Mono", monospace;
  --display-weight: 600;
  --display-spacing: -0.01em;
  --title-weight: 600;
  --label-spacing: 0.14em;

  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-chip: 7px;
  --rail-width: 2px;

  --bg: oklch(0.15 0.004 260);
  --surface-1: oklch(0.185 0.004 260);
  --surface-2: oklch(0.21 0.004 260);
  --surface-3: oklch(0.24 0.004 260);
  --sunken: oklch(0.17 0.004 260);

  --line: oklch(0.27 0.005 260);
  --line-strong: oklch(0.33 0.005 260);

  --card-bg: linear-gradient(oklch(0.185 0.004 260), oklch(0.185 0.004 260));
  --card-bg-open: linear-gradient(oklch(0.19 0.004 260), oklch(0.19 0.004 260));
  --card-texture: none;
  --card-border: oklch(0.27 0.005 260);
  --card-border-open: oklch(0.33 0.005 260);
  --card-shadow: none;

  --plate-bg: linear-gradient(oklch(0.21 0.004 260), oklch(0.21 0.004 260));
  --plate-texture: none;
  --plate-shadow: none;
  --turn-shadow: none;

  --text: oklch(0.92 0.004 260);
  --text-soft: oklch(0.85 0.003 260);
  --text-muted: oklch(0.55 0.006 260);
  --text-faint: oklch(0.45 0.006 260);

  --accent: oklch(0.7 0.01 260);
  --accent-soft: oklch(0.24 0.004 260);
  --accent-line: oklch(0.4 0.01 260);
  --accent-glow: none;
  --selection: oklch(0.4 0.005 260);
  --brand-gradient: linear-gradient(oklch(0.24 0.004 260), oklch(0.24 0.004 260));
  --brand-shadow: none;

  --provider-none: oklch(0.55 0.006 260);
  --provider-codex: oklch(0.7 0.01 260);
  --provider-claude: oklch(0.62 0.012 45);

  --ok: oklch(0.72 0.05 150);
  --pending: oklch(0.72 0.07 60);

  --dot-input: oklch(0.72 0.07 250);
  --dot-cache: oklch(0.72 0.07 150);
  --dot-output: oklch(0.72 0.07 60);
  --dot-think: oklch(0.72 0.07 300);

  --space-glow-a: transparent;
  --space-glow-b: transparent;
  --space-base: var(--bg);
  --space-star: transparent;
  --star-opacity: 0;
  --decor-opacity: 0;
}

/* ================================================================== база === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  min-height: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(115% 55% at 84% -14%, var(--space-glow-a), transparent 60%),
    radial-gradient(85% 50% at 6% -10%, var(--space-glow-b), transparent 58%),
    var(--space-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

/* звёздная пыль — общий слой для всех тем */
body::before {
  background-image:
    radial-gradient(circle, var(--space-star) 0 0.65px, transparent 0.9px),
    radial-gradient(circle, var(--space-star) 0 0.55px, transparent 0.8px);
  background-position: 0 0, 2.7rem 1.8rem;
  background-size: 4.8rem 4.8rem, 6.4rem 6.4rem;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
  opacity: var(--star-opacity);
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

/* характерный слой темы */
body::after {
  content: "";
  inset: 0;
  opacity: var(--decor-opacity);
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

/* Отдельная плоскость для полноэкранных атмосферных эффектов. Она остаётся
   между растровым фоном и интерфейсом и не перехватывает ввод. */
.theme-atmosphere {
  display: none;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

.theme-atmosphere canvas {
  display: block;
  height: 100%;
  opacity: 0;
  transition: opacity 320ms ease;
  width: 100%;
}

html[data-theme="metropolis"] .theme-atmosphere {
  display: block;
}

html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"] canvas {
  opacity: 1;
}

::selection {
  background: var(--selection);
}

:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* {
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
}

*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-chip);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

a,
[role="link"] {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

[role="link"][aria-disabled="true"] {
  cursor: default;
}

/* ================================================================ шапка === */

.app-header {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
  padding: max(0.55rem, env(safe-area-inset-top)) 0 0.55rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-header::after {
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.7;
  position: absolute;
  right: 0;
}

.app-header-inner {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--content-width);
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
  position: relative;
}

.brand {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  min-width: 0;
}

.brand-mark {
  align-items: center;
  background: var(--brand-gradient);
  border: 1px solid var(--accent-line);
  border-radius: calc(var(--radius-md) + 0px);
  box-shadow: var(--brand-shadow);
  color: var(--accent);
  display: flex;
  flex: 0 0 auto;
  height: 2.3rem;
  justify-content: center;
  width: 2.3rem;
}

.brand-mark svg {
  height: 1.25rem;
  width: 1.25rem;
}

.brand-text {
  min-width: 0;
}

.eyebrow {
  color: var(--text-faint);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  margin: 0;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-title);
  font-size: 1.22rem;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.15;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--display-shadow);
  text-transform: var(--display-transform);
  white-space: nowrap;
}

.toolbar {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 0.55rem;
  min-width: 0;
}

.toolbar .view-settings {
  margin-left: auto;
}

.theme-picker,
.group-picker {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.74rem;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.2rem 0.38rem 0.2rem 0.6rem;
}

.theme-picker-label,
.group-picker-label {
  color: var(--text-faint);
}

.theme-picker select,
.group-picker select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 0.72rem) 50% / 0.28rem 0.28rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - 0.52rem) 50% / 0.28rem 0.28rem no-repeat,
    var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-chip);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-width: 7.3rem;
  padding: 0.18rem 1.15rem 0.18rem 0.55rem;
}

.group-picker select {
  min-width: 7.8rem;
}

.theme-picker option,
.group-picker option {
  background: var(--bg);
  color: var(--text);
}

.connection {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.74rem;
  gap: 0.4rem;
  padding: 0.24rem 0.65rem 0.24rem 0.5rem;
  white-space: nowrap;
}

.connection-dot {
  background: var(--pending);
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pending) 16%, transparent);
  flex: 0 0 auto;
  height: 0.42rem;
  width: 0.42rem;
}

.connection[data-connection="online"] .connection-dot {
  animation: pulse 2.4s ease-in-out infinite;
  background: var(--ok);
}

.connection-banner {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--pending);
  border-radius: var(--radius-chip);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.78rem;
  left: 50%;
  max-width: min(42rem, calc(100vw - 2rem));
  padding: 0.45rem 0.85rem;
  position: fixed;
  text-align: center;
  top: 4.35rem;
  transform: translateX(-50%);
  z-index: 120;
}

html[data-connection="offline"] .connection-banner {
  border-color: #b95f65;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ok) 18%, transparent);
  }

  50% {
    box-shadow: 0 0 0 0.34rem color-mix(in srgb, var(--ok) 4%, transparent);
  }
}

/* ==================================================== лимиты в шапке === */

.rate-limits {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
}

.rate-limits [data-rate-limit-group],
.rate-limits [data-rate-limit-credit] {
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  display: inline-flex;
  flex-direction: column;
  gap: 0.16rem;
  padding: 0.3rem 0.62rem;
  white-space: nowrap;
}

/* Подпись нужна только в теле журнала: в шапке чипы говорят сами за себя.
   `strong` — подпись из блоков, записанных прежней версией Hub: они лежат в
   журнале до первого перезапуска и иначе тянули бы в шапку слово «Лимиты:». */
.rate-limits [data-rate-limit-caption],
.rate-limits strong {
  display: none;
}

.rate-limits [data-rate-limit] {
  align-items: baseline;
  display: grid;
  gap: 0.32rem;
  grid-template-columns: minmax(3.6rem, auto) auto auto;
  padding: 0;
  white-space: nowrap;
}

.rate-limits [data-rate-limit-name] {
  color: var(--text-faint);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rate-limits [data-rate-limit-value] {
  color: var(--text);
  font-family: var(--font-numeric);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.rate-limits [data-rate-limit-reset] {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.rate-limits [data-rate-limit-plain] {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.rate-limits [data-rate-limit-credit-count] {
  color: var(--text);
  font-family: var(--font-numeric);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.rate-limits [data-rate-limit-credit-deadline] {
  color: var(--text-muted);
  font-size: 0.68rem;
}

/* Сводка становится кнопкой-триггером диалога истории лимитов. */
.rate-limits.is-interactive {
  border-radius: var(--radius-chip);
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.rate-limits.is-interactive:hover {
  background: var(--accent-soft);
}

.rate-limits.is-interactive:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

/* На среднем десктопном окне все элементы шапки уже не помещаются в одну
   строку, хотя рабочая область чата и двухколоночный журнал ещё удобны.
   Переносим только toolbar, не включая мобильную навигацию и раскладку. */
@media (min-width: 860px) and (max-width: 1119px) {
  .app-header-inner {
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    padding-bottom: 0.45rem;
    padding-top: 0.45rem;
  }

  html[data-view="journal"] .toolbar {
    flex: 1 0 100%;
  }
}

/* Блок остаётся в теле журнала там, где шапки нет (панель VS Code до
   переноса, печать, fallback): красим его по теме, а не нейтральным серым. */
.journal div[data-work-log-rate-limits] {
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
}

.journal div[data-work-log-rate-limits] [data-rate-limit-caption] {
  color: var(--text-faint);
  font-size: 0.64rem;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.journal div[data-work-log-rate-limits] [data-rate-limit] {
  align-items: baseline;
  display: inline-flex;
  gap: 0.32rem;
}

.journal div[data-work-log-rate-limits] [data-rate-limit-name] {
  color: var(--text-soft);
}

.journal div[data-work-log-rate-limits] [data-rate-limit-value] {
  color: var(--text);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.journal div[data-work-log-rate-limits] [data-rate-limit-reset],
.journal div[data-work-log-rate-limits] [data-rate-limit-plain] {
  color: var(--text-muted);
  font-size: 0.8rem;
}

button {
  font: inherit;
}

.refresh {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.refresh:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  box-shadow: var(--accent-glow);
  color: var(--accent);
}

.refresh:disabled {
  cursor: progress;
  opacity: 0.55;
}

.refresh:disabled .refresh-icon {
  animation: spin 0.9s linear infinite;
}

.refresh-icon {
  height: 0.85rem;
  width: 0.85rem;
}

/* время последнего обновления живёт прямо в кнопке */
.refresh-label {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================================= полотно дня === */

main {
  margin: 0 auto;
  max-width: var(--content-width);
  padding: 1.1rem var(--gutter-right) max(2.5rem, env(safe-area-inset-bottom)) var(--gutter-left);
  position: relative;
  z-index: 2;
}

.journal {
  min-height: 40vh;
}

.journal[aria-busy="true"]::before {
  animation: shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(100deg, var(--surface-1) 30%, var(--surface-3) 50%, var(--surface-1) 70%);
  background-size: 220% 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  content: "";
  display: block;
  height: 11rem;
}

@keyframes shimmer {
  from {
    background-position: 140% 0;
  }

  to {
    background-position: -40% 0;
  }
}

.journal summary,
.journal details {
  -webkit-tap-highlight-color: transparent;
}

.journal details[data-work-log-day-section] {
  backdrop-filter: none;
  background-color: transparent;
  background-image: var(--card-texture), var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  margin: 0 0 0.8rem;
  padding: 0.4rem 0.5rem;
  position: relative;
}

.journal details[data-work-log-day-section][open] {
  background-image: var(--card-texture), var(--card-bg-open);
  border-color: var(--card-border-open);
  padding-bottom: 0.55rem;
}

.journal summary[data-work-log-day] {
  align-items: center;
  border-radius: calc(var(--radius-lg) - 6px);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
  gap: 0.35rem 0.5rem;
  overflow-x: visible;
  padding: 0.45rem 0.55rem;
  position: relative;
  transition: background 0.16s ease;
}

.journal summary[data-work-log-day]:hover {
  background: var(--surface-2);
}

.journal summary[data-work-log-day]::before,
.journal details[open] > summary[data-work-log-day]::before {
  background: var(--text-muted);
  content: "";
  flex: 0 0 auto;
  height: 0.72rem;
  margin-right: 0.15rem;
  -webkit-mask: var(--ph-mask-caret-right) center / contain no-repeat;
  mask: var(--ph-mask-caret-right) center / contain no-repeat;
  transform-origin: center;
  transition: transform 0.18s ease;
  width: 0.72rem;
}

.journal details[open] > summary[data-work-log-day]::before {
  background: var(--accent);
  transform: rotate(90deg);
}

.journal summary[data-work-log-day] > strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  margin-right: 0.2rem;
  text-shadow: var(--display-shadow);
}

/* дневной итог прижат к дате, детализация — к правому краю */
.journal span[data-day-usage-table] {
  align-items: center;
  border: 0;
  border-radius: 0;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: 0;
  overflow: visible;
}

.journal span[data-day-usage-breakdown] {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}

.journal span[data-day-usage],
.journal span[data-day-usage-part] {
  align-items: baseline;
  background-color: transparent;
  background-image: var(--plate-texture), var(--plate-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  box-shadow: var(--plate-shadow);
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  width: auto;
}

.journal span[data-day-usage-part]::before {
  align-self: center;
  background: var(--dot, var(--text-faint));
  border-radius: 50%;
  box-shadow: 0 0 8px -1px var(--dot, var(--text-faint));
  content: "";
  flex: 0 0 auto;
  height: 0.36rem;
  margin-right: 0.05rem;
  width: 0.36rem;
}

.journal span[data-day-usage-breakdown] > span[data-day-usage-part]:nth-child(1) {
  --dot: var(--dot-input);
}

.journal span[data-day-usage-breakdown] > span[data-day-usage-part]:nth-child(2) {
  --dot: var(--dot-cache);
}

.journal span[data-day-usage-breakdown] > span[data-day-usage-part]:nth-child(3) {
  --dot: var(--dot-output);
}

.journal span[data-day-usage-breakdown] > span[data-day-usage-part]:nth-child(4) {
  --dot: var(--dot-think);
}

.journal span[data-day-usage] {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border-color: var(--accent-line);
  box-shadow: var(--plate-shadow), var(--accent-glow);
  color: var(--text-soft);
  font-weight: 600;
}

/* ==================================================== задача и её ходы === */

.journal div[data-work-log-table] {
  --work-log-task-card-width: 100%;
}

.journal div[data-work-log-header] {
  border-bottom: 0;
  color: var(--text-faint);
  grid-template-columns: 17.5rem minmax(0, 1fr);
  padding: 0.5rem 0 0.05rem;
}

.journal div[data-work-log-header] > strong {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: var(--label-spacing);
  padding: 0 0.55rem;
  text-transform: var(--label-transform);
}

.journal div[data-work-log-row] {
  --row-accent: var(--provider-none);

  column-gap: 0.4rem;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  padding: 0.15rem 0;
}

.journal div[data-work-log-row][data-work-log-provider="codex"] {
  --row-accent: var(--provider-codex);
}

.journal div[data-work-log-row][data-work-log-provider="claude"] {
  --row-accent: var(--provider-claude);
}

.journal div[data-work-log-body] > div[data-work-log-row] {
  border-bottom: 1px solid var(--line);
}

.journal div[data-work-log-task-cell] {
  align-self: start;
  padding: 0.4rem;
  position: sticky;
  top: calc(var(--header-height) + 0.6rem);
}

.journal div[data-work-log-task-cell] > div[data-work-log-task-content] {
  background-color: transparent;
  background-image:
    linear-gradient(115deg, color-mix(in srgb, var(--row-accent) 10%, transparent), transparent 46%),
    var(--plate-texture),
    var(--plate-bg);
  border: 1px solid var(--line);
  border-left: var(--rail-width) solid var(--row-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--plate-shadow), -7px 0 18px -14px var(--row-accent);
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  line-height: 1.35;
  overflow: hidden;
  padding: 0.42rem 0.6rem;
  position: relative;
}

.journal div[data-work-log-task-cell] > div[data-work-log-task-content]::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--row-accent) 26%, transparent), transparent);
  content: "";
  height: 1px;
  inset: 0.05rem 12% auto;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
}

.journal div[data-work-log-task-content] a,
.journal div[data-work-log-task-content] [role="link"] {
  color: color-mix(in srgb, var(--row-accent) 45%, var(--text));
}

.journal div[data-work-log-task-cell] > div[data-work-log-usage] {
  margin-top: 0.32rem;
}

/* Сводка расхода: фиксированные колонки, поэтому единицы и проценты
   выстраиваются в общий столбец у всех строк задачи. */
.journal summary[data-task-usage],
.journal span[data-task-usage-part] {
  column-gap: 0.4rem;
  display: grid;
  font-family: var(--font-numeric);
  font-size: 0.75rem;
  grid-template-columns: minmax(0, 1fr) 8.6ch 6ch;
  padding: 0.24rem 0.55rem;
}

.journal summary[data-task-usage] {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.journal summary[data-task-usage]:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}

.journal details[data-task-usage-details][open] > summary[data-task-usage] {
  background: var(--surface-2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.journal span[data-task-usage-breakdown] {
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: 0;
}

.journal span[data-task-usage-part] {
  color: var(--text-muted);
}

.journal summary[data-task-usage] > span,
.journal span[data-task-usage-part] > span {
  justify-self: end;
  text-align: right;
}

.journal span[data-task-usage-part] + span[data-task-usage-part] {
  border-top: 1px solid var(--line);
}

.journal div[data-work-log-turn-list] {
  padding: 0.4rem;
}

.journal div[data-work-log-turn-table] {
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow: visible;
}

.journal div[data-work-log-turn-table] > div[data-work-log-turn-entry],
.journal div[data-work-log-turn-entry] + div[data-work-log-turn-entry],
.journal div[data-work-log-turn-entry] + div[data-work-log-legacy-outcome],
.journal div[data-work-log-turn-list] > details,
.journal div[data-work-log-previous-turn-list] > div[data-work-log-turn-entry]
  + div[data-work-log-turn-entry] {
  margin: 0;
}

/* предыдущие ходы */

.journal details[data-work-log-previous-turns] {
  border-bottom: 0;
  border-top: 0;
  display: flex;
  flex-direction: column;
}

.journal details[data-work-log-previous-turns] > summary {
  align-items: center;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.35rem;
  justify-content: center;
  margin-inline: auto;
  order: 2;
  padding: 0.28rem 0.8rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: fit-content;
}

/* Переключатель, а не третья карточка: во всю ширину колонки он вставал
   вровень с названием задачи и её расходом, и рамка — единственная во всём
   журнале взятая из --line-strong — читалась ярче самих данных.
   Селектор повторяет форму базового правила из work-log.css: там задан
   `width: 100%` с той же специфичностью, и без `div[…] >` он побеждал. */
.journal div[data-work-log-usage] > button[data-work-log-collapse-turns] {
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-chip);
  box-sizing: border-box;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  margin: 0.35rem auto 0;
  max-width: 100%;
  padding: 0.28rem 0.8rem;
  text-align: center;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: fit-content;
}

.journal div[data-work-log-usage] > button[data-work-log-collapse-turns]:hover {
  background: var(--surface-2);
  border-color: var(--accent-line);
  color: var(--accent);
}

.journal details[data-work-log-previous-turns][open] > summary {
  background: transparent;
  border-bottom: 1px dashed var(--line-strong);
  margin-top: 0.4rem;
}

.journal details[data-work-log-previous-turns] > summary:hover {
  background: var(--surface-2);
  border-color: var(--accent-line);
  color: var(--accent);
}

.journal div[data-work-log-previous-turn-list] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  order: 1;
  padding: 0;
}

.journal div[data-work-log-no-previous-turns] {
  border-bottom: 0;
  color: var(--text-faint);
  font-size: 0.75rem;
  padding: 0.15rem 0.2rem;
  text-align: center;
}

/* группировка по задачам */

.journal [data-work-log-task-overview] {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0.65rem 0;
  padding: 0.55rem 0.75rem;
}

.journal [data-work-log-task-groups] {
  display: grid;
  gap: 0.55rem;
}

.journal details[data-work-log-task-group] {
  --row-accent: var(--provider-none);

  background-color: transparent;
  background-image:
    linear-gradient(115deg, color-mix(in srgb, var(--row-accent) 8%, transparent), transparent 42%),
    var(--card-texture),
    var(--surface-1);
  border: 1px solid var(--line);
  border-left: var(--rail-width) solid var(--row-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow), -8px 0 22px -18px var(--row-accent);
  overflow: hidden;
}

.journal details[data-work-log-task-group][data-work-log-provider="codex"] {
  --row-accent: var(--provider-codex);
}

.journal details[data-work-log-task-group][data-work-log-provider="claude"] {
  --row-accent: var(--provider-claude);
}

.journal summary[data-work-log-task-group-summary] {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.5rem 0.7rem;
  grid-template-columns: 0.8rem minmax(0, 1fr) auto;
  list-style: none;
  padding: 0.65rem 0.8rem;
}

.journal summary[data-work-log-task-group-summary]::-webkit-details-marker {
  display: none;
}

.journal summary[data-work-log-task-group-summary]::before {
  background: currentColor;
  color: var(--row-accent);
  content: "";
  grid-column: 1;
  height: 0.7rem;
  -webkit-mask: var(--ph-mask-caret-right) center / contain no-repeat;
  mask: var(--ph-mask-caret-right) center / contain no-repeat;
  transform-origin: center;
  transition: transform 0.18s ease;
  width: 0.7rem;
}

.journal details[data-work-log-task-group][open]
  > summary[data-work-log-task-group-summary]::before {
  transform: rotate(90deg);
}

.journal details[data-work-log-task-group][open]
  > summary[data-work-log-task-group-summary] {
  background: var(--surface-2);
}

.journal [data-work-log-task-group-title] {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal [data-work-log-task-group-title] [data-work-log-task-content] {
  display: contents;
}

.journal [data-work-log-task-group-title] a,
.journal [data-work-log-task-group-title] [role="link"] {
  color: color-mix(in srgb, var(--row-accent) 45%, var(--text));
}

.journal [data-work-log-task-metrics] {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-numeric);
  font-size: 0.75rem;
  gap: 0.3rem 0.75rem;
  grid-column: 3;
  justify-content: flex-end;
}

/* Плашка повторяет дневную сводку: подпись приглушена, значение внутри —
   цветной бейдж той же шкалы, что и в режиме по датам. */
.journal [data-work-log-task-duration],
.journal [data-work-log-task-credits] {
  align-items: baseline;
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-chip);
  box-shadow: var(--plate-shadow);
  color: var(--text-soft);
  display: inline-flex;
  font-weight: 600;
  gap: 0.32rem;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}

.journal [data-work-log-task-credits] [data-usage-label],
.journal [data-work-log-task-duration] [data-usage-label] {
  color: var(--text-faint);
  font-size: 0.92em;
  font-weight: 500;
}

.journal [data-work-log-task-unknown-durations] {
  color: var(--pending);
}

.journal [data-work-log-task-unknown-credits] {
  color: var(--pending);
}

.journal [data-work-log-task-profile] {
  align-items: center;
  background:
    radial-gradient(circle at 82% 48%, color-mix(in srgb, var(--row-accent) 13%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 88%, transparent), var(--surface-1));
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 22rem;
  min-height: 17rem;
  padding: 0.8rem 1rem;
}

/* Author rules below assign display:grid/flex to task-group children. Without
   this explicit closed state they override the browser's native details
   hiding rule and reserve the 17rem profile height behind a collapsed
   summary. Keep the entire task body out of layout until the card is open. */
.journal details[data-work-log-task-group]:not([open]) > :not(summary) {
  display: none !important;
}

.journal [data-work-log-task-profile-copy] {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.journal [data-work-log-task-profile-heading] {
  display: grid;
  gap: 0.25rem;
}

.journal [data-work-log-task-profile-heading] > strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.journal [data-work-log-task-profile-heading] > span {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
  max-width: 42rem;
}

.journal [data-work-log-task-profile-values] {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
}

.journal [data-work-log-task-profile-value] {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
}

.journal [data-work-log-task-profile-value] > span {
  color: var(--text-faint);
  font-size: 0.64rem;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
}

.journal [data-work-log-task-profile-value] > strong {
  color: var(--text-soft);
  font-family: var(--font-numeric);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.journal [data-work-log-task-profile-value][data-missing] > strong {
  color: var(--pending);
  font-weight: 500;
}

.journal [data-work-log-task-profile-detail] {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
}

.journal [data-work-log-task-profile-detail] > summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
  list-style: none;
  padding: 0.5rem 0.6rem;
}

.journal [data-work-log-task-profile-detail] > summary::-webkit-details-marker {
  display: none;
}

.journal [data-work-log-task-profile-detail] > summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: var(--text-faint);
  content: "";
  grid-column: 3;
  grid-row: 1;
  height: 0.38rem;
  margin-left: 0.12rem;
  transform: rotate(45deg) translateY(-0.08rem);
  transition: transform 0.15s ease;
  width: 0.38rem;
}

.journal [data-work-log-task-profile-detail][open] > summary::after {
  transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.journal [data-work-log-task-profile-detail] > summary > span {
  color: var(--text-faint);
  font-size: 0.64rem;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
}

.journal [data-work-log-task-profile-detail] > summary > strong {
  color: var(--text-soft);
  font-family: var(--font-numeric);
  font-size: 0.78rem;
}

.journal [data-work-log-task-profile-detail][data-missing] > summary > strong {
  color: var(--pending);
  font-weight: 500;
}

.journal [data-work-log-task-profile-detail-content] {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem 0.65rem;
}

.journal [data-work-log-task-profile-detail-items] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.journal [data-work-log-task-profile-detail-items] > span {
  background: color-mix(in srgb, var(--row-accent) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--row-accent) 28%, var(--line));
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  font-family: var(--font-numeric);
  font-size: 0.68rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.26rem 0.45rem;
}

.journal [data-work-log-task-profile-detail-empty],
.journal [data-work-log-task-profile-detail-note] {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.journal [data-work-log-task-profile-detail-note] {
  color: var(--pending);
}

.journal figure[data-work-log-task-radar] {
  margin: 0;
  min-width: 0;
  position: relative;
}

.journal figure[data-work-log-task-radar] svg {
  display: block;
  height: auto;
  max-height: 15rem;
  overflow: visible;
  width: 100%;
}

.journal [data-radar-ring] {
  fill: none;
  stroke: color-mix(in srgb, var(--row-accent) 18%, var(--line));
  stroke-width: 1;
}

.journal [data-radar-spoke] {
  stroke: color-mix(in srgb, var(--row-accent) 14%, var(--line));
  stroke-width: 1;
}

.journal [data-radar-baseline] {
  fill: color-mix(in srgb, var(--text-muted) 5%, transparent);
  stroke: color-mix(in srgb, var(--text-muted) 70%, transparent);
  stroke-dasharray: 4 5;
  stroke-width: 1.2;
}

.journal [data-radar-current] {
  fill: color-mix(in srgb, var(--row-accent) 20%, transparent);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--row-accent) 30%, transparent));
  stroke: color-mix(in srgb, var(--row-accent) 82%, var(--text));
  stroke-linejoin: round;
  stroke-width: 2;
}

.journal [data-radar-point] {
  fill: var(--surface-1);
  stroke: color-mix(in srgb, var(--row-accent) 82%, var(--text));
  stroke-width: 2;
}

.journal [data-radar-point][data-missing] {
  opacity: 0.25;
}

.journal [data-radar-hit] {
  cursor: help;
  fill: transparent;
  outline: none;
  pointer-events: all;
  stroke: transparent;
}

.journal [data-radar-hit]:focus {
  stroke: color-mix(in srgb, var(--row-accent) 55%, transparent);
  stroke-width: 1.5;
}

.journal [data-radar-label] {
  cursor: help;
  fill: var(--text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 620;
}

.journal [data-radar-tooltip] {
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--row-accent) 45%, var(--line));
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow), 0 0 18px color-mix(in srgb, var(--row-accent) 18%, transparent);
  color: var(--text-soft);
  display: grid;
  font-family: var(--font-numeric);
  font-size: 0.68rem;
  gap: 0.16rem;
  left: var(--radar-tooltip-x);
  max-width: 13rem;
  min-width: 9.5rem;
  padding: 0.48rem 0.58rem;
  pointer-events: none;
  position: absolute;
  top: var(--radar-tooltip-y);
  transform: translate(-50%, calc(-100% - 0.65rem));
  z-index: 3;
}

.journal [data-radar-tooltip][hidden] {
  display: none;
}

.journal [data-radar-tooltip] > strong {
  color: color-mix(in srgb, var(--row-accent) 76%, var(--text));
  font-family: var(--font-display);
  font-size: 0.72rem;
}

.journal [data-radar-tooltip] > span {
  white-space: nowrap;
}

.journal figure[data-work-log-task-radar] figcaption {
  align-items: center;
  color: var(--text-faint);
  display: flex;
  font-size: 0.66rem;
  gap: 1rem;
  justify-content: center;
}

.journal [data-radar-legend]::before {
  border: 1px solid currentColor;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 0.48rem;
  margin-right: 0.35rem;
  vertical-align: -0.04rem;
  width: 0.9rem;
}

.journal [data-radar-legend="current"] {
  color: color-mix(in srgb, var(--row-accent) 82%, var(--text));
}

.journal [data-radar-legend="current"]::before {
  background: color-mix(in srgb, var(--row-accent) 35%, transparent);
}

.journal [data-radar-legend="baseline"]::before {
  border-style: dashed;
}

.journal [data-work-log-task-group-turns] {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem;
}

.journal [data-work-log-task-show-more] {
  align-self: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  font: 600 0.74rem/1 var(--font-display);
  margin: 0.2rem 0;
  padding: 0.55rem 1rem;
}

.journal [data-work-log-task-show-more]:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.journal [data-work-log-turn-day] {
  color: var(--row-accent, var(--accent));
  font-weight: 620;
}

.journal [data-work-log-grouped-legacy] {
  display: grid;
  gap: 0.3rem;
}

html[data-grouping="task"]
  .journal
  details[data-work-log-turn-details]
  > summary {
  grid-template-columns: 17rem minmax(0, 1fr);
}

@media (max-width: 860px) {
  .journal [data-work-log-task-profile] {
    grid-template-columns: 1fr;
  }

  .journal figure[data-work-log-task-radar] {
    justify-self: center;
    max-width: 24rem;
    width: 100%;
  }
}

/* карточка хода */

.journal details[data-work-log-turn-details] {
  background-color: transparent;
  background-image: var(--plate-texture), linear-gradient(180deg, var(--surface-1), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.journal details[data-work-log-turn-details]:hover {
  background-color: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--turn-shadow);
}

.journal details[data-work-log-turn-details][open] {
  background-color: var(--surface-2);
  border: 1px solid var(--accent-line);
  box-shadow: inset var(--rail-width) 0 0 var(--accent), var(--turn-shadow);
}

.journal details[data-work-log-turn-details] > summary {
  align-items: center;
  grid-template-columns: 11.5rem minmax(0, 1fr) 2.25rem;
}

/* только снятие оформления work-log.css — без свойств, которые ниже
   переопределяются медиазапросами (специфичность [open] выше) */
.journal details[data-work-log-turn-details][open] > summary {
  background: transparent;
  border-bottom: 0;
}

/* Кнопка открытия хода: вместо глифа «↗» — иконка того же набора, что и в
   остальной оболочке, и оформление по токенам темы вместо серого из
   work-log.css. */
.journal details[data-work-log-turn-details] > summary > button[data-open-turn] {
  border-left-color: var(--line);
  color: var(--text-faint);
  justify-content: center;
  padding: 0.3rem 0.45rem;
  transition: background 0.14s ease, color 0.14s ease;
}

.journal details[data-work-log-turn-details] > summary > button[data-open-turn] svg {
  height: 1.05rem;
  width: 1.05rem;
}

.journal details[data-work-log-turn-details] > summary > button[data-open-turn]:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.journal span[data-work-log-turn-meta] {
  color: var(--text-muted);
  font-family: var(--font-numeric);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  gap: 0.45rem;
  padding: 0.42rem 0.6rem;
}

.journal span[data-work-log-turn-share] {
  color: var(--text-muted);
}

.journal span[data-work-log-turn-title] {
  border-left: 1px solid var(--line);
  color: var(--text);
  font-weight: var(--title-weight);
  padding: 0.42rem 0.7rem;
}

/* Раскрытый ход: полоса «Длит. + Запрос» сверху, ответ на всю ширину снизу —
   длинный запрос не сжимается в узкую колонку. */

.journal div[data-work-log-turn-expanded] {
  animation: reveal 0.18s ease;
  border-top: 1px solid var(--line);
  display: block;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(-0.2rem);
  }
}

.journal div[data-work-log-turn-meta-details] {
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.5rem;
  padding: 0.5rem 0.75rem;
}

.journal div[data-work-log-turn-body-details] {
  border-left: 0;
  padding: 0.6rem 0.75rem 0.7rem;
}

.journal div[data-work-log-turn-context],
.journal div[data-work-log-turn-prompt] {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.journal div[data-work-log-turn-context] > strong,
.journal div[data-work-log-turn-prompt] > strong {
  color: var(--text-faint);
  display: block;
  font-size: 0.68rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  margin-bottom: 0.05rem;
}

.journal div[data-work-log-turn-facts] {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 7rem;
}

/* Модель идёт без подписи над длительностью и остаётся служебной справкой. */
.journal div[data-work-log-turn-pricing] {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.journal div[data-work-log-turn-prompt] {
  border-left: 2px solid var(--line-strong);
  flex: 1 1 24rem;
  margin-top: 0;
  opacity: 1;
  padding-left: 0.55rem;
}

.journal div[data-work-log-turn-body] {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.journal div[data-work-log-turn-files] {
  display: none;
}

.journal div[data-work-log-turn-files] a,
.journal div[data-work-log-turn-files] [role="link"] {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 0.14rem 0.5rem;
}

.journal div[data-work-log-turn-files] a:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  text-decoration: none;
}

.journal details[data-work-log-turn-diff] {
  margin-top: 0.7rem;
}

.journal details[data-work-log-turn-diff] > summary {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.35rem;
  list-style: none;
  padding: 0.25rem 0.65rem;
}

.journal details[data-work-log-turn-diff] > summary::-webkit-details-marker {
  display: none;
}

.journal details[data-work-log-turn-diff] > summary::before {
  background: currentColor;
  content: "";
  height: 0.65rem;
  -webkit-mask: var(--ph-mask-caret-right) center / contain no-repeat;
  mask: var(--ph-mask-caret-right) center / contain no-repeat;
  transform-origin: center;
  transition: transform 0.18s ease;
  width: 0.65rem;
}

.journal details[data-work-log-turn-diff][open] > summary::before {
  transform: rotate(90deg);
}

.journal details[data-work-log-turn-diff] pre {
  background: color-mix(in srgb, var(--surface-0) 92%, #000);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  box-sizing: border-box;
  color: var(--text-muted);
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  margin: 0.5rem 0 0;
  max-height: 32rem;
  overflow: auto;
  padding: 0.55rem 0;
  white-space: pre;
  width: 100%;
}

.journal span[data-work-log-diff-line] {
  display: block;
  min-height: 1.45em;
  padding: 0 0.7rem;
}

.journal span[data-work-log-diff-line="file"] {
  color: #8ecbff;
  font-weight: 650;
}

.journal span[data-work-log-diff-line="hunk"] {
  background: rgba(49, 131, 189, 0.2);
  color: #9cdcfe;
}

.journal span[data-work-log-diff-line="added"] {
  background: rgba(46, 160, 67, 0.2);
  color: #b7f5c5;
}

.journal span[data-work-log-diff-line="removed"] {
  background: rgba(248, 81, 73, 0.18);
  color: #ffc1bd;
}

.journal div[data-work-log-legacy-outcome] {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.5rem 0.7rem;
}

/* ==================================================== расход в credits === */

.journal span[data-kilo-usage],
.journal span[data-mega-usage],
.journal span[data-high-usage] {
  border-radius: calc(var(--radius-sm) - 3px);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  padding: 0.02rem 0.28rem;
  white-space: nowrap;
}

.journal span[data-kilo-usage] {
  background: rgba(229, 192, 123, 0.11);
  box-shadow: inset 0 0 0 1px rgba(229, 192, 123, 0.18);
}

.journal span[data-mega-usage] {
  background: rgba(255, 157, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 157, 0, 0.2);
}

.journal span[data-high-usage] {
  background: rgba(241, 76, 76, 0.13);
  box-shadow: inset 0 0 0 1px rgba(241, 76, 76, 0.24);
}

.journal span[data-usage-percent] {
  color: var(--text-muted);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* ============================================== нестандартные случаи === */

[data-mini-app-fallback] {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font: inherit;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 1rem;
  white-space: pre-wrap;
}

[data-mini-app-empty] {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  padding: 3rem 1rem;
  text-align: center;
}

/* ====================================== «Орбита»: кольца и приборный блик === */

html:not([data-theme]),
html[data-theme="orbit"] {
  --orbit-image: url("/orbit-earth.png");
}

/* Кольца трасс остаются поверх снимка: это язык темы, и с дугой атмосферы
   они читаются как орбиты, а не как посторонняя сетка. */
html:not([data-theme]) body::after,
html[data-theme="orbit"] body::after {
  background-color: #06090f;
  background-image:
    repeating-radial-gradient(
      circle at 50% -32%,
      transparent 0 15.4rem,
      rgba(126, 178, 240, 0.055) 15.4rem 15.55rem,
      transparent 15.55rem 16rem
    ),
    radial-gradient(circle at 50% -32%, transparent 0 46rem, rgba(126, 178, 240, 0.05) 46rem 46.14rem, transparent 46.14rem),
    var(--orbit-image);
  background-position: center, center, 62% 42%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="orbit"] .journal details[data-work-log-day-section]::before,
html:not([data-theme]) .journal details[data-work-log-day-section]::before {
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  border-radius: var(--radius-lg);
  content: "";
  height: 1px;
  inset: -1px 18% auto;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

/* ============================== «Туманность»: облака и мягкие разделители === */

html[data-theme="nebula"] {
  --nebula-image: url("/nebula-veil.png");
}

/* Снимок заменил нарисованные пятна: рукава газа и звёздная россыпь дают ту
   же глубину без blur, который раньше съедал детали. */
html[data-theme="nebula"] body::after {
  background-color: #0b0616;
  background-image:
    radial-gradient(46% 34% at 78% 26%, rgba(120, 92, 255, 0.12), transparent 72%),
    var(--nebula-image);
  background-position: center, 60% 46%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="nebula"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

html[data-theme="nebula"] .journal div[data-work-log-body] > div[data-work-log-row] {
  border-bottom-color: transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent) 1;
}

html[data-theme="nebula"] .journal span[data-work-log-turn-title],
html[data-theme="nebula"] .journal summary[data-task-usage],
html[data-theme="nebula"] .journal span[data-task-usage-breakdown] {
  border-color: transparent;
}

html[data-theme="nebula"] .journal details[data-work-log-turn-details] {
  border-color: transparent;
  box-shadow: var(--turn-shadow);
}

html[data-theme="nebula"] .journal details[data-work-log-turn-details]:hover {
  border-color: var(--line-strong);
}

html[data-theme="nebula"] .journal summary[data-work-log-day] > strong {
  text-shadow: 0 0 22px rgba(215, 155, 255, 0.55);
}

/* ================================= «Пульсар»: сканлайны, скобки, импульс === */

html[data-theme="pulsar"] {
  --pulsar-image: url("/pulsar-beams.png");
}

/* Фон — рендер магнетара; сканлайны оставлены поверх него: это язык темы,
   и в отличие от «Тайги» здесь под ними ровный космос, а не силуэты,
   которые сеткой было бы жалко стирать. */
html[data-theme="pulsar"] body::after {
  background-color: #03151a;
  background-image:
    repeating-linear-gradient(0deg, rgba(60, 230, 212, 0.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(2, 12, 16, 0) 44%, rgba(2, 10, 14, 0.4)),
    var(--pulsar-image);
  background-position: center, center, 50% 46%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, cover, cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* стеклянные панели, иначе джеты гаснут под сплошной заливкой */
html[data-theme="pulsar"] .app-header {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  background: rgba(2, 12, 16, 0.6);
}

html[data-theme="pulsar"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(5px) saturate(118%);
  -webkit-backdrop-filter: blur(5px) saturate(118%);
  background-color: rgba(2, 12, 16, 0.46);
  background-image: var(--card-texture);
}

html[data-theme="pulsar"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(2, 12, 16, 0.5);
}

html[data-theme="pulsar"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(3, 16, 20, 0.34);
}

html[data-theme="pulsar"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(5, 22, 27, 0.46);
}

html[data-theme="pulsar"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(3, 16, 20, 0.52);
}

/* оба магнетара сидят по краям кадра — на узком экране держим левый */
@media (max-width: 720px) {
  html[data-theme="pulsar"] body::after {
    background-position: center, center, 24% 52%;
  }

  html[data-theme="pulsar"] .journal details[data-work-log-day-section] {
    background-color: rgba(2, 12, 16, 0.58);
  }

  html[data-theme="pulsar"] .journal details[data-work-log-turn-details] {
    background-color: rgba(3, 16, 20, 0.48);
  }
}

html[data-theme="pulsar"] .journal details[data-work-log-day-section]::before,
html[data-theme="pulsar"] .journal details[data-work-log-day-section]::after {
  border-color: var(--accent);
  border-style: solid;
  content: "";
  height: 0.7rem;
  pointer-events: none;
  position: absolute;
  width: 0.7rem;
}

html[data-theme="pulsar"] .journal details[data-work-log-day-section]::before {
  border-width: 1px 0 0 1px;
  left: -1px;
  top: -1px;
}

html[data-theme="pulsar"] .journal details[data-work-log-day-section]::after {
  border-width: 0 1px 1px 0;
  bottom: -1px;
  right: -1px;
}

html[data-theme="pulsar"] .journal span[data-day-usage],
html[data-theme="pulsar"] .journal span[data-day-usage-part] {
  border-left: 2px solid var(--dot, var(--accent));
}

html[data-theme="pulsar"] .journal span[data-day-usage] {
  --dot: var(--accent);
}

html[data-theme="pulsar"] .journal span[data-day-usage-part]::before {
  border-radius: 0;
  height: 0.3rem;
  width: 0.3rem;
}

html[data-theme="pulsar"] .journal div[data-work-log-header] > strong,
html[data-theme="pulsar"] .eyebrow {
  color: var(--accent);
  opacity: 0.72;
}

/* ======================= «Gothic»: крепость, руны, факелы и старое золото === */

html[data-theme="gothic"] {
  --gothic-image: url("/gothic-concrete.png");
}

html[data-theme="gothic"] body::after {
  background-color: #070604;
  background-image:
    linear-gradient(90deg, rgba(4, 4, 3, 0.18), transparent 34% 70%, rgba(4, 2, 1, 0.06)),
    linear-gradient(180deg, rgba(3, 3, 2, 0.04) 48%, rgba(3, 2, 1, 0.5)),
    radial-gradient(120% 94% at 50% 44%, transparent 38%, rgba(0, 0, 0, 0.42) 100%),
    var(--gothic-image);
  background-position: center, center, center, 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="gothic"] .app-header {
  background:
    linear-gradient(90deg, rgba(201, 161, 85, 0.06), transparent 28% 70%, rgba(225, 139, 38, 0.07)),
    linear-gradient(176deg, rgba(32, 28, 21, 0.96), rgba(11, 10, 8, 0.9));
  border-bottom-color: var(--accent-line);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.72), 0 10px 30px -24px rgba(222, 146, 39, 0.5);
}

html[data-theme="gothic"] .app-header::after {
  background:
    linear-gradient(90deg, transparent, rgba(217, 177, 98, 0.74) 24% 76%, transparent);
  opacity: 0.62;
}

html[data-theme="gothic"] .eyebrow {
  color: #b79a66;
  font-family: var(--font-title);
  font-size: 0.66rem;
  text-shadow: 0 1px 0 #000;
}

html[data-theme="gothic"] .journal details[data-work-log-day-section]::before {
  background:
    linear-gradient(135deg, rgba(218, 179, 102, 0.5) 0 1px, transparent 1px) left top / 1rem 1rem no-repeat,
    linear-gradient(225deg, rgba(218, 179, 102, 0.5) 0 1px, transparent 1px) right top / 1rem 1rem no-repeat,
    linear-gradient(45deg, rgba(218, 179, 102, 0.34) 0 1px, transparent 1px) left bottom / 1rem 1rem no-repeat,
    linear-gradient(315deg, rgba(218, 179, 102, 0.34) 0 1px, transparent 1px) right bottom / 1rem 1rem no-repeat;
  border: 1px solid rgba(211, 178, 110, 0.1);
  border-radius: 1px;
  content: "";
  inset: 3px;
  pointer-events: none;
  position: absolute;
}

/* Мелкая каменная пыль не спорит с текстом и скрывает цифровую гладкость. */
html[data-theme="gothic"] .journal details[data-work-log-day-section]::after {
  background-image:
    radial-gradient(circle, rgba(239, 214, 164, 0.026) 0 0.5px, transparent 0.9px),
    radial-gradient(circle, rgba(0, 0, 0, 0.28) 0 0.5px, transparent 0.9px),
    radial-gradient(circle, rgba(212, 170, 88, 0.018) 0 0.5px, transparent 0.9px);
  background-position: 0 0, 3px 5px, 8px 2px;
  background-size: 7px 7px, 11px 11px, 17px 17px;
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

html[data-theme="gothic"] .journal summary[data-work-log-day] > strong {
  color: #eee4cd;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(212, 170, 88, 0.16);
}

html[data-theme="gothic"] .journal span[data-work-log-turn-title],
html[data-theme="gothic"] .journal div[data-work-log-task-content] a,
html[data-theme="gothic"] .journal div[data-work-log-task-content] [role="link"] {
  font-family: var(--font-display);
  letter-spacing: 0.012em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

html[data-theme="gothic"] .journal div[data-work-log-task-cell] > div[data-work-log-task-content] {
  font-size: 1.01rem;
}

html[data-theme="gothic"] .journal details[data-work-log-turn-details] {
  background-image:
    var(--plate-texture),
    linear-gradient(176deg, rgba(45, 40, 31, 0.9), rgba(17, 15, 12, 0.96));
}

html[data-theme="gothic"] .journal details[data-work-log-turn-details][open] {
  box-shadow:
    inset var(--rail-width) 0 0 var(--accent),
    inset 0 1px 0 rgba(239, 211, 156, 0.12),
    0 0 28px -20px rgba(226, 146, 39, 0.72),
    var(--turn-shadow);
}

html[data-theme="gothic"] .journal details[data-work-log-previous-turns] > summary {
  border-style: solid;
}

html[data-theme="gothic"] .connection-dot {
  box-shadow:
    0 0 0 0.2rem color-mix(in srgb, var(--pending) 22%, transparent),
    0 0 12px rgba(226, 146, 39, 0.35);
}

html[data-theme="gothic"] .brand-mark {
  border-color: rgba(218, 179, 102, 0.52);
  color: #e3bd72;
}

/* Старое золото остаётся акцентом; подложка не превращает журнал в янтарный. */
html[data-theme="gothic"] .journal span[data-kilo-usage],
html[data-theme="gothic"] .journal span[data-mega-usage],
html[data-theme="gothic"] .journal span[data-high-usage] {
  background: rgba(212, 170, 88, 0.055);
  box-shadow: inset 0 0 0 1px rgba(212, 170, 88, 0.12);
}

/* ============================ «BlackHole»: аккреционный диск и горизонт === */

/* Фон — готовый рендер, а не рисунок из градиентов: закрученную плазму диска
   и линзирование CSS воспроизвести не может. Слой закреплён во вьюпорте и
   лежит под контентом (main имеет z-index: 1).
   Путь переопределяем там, где картинка отдаётся иначе — в панели VS Code её
   адрес выдаёт webview. */
html[data-theme="blackhole"] {
  --bh-image: url("/blackhole-blue.png");
}

html[data-theme="blackhole"] body::after {
  background-color: #000;
  background-image: var(--bh-image);
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 0.92;
}

/* звёздная пыль поверх готового рендера была бы лишней */
/* сквозь панели видно диск: тёмное стекло вместо глухой заливки */
html[data-theme="blackhole"] .app-header {
  background: rgba(0, 0, 0, 0.62);
}

html[data-theme="blackhole"] .journal details[data-work-log-day-section] {
  /* лёгкое размытие: сильное стирало бы фотонное кольцо под панелью */
  backdrop-filter: blur(6px) saturate(130%);
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  background-color: rgba(2, 4, 8, 0.54);
  background-image: none;
}

html[data-theme="blackhole"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(2, 4, 8, 0.56);
  background-image: none;
}

/* карточки ходов тоже стеклянные, иначе диск гаснет под сплошной заливкой */
html[data-theme="blackhole"] .journal details[data-work-log-turn-details] {
  background-color: rgba(6, 10, 16, 0.42);
  background-image: none;
}

html[data-theme="blackhole"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(10, 16, 24, 0.55);
}

html[data-theme="blackhole"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(6, 10, 16, 0.62);
}

html[data-theme="blackhole"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(150, 205, 255, 0.75), transparent);
}

html[data-theme="blackhole"] .brand-mark {
  border-color: rgba(150, 205, 255, 0.5);
  color: #cfe6ff;
}

html[data-theme="blackhole"] .journal details[data-work-log-day-section][open] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 54px -20px rgba(96, 176, 255, 0.8),
    0 30px 60px -34px rgba(0, 0, 0, 1);
}

html[data-theme="blackhole"] .journal details[data-work-log-turn-details][open] {
  border-color: rgba(150, 205, 255, 0.44);
  box-shadow: inset var(--rail-width) 0 0 #9ecbff, 0 0 30px -18px rgba(120, 190, 255, 1);
}

html[data-theme="blackhole"] .journal span[data-day-usage] {
  border-color: rgba(150, 205, 255, 0.44);
  box-shadow: var(--plate-shadow), 0 0 22px -10px rgba(120, 190, 255, 0.95);
}

html[data-theme="taiga"] {
  --forest-image: url("/rainforest-night.png");
}

/* Затемнение минимальное и только там, где оно работает на текст: слева, где
   идёт колонка задач, и к низу, где список длиннее кадра. Сам лес не глушим —
   контраст добирается подложками карточек. */
html[data-theme="taiga"] body::after {
  background-color: #060a0d;
  background-image:
    linear-gradient(90deg, rgba(4, 8, 10, 0.34), rgba(4, 8, 10, 0.04) 68%),
    linear-gradient(180deg, rgba(4, 8, 10, 0) 46%, rgba(3, 6, 8, 0.34)),
    var(--forest-image);
  background-position: center, center, 68% 36%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Стекло держим тонким, иначе лес под панелями пропадает. Размытие тоже
   умеренное: сильный blur не столько затемняет, сколько стирает силуэты
   деревьев — ровно то, ради чего фотография и взята. */
html[data-theme="taiga"] .app-header {
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  background:
    radial-gradient(70% 150% at 92% 0, rgba(124, 184, 172, 0.12), transparent 64%),
    rgba(4, 9, 11, 0.52);
}

html[data-theme="taiga"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(126, 191, 174, 0.58), transparent);
}

html[data-theme="taiga"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(5px) saturate(114%);
  -webkit-backdrop-filter: blur(5px) saturate(114%);
  background-color: rgba(4, 9, 11, 0.4);
  background-image: none;
}

html[data-theme="taiga"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(4, 9, 11, 0.44);
}

html[data-theme="taiga"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(6, 12, 14, 0.3);
  background-image: none;
}

html[data-theme="taiga"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(10, 19, 21, 0.44);
}

html[data-theme="taiga"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(6, 12, 14, 0.5);
}

/* «Мегаполис»: исходный снимок остаётся запасным фоном, если WebGL
   недоступен. Основной слой рисует тот же снимок через шейдер и поэтому может
   размывать запотевшие участки, оставлять прозрачные дорожки и преломлять
   изображение внутри капель, как в референсе Rain Droplets. */
html[data-theme="metropolis"] body::after {
  background-color: #050b12;
  background-image:
    linear-gradient(90deg, rgba(2, 7, 12, 0.5), rgba(2, 7, 12, 0.08) 62%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.04) 48%, rgba(2, 6, 10, 0.42)),
    var(--metropolis-image);
  background-position: center, center, 62% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: none;
  opacity: 1;
}

html[data-theme="metropolis"] body::before {
  content: none;
}

html[data-theme="metropolis"] .app-header {
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  background:
    radial-gradient(70% 150% at 92% 0, rgba(104, 195, 231, 0.13), transparent 64%),
    rgba(3, 10, 17, 0.58);
}

html[data-theme="metropolis"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(104, 195, 231, 0.62), transparent);
}

html[data-theme="metropolis"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(7px) saturate(108%);
  -webkit-backdrop-filter: blur(7px) saturate(108%);
  background-color: rgba(3, 10, 17, 0.46);
  background-image: none;
}

html[data-theme="metropolis"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(4, 12, 19, 0.38);
  background-image: none;
}

/* Hundreds of independently blurred turn cards exhaust Electron's compositor
   in task grouping and leave painted frames with missing text. Task groups
   already sit on a glass panel, so use one denser fill instead of a backdrop
   layer per row. */
html[data-theme="metropolis"][data-grouping="task"]
  .journal
  details[data-work-log-turn-details] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(4, 12, 19, 0.58);
}

/* До готовности шейдера показывается дешёвый CSS-fallback: матовый
   конденсат и несколько скользящих дорожек. */
@keyframes metropolis-fallback-drops {
  from { transform: translate3d(0, -180px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

html[data-theme="metropolis"] .theme-atmosphere::before,
html[data-theme="metropolis"] .theme-atmosphere::after {
  content: "";
  inset: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 240ms ease;
}

html[data-theme="metropolis"] .theme-atmosphere::before {
  backdrop-filter: blur(6px) saturate(68%) brightness(0.82);
  -webkit-backdrop-filter: blur(6px) saturate(68%) brightness(0.82);
  background:
    radial-gradient(circle at 16% 24%, rgba(224, 237, 241, 0.16), transparent 28%),
    radial-gradient(circle at 72% 18%, rgba(213, 230, 236, 0.13), transparent 24%),
    radial-gradient(circle at 60% 78%, rgba(220, 234, 239, 0.12), transparent 30%),
    radial-gradient(circle, rgba(230, 241, 244, 0.12) 0 0.7px, transparent 1.2px);
  background-color: rgba(151, 174, 184, 0.11);
  background-size: auto, auto, auto, 7px 7px;
}

html[data-theme="metropolis"] .theme-atmosphere::after {
  animation: metropolis-fallback-drops 5.6s linear infinite;
  background-image:
    radial-gradient(ellipse 10px 16px at 50% 74%, rgba(241, 251, 252, 0.36), rgba(22, 39, 47, 0.2) 54%, transparent 72%),
    linear-gradient(90deg, transparent 44%, rgba(224, 239, 243, 0.2) 49%, rgba(25, 42, 50, 0.16) 53%, transparent 58%),
    radial-gradient(ellipse 6px 11px at 50% 78%, rgba(237, 249, 251, 0.3), rgba(20, 37, 45, 0.18) 55%, transparent 73%);
  background-position: 24px 0, 24px 0, 91px 63px;
  background-repeat: repeat;
  background-size: 211px 360px, 211px 360px, 137px 240px;
  filter: drop-shadow(0 2px 2px rgba(0, 5, 8, 0.52));
  mix-blend-mode: screen;
  opacity: 0.54;
}

html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"]::before,
html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"]::after {
  opacity: 0;
}

/* ================================ «Магма»: остывшая корка и живые трещины === */

html[data-theme="magma"] {
  --magma-image: url("/magma-crust.png");
}

/* Лава сама по себе яркая, поэтому затемняем её справа — там, где идут
   заголовки ходов; свободная левая треть кадра остаётся как есть. Нижний
   градиент гасит хвост страницы: под последним днём контента уже нет, и
   открытая лава там перетягивала бы взгляд с журнала. */
html[data-theme="magma"] body::after {
  background-color: #0a0605;
  background-image:
    linear-gradient(180deg, rgba(8, 4, 3, 0) 62%, rgba(8, 4, 3, 0.55)),
    linear-gradient(90deg, rgba(8, 4, 3, 0) 34%, rgba(8, 4, 3, 0.46)),
    var(--magma-image);
  background-position: center, center, 58% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="magma"] .app-header {
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  background: rgba(8, 4, 3, 0.62);
}

html[data-theme="magma"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, 0.6), transparent);
}

html[data-theme="magma"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(5px) saturate(116%);
  -webkit-backdrop-filter: blur(5px) saturate(116%);
  background-color: rgba(8, 4, 3, 0.5);
  background-image: none;
}

html[data-theme="magma"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(8, 4, 3, 0.54);
}

html[data-theme="magma"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(11, 6, 5, 0.4);
  background-image: none;
}

html[data-theme="magma"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(18, 10, 7, 0.52);
}

html[data-theme="magma"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(11, 6, 5, 0.58);
}

/* на узком экране кадр сдвигается к трещинам, поэтому стекло плотнее */
@media (max-width: 720px) {
  html[data-theme="magma"] body::after {
    background-position: center, center, 72% 56%;
  }

  html[data-theme="magma"] .journal details[data-work-log-day-section] {
    background-color: rgba(8, 4, 3, 0.62);
  }

  html[data-theme="magma"] .journal details[data-work-log-turn-details] {
    background-color: rgba(11, 6, 5, 0.52);
  }
}

/* ==================================== «Гроза»: ливень и дальний разряд === */

html[data-theme="storm"] {
  --storm-image: url("/storm-rain.png");
}

/* Разряд — единственное светлое место кадра, поэтому справа ничего не гасим:
   затемняется только низ, где под журналом остаётся пустая полоса. Кадр
   смещён вправо, иначе при узком окне cover срезает молнию. */
html[data-theme="storm"] body::after {
  background-color: #070b12;
  background-image:
    linear-gradient(180deg, rgba(5, 8, 14, 0) 70%, rgba(5, 8, 14, 0.42)),
    var(--storm-image);
  background-position: center, 76% 40%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Настоящая молния бьёт двойным ударом, поэтому вспышка короткая, парная и
   редкая: раз в 17 секунд, иначе журнал невозможно читать. */
@keyframes storm-strike {
  0%, 88% { opacity: 0; }
  88.6% { opacity: 0.62; }
  89.6% { opacity: 0.06; }
  90.4% { opacity: 0.4; }
  93% { opacity: 0; }
  100% { opacity: 0; }
}

html[data-theme="storm"] body::before {
  animation: storm-strike 17s ease-out infinite;
  background-image:
    radial-gradient(96% 60% at 70% 24%, rgba(220, 234, 255, 0.85), rgba(150, 185, 255, 0.26) 40%, transparent 74%);
  background-position: center;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0;
}

html[data-theme="storm"] .app-header {
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  background: rgba(5, 8, 14, 0.62);
}

html[data-theme="storm"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(157, 180, 255, 0.55), transparent);
}

html[data-theme="storm"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(5px) saturate(112%);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
  background-color: rgba(5, 8, 14, 0.42);
  background-image: none;
}

html[data-theme="storm"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(5, 8, 14, 0.47);
}

html[data-theme="storm"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(8, 13, 21, 0.34);
  background-image: none;
}

html[data-theme="storm"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(14, 21, 33, 0.52);
}

html[data-theme="storm"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(8, 13, 21, 0.58);
}

/* =========================== «Графит»: спокойная рабочая сетка и панели === */

html[data-theme="graphite"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(oklch(0.19 0.004 260 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.19 0.004 260 / 0.5) 1px, transparent 1px);
  background-size: 56px 56px;
}

html[data-theme="graphite"] body::before,
html[data-theme="graphite"] body::after {
  content: none;
}

html[data-theme="graphite"] .app-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(oklch(0.19 0.004 260 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.19 0.004 260 / 0.5) 1px, transparent 1px),
    oklch(0.15 0.004 260 / 0.97);
  background-size: 56px 56px;
  border-bottom-color: oklch(0.24 0.004 260);
}

html[data-theme="graphite"] .app-header::after {
  content: none;
}

html[data-theme="graphite"] .brand-mark {
  border-color: oklch(0.32 0.005 260);
  box-shadow: none;
  color: oklch(0.78 0.01 260);
  height: 2.5rem;
  width: 2.5rem;
}

html[data-theme="graphite"] .theme-picker,
html[data-theme="graphite"] .group-picker,
html[data-theme="graphite"] .connection {
  background: transparent;
  border: 0;
  padding-left: 0;
}

html[data-theme="graphite"] .theme-picker select,
html[data-theme="graphite"] .group-picker select {
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 0.72rem) 50% / 0.28rem 0.28rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - 0.52rem) 50% / 0.28rem 0.28rem no-repeat,
    oklch(0.2 0.004 260);
  border-color: oklch(0.3 0.005 260);
  border-radius: 8px;
  padding-block: 0.32rem;
}

html[data-theme="graphite"] .theme-picker select {
  border-color: oklch(0.4 0.01 260);
}

html[data-theme="graphite"] .refresh {
  background: oklch(0.22 0.004 260);
  border-color: oklch(0.32 0.005 260);
  border-radius: 8px;
  box-shadow: none;
  padding-block: 0.42rem;
}

html[data-theme="graphite"] .journal details[data-work-log-day-section] {
  box-shadow: none;
}

html[data-theme="graphite"] .journal div[data-work-log-task-cell]
  > div[data-work-log-task-content] {
  background: transparent;
  border: 0;
  border-left: 2px solid oklch(0.4 0.007 260);
  border-radius: 0;
  box-shadow: none;
  padding: 0.18rem 0.65rem;
}

html[data-theme="graphite"] .journal div[data-work-log-task-cell]
  > div[data-work-log-task-content]::after {
  content: none;
}

html[data-theme="graphite"] .journal span[data-day-usage] {
  background: oklch(0.3 0.015 260);
  border-color: oklch(0.55 0.03 260);
  box-shadow: none;
}

html[data-theme="graphite"] .journal span[data-day-usage-part] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0.2rem;
}

html[data-theme="graphite"] .journal span[data-day-usage-part]::before {
  box-shadow: none;
}

html[data-theme="graphite"] .journal summary[data-task-usage] {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-faint);
  padding-inline: 0.65rem;
}

html[data-theme="graphite"] .journal summary[data-task-usage]:hover,
html[data-theme="graphite"] .journal details[data-task-usage-details][open]
  > summary[data-task-usage] {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  color: var(--text-muted);
}

html[data-theme="graphite"] .journal summary[data-task-usage] > [data-usage-label] {
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
}

html[data-theme="graphite"] .journal details[data-work-log-task-group] {
  background-color: oklch(0.185 0.004 260);
  background-image: none;
  border: 1px solid oklch(0.27 0.005 260);
  box-shadow: none;
}

html[data-theme="graphite"] .journal details[data-work-log-task-group][open]
  > summary[data-work-log-task-group-summary] {
  background: oklch(0.2 0.004 260);
}

html[data-theme="graphite"] .journal [data-work-log-task-overview] {
  border: 0;
  margin-bottom: 0.85rem;
  padding: 0;
}

html[data-theme="graphite"] .journal [data-work-log-task-duration],
html[data-theme="graphite"] .journal [data-work-log-task-credits] {
  background: oklch(0.24 0.004 260);
  border-color: oklch(0.33 0.005 260);
  box-shadow: none;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
}

html[data-theme="graphite"] .journal details[data-work-log-turn-details] {
  background-color: oklch(0.21 0.004 260);
  background-image: none;
  border-color: oklch(0.29 0.005 260);
  box-shadow: none;
}

html[data-theme="graphite"] .journal details[data-work-log-turn-details]:hover {
  background-color: oklch(0.22 0.004 260);
  border-color: oklch(0.33 0.005 260);
  box-shadow: none;
}

html[data-theme="graphite"] .journal details[data-work-log-turn-details][open] {
  background-color: oklch(0.21 0.004 260);
  border-color: oklch(0.4 0.01 260);
  box-shadow: none;
}

html[data-theme="graphite"] .journal span[data-kilo-usage],
html[data-theme="graphite"] .journal span[data-mega-usage],
html[data-theme="graphite"] .journal span[data-high-usage] {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: oklch(0.88 0.003 260) !important;
  padding-inline: 0;
}

/* на узком экране кадр сдвигается к разряду, поэтому стекло плотнее */
@media (max-width: 720px) {
  html[data-theme="storm"] body::after {
    background-position: center, 82% 44%;
  }

  html[data-theme="storm"] .journal details[data-work-log-day-section] {
    background-color: rgba(5, 8, 14, 0.6);
  }

  html[data-theme="storm"] .journal details[data-work-log-turn-details] {
    background-color: rgba(8, 13, 21, 0.52);
  }
}

/* ======================================= «Луг»: солнце сквозь листву === */

html[data-theme="meadow"] {
  --meadow-image: url("/meadow-sun.png");
}

/* Цветущая часть луга внизу справа, поэтому низ не гасим — иначе от темы
   остаётся ровное зелёное пятно. Затемняется только левый край: тень под
   деревьями на фотографии всё-таки светлее, чем нужно колонке задач. */
html[data-theme="meadow"] body::after {
  background-color: #070d08;
  background-image:
    linear-gradient(90deg, rgba(4, 9, 5, 0.34), rgba(4, 9, 5, 0) 40%),
    var(--meadow-image);
  background-position: center, 56% 72%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Солнце дышит: тёплое пятно медленно набирает и отпускает силу, как свет
   сквозь качающуюся листву. Анимируется только прозрачность слоя. */
@keyframes meadow-breathe {
  0%, 100% { opacity: 0.16; transform: translate3d(-1%, 1%, 0) scale(1.02); }
  50% { opacity: 0.74; transform: translate3d(2%, -1%, 0) scale(1.07); }
}

html[data-theme="meadow"] body::before {
  animation: meadow-breathe 18s ease-in-out infinite;
  background-image:
    radial-gradient(76% 62% at 74% 34%, rgba(244, 236, 158, 0.5), rgba(180, 210, 110, 0.14) 46%, transparent 76%);
  background-position: center;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.3;
}

html[data-theme="meadow"] .app-header {
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  background: rgba(4, 9, 5, 0.66);
}

html[data-theme="meadow"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(159, 211, 86, 0.55), transparent);
}

html[data-theme="meadow"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(6px) saturate(118%);
  -webkit-backdrop-filter: blur(6px) saturate(118%);
  background-color: rgba(4, 9, 5, 0.45);
  background-image: none;
}

html[data-theme="meadow"] .journal details[data-work-log-day-section][open] {
  background-color: rgba(4, 9, 5, 0.5);
}

html[data-theme="meadow"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(7, 14, 8, 0.38);
  background-image: none;
}

html[data-theme="meadow"] .journal details[data-work-log-turn-details]:hover {
  background-color: rgba(12, 22, 13, 0.58);
}

html[data-theme="meadow"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(7, 14, 8, 0.56);
}

/* на узком экране кадр уходит к солнцу, поэтому стекло плотнее */
@media (max-width: 720px) {
  html[data-theme="meadow"] body::after {
    background-position: center, 68% 76%;
  }

  html[data-theme="meadow"] .journal details[data-work-log-day-section] {
    background-color: rgba(4, 9, 5, 0.66);
  }

  html[data-theme="meadow"] .journal details[data-work-log-turn-details] {
    background-color: rgba(7, 14, 8, 0.58);
  }
}

/* ============================ живые слои: у каждой темы своё движение === */

/* Один закреплённый слой лежит над фоном (`body::after`, z-index 0) и под
   интерфейсом. Раньше почти все темы меняли только слабую прозрачность раз в
   30–44 секунды: технически анимация шла, визуально она выглядела статичной.
   Теперь движение имеет различимый пространственный рисунок и более короткий
   цикл. prefers-reduced-motion по-прежнему выключает его целиком. */

/* «Орбита»: виток — дуга атмосферы медленно набирает и отдаёт свет */
@keyframes orbit-terminator {
  0%, 100% { opacity: 0.18; transform: translate3d(-1.5%, 1%, 0) scale(1.02); }
  50% { opacity: 0.68; transform: translate3d(1.8%, -1%, 0) scale(1.06); }
}

html:not([data-theme]) body::before,
html[data-theme="orbit"] body::before {
  animation: orbit-terminator 26s ease-in-out infinite;
  background-image:
    radial-gradient(90% 52% at 66% 78%, rgba(150, 205, 255, 0.34), rgba(90, 150, 235, 0.1) 44%, transparent 74%);
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* «Туманность»: газ дышит — самый медленный эффект во всём наборе */
@keyframes nebula-drift {
  0%, 100% { background-position: 62% 42%; opacity: 0.22; transform: scale(1.02); }
  50% { background-position: 78% 34%; opacity: 0.72; transform: scale(1.08); }
}

html[data-theme="nebula"] body::before {
  animation: nebula-drift 30s ease-in-out infinite;
  background-image:
    radial-gradient(70% 56% at 72% 38%, rgba(198, 150, 255, 0.32), rgba(120, 92, 255, 0.12) 48%, transparent 76%);
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* «Gothic»: неровное мерцание факела.
   Сама пыль теперь рисуется отдельными элементами (.motes), поэтому здесь
   остаётся только блик: он не сходит с места и лишь меняет силу — ключи
   расставлены с разным шагом, чтобы огонь не «дышал» метрономом. */
@keyframes gothic-fire {
  0%, 100% { filter: brightness(0.94); opacity: 0.32; }
  13% { filter: brightness(1.14); opacity: 0.56; }
  27% { filter: brightness(0.98); opacity: 0.38; }
  44% { filter: brightness(1.22); opacity: 0.64; }
  61% { filter: brightness(1); opacity: 0.42; }
  82% { filter: brightness(1.08); opacity: 0.5; }
}

html[data-theme="gothic"] body::before {
  animation: gothic-fire 7s ease-in-out infinite;
  background-image:
    radial-gradient(46% 78% at 88% 52%, rgba(238, 164, 58, 0.38), rgba(164, 80, 20, 0.12) 46%, transparent 74%);
  background-position: 88% 52%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}

/* «Пульсар»: собственно пульс — единственный быстрый ритм в наборе */
@keyframes pulsar-beat {
  0%, 100% { opacity: 0.16; }
  6% { opacity: 0.78; }
  18% { opacity: 0.2; }
  24% { opacity: 0.44; }
  40% { opacity: 0.16; }
}

html[data-theme="pulsar"] body::before {
  animation: pulsar-beat 3.4s linear infinite;
  background-image:
    radial-gradient(52% 46% at 50% 46%, rgba(120, 255, 240, 0.34), rgba(60, 230, 212, 0.1) 46%, transparent 72%);
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.2;
}

/* «Чёрная дыра»: диск неровно светит — заметная, но неритмичная дрожь */
@keyframes blackhole-flicker {
  0%, 100% { opacity: 0.2; transform: scale(1.01); }
  22% { opacity: 0.62; transform: scale(1.04); }
  38% { opacity: 0.28; transform: scale(1.025); }
  61% { opacity: 0.72; transform: scale(1.055); }
  79% { opacity: 0.34; transform: scale(1.035); }
}

html[data-theme="blackhole"] body::before {
  animation: blackhole-flicker 8s ease-in-out infinite;
  background-image:
    radial-gradient(44% 40% at 50% 48%, rgba(150, 205, 255, 0.3), rgba(70, 140, 255, 0.1) 52%, transparent 74%);
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.3;
}

/* «Rain»: дождь из отдельных капель.
   Три попытки сделать дождь плиткой провалились по одной причине: любой
   `background-repeat` повторяет один рисунок, и глаз читает регулярность как
   мелкую текстуру. Сначала это были длинные палки, потом горизонтальные
   жалюзи, затем ровные вертикальные дорожки. Капли создаёт app.js — каждая со
   своей позицией, длиной, толщиной, прозрачностью и скоростью, поэтому узора
   нет вообще. Слой наклонён целиком, а анимируется только transform. */
.rain {
  /* `contain: strict` включает `contain: size` и обнуляет слой вместе с
     каплями — здесь достаточно ограничить только отрисовку. */
  contain: paint;
  inset: -14% -18%;
  /* светлые капли на тёмном лесу иначе почти не читаются */
  mix-blend-mode: screen;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transform: none;
  /* На фоновой фотографии дождь идёт почти отвесно, но при падении немного
     смещается вправо. Направление задаётся в rain-fall явным сдвигом по X,
     чтобы анимация не расходилась с уже нарисованными полосами дождя.
     Фон темы рисует body::after с z-index 0, а рабочая область идёт на 2:
     на нулевом слое дождь оказывался под фоном и не был виден вовсе. */
  z-index: 1;
}

.rain > span {
  animation: rain-fall var(--dur) linear infinite;
  animation-delay: var(--delay);
  background: linear-gradient(180deg,
    rgba(226, 244, 246, 0) 0,
    rgba(226, 244, 246, var(--alpha)) 42%,
    rgba(226, 244, 246, calc(var(--alpha) * 0.5)) 100%);
  border-radius: 999px;
  height: var(--len);
  left: var(--x);
  position: absolute;
  top: 0;
  width: var(--thickness);
}

@keyframes rain-fall {
  from { transform: translate3d(-1vw, -18vh, 0) rotate(-1.5deg); }
  to { transform: translate3d(3vw, 128vh, 0) rotate(-1.5deg); }
}

/* Слой темы остаётся только для дымки над кронами: сам дождь теперь отдельными
   каплями, поэтому здесь нет ни плиток, ни движения. */
html[data-theme="taiga"] body::before {
  animation: none;
  background-image:
    radial-gradient(64% 38% at 62% 24%, rgba(206, 232, 226, 0.16), transparent 74%);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: 0;
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  transform: none;
}

/* «Gothic»: пыль в свете факела.
   Та же причина, что и у дождя: плитка читалась как узор. Каждая пылинка —
   отдельный элемент, поднимается снизу вверх со своей скоростью и слегка
   виляет вбок, появляясь и растворяясь на краях пути. */
.motes {
  contain: paint;
  inset: 0;
  /* тёплая пыль осветляет камень, а не закрашивает его */
  mix-blend-mode: screen;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  /* слева в кадре лунный проём: тёплые частицы там были бы чужими */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 26%, rgba(0, 0, 0, 0.45) 50%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0 26%, rgba(0, 0, 0, 0.45) 50%, #000 78%);
  z-index: 1;
}

.motes > span {
  animation: mote-rise var(--dur) linear infinite;
  animation-delay: var(--delay);
  background: radial-gradient(circle,
    rgba(255, 238, 202, var(--alpha)) 0 26%,
    rgba(255, 198, 118, calc(var(--alpha) * 0.32)) 58%,
    transparent 100%);
  border-radius: 50%;
  bottom: -4%;
  height: var(--size);
  left: var(--x);
  opacity: 0;
  position: absolute;
  width: var(--size);
}

@keyframes mote-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  9% { opacity: 1; }
  27% { transform: translate3d(var(--drift), -27vh, 0); }
  52% { transform: translate3d(0, -52vh, 0); }
  76% { transform: translate3d(calc(var(--drift) * -1), -76vh, 0); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, -106vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .motes,
  .rain {
    display: none;
  }
}

/* «Магма»: жар идёт снизу и медленно смещается вдоль трещин. */
@keyframes magma-glow {
  0%, 100% {
    background-position: 70% 82%, 22% 90%;
    filter: saturate(0.9) brightness(0.86);
    opacity: 0.2;
    transform: scale(1.01);
  }
  44% {
    background-position: 62% 74%, 32% 82%;
    filter: saturate(1.18) brightness(1.14);
    opacity: 0.78;
    transform: scale(1.055);
  }
  70% {
    background-position: 66% 79%, 27% 86%;
    filter: saturate(1.02) brightness(0.98);
    opacity: 0.42;
    transform: scale(1.03);
  }
}

html[data-theme="magma"] body::before {
  animation: magma-glow 7.2s ease-in-out infinite;
  background-image:
    radial-gradient(74% 54% at 66% 78%, rgba(255, 178, 77, 0.48), rgba(255, 84, 24, 0.15) 48%, transparent 76%),
    radial-gradient(42% 34% at 28% 84%, rgba(255, 117, 34, 0.34), transparent 74%);
  background-repeat: no-repeat;
  background-size: cover, 120% 90%;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
  }
}

/* =========================================================== адаптивность === */

@media (max-width: 1100px) {
  .journal div[data-work-log-header],
  .journal div[data-work-log-row] {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .journal details[data-work-log-turn-details] > summary {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

html[data-surface="mobile"] body {
  font-size: 14px;
}

html[data-theme="taiga"][data-surface="mobile"] body::after {
  background-position: center, center, 74% 28%;
}

html[data-theme="metropolis"][data-surface="mobile"] body::after {
  background-position: center, center, 68% 50%;
}

/* На узком экране кадр обрезан до самых светлых участков (луна, тропа),
   поэтому подложки здесь плотнее десктопных. */
html[data-theme="taiga"][data-surface="mobile"] .journal details[data-work-log-day-section] {
  background-color: rgba(4, 9, 11, 0.54);
}

html[data-theme="taiga"][data-surface="mobile"] .journal details[data-work-log-turn-details] {
  background-color: rgba(6, 12, 14, 0.44);
}

/* Узкие панели используют тот же компактный порог, что resolveSurface(). */
@media (max-width: 720px) {
  html[data-theme="taiga"] body::after {
    background-position: center, center, 74% 28%;
  }

  html[data-theme="taiga"] .journal details[data-work-log-day-section] {
    background-color: rgba(4, 9, 11, 0.54);
  }

  html[data-theme="taiga"] .journal details[data-work-log-turn-details] {
    background-color: rgba(6, 12, 14, 0.44);
  }

  html[data-theme="metropolis"] body::after {
    background-position: center, center, 68% 50%;
  }
}

html[data-surface="mobile"] {
  --header-height: 3.75rem;
}

html[data-surface="mobile"] .brand-mark {
  height: 2.05rem;
  width: 2.05rem;
}

html[data-surface="mobile"] h1 {
  font-size: 1.06rem;
}

/* Шапка на телефоне выстраивалась в колонку и вместе с надписью «Agent Hub»
   занимала до 300 px — больше трети экрана. Теперь это одна строка с брендом
   и кнопками, а лимиты с выбором темы переносятся во вторую только когда не
   влезают. */
html[data-surface="mobile"] .app-header-inner {
  align-items: center;
  box-sizing: border-box;
  column-gap: 0.45rem;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.4rem;
  width: 100%;
}

html[data-surface="mobile"] .eyebrow {
  display: none;
}

/* Название раздела на телефоне дублирует подписанную вкладку нижней
   навигации, поэтому из шапки оно убирается визуально, но остаётся в
   структуре страницы для скринридера. */
html[data-surface="mobile"] .brand-text {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html[data-surface="mobile"] .brand {
  flex: 0 1 auto;
  min-width: 0;
}

html[data-surface="mobile"] .theme-picker-label {
  display: none;
}

/* Подпись кнопки занимала треть строки, поэтому на телефоне остаётся только
   глиф; полное название доступно в title и для скринридера в тексте кнопки. */
html[data-surface="mobile"] .collapse-all {
  font-size: 0.86rem;
  justify-content: center;
  line-height: 1;
  min-width: 2.1rem;
  padding: 0.3rem 0.45rem;
}

html[data-surface="mobile"] .view-settings-label {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html[data-surface="mobile"] .collapse-all > span {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html[data-surface="mobile"] .collapse-all::before {
  background: currentColor;
  content: "";
  display: block;
  height: 0.9rem;
  -webkit-mask: var(--ph-mask-caret-double-up) center / contain no-repeat;
  mask: var(--ph-mask-caret-double-up) center / contain no-repeat;
  width: 0.9rem;
}

/* flex-basis: 0 обязателен: с `auto` панель считалась по max-content и целиком
   переносилась под бренд, оставляя первую строку почти пустой. */
html[data-surface="mobile"] .toolbar {
  box-sizing: border-box;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  min-width: 0;
}

html[data-surface="mobile"] .theme-picker {
  box-sizing: border-box;
  margin-left: 0;
  max-width: 100%;
}

html[data-surface="mobile"] .theme-picker select {
  max-width: min(6.6rem, 38vw);
  min-width: 0;
  width: 6.6rem;
}

html[data-surface="mobile"] .rate-limits {
  margin-left: 0;
  min-width: 0;
}

/* Два лимита стояли столбиком и вместе с блоком сбросов забирали в шапке
   целую строку. На телефоне они идут в ряд, а сбросы уходят в историю
   лимитов — она открывается тапом по этому же чипу. */
html[data-surface="mobile"] .rate-limits [data-rate-limit-group] {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.26rem 0.5rem;
}

html[data-surface="mobile"] .rate-limits [data-rate-limit-credit] {
  display: none;
}

/* на телефоне из чипа остаётся только имя и процент: срок сброса не влезает */
html[data-surface="mobile"] .rate-limits [data-rate-limit-reset],
html[data-surface="mobile"] .rate-limits [data-rate-limit-plain] {
  display: none;
}

html[data-surface="mobile"] .refresh {
  padding: 0.3rem 0.55rem;
}

html[data-surface="mobile"] main {
  padding-top: 0.85rem;
}

html[data-surface="mobile"] .journal summary[data-work-log-day] > strong {
  font-size: 0.95rem;
}

html[data-surface="mobile"] .journal span[data-day-usage-table] {
  margin-left: 0;
  min-width: 0;
}

html[data-surface="mobile"] .journal span[data-day-usage-breakdown] {
  flex-basis: 100%;
  margin-left: 0;
  margin-top: 0.3rem;
}

html[data-surface="mobile"] .journal details[data-work-log-day-section] {
  padding: 0.35rem 0.4rem;
}

html[data-surface="mobile"] .journal div[data-work-log-header] {
  display: none;
}

html[data-surface="mobile"] .journal div[data-work-log-row] {
  display: block;
  padding: 0.35rem 0 0.5rem;
}

html[data-surface="mobile"] .journal div[data-work-log-task-cell] {
  padding: 0.2rem;
  position: static;
}

html[data-surface="mobile"] .journal div[data-work-log-turn-list] {
  padding: 0.2rem;
}

html[data-surface="mobile"] .journal details[data-work-log-turn-details] > summary {
  grid-template-columns: 9rem minmax(0, 1fr);
}

html[data-surface="mobile"] .journal span[data-work-log-turn-meta] {
  font-size: 0.75rem;
  gap: 0.25rem;
}

/* Мобильный профиль: сводки находятся в заголовках, содержимое раскрывается
   самими заголовками без промежуточных кнопок. */
html[data-surface="mobile"] .journal summary[data-work-log-day] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html[data-surface="mobile"] .journal span[data-day-usage-table] {
  display: contents;
}

html[data-surface="mobile"] .journal span[data-day-usage] {
  cursor: pointer;
  grid-column: 3;
  justify-self: end;
}

html[data-surface="mobile"] .journal [data-usage-label] {
  display: none;
}

html[data-surface="mobile"] .journal span[data-day-usage-breakdown] {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.35rem 0 0;
  width: 100%;
}

html[data-surface="mobile"]
  .journal
  span[data-day-usage-table][data-mobile-expanded]
  > span[data-day-usage-breakdown] {
  display: grid;
}

html[data-surface="mobile"] .journal span[data-day-usage-part] {
  box-sizing: border-box;
  display: grid;
  column-gap: 0.3rem;
  grid-template-columns: auto minmax(3.15rem, 1fr) 7.4ch 5ch;
  justify-content: stretch;
  width: 100%;
}

html[data-surface="mobile"] .journal span[data-day-usage-part] > span {
  justify-self: end;
  text-align: right;
}

html[data-surface="mobile"] .journal div[data-work-log-task-cell] {
  align-items: stretch;
  cursor: pointer;
  display: grid;
  gap: 0.32rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

html[data-surface="mobile"]
  .journal
  div[data-work-log-task-cell]
  > div[data-work-log-task-content] {
  grid-column: 1;
  grid-row: 1;
}

html[data-surface="mobile"] .journal div[data-work-log-task-cell] > div[data-work-log-usage],
html[data-surface="mobile"] .journal details[data-task-usage-details] {
  display: contents;
}

html[data-surface="mobile"] .journal summary[data-task-usage] {
  align-self: stretch;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 8.6ch 5ch;
  margin: 0;
  width: auto;
}

html[data-surface="mobile"] .journal span[data-task-usage-breakdown] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

html[data-surface="mobile"] .journal div[data-work-log-turn-list] {
  display: none;
}

html[data-surface="mobile"]
  .journal
  div[data-work-log-row][data-mobile-open]
  > div[data-work-log-turn-list] {
  display: block;
}

html[data-surface="mobile"] .journal details[data-work-log-previous-turns] > summary,
html[data-surface="mobile"] .journal button[data-work-log-collapse-turns],
html[data-surface="mobile"] .journal button[data-work-log-collapse-turns][hidden],
html[data-surface="mobile"] .journal div[data-work-log-no-previous-turns] {
  display: none !important;
}

html[data-surface="mobile"] .journal div[data-work-log-previous-turn-list] {
  padding-top: 0;
}

html[data-surface="mobile"] .journal summary[data-work-log-task-group-summary] {
  align-items: start;
  grid-template-columns: 0.8rem minmax(0, 1fr);
}

html[data-surface="mobile"] .journal [data-work-log-task-metrics] {
  grid-column: 2;
  justify-content: flex-start;
}

html[data-surface="mobile"] .journal [data-work-log-task-duration],
html[data-surface="mobile"] .journal [data-work-log-task-credits] {
  white-space: normal;
}

html[data-surface="mobile"] .journal [data-work-log-task-group-turns] {
  padding: 0.35rem;
}

html[data-surface="mobile"][data-grouping="task"]
  .journal
  details[data-work-log-turn-details]
  > summary {
  grid-template-columns: 12.5rem minmax(0, 1fr);
}

@media (max-width: 460px) {
  /* Раньше выбор темы занимал всю строку — это было оправдано, пока шапка
     стояла в колонку. Теперь он делит строку с брендом и лимитами. */
  html[data-surface="mobile"] .theme-picker,
  html[data-surface="mobile"] .group-picker {
    flex: 0 0 auto;
  }

  html[data-surface="mobile"] .theme-picker select,
  html[data-surface="mobile"] .group-picker select {
    min-width: 0;
    width: 6.6rem;
  }

  html[data-surface="mobile"] .journal span[data-day-usage],
  html[data-surface="mobile"] .journal span[data-day-usage-part] {
    font-size: 0.72rem;
    padding: 0.16rem 0.5rem;
  }

  html[data-surface="mobile"] .journal details[data-work-log-turn-details] > summary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.05rem;
  }

  html[data-surface="mobile"] .journal span[data-work-log-turn-meta] {
    justify-content: flex-start;
    padding-bottom: 0;
  }

  html[data-surface="mobile"] .journal span[data-work-log-turn-share] {
    margin-left: 0.4rem;
  }

  html[data-surface="mobile"] .journal span[data-work-log-turn-title] {
    border-left: 0;
    padding-top: 0;
  }
}

/* =================================================== оболочка Agent Hub === */
/* Общая оболочка над журналом: слева список задач, справа чат, журнал —
   отдельная вкладка. Использует те же токены тем, что и журнал, поэтому
   переключение темы меняет и оболочку. Стили журнала выше не тронуты. */

:root {
  --mobile-nav-h: 3.4rem;
  --task-rail-width: clamp(272px, 24vw, 336px);
}

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Border-box только для поддерева оболочки: журнал выше рассчитан на
   content-box и не затрагивается. */
.workspace,
.workspace *,
.settings-panel,
.settings-panel *,
.text-dialog,
.text-dialog *,
.mobile-nav,
.mobile-nav *,
.toast {
  box-sizing: border-box;
}

/* Чат — полноэкранная оболочка: прокручивается только лента, композер
   закреплён. Журнал остаётся обычной страницей с липкой шапкой. */
html[data-view="chat"] body {
  height: 100dvh;
  overflow: hidden;
}

.app-header {
  flex: 0 0 auto;
}

.workspace {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: var(--task-rail-width) minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--content-width);
  min-height: 0;
  position: relative;
  width: 100%;
  z-index: 2;
}

.journal-view {
  box-sizing: border-box;
  display: none;
  flex: 1 1 auto;
  width: 90%;
}

html[data-view="journal"] .workspace {
  display: none;
}

html[data-view="journal"] .journal-view {
  display: block;
}

/* ---- переключатель разделов в шапке (десктоп) ---- */

.view-switch {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.15rem;
  padding: 0.18rem;
}

.view-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  transition: background 0.16s ease, color 0.16s ease;
}

.view-tab svg {
  height: 0.95rem;
  width: 0.95rem;
}

.view-tab:hover {
  color: var(--text);
}

.view-tab[aria-pressed="true"] {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  padding: calc(0.32rem - 1px) calc(0.75rem - 1px);
}

.connection-label {
  white-space: nowrap;
}

[data-journal-only] {
  display: none;
}

html[data-view="journal"] [data-journal-only] {
  display: inline-flex;
}

/* В панели «Вид» те же группы должны раскладываться в столбец: правило выше
   рассчитано на кнопки шапки, и из-за inline-flex подпись, переключатель и
   пояснение налезали друг на друга. */
html[data-view="journal"] .settings-body > [data-journal-only] {
  display: block;
}

/* ---- общие примитивы кнопок ---- */

.icon-button {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.1rem;
  justify-content: center;
  padding: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  width: 2.1rem;
}

.icon-button svg {
  height: 1.1rem;
  width: 1.1rem;
}

.icon-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.chip-button {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.76rem;
  gap: 0.35rem;
  padding: 0.36rem 0.72rem;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}

.chip-button svg {
  height: 0.95rem;
  width: 0.95rem;
}

.chip-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.chip-button.primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent));
  border-color: var(--accent-line);
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
  font-weight: 600;
}

.chip-button.primary:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--text);
}

.chip-button.danger:hover {
  background: color-mix(in srgb, #ff6b6b 16%, transparent);
  border-color: color-mix(in srgb, #ff6b6b 55%, transparent);
  color: #ff9d9d;
}

/* =============================================== левая колонка задач === */

.task-rail {
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.task-rail-head {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.75rem var(--gutter-left) 0.5rem;
}

.task-rail-title {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.4rem;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.task-count {
  background: var(--surface-3);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.05rem 0.42rem;
}

.task-search {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-faint);
  display: flex;
  gap: 0.4rem;
  margin: 0 var(--gutter-left) 0.55rem;
  padding: 0.3rem 0.6rem;
}

.task-search svg {
  flex: 0 0 auto;
  height: 0.95rem;
  width: 0.95rem;
}

.task-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.8rem;
  min-width: 0;
  outline: none;
}

.task-list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.5rem 0.6rem;
}

.rail-empty {
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0.5rem;
  padding: 1rem 0.75rem;
  text-align: center;
}

.task-item {
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.28rem;
  padding: 0.55rem 0.6rem;
  position: relative;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.task-item:hover {
  background: var(--surface-2);
}

.task-item[data-selected] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.task-item[data-selected]::before {
  background: var(--accent);
  border-radius: var(--radius-chip);
  bottom: 0.55rem;
  content: "";
  left: -0.5rem;
  position: absolute;
  top: 0.55rem;
  width: 2px;
}

.provider-dot {
  background: var(--provider-none);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--provider-none) 18%, transparent);
  flex: 0 0 auto;
  height: 0.5rem;
  margin-top: 0.4rem;
  width: 0.5rem;
}

[data-provider="codex"] > .provider-dot,
.provider-dot[data-provider="codex"] {
  background: var(--provider-codex);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--provider-codex) 18%, transparent);
}

[data-provider="claude"] > .provider-dot,
.provider-dot[data-provider="claude"] {
  background: var(--provider-claude);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--provider-claude) 18%, transparent);
}

.task-item[data-running] .provider-dot {
  animation: pulse 2.4s ease-in-out infinite;
}

.task-body {
  flex: 1 1 auto;
  min-width: 0;
}

.task-title-row {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.task-title {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-item[data-unread] .task-title {
  font-weight: 680;
}

.task-time {
  color: var(--text-faint);
  flex: 0 0 auto;
  font-family: var(--font-numeric);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.task-footer {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  margin-top: 0.22rem;
}

.task-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}

.task-agent {
  --task-provider: var(--text-soft);
  background: color-mix(in srgb, var(--task-provider) 13%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--task-provider) 44%, transparent);
  border-radius: var(--radius-chip);
  color: color-mix(in srgb, var(--task-provider) 78%, var(--text));
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.25;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

.task-item[data-provider="codex"] .task-agent {
  --task-provider: var(--provider-codex);
}

.task-item[data-provider="claude"] .task-agent {
  --task-provider: var(--provider-claude);
}

.task-runtime {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-chip);
  color: var(--accent);
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  padding: 0.05rem 0.3rem;
}

.task-status {
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  font-size: 0.68rem;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-status[data-status="running"] {
  color: var(--ok);
}

.task-status[data-status="waiting"],
.task-status[data-status="approval"] {
  color: var(--pending);
}

.task-unread {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: var(--accent-glow);
  flex: 0 0 auto;
  height: 0.5rem;
  width: 0.5rem;
}

/* ======================================================= чат задачи === */

.chat {
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.chat-empty {
  align-items: center;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
  margin: auto;
  max-width: 22rem;
  padding: 2rem;
  text-align: center;
}

.chat-empty-mark {
  align-items: center;
  background: var(--brand-gradient);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--brand-shadow);
  color: var(--accent);
  display: flex;
  height: 3.4rem;
  justify-content: center;
  width: 3.4rem;
}

.chat-empty-mark svg {
  height: 1.6rem;
  width: 1.6rem;
}

.chat-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.chat-head {
  align-items: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0.55rem;
  flex: 0 0 auto;
  padding: 0.6rem var(--gutter-right) 0.6rem var(--gutter-left);
}

.chat-back {
  display: none;
}

.chat-head-main {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-title-row {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.chat-title {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 0.98rem;
  font-weight: var(--title-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-live-badge {
  align-items: center;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-radius: var(--radius-chip);
  color: var(--ok);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.66rem;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  text-transform: uppercase;
}

.live-dot {
  animation: pulse 2s ease-in-out infinite;
  background: var(--ok);
  border-radius: 50%;
  height: 0.42rem;
  width: 0.42rem;
}

.chat-subtitle {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  margin-top: 0.15rem;
}

.chat-chip {
  font-size: 0.72rem;
  position: relative;
}

.chat-chip[data-order]:not([data-order="0"])::before {
  color: var(--text-faint);
  content: "·";
  margin-right: 0.55rem;
}

.chat-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.chat-actions > .chip-button {
  height: 2.1rem;
  justify-content: center;
  padding-block: 0;
}

/* всплывающее меню «ещё» */
.overflow {
  position: relative;
}

.overflow > summary {
  list-style: none;
}

.overflow > summary::-webkit-details-marker {
  display: none;
}

.overflow-menu {
  background: var(--card-bg-open);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.3rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
}

.overflow-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.6rem;
  text-align: left;
}

.overflow-menu button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.overflow-menu button.danger:hover {
  background: color-mix(in srgb, #ff6b6b 14%, transparent);
  color: #ff9d9d;
}

/* ---- лента сообщений ---- */

.chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 1rem var(--gutter-right) 0.75rem var(--gutter-left);
}

.chat-history-loader {
  display: flex;
  justify-content: center;
  margin: 0 auto 0.7rem;
  max-width: 54rem;
}

.chat-history-load {
  align-items: center;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 24%, var(--card-bg)) 0 var(--history-pull-progress, 0%),
      var(--card-bg) var(--history-pull-progress, 0%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.78rem;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 10.5rem;
  padding: 0.42rem 1rem;
}

.chat-history-load:hover:not(:disabled),
.chat-history-load:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

.chat-history-load:disabled {
  cursor: wait;
  opacity: 0.72;
}

html[data-surface="mobile"] .chat-history-loader {
  height: var(--history-pull-height, 0);
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: relative;
  transition: height 160ms ease, opacity 120ms ease;
}

html[data-surface="mobile"] .chat-history-loader[data-pulling],
html[data-surface="mobile"] .chat-history-loader[data-loading] {
  height: var(--history-pull-height, 3rem);
  opacity: 1;
}

html[data-surface="mobile"] .chat-history-loader[data-pulling] {
  transition: opacity 80ms ease;
}

html[data-surface="mobile"] .chat-history-load {
  bottom: 0.35rem;
  min-height: 2.15rem;
  position: absolute;
}

html[data-surface="mobile"] .chat-history-loader[data-armed] .chat-history-load {
  border-color: var(--accent);
  color: var(--text);
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 auto;
  max-width: 54rem;
}

.chat-log-empty {
  color: var(--text-faint);
  font-size: 0.82rem;
  padding: 2rem 0;
  text-align: center;
}

.msg {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--turn-shadow);
  max-width: min(46rem, 88%);
  padding: 0.6rem 0.75rem;
}

.msg-user {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.msg-agent {
  align-self: flex-start;
}

.msg-system {
  align-self: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-faint);
  font-size: 0.78rem;
  max-width: 100%;
  padding: 0.2rem 0.5rem;
  text-align: center;
}

.msg-live {
  align-self: flex-start;
  border-color: var(--accent-line);
  border-style: dashed;
  margin: 0.7rem auto 0 0;
  max-width: min(46rem, 88%);
}

/* Журнальные плашки намеренно оставлены прозрачными — фон темы должен
   просвечивать. Пузырям чата так нельзя: на светлых кадрах («Луг», «Магма»)
   текст сквозь `--card-bg` не читается, поэтому под ними своя плотная
   подложка в тон темы. Растровый фон теперь у всех тем, поэтому правило
   общее. */
.msg {
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  background-color: color-mix(in srgb, var(--bg) 84%, transparent);
  background-image: none;
}

/* акцентная подсветка своего сообщения ложится поверх той же подложки:
   один `--accent-soft` даёт всего 14 % плотности */
.msg-user {
  background-color: color-mix(in srgb, var(--bg) 78%, transparent);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
}

/* Системная строка живёт без плашки, но на светлом кадре теряется совсем,
   поэтому получает узкую подложку по размеру текста. */
.msg-system {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background-color: color-mix(in srgb, var(--bg) 66%, transparent);
  background-image: none;
  border-radius: var(--radius-chip);
  max-width: fit-content;
  padding: 0.22rem 0.75rem;
}

.msg-head {
  align-items: baseline;
  color: var(--text-muted);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.28rem;
}

.msg-author {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 620;
}

.msg-stage {
  color: var(--accent);
  font-size: 0.72rem;
}

.msg-delivery {
  color: var(--text-faint);
  font-size: 0.68rem;
  margin-left: auto;
}

.msg-delivery.is-failed {
  color: #ff9d9d;
}

.msg-time {
  color: var(--text-faint);
  font-family: var(--font-numeric);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.msg-body {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg-reasoning {
  border-left: 2px solid var(--accent-line);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.55rem;
  padding-left: 0.65rem;
  white-space: pre-wrap;
}

.msg-agent .msg-body {
  user-select: text;
}

.msg-actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.msg-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.msg-action svg {
  height: 1rem;
  width: 1rem;
}

.msg-action:hover {
  color: var(--accent);
}

/* ---- подтверждения и очередь ---- */

.approvals,
.queue {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.6rem var(--gutter-right) 0.6rem var(--gutter-left);
}

.approval {
  background: color-mix(in srgb, var(--pending) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--pending) 40%, var(--line));
  border-radius: var(--radius-md);
  padding: 0.55rem 0.65rem;
}

.approval-kind {
  color: var(--pending);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.approval-text {
  color: var(--text-soft);
  font-family: var(--font-numeric);
  font-size: 0.8rem;
  margin: 0.35rem 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.queue {
  gap: 0.35rem;
}

.queue-head {
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.queue-item {
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
}

.queue-text {
  color: var(--text-soft);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.queue-accept {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
}

.queue-accept:hover {
  color: var(--text);
}

.queue-remove,
.attachment-remove,
.annotation-remove {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}

.queue-remove:hover,
.attachment-remove:hover,
.annotation-remove:hover {
  color: #ff9d9d;
}

/* ======================================================= композер === */

.composer {
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border-top: 1px solid var(--line);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter-right) max(0.6rem, env(safe-area-inset-bottom)) var(--gutter-left);
}

.composer.dropping {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent-line);
}

.annotations {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.annotation {
  align-items: flex-start;
  background: var(--surface-1);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
}

.annotation-quote {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.attachments {
  display: flex;
}

.attachment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.attachment {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.attachment-open {
  cursor: zoom-in;
}

.attachment-open:hover,
.attachment-open:focus-visible {
  border-color: var(--accent-line);
  box-shadow: var(--accent-glow);
}

.attachment-missing {
  align-items: center;
  color: var(--text-faint);
  cursor: default;
  display: flex;
  height: 3.4rem;
  justify-content: center;
  width: 5.8rem;
}

.attachment-missing-label {
  font-size: 0.68rem;
  line-height: 1.15;
  padding: 0.3rem;
  text-align: center;
}

.attachment-load-label {
  align-items: center;
  color: var(--accent);
  display: flex;
  font-size: 0.72rem;
  height: 3.4rem;
  justify-content: center;
  width: 4.8rem;
}

.attachment img {
  display: block;
  height: 3.4rem;
  object-fit: cover;
  width: 3.4rem;
}

.attachment .attachment-remove {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
  height: 1.2rem;
  padding: 0;
  position: absolute;
  right: 0.15rem;
  top: 0.15rem;
  width: 1.2rem;
}

.composer-main {
  align-items: flex-end;
  display: flex;
  gap: 0.4rem;
}

.composer-main > .chip-button {
  height: 2.4rem;
  justify-content: center;
  padding-block: 0;
}

.composer-input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.composer-input:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--accent-glow);
}

.composer-input::after {
  content: attr(data-clone) " ";
  overflow-wrap: anywhere;
  visibility: hidden;
  white-space: pre-wrap;
}

.composer-input > textarea,
.composer-input::after {
  font: inherit;
  font-size: 0.9rem;
  grid-area: 1 / 1 / 2 / 2;
  line-height: 1.45;
  max-height: 40vh;
  padding: 0.55rem 0.7rem;
}

.composer-input > textarea {
  background: transparent;
  border: 0;
  color: var(--text);
  min-height: 1.45em;
  outline: none;
  overflow-y: auto;
  resize: none;
}

.composer-send {
  align-items: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--accent) 15%, transparent));
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.4rem;
  justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
  width: 2.4rem;
}

.composer-send svg {
  height: 1.15rem;
  width: 1.15rem;
}

.composer-send:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  box-shadow: var(--accent-glow);
  color: var(--text);
}

.composer-send:disabled {
  cursor: default;
  opacity: 0.4;
}

.composer-attach,
.composer-annotate {
  height: 2.4rem;
  width: 2.4rem;
}

.composer-annotate[aria-disabled="true"] {
  opacity: 0.4;
}

.composer-annotate[aria-disabled="false"] {
  border-color: var(--accent-line);
  color: var(--accent);
}

.attachment-viewer {
  align-items: center;
  background: rgba(2, 7, 10, 0.94);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 120;
}

.attachment-viewer[hidden] {
  display: none;
}

.attachment-viewer-stage {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: max(4.5rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
  width: 100%;
}

.attachment-viewer img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.attachment-viewer-loading {
  color: var(--text-soft);
}

.attachment-viewer-close {
  align-items: center;
  background: rgba(7, 17, 22, 0.86);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  display: flex;
  height: 2.8rem;
  justify-content: center;
  left: max(1rem, env(safe-area-inset-left));
  padding: 0;
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  width: 2.8rem;
  z-index: 1;
}

.attachment-viewer-close svg {
  height: 1.25rem;
  width: 1.25rem;
}

.task-search-hits {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.28rem;
}

.task-search-hit {
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 0.68rem;
  overflow: hidden;
  padding: 0.16rem 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-search-hit:hover,
.task-search-hit:focus-visible {
  color: var(--accent);
  outline: none;
  text-decoration: underline;
}

.msg-body,
.msg-reasoning {
  white-space: normal;
}

.msg-body > :first-child,
.msg-reasoning > :first-child {
  margin-top: 0;
}

.msg-body > :last-child,
.msg-reasoning > :last-child {
  margin-bottom: 0;
}

.msg-body p,
.msg-reasoning p {
  margin: 0.45em 0;
}

.msg-body h1,
.msg-body h2,
.msg-body h3,
.msg-body h4,
.msg-body h5,
.msg-body h6 {
  color: var(--text);
  line-height: 1.25;
  margin: 0.85em 0 0.4em;
}

.msg-body h1 { font-size: 1.24em; }
.msg-body h2 { font-size: 1.16em; }
.msg-body h3 { font-size: 1.08em; }
.msg-body h4,
.msg-body h5,
.msg-body h6 { font-size: 1em; }

.msg-body ul,
.msg-body ol,
.msg-reasoning ul,
.msg-reasoning ol {
  margin: 0.45em 0;
  padding-left: 1.45em;
}

.msg-body li + li,
.msg-reasoning li + li {
  margin-top: 0.18em;
}

.msg-body a,
.msg-reasoning a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.msg-body code,
.msg-reasoning code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0.3em;
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  padding: 0.08em 0.3em;
}

.msg-body pre,
.msg-reasoning pre {
  background: color-mix(in srgb, var(--bg) 92%, #000);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0.55em 0;
  max-width: 100%;
  overflow: auto;
  padding: 0.7em;
}

.msg-body pre code,
.msg-reasoning pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

.msg-body blockquote,
.msg-reasoning blockquote {
  border-left: 3px solid var(--accent-line);
  color: var(--text-muted);
  margin: 0.55em 0;
  padding-left: 0.75em;
}

.msg-body .markdown-table-scroll,
.msg-reasoning .markdown-table-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0.6em 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.msg-body .markdown-table,
.msg-reasoning .markdown-table {
  border-collapse: collapse;
  font-size: 0.9em;
  min-width: 100%;
  width: max-content;
}

.msg-body .markdown-table th,
.msg-body .markdown-table td,
.msg-reasoning .markdown-table th,
.msg-reasoning .markdown-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0.42em 0.65em;
  white-space: normal;
}

.msg-body .markdown-table th:last-child,
.msg-body .markdown-table td:last-child,
.msg-reasoning .markdown-table th:last-child,
.msg-reasoning .markdown-table td:last-child {
  border-right: 0;
}

.msg-body .markdown-table tbody tr:last-child td,
.msg-reasoning .markdown-table tbody tr:last-child td {
  border-bottom: 0;
}

.msg-body .markdown-table th,
.msg-reasoning .markdown-table th {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  color: var(--text);
  font-weight: 650;
}

.msg-body .markdown-table tbody tr:nth-child(even),
.msg-reasoning .markdown-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}

.activity-feed {
  border-top: 1px solid var(--line);
  margin-top: 0.7rem;
  padding-top: 0.45rem;
}

.activity-feed > summary {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
}

.activity-list {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.45rem;
}

.activity-item {
  align-items: baseline;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: 0.45rem auto auto minmax(0, 1fr);
  min-width: 0;
}

.activity-marker {
  background: var(--accent);
  border-radius: 50%;
  height: 0.38rem;
  width: 0.38rem;
}

.activity-item[data-status="failed"] .activity-marker { background: #ff7777; }
.activity-item[data-status="waiting"] .activity-marker { background: #f2bd63; }
.activity-time,
.activity-detail {
  color: var(--text-faint);
  font-size: 0.69rem;
}
.activity-label {
  color: var(--text-soft);
  font-size: 0.73rem;
  white-space: nowrap;
}
.activity-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer {
  position: relative;
}

.composer-slash {
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 650;
  height: 2.4rem;
  width: 2.4rem;
}

.slash-menu {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  bottom: calc(100% + 0.4rem);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
  display: grid;
  left: var(--gutter-left);
  max-height: min(22rem, 55vh);
  min-width: min(24rem, calc(100vw - 2rem));
  overflow-y: auto;
  padding: 0.35rem;
  position: absolute;
  z-index: 20;
}

.slash-menu[hidden] {
  display: none;
}

.slash-command {
  align-items: baseline;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  padding: 0.5rem 0.65rem;
  text-align: left;
}

.slash-command strong {
  color: var(--text);
  font-family: var(--font-mono, monospace);
}

.slash-command:hover,
.slash-command[aria-selected="true"] {
  background: var(--accent-soft);
}

.context-usage {
  align-items: center;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--font-numeric);
  font-size: 0.72rem;
  gap: 0.32rem;
  height: 2.4rem;
  padding: 0 0.55rem;
}

.context-usage:disabled {
  cursor: default;
  opacity: 0.55;
}

.context-ring {
  background: conic-gradient(var(--accent) var(--context-percent, 0%), var(--line) 0);
  border-radius: 50%;
  height: 1rem;
  position: relative;
  width: 1rem;
}

.context-ring::after {
  background: var(--surface-1);
  border-radius: 50%;
  content: "";
  inset: 0.2rem;
  position: absolute;
}

@keyframes context-compaction-spin {
  to { transform: rotate(1turn); }
}

.context-usage[data-compacting] .context-ring {
  animation: context-compaction-spin 0.9s linear infinite;
  background: conic-gradient(transparent 0 24%, var(--accent) 24% 58%, transparent 58% 100%);
}

@media (prefers-reduced-motion: reduce) {
  .context-usage[data-compacting] .context-ring {
    animation: none;
  }
}

.chat-stop-bottom {
  display: inline-flex;
}

.chat-stop-header {
  display: none;
}

html[data-surface="mobile"] .chat-stop-header {
  display: inline-flex;
}

html[data-surface="mobile"] .chat-stop-bottom {
  display: none;
}

/* ================================================== панель настроек === */

.panel-scrim,
.dialog-scrim {
  background: rgba(0, 0, 0, 0.5);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0.2s ease;
  z-index: 50;
}

.panel-scrim.open,
.dialog-scrim:not([hidden]) {
  opacity: 1;
}

.settings-panel {
  background:
    radial-gradient(120% 60% at 90% -20%, var(--space-glow-a), transparent 60%),
    var(--space-base);
  border-left: 1px solid var(--line-strong);
  bottom: 0;
  box-shadow: -24px 0 60px -40px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  max-width: 92vw;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  width: 22rem;
  z-index: 60;
}

.settings-panel.open {
  transform: translateX(0);
}

.settings-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0.85rem var(--gutter-right) 0.85rem 1.1rem;
}

.settings-head h2 {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: var(--display-weight);
  margin: 0;
  text-transform: var(--display-transform);
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  padding: 1rem 1.1rem max(1.2rem, env(safe-area-inset-bottom));
}

/* Раздел = заголовок + карточка. Настройки внутри карточки разделены
   волосяными линиями, поэтому подписи не приходится кричать капсом. */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.settings-card {
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  padding: 0 0.8rem;
}

.settings-card > * {
  padding: 0.6rem 0;
}

.settings-card > * + * {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* Короткая настройка одной строкой: подпись слева, контрол справа. */
.setting-row {
  align-items: center;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.setting-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.setting-name {
  color: var(--text-soft);
  font-size: 0.83rem;
}

.setting-field select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%) calc(100% - 0.95rem) 50% / 0.3rem 0.3rem no-repeat,
    linear-gradient(135deg, var(--accent) 50%, transparent 50%) calc(100% - 0.7rem) 50% / 0.3rem 0.3rem no-repeat,
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.42rem 1.6rem 0.42rem 0.6rem;
  width: 100%;
}

.setting-row > select {
  justify-self: end;
  max-width: 11rem;
}

.setting-field select option {
  background: var(--bg);
  color: var(--text);
}

.setting-hint {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  margin: 0.4rem 0 0;
}

/* Кнопка панели: подпись прячется на телефоне, остаётся один значок. */
.view-settings svg {
  height: 0.95rem;
  width: 0.95rem;
}

/* Разбивка по видам токенов включается в общей панели настроек. */
html[data-token-breakdown="off"] .journal span[data-day-usage-breakdown] {
  display: none;
}

.setting-label {
  color: var(--text-faint);
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

/* Ровная сетка вместо рваного переноса: колонки одинаковой ширины, длинное
   название модели переносится внутри чипа, а не обрезается. */
.setting-options {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
}

.setting-options-column {
  grid-template-columns: minmax(0, 1fr);
}

.setting-empty {
  color: var(--text-faint);
}

.option-chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  min-width: 0;
  padding: 0.36rem 0.6rem;
  text-align: center;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.option-chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.option-chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Переключатель: подпись слева, тумблер прижат к правому краю карточки. */
.setting-switch {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.setting-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-track {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 1.3rem;
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease;
  width: 2.35rem;
}

.switch-track::after {
  background: var(--text-muted);
  border-radius: 50%;
  content: "";
  height: 0.9rem;
  left: 0.2rem;
  position: absolute;
  top: 0.15rem;
  transition: transform 0.16s ease, background 0.16s ease;
  width: 0.9rem;
}

/* Тумблер идёт в разметке после подписи, поэтому связь общая, а не соседняя. */
.setting-switch input:checked ~ .switch-track {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.setting-switch input:checked ~ .switch-track::after {
  background: var(--accent);
  transform: translateX(1.05rem);
}

.setting-switch input:focus-visible ~ .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch-text {
  color: var(--text-soft);
  font-size: 0.83rem;
  min-width: 0;
}

.switch-note {
  color: var(--text-muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  margin-top: 0.18rem;
}

.setting-status {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.status-row {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  padding: 0.15rem 0;
}

.status-name {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.status-value {
  color: var(--text);
  font-family: var(--font-numeric);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.trusted-device-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.trusted-device-row {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
}

.trusted-device-row[data-revoked] {
  opacity: 0.55;
}

.trusted-device-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.trusted-device-info strong {
  color: var(--text);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.trusted-device-info small,
.setting-error {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.setting-error {
  color: var(--danger, #ff8b8b);
}

.trusted-device-pairing {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.trusted-device-code {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-numeric);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 0.55rem;
  text-align: center;
}

.trusted-device-add {
  align-self: flex-start;
}

.chip-button.compact {
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
}

.chip-button.danger {
  border-color: color-mix(in srgb, #ff8b8b 45%, var(--line));
  color: #ffb0b0;
}

.setting-danger {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

/* ================================================= диалог ввода текста === */

.text-dialog {
  background: var(--card-bg-open);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  left: 50%;
  max-width: 92vw;
  padding: 1.1rem;
  position: fixed;
  top: 32%;
  transform: translate(-50%, -50%);
  width: 24rem;
  z-index: 70;
}

.text-dialog-label {
  color: var(--text-soft);
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.text-dialog input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  padding: 0.5rem 0.6rem;
  width: 100%;
}

.text-dialog input:focus {
  border-color: var(--accent-line);
  outline: none;
}

.text-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.85rem;
}

/* ================================================ диалог истории лимитов === */

.limits-scrim {
  background: rgba(0, 0, 0, 0.72);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 0.2s ease;
  z-index: 68;
}

.limits-scrim:not([hidden]) {
  opacity: 1;
}

/* Диалог почти непрозрачен: аксессуарный градиент темы лежит поверх сплошной
 * подложки --bg, поэтому текст чата под окном не просвечивает ни в одной теме,
 * а граница и тень сохраняют прежнюю эстетику. */
.limits-dialog {
  background: var(--card-bg-open), var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  left: 50%;
  max-height: min(86vh, 40rem);
  max-width: 94vw;
  overflow-y: auto;
  padding: 1.1rem 1.2rem max(1.2rem, env(safe-area-inset-bottom));
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42rem;
  z-index: 70;
}

.limits-head {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.limits-head-main {
  min-width: 0;
}

.limits-head h2 {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: var(--display-weight);
  margin: 0;
  text-transform: var(--display-transform);
}

.limits-subtitle {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin: 0.2rem 0 0;
}

.limits-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.limits-range {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  padding: 0.3rem 0.7rem;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.limits-range:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.limits-range[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.limits-range:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

.limits-hint {
  color: var(--text-faint);
  font-size: 0.68rem;
  margin: 0;
}

.limits-body {
  min-height: 15rem;
  position: relative;
}

.limits-state {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: center;
  min-height: 15rem;
  text-align: center;
}

.limits-error p,
.limits-empty p {
  margin: 0;
}

.limits-spinner {
  animation: spin 0.9s linear infinite;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  border-top-color: var(--accent);
  height: 1.4rem;
  width: 1.4rem;
}

.limits-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
}

.limits-chart {
  margin: 0;
  position: relative;
  width: 100%;
}

.limits-chart-svg {
  display: block;
  height: 16rem;
  overflow: visible;
  width: 100%;
}

.limits-grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.limits-axis-label {
  fill: var(--text-faint);
  font-family: var(--font-numeric);
  font-size: 10px;
}

.limits-empty-plot {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.limits-series-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.limits-point {
  opacity: 0.92;
  stroke: var(--bg);
  stroke-width: 1;
}

.limits-point-current {
  stroke: var(--bg);
  stroke-width: 1.5;
}

.limits-point:focus-visible {
  outline: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.limits-tooltip {
  background: var(--card-bg-open), var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  pointer-events: none;
  position: absolute;
  transform: translate(0.6rem, -50%);
  white-space: nowrap;
  z-index: 2;
}

.limits-tooltip[data-side="left"] {
  transform: translate(calc(-100% - 0.6rem), -50%);
}

.limits-tooltip-title {
  font-weight: 600;
}

.limits-tooltip-time {
  color: var(--text-muted);
}

.limits-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.limits-legend-item {
  display: inline-flex;
}

/* Переключатель серии: компактная кнопка, естественно встроенная в легенду. */
.limits-legend-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.74rem;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem 0.15rem 0.35rem;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease;
}

.limits-legend-toggle:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.limits-legend-toggle:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
}

/* Скрытая серия однозначно обозначена: приглушена и перечёркнута. */
.limits-legend-toggle.is-hidden {
  color: var(--text-faint);
  opacity: 0.62;
}

.limits-legend-toggle.is-hidden .limits-legend-name {
  text-decoration: line-through;
}

.limits-legend-toggle.is-hidden .limits-legend-swatch {
  filter: grayscale(1);
  opacity: 0.5;
}

.limits-legend-swatch {
  background: var(--series-color, var(--accent));
  border-radius: 2px;
  height: 0.65rem;
  width: 0.65rem;
}

.limits-legend-window {
  color: var(--text-faint);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.limits-legend-value {
  color: var(--text);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.limits-credits {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding-top: 0.6rem;
}

.limits-credit {
  align-items: baseline;
  display: inline-flex;
  gap: 0.4rem;
}

.limits-credit-label {
  color: var(--text-faint);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.limits-credit-value {
  color: var(--text);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

html[data-surface="mobile"] .limits-dialog {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  bottom: 0;
  left: 0;
  max-height: 90vh;
  max-width: 100vw;
  top: auto;
  transform: none;
  width: 100vw;
}

html[data-surface="mobile"] .limits-chart-svg {
  height: 13rem;
}

/* ========================================================== тост === */

.toast {
  background: var(--card-bg-open);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-chip);
  bottom: 1.2rem;
  box-shadow: var(--card-shadow);
  color: var(--text);
  font-size: 0.82rem;
  left: 50%;
  opacity: 0;
  padding: 0.5rem 0.9rem;
  position: fixed;
  transform: translate(-50%, 0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 80;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===================================== нижняя навигация (мобильный) === */

.mobile-nav {
  display: none;
}

/* ========================================= адаптив оболочки (мобильный) === */

html[data-surface="mobile"] .view-switch {
  display: none;
}

html[data-surface="mobile"] .connection-label {
  display: none;
}

html[data-surface="mobile"] .workspace {
  grid-template-columns: minmax(0, 1fr);
}

html[data-surface="mobile"] .task-rail,
html[data-surface="mobile"] .chat {
  min-width: 0;
  width: 100%;
}

/* Слово «Задачи» дублирует подписанную вкладку нижней навигации, поэтому в
   шапке колонки остаются только счётчик и кнопка создания. */
html[data-surface="mobile"] .task-rail-head {
  padding: 0.45rem var(--gutter-left) 0.35rem;
}

html[data-surface="mobile"] .task-rail-title > span:first-child {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html[data-surface="mobile"] .task-search {
  margin-bottom: 0.4rem;
}

/* Строка задачи занимала около 85 px, и на экран влезало восемь задач из
   семидесяти. Плотность выше, но зона нажатия остаётся крупнее 44 px. */
html[data-surface="mobile"] .task-item {
  gap: 0.5rem;
  margin-bottom: 0.18rem;
  padding: 0.42rem 0.5rem;
}

html[data-surface="mobile"] .task-title {
  font-size: 0.84rem;
}

html[data-surface="mobile"] .task-meta {
  font-size: 0.72rem;
  gap: 0.32rem;
}

html[data-surface="mobile"] .chat-back {
  align-self: center;
  display: inline-flex;
  flex: 0 0 auto;
}

/* Подзаголовок задачи (агент, модель, режим, проект) переносился на две
   строки и растягивал шапку чата: на телефоне он идёт одной строкой с
   обрезкой, полный состав виден в настройках хода. */
/* Раскладка остаётся flex: разделители между признаками держатся на `gap`,
   и с `display: block` они схлопывались вплотную к словам. */
html[data-surface="mobile"] .chat-subtitle {
  flex-wrap: nowrap;
  overflow: hidden;
}

html[data-surface="mobile"] .chat-subtitle .chat-chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Оставляем три первых признака — агент, модель, уровень раздумий. Режим,
   среда и проект иначе обрывались на середине слова; полный набор виден в
   настройках хода. */
html[data-surface="mobile"] .chat-subtitle .chat-chip:nth-child(n+4) {
  display: none;
}

html[data-surface="mobile"] .chat-head {
  gap: 0.4rem;
  padding: 0.45rem var(--gutter-right) 0.45rem var(--gutter-left);
}

/* у кнопок действий остаются только иконки: подписи занимали половину строки */
html[data-surface="mobile"] .chat-actions .chip-button > span {
  display: none;
}

html[data-surface="mobile"] .chat-actions .chip-button {
  padding: 0.3rem 0.42rem;
}

html[data-surface="mobile"] .chat-actions {
  flex: 0 0 auto;
  gap: 0.3rem;
}

html[data-surface="mobile"][data-pane="tasks"] .chat {
  display: none;
}

html[data-surface="mobile"][data-pane="chat"] .task-rail {
  display: none;
}

/* На узком экране список задач и чат занимают всю ширину без прокрутки вбок. */
html[data-surface="mobile"] .msg {
  max-width: 92%;
}

/* На 360–390 px поле ввода получает отдельную строку, а инструменты не
   отнимают у него ширину. */
html[data-surface="mobile"] .composer-main {
  align-items: center;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
}

html[data-surface="mobile"] .composer-input {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
}

html[data-surface="mobile"] .composer-slash,
html[data-surface="mobile"] .composer-attach,
html[data-surface="mobile"] .composer-annotate,
html[data-surface="mobile"] [data-follow-up-mode],
html[data-surface="mobile"] .context-usage,
html[data-surface="mobile"] .composer-send {
  grid-row: 2;
}

html[data-surface="mobile"] .composer-send {
  grid-column: -2 / -1;
  justify-self: end;
}

html[data-surface="mobile"] .context-usage {
  justify-content: center;
  padding: 0;
  width: 2.4rem;
}

html[data-surface="mobile"] .context-usage > [data-context-label] {
  display: none;
}

html[data-surface="mobile"] .mobile-nav {
  align-items: stretch;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  right: 0;
  z-index: 30;
}

.mobile-tab {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  font-size: 0.64rem;
  gap: 0.15rem;
  justify-content: center;
}

.mobile-tab svg {
  height: 1.25rem;
  width: 1.25rem;
}

.mobile-tab[aria-pressed="true"] {
  color: var(--accent);
}

/* Резервируем место под фиксированную навигацию. */
html[data-surface="mobile"][data-view="chat"] body {
  padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
}

html[data-surface="mobile"][data-view="journal"] .journal-view {
  padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 1rem);
  width: 100%;
}

/* ========================================================= Статистика === */

.statistics-view {
  box-sizing: border-box;
  display: none;
  flex: 1 1 auto;
  width: 100%;
}

html[data-view="statistics"] .workspace,
html[data-view="statistics"] .journal-view {
  display: none;
}

html[data-view="statistics"] .statistics-view {
  display: block;
}

/* Статистика занимает всю ширину: графики читаются тем лучше, чем шире
   полотно, а колонка по центру оставляла половину экрана пустой. */
.statistics-content {
  display: grid;
  gap: 1.15rem;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 3rem;
  width: 100%;
}

.current-limits-card {
  background: var(--card-bg-open), color-mix(in srgb, var(--bg) 94%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  min-width: 0;
  padding: 0.8rem 0.95rem;
}

.current-limits-head {
  margin-bottom: 0.55rem;
}

.current-limits-head h2 {
  color: var(--text);
  font-family: var(--font-title);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.current-limits-row {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 0.08rem;
  scrollbar-width: thin;
}

/* В карточке статистики лимиты делят ширину поровну и переносятся, а не
   уезжают в горизонтальную прокрутку. */
.current-limits-card .current-limits-row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  overflow: visible;
}

.current-limit {
  align-items: baseline;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.36rem 0.62rem;
  white-space: nowrap;
}

.current-limits-card .current-limit {
  align-items: baseline;
  display: grid;
  gap: 0.1rem 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  white-space: normal;
}

.current-limits-card .current-limit-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-limits-card .current-limit-value {
  justify-self: end;
}

.current-limits-card .current-limit-reset {
  grid-column: 1 / -1;
}

.current-limit-name {
  color: var(--text-faint);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.current-limit-value {
  color: var(--text);
  font-family: var(--font-numeric);
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
}

.current-limit-reset,
.current-limits-empty {
  color: var(--text-muted);
  font-size: 0.68rem;
}

/* В узкой панели лимиты не помещаются в строку: горизонтальная прокрутка
   превращалась в полосу с кнопками, поэтому здесь они идут списком. */
.current-limits-settings {
  display: grid;
  gap: 0.05rem;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.current-limits-settings .current-limit {
  background: none;
  border: 0;
  border-radius: 0;
  column-gap: 0.7rem;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  min-height: 0;
  padding: 0.3rem 0;
  white-space: normal;
}

.current-limits-settings .current-limit + .current-limit {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.current-limits-settings .current-limit-value {
  justify-self: end;
}

.current-limits-settings .current-limit-reset {
  grid-column: 1 / -1;
}

.statistics-card {
  background: var(--card-bg-open), color-mix(in srgb, var(--bg) 94%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.statistics-card-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.statistics-card-head h2 {
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin: 0;
}

.statistics-card-head p,
.statistics-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0.32rem 0 0;
}

.statistics-total {
  color: var(--accent);
  font-family: var(--font-numeric);
  font-size: clamp(1.05rem, 2.3vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statistics-card .limits-ranges {
  margin-bottom: 1rem;
}

.statistics-card .limits-chart-wrap {
  position: relative;
}

.usage-bar {
  fill: var(--accent);
  opacity: 0.82;
  outline: none;
  transition: opacity 120ms ease, filter 120ms ease;
}

.usage-bar:hover,
.usage-bar:focus {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent));
  opacity: 1;
}

.usage-chart {
  overflow-x: auto;
  scrollbar-width: thin;
}

.usage-axis-day {
  font-size: 9px;
}

.usage-chart-svg .limits-axis-y {
  font-size: 8px;
}

/* Внутри суток расход показывается линией с заливкой, а не столбиками. */
.usage-line {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.usage-area {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke: none;
}

.usage-dot {
  fill: var(--accent);
  opacity: 0.85;
}

/* День недели — вспомогательная строка под датой. */
.usage-axis-weekday {
  fill: var(--text-faint);
  font-size: 8px;
  letter-spacing: 0.04em;
}

.limits-grid-day {
  opacity: 0.3;
}

.usage-modes {
  margin-bottom: 0.35rem;
}

.settings-section-title {
  color: var(--text-faint);
  font-family: var(--font-title);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 0 0.15rem;
  text-transform: uppercase;
}

.compact-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-options > button {
  justify-content: center;
}

details[data-work-log-period-section] {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}

details[data-work-log-period-section] > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1rem 1.15rem;
}

details[data-work-log-period-section] > summary::-webkit-details-marker {
  display: none;
}

details[data-work-log-period-section] > [data-work-log-task-overview],
details[data-work-log-period-section] > [data-work-log-task-groups] {
  margin-left: 1rem;
  margin-right: 1rem;
}

.period-usage {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
}

[data-work-log-claude-work] {
  color: var(--provider-claude);
  font-weight: 650;
}

html[data-surface="mobile"][data-view="statistics"] .statistics-view {
  padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 1rem);
}

html[data-surface="mobile"] .statistics-content {
  gap: 0.8rem;
  padding: 0.75rem 0.65rem 1rem;
}

html[data-surface="mobile"] .current-limits-card {
  border-radius: var(--radius-md);
  padding: 0.75rem 0.8rem;
}

/* На телефоне лимиты не влезают в строку, поэтому идут сеткой два на два. */
html[data-surface="mobile"] .current-limits-card .current-limits-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-surface="mobile"] .current-limits-card .current-limit {
  grid-template-columns: minmax(0, 1fr);
}

html[data-surface="mobile"] .current-limits-card .current-limit-value {
  justify-self: start;
}

html[data-surface="mobile"] .current-limits-row {
  scrollbar-width: none;
}

html[data-surface="mobile"] .current-limits-row::-webkit-scrollbar {
  display: none;
}

html[data-surface="mobile"] .statistics-card {
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

html[data-surface="mobile"] .statistics-card-head {
  align-items: stretch;
  flex-direction: column;
  gap: 0.25rem;
}

html[data-surface="mobile"] .statistics-total {
  white-space: normal;
}

html[data-surface="mobile"] .settings-panel {
  border-left: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  bottom: 0;
  max-height: 86dvh;
  top: auto;
  transform: translateY(100%);
  width: 100%;
}

html[data-surface="mobile"] .settings-panel.open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}