/* app.css — стиль «Аврора», четыре темы: Лагуна и Персик (светлые), Полярная ночь и Сияние (тёмные).
   Тема выбирается в меню профиля и хранится на устройстве (html[data-theme]); без выбора — по системе.
   UI-кит ленты — из прототипа notes-reading.html (журнал, входящие, карточки, лайтбокс, плеер, кружок). */

/* ---------- токены ---------- */
:root {
  color-scheme: light;
  --font: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Лагуна (au-l1) */
  --a-bg: #eef2f5;
  --a-surface: rgba(255, 255, 255, .72);
  --a-me: rgba(255, 255, 255, .86);
  --a-ink: #0f1b24;
  --a-muted: #5d6b77;
  --a-line: rgba(15, 27, 36, .09);
  --a-line2: rgba(15, 27, 36, .16);
  --a-accent: #0f8f80;
  --a-accent-ink: #ffffff;
  --a-soft: rgba(15, 143, 128, .10);
  --a-secret: #8a4b12;
  --a-secret-bg: rgba(255, 237, 213, .8);
  --a-ok: #15803d;
  --a-warn: #b45309;
  --a-danger: #dc2626;
  --a-glass: rgba(255, 255, 255, .55);
  --a-au1: rgba(45, 212, 191, .30);
  --a-au2: rgba(251, 146, 60, .22);
  --a-au3: rgba(96, 165, 250, .26);
  --a-shadow: rgba(15, 27, 36, .07);
  --a-shadow2: rgba(15, 27, 36, .10);
  --a-menu: rgba(255, 255, 255, .94);
  --a-scrim: rgba(15, 27, 36, .35);
  --a-lb: rgba(6, 10, 13, .96);
  --a-lb-ink: #e6f0f2;
  --a-lb-btn: rgba(255, 255, 255, .10);
  --a-row-hover: rgba(15, 143, 128, .06);
}
/* Персик (au-l2) */
:root[data-theme="au-l2"] {
  color-scheme: light;
  --a-bg: #f7f0ed;
  --a-surface: rgba(255, 255, 255, .70);
  --a-me: rgba(255, 255, 255, .88);
  --a-ink: #24161b;
  --a-muted: #7a6168;
  --a-line: rgba(70, 25, 35, .09);
  --a-line2: rgba(70, 25, 35, .16);
  --a-accent: #c2416b;
  --a-accent-ink: #ffffff;
  --a-soft: rgba(194, 65, 107, .10);
  --a-secret: #8a4b12;
  --a-secret-bg: rgba(255, 237, 213, .8);
  --a-ok: #15803d;
  --a-warn: #b45309;
  --a-danger: #c81e1e;
  --a-glass: rgba(255, 255, 255, .55);
  --a-au1: rgba(251, 113, 133, .24);
  --a-au2: rgba(253, 186, 116, .30);
  --a-au3: rgba(196, 181, 253, .26);
  --a-shadow: rgba(70, 25, 35, .07);
  --a-shadow2: rgba(70, 25, 35, .10);
  --a-menu: rgba(255, 255, 255, .94);
  --a-scrim: rgba(36, 22, 27, .35);
  --a-lb: rgba(12, 7, 9, .96);
  --a-lb-ink: #f7f0ed;
  --a-lb-btn: rgba(255, 255, 255, .10);
  --a-row-hover: rgba(194, 65, 107, .06);
}
/* Полярная ночь (au-d1): по системе, пока тема не выбрана вручную */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --a-bg: #0a1014;
    --a-surface: rgba(22, 32, 39, .66);
    --a-me: rgba(30, 44, 52, .72);
    --a-ink: #e6f0f2;
    --a-muted: #8fa3ad;
    --a-line: rgba(255, 255, 255, .08);
    --a-line2: rgba(255, 255, 255, .16);
    --a-accent: #38d6c0;
    --a-accent-ink: #04201c;
    --a-soft: rgba(56, 214, 192, .12);
    --a-secret: #f5c26b;
    --a-secret-bg: rgba(60, 45, 20, .6);
    --a-ok: #4ade80;
    --a-warn: #f5c26b;
    --a-danger: #f87171;
    --a-glass: rgba(16, 24, 30, .55);
    --a-au1: rgba(20, 184, 166, .22);
    --a-au2: rgba(234, 88, 12, .14);
    --a-au3: rgba(59, 130, 246, .18);
    --a-shadow: rgba(0, 0, 0, .22);
    --a-shadow2: rgba(0, 0, 0, .30);
    --a-menu: rgba(22, 32, 39, .96);
    --a-scrim: rgba(0, 0, 0, .5);
    --a-lb: rgba(3, 6, 8, .94);
    --a-row-hover: rgba(56, 214, 192, .07);
  }
}
/* Полярная ночь (au-d1), выбрана вручную */
:root[data-theme="au-d1"] {
  color-scheme: dark;
  --a-bg: #0a1014;
  --a-surface: rgba(22, 32, 39, .66);
  --a-me: rgba(30, 44, 52, .72);
  --a-ink: #e6f0f2;
  --a-muted: #8fa3ad;
  --a-line: rgba(255, 255, 255, .08);
  --a-line2: rgba(255, 255, 255, .16);
  --a-accent: #38d6c0;
  --a-accent-ink: #04201c;
  --a-soft: rgba(56, 214, 192, .12);
  --a-secret: #f5c26b;
  --a-secret-bg: rgba(60, 45, 20, .6);
  --a-ok: #4ade80;
  --a-warn: #f5c26b;
  --a-danger: #f87171;
  --a-glass: rgba(16, 24, 30, .55);
  --a-au1: rgba(20, 184, 166, .22);
  --a-au2: rgba(234, 88, 12, .14);
  --a-au3: rgba(59, 130, 246, .18);
  --a-shadow: rgba(0, 0, 0, .22);
  --a-shadow2: rgba(0, 0, 0, .30);
  --a-menu: rgba(22, 32, 39, .96);
  --a-scrim: rgba(0, 0, 0, .5);
  --a-lb: rgba(3, 6, 8, .94);
  --a-row-hover: rgba(56, 214, 192, .07);
}
/* Сияние (au-d2) */
:root[data-theme="au-d2"] {
  color-scheme: dark;
  --a-bg: #070913;
  --a-surface: rgba(20, 24, 44, .62);
  --a-me: rgba(30, 34, 60, .72);
  --a-ink: #e9ecf8;
  --a-muted: #9198b6;
  --a-line: rgba(255, 255, 255, .08);
  --a-line2: rgba(255, 255, 255, .16);
  --a-accent: #b8a4ff;
  --a-accent-ink: #160f2e;
  --a-soft: rgba(184, 164, 255, .13);
  --a-secret: #f5c26b;
  --a-secret-bg: rgba(60, 45, 20, .55);
  --a-ok: #4ade80;
  --a-warn: #f5c26b;
  --a-danger: #f87171;
  --a-glass: rgba(10, 13, 28, .55);
  --a-au1: rgba(52, 211, 153, .20);
  --a-au2: rgba(139, 92, 246, .24);
  --a-au3: rgba(56, 189, 248, .15);
  --a-shadow: rgba(0, 0, 0, .25);
  --a-shadow2: rgba(0, 0, 0, .32);
  --a-menu: rgba(20, 24, 44, .96);
  --a-scrim: rgba(0, 0, 0, .5);
  --a-lb: rgba(3, 4, 10, .94);
  --a-row-hover: rgba(184, 164, 255, .07);
}

/* Имена в пересланной переписке — своим цветом (новые токены, существующие не меняются) */
:root { --a-n1: #0f8f80; --a-n2: #c2416b; --a-n3: #2563eb; --a-n4: #b45309; --a-n5: #7c3aed; --a-n6: #15803d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --a-n1: #38d6c0; --a-n2: #f472b6; --a-n3: #60a5fa; --a-n4: #fbbf24; --a-n5: #b8a4ff; --a-n6: #4ade80; }
}
:root[data-theme^="au-d"] { --a-n1: #38d6c0; --a-n2: #f472b6; --a-n3: #60a5fa; --a-n4: #fbbf24; --a-n5: #b8a4ff; --a-n6: #4ade80; }

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* фон: цвет + три размытых пятна «сияния», закреплены к окну. Тем же фоном залит липкий заголовок дня —
   пиксель в пиксель совпадает со страницей под ним */
body, .jh {
  background:
    radial-gradient(55% 45% at 8% 0%, var(--a-au1), transparent 70%),
    radial-gradient(45% 45% at 95% 8%, var(--a-au2), transparent 70%),
    radial-gradient(60% 55% at 60% 100%, var(--a-au3), transparent 70%),
    var(--a-bg);
  background-attachment: fixed;
}
body {
  color: var(--a-ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
a { color: var(--a-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.copy-tmp { position: fixed; top: 0; left: 0; opacity: 0; }
/* дев-копия: чип DEV рядом с названием (html[data-env] ставит app.js по /api/config); в свёрнутом сайдбаре — точка на значке */
.env-chip { display: none; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: #e8590c; color: #fff; font: 700 10.5px/15px var(--mono); letter-spacing: .08em; vertical-align: 2px; }
html[data-env="dev"] .env-chip { display: inline-block; }
html[data-env="demo"] .env-chip, .env-chip.demo-chip { display: inline-block; background: var(--a-accent); color: var(--a-accent-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

#app { height: 100%; height: 100dvh; display: flex; flex-direction: column; }

/* стекло: шапка, сайдбар, поле ввода */
.top, .rail, .pill {
  background: var(--a-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

/* ---------- кнопки ---------- */
.btn { border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 8px 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--a-accent); }
.btn.pri { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); font-weight: 600; }
.btn.sm { padding: 3px 10px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .55; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--a-accent); font-weight: 600; font-size: inherit; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.act { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 4px; color: var(--a-muted); flex: none; }
.act svg { width: 16px; height: 16px; }
.act:hover { background: var(--a-soft); color: var(--a-ink); }
.act.del:hover { color: var(--a-danger); }
.act.done { color: var(--a-ok); }

/* ---------- шапка ---------- */
/* шапка правее сайдбара: [пусто] [поиск — ширина и края поля «Новая заметка…»] [профиль] */
.top { --hh: 54px; position: relative; z-index: 20; flex: none; height: var(--hh); display: grid; grid-template-columns: 1fr minmax(0, min(var(--colw), 780px)) 1fr; align-items: center; column-gap: 0; padding: 0 16px; border-bottom: 1px solid var(--a-line); }
.top .search { grid-column: 2; }
.top .tright { grid-column: 3; justify-self: end; margin-left: 12px; display: flex; align-items: center; gap: 6px; }
/* логотип — верх сайдбара, той же высоты, что шапка: нижние границы одной линией */
.brand { flex: none; height: 54px; display: flex; align-items: center; gap: 10px; line-height: 1.15; min-width: 0; padding: 0 12px 0 12px; border-bottom: 1px solid var(--a-line); }
.brand-t { display: flex; align-items: center; min-width: 0; }
.brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brand small { color: var(--a-muted); font-size: 11px; }
.search { min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 4px; padding: 3px 3px 3px 12px; }
.search:focus-within { border-color: var(--a-accent); }
.sico { width: 18px; height: 18px; flex: none; color: var(--a-muted); }
.search input { flex: 1; min-width: 0; border: 0; background: none; padding: 5px 0; outline: none; }
.search input::placeholder { color: var(--a-muted); opacity: .85; }
.askbtn { flex: none; border: 0; background: var(--a-accent); color: var(--a-accent-ink); border-radius: 4px; padding: 6px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.askbtn svg { width: 14px; height: 14px; }
.askbtn:disabled { background: var(--a-line); color: var(--a-muted); }
.search[aria-busy="true"] .askbtn:not(:disabled) { opacity: .85; }

.me-wrap { position: relative; flex: none; }
.me { width: 36px; height: 36px; border-radius: 4px; border: 0; background: var(--a-soft); color: var(--a-accent); font-weight: 700; font-size: 15px; }
.me:hover, .me[aria-expanded="true"] { background: var(--a-accent); color: var(--a-accent-ink); }
.me.kebab { display: grid; place-items: center; padding: 0; background: none; color: var(--a-muted); border: 1px solid transparent; }
.me.kebab:hover, .me.kebab[aria-expanded="true"] { background: var(--a-soft); color: var(--a-ink); border-color: var(--a-line); }
.me.kebab svg { width: 20px; height: 20px; }
.me-wrap .menu { width: 200px; }
/* всплывающие меню у значков внизу сайдбара: тема, инвайты */
.pop { position: fixed; z-index: 50; width: 272px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 12px 36px var(--a-shadow2); padding: 6px; }
.pop-in { display: flex; flex-direction: column; gap: 2px; }
.pop-invites { width: 460px; }
.inv-pop { gap: 10px; padding: 0 6px 6px; }
.inv-pop .menu-sec { padding-left: 2px; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 272px; max-width: calc(100vw - 24px); background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 12px 36px var(--a-shadow2); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu-sec { padding: 6px 8px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); font-weight: 600; }
.menu-name { padding: 8px 10px 6px; font-weight: 600; overflow-wrap: anywhere; border-top: 1px solid var(--a-line); margin-top: 4px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 4px; text-align: left; font-size: 14px; }
.menu-item:hover { background: var(--a-soft); }
.menu-item svg { width: 18px; height: 18px; color: var(--a-muted); }

/* плитки тем в меню профиля */
.theme-grp { padding: 4px 4px 2px; }
.theme-grp > small { display: block; font-size: 12px; color: var(--a-muted); margin: 0 2px 4px; }
.theme-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme-tile { position: relative; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--a-line); background: none; border-radius: 4px; padding: 4px 4px 5px; text-align: left; font-size: 12.5px; font-weight: 500; min-width: 0; }
.theme-tile:hover { border-color: var(--a-line2); }
.theme-tile[aria-pressed="true"] { border-color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-accent); }
.theme-tile .tn { padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-tile .sw { position: relative; display: block; height: 42px; border-radius: 3px; overflow: hidden; }
.theme-tile .sw i { position: absolute; left: 7px; bottom: 7px; width: 34px; height: 12px; border-radius: 2px; }
.theme-tile .sw i::after { content: ""; position: absolute; left: 40px; top: 3px; width: 26px; height: 6px; border-radius: 2px; background: currentColor; opacity: .35; }
.theme-tile .ck { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; display: none; }
.theme-tile[aria-pressed="true"] .ck { display: block; }
.th-au-l1 .sw { color: #0f1b24; background: radial-gradient(70% 90% at 5% 0%, rgba(45, 212, 191, .55), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(251, 146, 60, .45), transparent 70%), radial-gradient(70% 90% at 60% 110%, rgba(96, 165, 250, .5), transparent 70%), #eef2f5; }
.th-au-l1 .sw i, .th-au-l1 .ck { background: #0f8f80; color: #fff; }
.th-au-l2 .sw { color: #24161b; background: radial-gradient(70% 90% at 5% 0%, rgba(251, 113, 133, .5), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(253, 186, 116, .6), transparent 70%), radial-gradient(70% 90% at 60% 110%, rgba(196, 181, 253, .55), transparent 70%), #f7f0ed; }
.th-au-l2 .sw i, .th-au-l2 .ck { background: #c2416b; color: #fff; }
.th-au-d1 .sw { color: #e6f0f2; background: radial-gradient(70% 90% at 5% 0%, rgba(20, 184, 166, .5), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(234, 88, 12, .35), transparent 70%), radial-gradient(70% 90% at 60% 110%, rgba(59, 130, 246, .45), transparent 70%), #0a1014; }
.th-au-d1 .sw i, .th-au-d1 .ck { background: #38d6c0; color: #04201c; }
.th-au-d2 .sw { color: #e9ecf8; background: radial-gradient(70% 90% at 5% 0%, rgba(52, 211, 153, .45), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(139, 92, 246, .55), transparent 70%), radial-gradient(70% 90% at 60% 110%, rgba(56, 189, 248, .4), transparent 70%), #070913; }
.th-au-d2 .sw i, .th-au-d2 .ck { background: #b8a4ff; color: #160f2e; }

.railbtn { display: none; flex: none; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; width: 38px; height: 38px; place-items: center; padding: 0; }
.railbtn svg { width: 20px; height: 20px; }

/* ---------- раскладка: сайдбар на всю высоту | колонка (шапка + лента) ---------- */
.shell { --railw: 320px; position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--railw) minmax(0, 1fr); }
/* сайдбар свёрнут до значков: панель скрыта, от логотипа — только знак */
.shell.mini { --railw: 56px; }
.shell.mini .ipanel, .shell.mini .brand-t { display: none; }
.shell.mini .brand { padding: 0; justify-content: center; }
.brand-mark { position: relative; flex: none; display: grid; width: 32px; height: 32px; border-radius: 4px; place-items: center; background: var(--a-accent); color: var(--a-accent-ink); }
.brand-mark svg { width: 22px; height: 22px; }
html[data-env="dev"] .shell.mini .brand-mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #e8590c; box-shadow: 0 0 0 2px var(--a-bg); }
/* свернуть / развернуть — на правом краю сайдбара, поверх всего */
.col { --colw: 780px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.col[data-view="cards"] { --colw: 1240px; }
.col[data-view="inbox"] { --colw: 100%; }
/* clip: счётчик и выбор вида при прокрутке уезжают вверх (отрицательный margin) — не поверх шапки */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: clip; }

/* ---------- сайдбар: логотип, ниже колонка иконок + панель ---------- */
/* граница сайдбара — только ниже шапки: логотип и шапка контента читаются одной полосой (элементы — разные) */
.rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.rail-in { flex: 1; min-height: 0; display: flex; border-right: 1px solid var(--a-line); }
.icol { width: 56px; flex: none; border-right: 1px solid var(--a-line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; }
.icol button { width: 40px; height: 40px; border: 0; background: none; border-radius: 4px; color: var(--a-muted); display: grid; place-items: center; position: relative; padding: 0; }
.icol button:hover { color: var(--a-ink); }
.icol button.on { background: var(--a-surface); color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-line); }
.icol button svg { width: 20px; height: 20px; }
.icol-gap { flex: 1; }
.icol button[aria-expanded="true"] { background: var(--a-surface); color: var(--a-accent); box-shadow: 0 0 0 1px var(--a-line); }
.icol .badge { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; border-radius: 4px; font: 600 10px/16px var(--font); color: var(--a-accent-ink); background: var(--a-accent); }
.ipanel { flex: 1; min-width: 0; overflow: auto; padding: 14px 10px 24px; display: flex; flex-direction: column; gap: 10px; }
.ipanel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 0 8px; }
.ipanel-h h2 { font-size: 15px; margin: 0; font-weight: 600; }
.ipanel-h .fold svg { width: 18px; height: 18px; }
.rq { margin: 0 4px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 6px 8px; font-size: 13px; outline: none; }
.rq:focus { border-color: var(--a-accent); }
.rlist { display: flex; flex-direction: column; gap: 1px; }
.ri { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 8px; border-radius: 4px; text-align: left; font-size: 14px; }
.ri span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.ri i { font-style: normal; opacity: .6; font-variant-numeric: tabular-nums; font-size: 12px; }
.ri.tg span { font-family: var(--mono); font-size: 13px; }
.ri:hover { background: var(--a-soft); }
.ri.on { background: var(--a-accent); color: var(--a-accent-ink); }
.ri.on svg, .ri.on i { opacity: 1; }
.rnote { margin: 4px 8px 0; font-size: 12px; color: var(--a-muted); }

.scrim { position: fixed; inset: 0; z-index: 34; background: rgba(0, 0, 0, .35); }

/* ---------- над лентой: ответ ИИ ---------- */
.over { flex: none; padding: 12px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.over > * { width: 100%; max-width: min(var(--colw), 780px); margin: 0 auto; }

.ans { position: relative; overflow: hidden; background: var(--a-surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--a-accent); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 24px var(--a-shadow); flex: none; }
.ans.loading { border-color: var(--a-line); }
.ans.err { border-color: var(--a-danger); }
.ans-head { display: flex; align-items: flex-start; gap: 8px; }
.ans-q { flex: 1; min-width: 0; display: inline-flex; align-items: flex-start; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--a-accent); font-weight: 600; overflow-wrap: anywhere; padding-top: 5px; }
.ans-q svg { width: 14px; height: 14px; flex: none; }
.ans-head .act { margin: -2px -6px 0 0; }
.ans-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ans.err .ans-text { color: var(--a-danger); }
.ans-wait { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--a-ink); }
.ans-sub { margin: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
/* неопределённый прогресс вверху карточки */
.ans .bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--a-soft); }
.ans .bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--a-accent); animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ans .bar::after { left: 0; width: 100%; opacity: .5; } }

.cites { display: flex; flex-direction: column; gap: 4px; }
.cite { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 1px solid var(--a-line); border-radius: 4px; background: var(--a-surface); padding: 6px 10px; font-size: 13px; }
.cite b { font-weight: 500; overflow-wrap: anywhere; }
.cite small { color: var(--a-muted); font-size: 12px; }
.cite:hover { border-color: var(--a-accent); }

/* ---------- над лентой: счётчик / фильтры слева, выбор вида справа ---------- */
.vbar { flex: none; padding: 10px 16px 8px; position: relative; z-index: 15; }
.vbar-in { max-width: var(--colw); margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 32px; }
.vcount { flex: 1; min-width: 0; font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.vcount .cnt { white-space: nowrap; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--a-soft); border-radius: 4px; padding: 5px 10px; font-size: 13px; color: var(--a-ink); }
.fl { margin-right: 4px; font-weight: 500; }
.fchip { border: 1px solid var(--a-accent); background: var(--a-surface); color: var(--a-accent); border-radius: 4px; padding: 0 8px; font: 12px/1.6 var(--mono); max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.fchip:hover { background: var(--a-accent); color: var(--a-accent-ink); }
.fchip.q { border-color: var(--a-line); color: var(--a-ink); }
.fchip.q:hover { background: var(--a-surface); color: var(--a-ink); }
.fclr { margin-left: auto; border: 0; background: none; color: var(--a-accent); font-weight: 600; padding: 0 2px; }

.vsel { position: relative; flex: none; }
.vsel-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--a-line2); background: var(--a-surface); border-radius: 4px; padding: 5px 8px 5px 10px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.vsel-btn svg { width: 16px; height: 16px; }
.vsel-btn .chev { width: 14px; height: 14px; color: var(--a-muted); margin-left: 2px; }
.vsel-btn:hover, .vsel-btn[aria-expanded="true"] { border-color: var(--a-accent); }
.vmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 196px; background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 12px 36px var(--a-shadow2); padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.vitem { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 4px; text-align: left; font-size: 14px; }
.vitem svg { width: 17px; height: 17px; color: var(--a-muted); }
.vitem span { flex: 1; }
.vitem .ck { visibility: hidden; color: var(--a-accent); }
.vitem[aria-checked="true"] { font-weight: 600; }
.vitem[aria-checked="true"] .ck { visibility: visible; }
.vitem[aria-checked="true"] > svg:first-child { color: var(--a-accent); }
.vitem:hover, .vitem:focus { background: var(--a-soft); outline: none; }
.vitem:focus-visible { box-shadow: inset 0 0 0 2px var(--a-accent); }

/* ---------- поле «Новая заметка…» — вверху, всегда на виду ---------- */
.compose { flex: none; padding: 0 16px 10px; position: relative; z-index: 10; }
.compose .crow { max-width: min(var(--colw), 780px); margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 4px; padding: 4px; box-shadow: 0 8px 30px var(--a-shadow2), 0 0 0 1px var(--a-line); }
.pill:focus-within { box-shadow: 0 8px 30px var(--a-shadow2), 0 0 0 1.5px var(--a-accent); }
.attbtn { flex: none; width: 35px; height: 35px; border: 0; background: none; border-radius: 4px; color: var(--a-muted); display: grid; place-items: center; padding: 0; }
.attbtn:hover { background: var(--a-soft); color: var(--a-ink); }
.attbtn svg { width: 20px; height: 20px; }
.cin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* файлы к новой заметке: плитки над текстом, снизу полоса загрузки */
.atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 2px 2px; }
.att { --p: 0%; position: relative; display: flex; align-items: center; gap: 8px; height: 48px; max-width: 220px; padding: 0 30px 0 10px; border: 1px solid var(--a-line); border-radius: 4px; background: var(--a-surface); overflow: hidden; }
.att > svg { width: 18px; height: 18px; flex: none; color: var(--a-accent); }
.att-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.att-t b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-t small { font-size: 11px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.att.err { border-color: var(--a-danger); }
.att.err .att-t small { color: var(--a-danger); }
.att.pic { width: 48px; padding: 0; }
.att.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att.pic.up img { opacity: .6; }
.att-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p); background: var(--a-accent); transition: width .15s; }
.att.ok .att-bar, .att.err .att-bar { display: none; }
.att-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 4px; padding: 0; display: grid; place-items: center; background: var(--a-menu); color: var(--a-muted); }
.att-x:hover { color: var(--a-danger); }
.att-x svg { width: 13px; height: 13px; }
/* перетаскивание файлов на колонку */
.col.drop { position: relative; }
.col.drop::after { content: attr(data-drop-text); position: absolute; inset: 8px; z-index: 60; display: grid; place-items: center; border: 2px dashed var(--a-accent); border-radius: 4px; background: color-mix(in srgb, var(--a-bg) 80%, transparent); color: var(--a-accent); font-weight: 600; pointer-events: none; }
.pill textarea { flex: none; min-width: 0; resize: none; border: 0; background: none; padding: 7px 34px 7px 10px; line-height: 21px; height: 35px; max-height: 224px; overflow-y: hidden; outline: none; font-size: 15px; }
.pill { position: relative; }
.bigbtn { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; background: none; border-radius: 4px; color: var(--a-muted); display: grid; place-items: center; padding: 0; }
.bigbtn:hover { background: var(--a-soft); color: var(--a-ink); }
.bigbtn svg { width: 16px; height: 16px; }
.cz .bigbtn { display: none; }
.pill textarea::placeholder { color: var(--a-muted); }
.pill textarea.full { overflow-y: auto; }
.send { flex: none; width: 43px; height: 43px; border-radius: 4px; border: 0; background: var(--a-accent); color: var(--a-accent-ink); display: grid; place-items: center; transition: transform .12s, opacity .12s; }
.send svg { width: 22px; height: 22px; }
.send:disabled { opacity: .45; }
.send:not(:disabled):active { transform: scale(.92); }
.hint { display: none; max-width: min(var(--colw), 780px); margin: 4px auto 0; padding-left: 12px; font-size: 12px; }
.hint.err { display: block; color: var(--a-danger); }

/* ---------- сцена и прокрутка ---------- */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* overflow-anchor: none — сдвиги при подгрузке/выгрузке «окна» компенсирует feed.js */
.sc { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; position: relative; padding: 0 16px 24px; }
.feed-state { margin: 40px auto; padding: 0 8px; max-width: 420px; text-align: center; color: var(--a-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.loadmore { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: var(--a-muted); padding: 12px 0; min-height: 40px; }
.fresh { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6; border: 0; background: var(--a-accent); color: var(--a-accent-ink); border-radius: 4px; padding: 5px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px var(--a-shadow2); white-space: nowrap; }

/* ---------- общие части заметки (UI-кит прототипа) ---------- */
.tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.tx a { overflow-wrap: anywhere; }
.muted { color: var(--a-muted); }
.fwd { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--a-accent); }
.fwd svg { width: 14px; height: 14px; }
.link { display: block; border-left: 3px solid var(--a-accent); background: var(--a-surface); border-radius: 4px; padding: 7px 10px; text-decoration: none; color: inherit; overflow-wrap: anywhere; }
a.link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.link b { display: block; font-weight: 600; }
.link small { display: block; margin-top: 1px; color: var(--a-muted); font: 12px var(--mono); }
.link-desc, .media-desc { margin: 0; color: var(--a-muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.transcript { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ---------- Спойлер — компонент дизайн-системы (DESIGN.md, «Спойлер»). Цвета — только из токенов темы ---------- */
.sp { min-width: 0; }
.sp > summary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 0; font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--a-muted); cursor: pointer; list-style: none; border-radius: 4px; }
.sp > summary::-webkit-details-marker { display: none; }
.sp > summary:hover { color: var(--a-accent); }
.sp > summary:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.sp-chev { width: 12px; height: 12px; flex: none; transition: transform .15s; }
.sp[open] > summary > .sp-chev { transform: rotate(90deg); }
.sp-ic { width: 14px; height: 14px; flex: none; }
.sp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-m { flex: none; font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; }
.sp > .sp-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 6px 0 0 6px; padding-left: 12px; border-left: 2px solid var(--a-line2); }
/* второй уровень — тише: мельче, бледнее, линия пунктиром */
.sp .sp > summary { font-size: 12px; color: color-mix(in srgb, var(--a-muted) 78%, transparent); }
.sp .sp > summary:hover { color: var(--a-accent); }
.sp .sp > .sp-b { margin-left: 5px; border-left-style: dotted; }
/* текст внутри: пересказ ИИ / речь человека / сырой текст */
.sp-desc { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--a-muted); overflow-wrap: anywhere; }
.sp-speech { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--a-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-raw { margin: 0; max-height: 220px; overflow: auto; padding: 8px 10px; border-radius: 8px; font: 12px/1.6 var(--mono); color: var(--a-ink);
  background: color-mix(in srgb, var(--a-ink) 6%, transparent); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sp-chev { transition: none; } }
.sec { display: inline-flex; align-items: center; gap: 2px; vertical-align: baseline; max-width: 100%; }
.sec code { font: 13px/1.5 var(--mono); background: var(--a-secret-bg); color: var(--a-secret); border-radius: 4px; padding: 0 5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.sec .act { width: 24px; height: 24px; }
/* секрет закрыт всегда: точки той же ширины, что значение (моноширинный, знак в знак), открывается и закрывается кликом */
.sec-v { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 5px; border: 0; border-radius: 4px; background: var(--a-secret-bg);
  color: var(--a-secret); font: inherit; cursor: pointer; text-align: start; max-width: 100%; }
.sec-v code { background: none; padding: 0; }

.sec-v svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.sec-v:hover svg { opacity: 1; }
.sec-v:focus-visible { outline: 2px solid var(--a-secret); outline-offset: 1px; }
.sec .act svg { width: 15px; height: 15px; }
/* пересланная переписка */
.thread { display: flex; flex-direction: column; gap: 6px; }
/* реплика: имя (один раз на серию), пузырь текста, медиа без пузыря, время */
.tm { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; min-width: 0; }
.tm.mine { align-self: flex-end; align-items: flex-end; }
.tm.same { margin-top: -3px; }
.tm .bub-a { margin: 4px 4px 0; }
.bub { max-width: 100%; min-width: 0; background: var(--a-me); border: 1px solid var(--a-line); border-radius: 12px 12px 12px 4px; padding: 6px 10px 4px; overflow-wrap: anywhere; }
/* своё — тот же пузырь справа, с едва заметным оттенком акцента */
.tm.mine .bub { background: color-mix(in srgb, var(--a-accent) 5%, var(--a-me)); border-color: color-mix(in srgb, var(--a-accent) 14%, var(--a-line)); border-radius: 12px 12px 4px 12px; }
.tm-t { font-size: 10.5px; color: var(--a-muted); margin: 0 4px; font-variant-numeric: tabular-nums; }
.tm .transcript { margin: 0 4px; font-size: 13px; color: var(--a-muted); max-width: 420px; }
.tm.mine .transcript { text-align: right; }
.bub-a { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.bub-tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.bub-t { display: block; text-align: right; font-size: 10.5px; line-height: 1.3; color: var(--a-muted); margin-top: 2px; }
.thread.sm .bub-tx { font-size: 13px; }
/* переписка — утопленная панель; начало и конец — плашки-разделители, как даты в чате */
.th { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--a-line2); border-radius: 14px;
  background: color-mix(in srgb, var(--a-bg) 70%, transparent); }
.th-sep { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--a-muted); }
.th-sep::before, .th-sep::after { content: ""; flex: 1; height: 1px; background: var(--a-line2); }
.th-sep b { font-weight: 600; color: var(--a-ink); background: var(--a-surface); border: 1px solid var(--a-line2); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.th-clip > .th-sep { margin-top: 10px; }
.th-sum { margin: 2px 0 0; font-weight: 600; font-size: 15px; line-height: 1.35; text-wrap: balance; overflow-wrap: anywhere; }
.th-meta { font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; margin-bottom: 2px; }
/* свёрнутая: реплики (и «конец переписки» за ними) растворяются книзу; маска — фон под панелью бывает любым */
.th.folded:not(.fits) .th-clip { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.th.in-card.folded:not(.fits) .th-clip { max-height: 150px; }
.th-end { display: flex; }
.th-more, .th-fold { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
span.th-more { color: var(--a-muted); }
.th-more svg, .th-fold svg { width: 14px; height: 14px; }
.th-fold svg { transform: rotate(180deg); }
.th.fits .th-end, .th.folded .th-fold, .th:not(.folded) .th-more { display: none; }
.aisaw { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; }
.aisaw svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
/* жизнь записи: вопрос ИИ, дело (что висит), напоминания, версии */
.lifes { display: flex; flex-direction: column; gap: 6px; }
.life { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; font-size: 13px; overflow-wrap: anywhere; }
.life > svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--a-accent); }
.life-tx { flex: 0 1 auto; min-width: 0; font-weight: 500; }
.life .linkbtn { font-size: 12px; }
.life.done .life-tx, .life.muted { color: var(--a-muted); font-weight: 400; }
.life.done > svg { color: var(--a-ok); }
.life.muted > svg { color: var(--a-muted); }
.q { border: 1px solid var(--a-line2); border-left: 3px solid var(--a-accent); border-radius: 4px; padding: 8px 10px; background: var(--a-soft); }
.q-tx { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.q-tx svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--a-accent); }
.q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.st { font-size: 13px; color: var(--a-muted); font-style: italic; display: inline-flex; align-items: center; gap: 8px; }
.st-failed { color: var(--a-warn); font-style: normal; }
.st-hold { color: var(--a-secret); font-style: normal; }
.st-mini { font-size: 11px; color: var(--a-muted); font-style: italic; }
/* прогресс обработки (П1 «Сегменты», DESIGN.md): подпись шага, «2 из 4 · ≈ 12 с», сегменты по типичной длительности шагов */
.pgb { --c: var(--a-accent); display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; max-width: 420px; font-size: 13px; }
.pgb[data-s="retry"] { --c: var(--a-warn); }
.pgb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pgb-say { color: var(--a-ink); overflow-wrap: anywhere; }
.pgb[data-s="queue"] .pgb-say { color: var(--a-muted); font-style: italic; }
.pgb[data-s="retry"] .pgb-say { color: var(--c); }
.pgb-num { font: 11px var(--mono); color: var(--a-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgb-segs { display: flex; gap: 3px; }
.pgb-seg { position: relative; height: 4px; min-width: 8px; border-radius: 2px; background: var(--a-line2); overflow: hidden; }
.pgb-seg.done { background: var(--c); }
.pgb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); border-radius: inherit; overflow: hidden; }
.pgb[data-s="run"] .pgb-fill::after, .pgb[data-s="slow"] .pgb-fill::after {
  content: ""; position: absolute; inset: 0; width: 60%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a-accent-ink) 55%, transparent), transparent);
  animation: pgb-sheen 1.3s ease-in-out infinite;
}
.pgb[data-s="slow"] .pgb-fill { animation: pgb-breathe 1.6s ease-in-out infinite; }
.pgb[data-s="queue"] .pgb-segs { animation: pgb-breathe 1.8s ease-in-out infinite; }
.pgb[data-s="retry"] .pgb-fill { background: repeating-linear-gradient(-45deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 45%, transparent) 3px 6px); }
@keyframes pgb-sheen { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes pgb-breathe { 50% { opacity: .55; } }
/* компактный: «Карточки», «Входящие» — сегменты и «2/4», подпись в подсказке */
.pgb.mini { flex-direction: row; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 180px; }
.pgb.mini .pgb-segs { flex: 1; min-width: 48px; }
.pgb.mini .pgb-seg { height: 3px; min-width: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pgb .pgb-fill::after, .pgb[data-s="slow"] .pgb-fill, .pgb[data-s="queue"] .pgb-segs { animation: none; }
}
.tag { font: 12px/1.6 var(--mono); border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 0 6px; max-width: 100%; overflow-wrap: anywhere; text-align: left; color: var(--a-ink); }
button.tag:hover { border-color: var(--a-accent); color: var(--a-accent); }
.tag.on { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
.acts { display: inline-flex; gap: 2px; }
.gone-bar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-muted); background: var(--a-glass); border: 1px dashed var(--a-line2); border-radius: 4px; padding: 4px 10px; align-self: flex-start; }
.gone-bar svg { width: 15px; height: 15px; }
.cw { display: flex; flex-direction: column; gap: 2px; }
.clamp4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.cw.open .clamp4, .cw.open .clamp2 { display: block; -webkit-line-clamp: none; overflow: visible; }
.clamp6 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.more { font-size: 13px; align-self: flex-start; }

/* пересборка тегов: прежние теги приглушены, пока ИИ думает */
.tag.old { opacity: .5; cursor: default; }
button.tag.old:hover { border-color: var(--a-line); color: var(--a-ink); }

/* уточнения автора: под вложениями (или текстом), выше тегов */
.clars > summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--a-accent); border-radius: 4px; padding: 1px 6px 1px 4px; margin-left: -4px; }
.clars > summary::-webkit-details-marker { display: none; }
.clars > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin-left: 2px; transition: transform .15s; }
.clars[open] > summary::after { transform: rotate(45deg); margin-top: -3px; }
.clars > summary:hover { background: var(--a-soft); }
.clars > summary svg { width: 14px; height: 14px; }
.clar-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.clar { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 24px; align-items: start; gap: 8px; padding: 5px 4px 5px 10px; border-left: 2px solid var(--a-accent); background: var(--a-soft); border-radius: 0 4px 4px 0; font-size: 14px; }
.clar-ic { width: 14px; height: 14px; margin-top: 3px; color: var(--a-accent); }
.clar-tx { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.clar .cw .more { font-size: 12px; }
.clar time { font-size: 11px; color: var(--a-muted); font-variant-numeric: tabular-nums; padding-top: 3px; white-space: nowrap; }
.clar .act { width: 24px; height: 24px; margin-top: -1px; opacity: 0; transition: opacity .15s; }
.clar .act svg { width: 14px; height: 14px; }
.clar:hover .act, .clar:focus-within .act { opacity: 1; }
@media (hover: none) { .clar .act { opacity: 1; } }
.clar.gone { display: block; padding: 0; border: 0; background: none; }
.c-clar { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--a-accent); }
.c-clar svg { width: 13px; height: 13px; }

/* окно «Уточнить заметку» */
.clar-wrap { z-index: 80; }
.clar-dlg { width: min(520px, 100%); gap: 10px; }
.clar-head { display: flex; align-items: center; gap: 8px; }
.clar-head h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.clar-sub { margin: 0; font-size: 13px; color: var(--a-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clar-dlg textarea { width: 100%; resize: vertical; min-height: 84px; max-height: 50vh; border: 1px solid var(--a-line2); border-radius: 4px; background: var(--a-surface); padding: 8px 10px; line-height: 1.45; outline: none; }
.clar-dlg textarea:focus { border-color: var(--a-accent); }
.clar-dlg textarea::placeholder { color: var(--a-muted); }
.clar-hint { margin: 0; font-size: 12px; color: var(--a-muted); }
.clar-err { margin: 0; font-size: 13px; color: var(--a-danger); }
.clar-err:empty { display: none; }
.clar-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* индикатор ожидания: три точки */
.dots { display: inline-flex; gap: 3px; flex: none; }
.dots i { width: 5px; height: 5px; border-radius: 4px; background: var(--a-accent); animation: blink 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* фото: только миниатюры, клик — лайтбокс */
.photos { display: flex; flex-wrap: wrap; gap: 4px; }
.ph { display: block; border: 0; padding: 0; background: var(--a-soft); border-radius: 4px; overflow: hidden; position: relative; max-width: 100%; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .15s; }
.ph:hover img { filter: brightness(1.06); }
.ph img.broken, .r-p img.broken { visibility: hidden; }
.photos .ph { width: 200px; height: 150px; }
.photos.album .ph { width: 128px; height: 96px; }
.photos.sm .ph { width: 72px; height: 54px; }
.ph .more-n { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 600; font-size: 15px; }
/* видео и GIF — плитки альбома: кадр + ▶ + длительность (или «GIF»); играют в просмотрщике */
.clip-play { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; display: grid; place-items: center; pointer-events: none; }
.clip-play svg { width: 16px; height: 16px; margin-left: 2px; }
.photos.sm .clip-play { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.photos.sm .clip-play svg { width: 12px; height: 12px; margin-left: 1px; }
.clip-t { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 11px/16px var(--mono); font-variant-numeric: tabular-nums; pointer-events: none; }
.photos.sm .clip-t { right: 2px; bottom: 2px; font-size: 10px; line-height: 14px; padding: 0 3px; }
.photos.sm .clip-play + .clip-t { display: none; } /* в мелкой плитке журнала хватает ▶ */
/* видео YouTube: обложка 16:9 с ▶ и длительностью + название и канал; открывается на YouTube */
.yt { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; min-width: 0; }
.yt-pic { position: relative; flex: none; width: 240px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--a-soft); }
.yt-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s; }
.yt:hover .yt-pic img { filter: brightness(1.06); }
.yt-pic img.broken { visibility: hidden; }
.yt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.yt-t b { font-weight: 600; }
.yt:hover .yt-t b { text-decoration: underline; text-underline-offset: 3px; }
.yt-t small { font: 12px var(--mono); color: var(--a-muted); }
.yt.sm .yt-pic { width: 160px; }
.yt.in-card { flex-direction: column; gap: 0; }
.yt.in-card .yt-pic { width: 100%; border-radius: 0; }
.yt.in-card .yt-t { padding: 10px 12px 0; }
.r-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .25); color: #fff; }
.r-play svg { width: 14px; height: 14px; }

/* файлы */
.file { display: inline-flex; align-items: center; gap: 8px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 4px; padding: 5px 10px; font-size: 13px; color: var(--a-accent); text-decoration: none; max-width: 100%; width: fit-content; }
.file svg { width: 16px; height: 16px; flex: none; }
.file span { min-width: 0; overflow-wrap: anywhere; }
.aud { display: flex; flex-direction: column; gap: 2px; }
.aud small { color: var(--a-muted); font-size: 12px; overflow-wrap: anywhere; }

/* плеер голосового */
.vp { display: flex; align-items: center; gap: 10px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 4px; padding: 6px 10px 6px 6px; width: 100%; min-width: min(240px, 100%); max-width: 340px; --p: 0%; }
.vp-btn { width: 32px; height: 32px; flex: none; border-radius: 4px; border: 0; background: var(--a-accent); color: var(--a-accent-ink); display: grid; place-items: center; padding: 0; }
.vp-btn svg { width: 16px; height: 16px; }
.vp .ic-pause, .vp.on .ic-play { display: none; }
.vp.on .ic-pause { display: block; }
.vp-wave { flex: 1; min-width: 60px; height: 26px; position: relative; border: 0; padding: 0; background: none; }
.vp-wave::before, .vp-wave i { content: ""; position: absolute; inset: 0; -webkit-mask: var(--w) center / 100% 100% no-repeat; mask: var(--w) center / 100% 100% no-repeat; }
.vp-wave::before { background: var(--a-line2); }
.vp-wave i { background: var(--a-accent); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.vp-t { font: 12px var(--mono); color: var(--a-muted); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* кружок: круглое видео с кольцом прогресса */
/* высота всегда = ширине (aspect-ratio): анимируется только ширина — кружок сжимается и растёт ровным кругом */
.circ { --p: 0%; position: relative; width: 132px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 4px; background: conic-gradient(var(--a-accent) var(--p), var(--a-line2) 0); display: block; flex: none; }
.circ.sm { width: 96px; }
.circ video { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; background: var(--a-soft); }
.circ .c-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; transition: opacity .15s; }
.circ .c-play svg { width: 18px; height: 18px; }
.circ .ic-pause, .circ.on .ic-play { display: none; }
.circ.on .ic-pause { display: block; }
.circ.on .c-play { opacity: 0; }
.circ:hover .c-play, .circ:focus-visible .c-play { opacity: 1; }
.circ .vp-t { position: absolute; right: 2px; bottom: 6px; background: var(--a-menu); border-radius: 4px; padding: 0 5px; min-width: 0; }

/* подсветка заметки при переходе из ответа ИИ */
.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 2px var(--a-accent); background-color: var(--a-soft); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* заглушка выгруженной страницы: высота прежняя, внутри — ненавязчивые «строки» */
.jpage.off { background: repeating-linear-gradient(180deg, transparent 0 16px, var(--a-line) 16px 28px, transparent 28px 38px, var(--a-line) 38px 48px, transparent 48px 96px); background-clip: content-box; padding-left: 74px; }

/* ======================= Журнал по дням ======================= */
.jwrap { max-width: 780px; margin: 0 auto; }
/* липкий заголовок дня — один, поверх ленты; фон непрозрачный, снизу 4 px и растворение 14 px */
.jstick { position: sticky; top: 0; height: 0; z-index: 4; }
.jh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 -8px; padding: 14px 8px 4px;
  /* по бокам растворяется в поля (8 px) — на случай, если закреплённый фон не поддержан (iOS Safari) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent); }
/* прилипший: по бокам растворение 8 px, снизу 4 px отступа и 14 px растворения; сверху непрозрачный — иначе видна лента над ним */
.jh.stuck { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent), linear-gradient(#000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent), linear-gradient(#000 calc(100% - 14px), transparent);
  mask-composite: intersect; }
.jh b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.jh small { font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.jh + .je { border-top: 1px solid var(--a-line); }
.je { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--a-line); scroll-margin: 64px; border-radius: 0; }
.je-time { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 1px; }
.je-time time { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.je-time svg { width: 16px; height: 16px; color: var(--a-muted); }
.je-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.je-link { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.je-link b { font-weight: 600; }
.je-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.je-link small { font: 12px var(--mono); color: var(--a-accent); overflow-wrap: anywhere; }
.je-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 28px; }
.je-foot .acts { margin-left: auto; opacity: 0; transition: opacity .15s; }
.je:hover .je-foot .acts, .je:focus-within .je-foot .acts { opacity: 1; }
.je.gone .je-main { opacity: .8; }
@media (hover: none) { .je-foot .acts { opacity: 1; } }

/* ======================= Карточки (masonry) ======================= */
.cwrap { max-width: 1240px; margin: 0 auto; padding-top: 2px; }
.cpage { position: relative; }
.card { position: absolute; top: 0; left: 0; background: var(--a-me); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 4px 18px var(--a-shadow); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s; }
.card:hover { border-color: var(--a-line2); }
.card.gone { cursor: default; padding: 10px; background: none; box-shadow: none; border-style: dashed; }
.card.gone .gone-bar { border: 0; padding: 0; background: none; }
.c-media { display: block; }
.c-media .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.c-album { display: grid; grid-template-columns: repeat(var(--c, 3), 1fr); gap: 2px; }
.c-album .ph { aspect-ratio: 1; border-radius: 0; }
.c-album .ph:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.c-circ { display: flex; justify-content: center; padding: 14px 0 4px; }
.c-body { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-body:empty { display: none; }
.c-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.c-host { font: 12px var(--mono); color: var(--a-muted); overflow-wrap: anywhere; }
.c-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.c-link:hover .c-title { text-decoration: underline; text-underline-offset: 3px; }
.card .vp { max-width: none; }
.c-foot { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; padding: 6px 8px 8px 12px; margin-top: auto; }
/* теги — своей строкой на всю ширину; под ними время слева и кнопки справа: не делят одну строку */
.c-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; min-width: 0; }
.c-tags:empty { display: none; }
.c-foot time { font-size: 11px; color: var(--a-muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.c-foot .act { width: 26px; height: 26px; }

/* ======================= Входящие ======================= */
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--a-line); }
.sc.ib-list { padding: 0; border-right: 1px solid var(--a-line); }
.sc.ib-list:focus-visible { outline-offset: -2px; }
.ib-space { position: relative; }
.irow { --rh: 44px; position: absolute; left: 0; right: 0; top: 0; height: var(--rh); display: grid; grid-template-columns: 58px 20px minmax(0, 1fr) auto 32px; grid-template-areas: "d i t g p"; align-items: center; gap: 10px; padding: 0 12px 0 14px; border: 0; border-bottom: 1px solid var(--a-line); background: none; text-align: left; font-size: 14px; width: 100%; }
button.irow:hover { background: var(--a-row-hover); }
.irow.on { background: var(--a-soft); box-shadow: inset 3px 0 0 var(--a-accent); }
.irow:focus-visible { outline-offset: -2px; }
.irow .meta { display: contents; }
.r-d { grid-area: d; font-size: 12px; color: var(--a-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-ic { grid-area: i; color: var(--a-muted); display: grid; }
.r-ic svg { width: 18px; height: 18px; }
.r-t { grid-area: t; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-t b { font-weight: 500; }
.r-sn { color: var(--a-muted); }
.r-from { color: var(--a-accent); font-size: 12px; font-weight: 600; margin-right: 4px; }
.r-g { grid-area: g; display: flex; gap: 4px; white-space: nowrap; overflow: hidden; max-width: 210px; }
.r-g .tag { font-size: 11px; padding: 0 5px; }
.r-g .plus { font-size: 11px; color: var(--a-muted); align-self: center; }
.r-p { grid-area: p; width: 32px; height: 32px; border-radius: 4px; overflow: hidden; position: relative; }
.r-p:has(img) { background: var(--a-soft); }
.r-p.round { border-radius: 50%; background: var(--a-soft); }
.r-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-p i { position: absolute; right: 0; bottom: 0; font: 600 10px/14px var(--font); font-style: normal; padding: 0 3px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 4px 0 0 0; }
.irow.gone .r-t { text-decoration: line-through; color: var(--a-muted); }
.irow.gone .r-t b { font-weight: 400; }
.irow.skel { display: block; padding: 14px 16px 0 104px; pointer-events: none; }
.irow.skel i { display: inline-block; height: 12px; width: 42%; border-radius: 4px; background: var(--a-line); margin-right: 10px; }
.irow.skel i + i { width: 22%; }
.irow.tailrow { display: flex; gap: 8px; justify-content: center; font-size: 12px; color: var(--a-muted); border-bottom: 0; }
.ib-pane { min-height: 0; overflow: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.pane-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane-head .back { display: none; }
.pane-date { font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; flex: 1; min-width: 0; }
.msg { min-width: 0; background: var(--a-me); border: 1px solid var(--a-line); border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
.pane-msg { max-width: 100%; }
.pane-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pane-tags .acts { margin-left: auto; }
.pane-empty { margin: auto; color: var(--a-muted); text-align: center; }
.pane-msg .photos .ph { width: 240px; height: 180px; }
.pane-msg .photos.album .ph { width: 150px; height: 112px; }

/* ---------- заметка целиком: диалог ---------- */
.dlg-wrap { position: fixed; inset: 0; z-index: 70; background: var(--a-scrim); display: grid; place-items: center; padding: 16px; }
.dlg { width: min(620px, 100%); max-height: 100%; overflow: auto; background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 20px 60px var(--a-shadow2); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- лайтбокс ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: var(--a-lb); color: var(--a-lb-ink); display: flex; flex-direction: column; }
.lb-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.lb-count { font: 13px var(--mono); font-variant-numeric: tabular-nums; opacity: .8; }
.lb-cap { flex: 1; min-width: 0; font-size: 14px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb button { border: 0; background: var(--a-lb-btn); color: var(--a-lb-ink); border-radius: 4px; display: grid; place-items: center; padding: 0; }
.lb-x { width: 40px; height: 40px; }
.lb-x svg, .lb-nav svg { width: 22px; height: 22px; }
.lb-stage { flex: 1; min-height: 0; position: relative; touch-action: pan-y; }
.lb-img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 128px); max-height: 100%; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
/* видео — по размеру кадра (как фото), чтобы полоса управления не была шире картинки */
.lb-vid { min-width: min(320px, 100%); min-height: 180px; background: #000; }
.lb-nav { position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px; }
.lb-nav.prev { left: 12px; }
.lb-nav.next { right: 12px; }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-strip { flex: none; display: flex; gap: 6px; justify-content: center; padding: 12px 16px 16px; overflow-x: auto; }
.lb-strip:empty { padding: 8px; }
.lb-strip button { position: relative; width: 64px; height: 48px; overflow: hidden; opacity: .55; flex: none; outline-offset: 2px; }
.lb-strip .clip-play { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.lb-strip .clip-play svg { width: 11px; height: 11px; margin-left: 1px; }
.lb-strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--a-lb-ink); }
.lb-strip img { width: 100%; height: 100%; object-fit: cover; }
.lb button:focus-visible { outline: 2px solid var(--a-lb-ink); }

/* тултип кнопок-иконок (вместо нативного title) */
.tip { position: fixed; z-index: 100; max-width: min(280px, calc(100vw - 16px)); padding: 4px 8px; border-radius: 4px; background: var(--a-ink); color: var(--a-bg); font-size: 12px; line-height: 1.35; font-weight: 500; box-shadow: 0 6px 20px var(--a-shadow2); pointer-events: none; animation: tip-in .12s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(2px); } }
.tip.below { animation-name: tip-in-below; }
@keyframes tip-in-below { from { opacity: 0; transform: translateY(-2px); } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 95; max-width: calc(100% - 32px); background: var(--a-ink); color: var(--a-bg); border-radius: 4px; padding: 8px 14px; font-size: 14px; box-shadow: 0 8px 30px var(--a-shadow2); }

/* ---------- вход ---------- */
.login { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); background: var(--a-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 12px 40px var(--a-shadow2); padding: 32px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login-card .btn { justify-content: center; }
.login-mark { width: 56px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: var(--a-accent); color: var(--a-accent-ink); }
.login-mark svg { width: 38px; height: 38px; }
.login-card h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.login-lead { margin: 0; color: var(--a-muted); text-wrap: balance; }
.tg-widget { min-height: 44px; display: grid; place-items: center; }
.login-err { margin: 0; color: var(--a-danger); font-size: 14px; font-weight: 500; }
.login-err:empty { display: none; }
.login-note { margin: 0; font-size: 12px; color: var(--a-muted); }
.login-bot { width: 100%; max-width: 280px; min-height: 44px; font-size: 15px; }
.login-wait { margin: 0; font-size: 14px; color: var(--a-muted); }
.login-wait:empty { display: none; }
.login-wait a { color: var(--a-accent); }
.login-warn { margin: 0; font-size: 13px; color: var(--a-muted); text-wrap: pretty; border-left: 3px solid var(--a-accent); padding: 4px 0 4px 10px; text-align: left; }
.demo-tag { align-self: flex-start; width: fit-content; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--a-accent); background: var(--a-soft); border-radius: 4px; padding: 1px 6px; }
/* окно «Инвайты» */
.inv-new { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inv-for { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--a-muted); }
.inv-label { font: inherit; font-size: 15px; color: var(--a-ink); background: var(--a-surface); border: 1px solid var(--a-line2); border-radius: 4px; padding: 7px 10px; min-width: 0; }
.inv-label:focus { outline: 2px solid var(--a-accent); outline-offset: 1px; }
.inv-fresh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-fresh:empty { display: none; }
.inv-url { font: 13px/1.5 var(--mono); background: var(--a-soft); border-radius: 4px; padding: 4px 8px; overflow-wrap: anywhere; flex: 1 1 240px; }
.inv-list { display: flex; flex-direction: column; border-top: 1px solid var(--a-line); }
.inv-row { display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--a-line); font-size: 14px; }
.inv-row b { font-weight: 600; overflow-wrap: anywhere; }
.inv-st { color: var(--a-muted); font-size: 13px; flex: 1 1 auto; }
.inv-acts { display: flex; gap: 12px; }
.inv-acts .linkbtn { font-size: 13px; }
.inv-expired, .inv-revoked { opacity: .6; }
.inv-blocked .inv-st { color: var(--a-danger); }
/* вводная демо (demo.js): та же карточка входа, шире и с колонками */
.login.demo { align-content: start; }
.demo-card { width: min(720px, 100%); align-items: stretch; text-align: left; gap: 16px; padding: 28px 28px 24px; }
.demo-head { display: flex; align-items: center; gap: 14px; }
.demo-ttl { flex: 1; min-width: 0; }
.demo-card h1 { font-size: 24px; display: flex; align-items: center; }
.demo-sub { margin: 2px 0 0; color: var(--a-muted); font-size: 14px; }
.demo-lang { border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 5px 9px; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--a-muted); }
.demo-lang:hover { border-color: var(--a-accent); color: var(--a-accent); }
.demo-lead { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.demo-card h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--a-muted); }
.demo-try { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.demo-try li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.demo-try li b { font-weight: 600; }
.demo-ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--a-accent); }
.demo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.demo-cols section { display: flex; flex-direction: column; gap: 8px; }
.demo-cols p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--a-muted); text-wrap: pretty; }
.demo-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-stack code { font: 12px/1.6 var(--mono); background: var(--a-soft); border-radius: 4px; padding: 1px 7px; color: var(--a-ink); }
.demo-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--a-line); }
.demo-go { min-height: 44px; font-size: 15px; padding: 8px 18px; }
.demo-go svg { width: 18px; height: 18px; }
.demo-note { font-size: 12.5px; color: var(--a-muted); }
@media (max-width: 560px) { .demo-cols { grid-template-columns: 1fr; } .demo-card { padding: 22px 18px 18px; } }
.login-or { margin: 6px 0 -4px; font-size: 12px; color: var(--a-muted); display: flex; align-items: center; gap: 10px; width: 100%; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--a-line); }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; z-index: 35; left: 0; top: 0; bottom: 0; width: min(320px, 86%);
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--a-bg) 82%, transparent);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .2s, visibility 0s .2s;
  }
  .rail.open { transform: none; visibility: visible; transition: transform .2s; }
  /* на телефоне сайдбар выезжает целиком — сворачивания нет */
  .fold { display: none; }
  .shell.mini .ipanel { display: flex; }
  .shell.mini .brand-t { display: flex; }
  .shell.mini .brand { padding: 0 12px; justify-content: flex-start; }
  .railbtn { display: grid; }
  .top { display: flex; gap: 8px; padding: 0 12px; }
  .top .search { flex: 1; }
  .top .tright { margin-left: 0; }
  .railbtn { width: 36px; height: 36px; }
  .search input, .pill textarea, .rq { font-size: 16px; } /* iOS не зумит при фокусе */
  .over { padding: 8px 12px 0; }
  .vbar { padding: 8px 12px 6px; }
  .vbar-in { align-items: flex-start; }
  .vcount { padding-top: 6px; }
  .vcount .fbar { padding-top: 4px; padding-bottom: 4px; }
  .compose { padding: 0 12px 8px; }
  .send { width: 39px; height: 39px; }
  .pill { padding: 2px; }
  .sc { padding: 0 12px 16px; }
  .photos .ph { width: 100%; max-width: 260px; height: auto; aspect-ratio: 4 / 3; }
  .photos.album .ph { width: calc(50% - 2px); max-width: 130px; height: auto; aspect-ratio: 4 / 3; }
  .photos.sm .ph { width: 64px; height: 48px; aspect-ratio: auto; }
  .je { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .je-foot .acts { opacity: 1; }
  .jpage.off { padding-left: 56px; }
  .c-foot { padding-left: 10px; }
  .c-tags .tag { overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* входящие: две строки, заметка — на весь экран с «Назад» */
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .sc.ib-list { border-right: 0; }
  .irow { --rh: 64px; grid-template-columns: 20px minmax(0, 1fr) 40px; grid-template-areas: "i t p" "i m p"; grid-template-rows: auto auto; align-content: center; gap: 2px 10px; padding: 0 12px; }
  .irow .meta { display: flex; grid-area: m; gap: 8px; align-items: center; min-width: 0; overflow: hidden; }
  .r-g { max-width: none; min-width: 0; }
  .r-p { width: 40px; height: 40px; }
  .irow.skel { padding: 16px 12px 0 42px; }
  .ib-pane { position: fixed; inset: 0; z-index: 50; background: var(--a-bg); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
  .ib-pane.open { transform: none; visibility: visible; transition: transform .2s; }
  .pane-head .back { display: inline-flex; }
  .pane-msg .photos .ph { width: 100%; max-width: 100%; }
  .yt { flex-direction: column; gap: 6px; }
  .yt-pic, .yt.sm .yt-pic { width: 100%; max-width: 320px; }
  .pane-msg .photos.album .ph { width: calc(50% - 2px); }
  .lb-img { max-width: calc(100% - 16px); }
  .lb-nav { display: none !important; }
  .dlg-wrap { padding: 0; }
  .dlg { width: 100%; height: 100%; border-radius: 0; }
  .clar-wrap { padding: 12px; place-items: end stretch; }
  .clar-dlg { height: auto; border-radius: 4px; }
  .clar-dlg textarea { font-size: 16px; }
}

/* кружок: во время воспроизведения растёт, чтобы было видно, что на видео; после — возвращается */
.circ { transition: width .25s ease; }
.circ.on, .circ.sm.on { width: min(320px, 72vw); }
.circ.on .vp-t { bottom: 14px; right: 14px; }
/* в карточке — не шире самой карточки (доска перекладывается под новую высоту) */
.card .circ.on { width: min(320px, calc(100% - 24px)); }
@media (prefers-reduced-motion: reduce) { .circ { transition: none; } }

/* ================= поиск за лупой, карандаш, окно новой заметки, свайп, правка (2026-09-25) ================= */
/* поиск свёрнут в лупу у кебаба; раскрывается над колонкой (компьютер) или на всю шапку (телефон) */
.top .search { display: none; }
.top.s-open .search { display: flex; animation: s-in .16s ease-out; transform-origin: right center; }
@keyframes s-in { from { opacity: 0; transform: scaleX(.6); } }
.sbtn { position: relative; }
.top.s-open .sbtn { display: none; }
.top .sx { display: none; }
.me.sbtn svg { width: 20px; height: 20px; }

/* кнопка «Новая заметка» — только телефон */
.fab { display: none; }

/* тост: значок + текст + действие; ошибки — красным значком */
.toast { display: flex; align-items: center; gap: 8px; }
.toast svg { width: 16px; height: 16px; flex: none; color: var(--a-danger); }
.toast.ok svg { color: color-mix(in srgb, var(--a-accent) 55%, #fff); }
.toast .t-act { margin-left: 6px; border: 0; background: none; padding: 0; color: color-mix(in srgb, var(--a-accent) 55%, #fff); font-weight: 600; font-size: inherit; }

/* окно новой заметки: телефон — на весь экран, компьютер — большое по центру; в нём живёт то же поле .compose */
.cz { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 85; display: flex; flex-direction: column; background:
    radial-gradient(55% 45% at 8% 0%, var(--a-au1), transparent 70%), radial-gradient(60% 55% at 60% 100%, var(--a-au3), transparent 70%), var(--a-bg);
  padding-top: env(safe-area-inset-top, 0px); }
.cz[hidden] { display: none; }
.cz-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (min-width: 761px) {
  .cz { background: var(--a-scrim); padding: 6vh 16px; align-items: center; }
  .cz-box { width: min(900px, 100%); background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 20px 60px var(--a-shadow2); overflow: hidden; }
  .cz .pill textarea { font-size: 15px; }
}
.cz-head, .ed-h { flex: none; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--a-line); background: var(--a-glass); }
.cz-head h2, .ed-h h2 { margin: 0; font-size: 16px; font-weight: 600; }
.cz-cancel, .ed-cancel { justify-self: start; border: 0; background: none; padding: 8px; font-size: 15px; font-weight: 500; }
.cz-go, .ed-savetop { justify-self: end; border: 0; border-radius: 4px; background: var(--a-accent); color: var(--a-accent-ink); padding: 7px 14px; font-weight: 600; font-size: 15px; }
.cz-go:disabled, .ed-savetop:disabled { opacity: .45; }
.cz-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cz-note { flex: none; margin: 10px 12px 0; display: flex; align-items: center; gap: 8px; font-size: 13px; border-radius: 4px; padding: 7px 10px; background: var(--a-soft); }
.cz-note svg { width: 16px; height: 16px; color: var(--a-accent); flex: none; }
.cz-note .linkbtn { margin-left: auto; font-size: 13px; }
.cz .compose { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.cz .compose .crow { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; display: flex; align-items: stretch; }
.cz .compose .send { display: none; }
.cz .pill { flex: 1; display: grid; align-items: stretch; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; border-radius: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.cz .pill:focus-within { box-shadow: none; }
.cz .cin { display: contents; }
.cz .pill textarea { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto !important; min-height: 0; max-height: none; overflow-y: auto; padding: 14px 16px; font-size: 16px; line-height: 1.5; }
.cz .attbtn { grid-column: 1; grid-row: 2; width: 44px; height: 44px; margin: 4px; }
.cz .atts { grid-column: 2; grid-row: 2; display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; padding: 4px 8px 4px 0; min-height: 52px; }
.cz .pill::after { content: attr(data-limit); grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-size: 12px; color: var(--a-muted); }
.cz .pill:has(.atts:not([hidden]))::after { display: none; }
.cz .att { flex: none; }
.cz .pill .attbtn, .cz .pill .atts, .cz .pill::after { border-top: 1px solid var(--a-line); background: var(--a-glass); }
.cz .pill .attbtn { margin: 0; width: 52px; height: 52px; border-radius: 0; }
.cz .hint { order: -1; max-width: none; margin: 10px 12px 0; padding: 7px 10px; border-radius: 4px; background: color-mix(in srgb, var(--a-danger) 9%, transparent); border-left: 3px solid var(--a-danger); }

/* свайп строки (телефон): под строкой — «Изменить» и «Удалить» */
.swl { position: absolute; z-index: 0; display: flex; justify-content: flex-end; overflow: hidden; background: var(--a-danger); pointer-events: none; }
.swl.on { pointer-events: auto; }
.swl button { width: 72px; flex: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; font-size: 12px; font-weight: 600; padding: 0; }
.swl button svg { width: 19px; height: 19px; }
.swl .sw-ed { background: #5d6b77; }
.swl .sw-del { background: var(--a-danger); }
.swl.full .sw-ed { display: none; }
.swl.narrow { flex-direction: column; align-items: flex-end; }
.swl.narrow button { flex: 1; width: 72px; }
.swl.narrow.full .sw-del { width: 100%; }
.pane-tags .act.edit { display: none; }   /* в открытой заметке «Изменить» — в шапке */
.swl.full .sw-del { flex: 1; width: auto; align-items: flex-start; padding-left: 18px; }
.swiping { position: relative; z-index: 1; background: var(--a-bg) !important; box-shadow: 6px 0 14px -8px var(--a-shadow2), 1px 0 0 var(--a-line); }
.swiping.card { background: linear-gradient(var(--a-me), var(--a-me)), var(--a-bg) !important; }
.jpage { position: relative; }

/* правка заметки: диалог (компьютер) / на весь экран (телефон) */
.ed-wrap { position: fixed; inset: 0; z-index: 86; background: var(--a-scrim); display: grid; place-items: center; padding: 16px; }
.ed-wrap[hidden] { display: none; }
.ed { position: relative; width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--a-menu); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 20px 60px var(--a-shadow2); overflow: hidden; }
.ed-h { display: flex; gap: 10px; padding: 8px 8px 8px 18px; background: none; }
.ed-h h2 { flex: 1; }
.ed-h small { color: var(--a-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ed-cancel, .ed-savetop { display: none; }
.ed-b { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.ed-sec { display: flex; flex-direction: column; gap: 7px; }
.ed-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
.ed-l em { font: 400 12px var(--font); font-style: normal; letter-spacing: 0; text-transform: none; text-align: right; }
.ed-l em .linkbtn { font-size: 12px; }
.ed textarea { width: 100%; resize: none; border: 1px solid var(--a-line2); border-radius: 4px; background: var(--a-surface); padding: 8px 10px; line-height: 1.5; outline: none; overflow-y: hidden; }
.ed textarea:focus { border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-soft); }
.ed textarea::placeholder { color: var(--a-muted); }
.ed-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--a-muted); }
.ed-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ed-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-files .att { padding-right: 30px; }
.ed-files .att.pic { padding: 0; }
.ed-files .att.rm { opacity: .55; border-style: dashed; padding-right: 64px; }
.ed-files .att.rm .att-t b { text-decoration: line-through; }
.ed-files .att.pic.rm { width: auto; padding: 0 8px 0 0; display: flex; gap: 6px; }
.ed-files .att.pic.rm img { width: 48px; opacity: .5; }
.ed-files .att .undo { position: absolute; top: 4px; right: 6px; border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--a-accent); }
.ed-files .att.pic.rm .undo { position: static; }
.ed-add { height: 48px; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--a-line2); border-radius: 4px; background: none; padding: 0 12px; color: var(--a-accent); font-weight: 600; font-size: 13px; }
.ed-add svg { width: 16px; height: 16px; }
.chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 2px; font: 12px/1.6 var(--mono); border: 1px solid var(--a-line2); background: var(--a-surface); border-radius: 4px; padding: 0 2px 0 7px; }
.chip button { width: 20px; height: 20px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--a-muted); border-radius: 3px; }
.chip button:hover { color: var(--a-danger); }
.chip button svg { width: 12px; height: 12px; }
.chips.lock .chip { border-color: var(--a-accent); color: var(--a-accent); background: var(--a-soft); }
.tag-add { width: 150px; font: 12px/1.6 var(--mono); border: 1px dashed var(--a-line2); border-radius: 4px; background: none; padding: 1px 8px; outline: none; }
.tag-add:focus { border: 1px solid var(--a-accent); background: var(--a-surface); }
.sugg { position: absolute; z-index: 5; top: calc(100% + 4px); min-width: 200px; max-width: 100%; background: var(--a-menu); border: 1px solid var(--a-line); border-radius: 4px; box-shadow: 0 12px 36px var(--a-shadow2); padding: 4px; display: flex; flex-direction: column; }
.sugg button { display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; border-radius: 4px; padding: 5px 8px; font: 12.5px var(--mono); text-align: left; }
.sugg button small { color: var(--a-muted); font-family: var(--font); }
.sugg button[aria-selected="true"], .sugg button:hover { background: var(--a-soft); }
.ed-clar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; border-left: 2px solid var(--a-accent); background: var(--a-soft); padding: 6px 6px 8px 10px; border-radius: 0 4px 4px 0; }
.ed-clar time { font-size: 11px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.ed-clar textarea { grid-column: 1; background: var(--a-surface); font-size: 14px; }
.ed-clar .x { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.ed-clar.rm { opacity: .6; background: none; border-left-style: dashed; }
.ed-clar.rm textarea { text-decoration: line-through; }
.ed-clar .undo { border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--a-accent); }
.ed-addclar { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 2px 0; color: var(--a-accent); font-weight: 600; font-size: 13.5px; }
.ed-addclar svg { width: 15px; height: 15px; }
.ed-warn { flex: none; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 8px 18px; color: color-mix(in srgb, var(--a-warn) 80%, var(--a-ink)); background: color-mix(in srgb, var(--a-warn) 9%, transparent); border-top: 1px solid var(--a-line); }
.ed-warn.err { color: var(--a-danger); background: color-mix(in srgb, var(--a-danger) 8%, transparent); }
.ed-warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.ed-f { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 18px; border-top: 1px solid var(--a-line); }
.ed-f .kh { flex: 1; font-size: 12px; color: var(--a-muted); }
.ed-uns { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 18px; background: var(--a-ink); color: var(--a-bg); }
.ed-uns[hidden] { display: none; }
.ed-uns > span { flex: 1; }
.ed-uns .lw-s { display: none; }
.ed-uns .btn { background: transparent; color: color-mix(in srgb, var(--a-danger) 45%, #fff); border-color: rgba(255, 255, 255, .22); }
.ed-uns .btn.pri { background: var(--a-bg); color: var(--a-ink); border-color: var(--a-bg); }

@media (max-width: 760px) {
  /* поиск: лупа справа; раскрытый — на всю шапку, бургер и кебаб прячутся, справа «×» */
  .top.s-open .railbtn, .top.s-open .me-wrap, .top.s-open .tbtn { display: none; }
  .top.s-open .sx { display: grid; }
  .top.s-open .search { flex: 1; }
  .top .tright { margin-left: auto; }
  .top.s-open .tright { margin-left: 0; }
  .search .askbtn .al { display: none; }
  .search .askbtn { padding: 6px 8px; }

  /* поле «Новая заметка…» наверху — только на компьютере; на телефоне — карандаш в углу */
  .main > .compose { display: none; }
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 75;
    width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; background: var(--a-accent); color: var(--a-accent-ink);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--a-accent) 60%, transparent), 0 4px 10px var(--a-shadow2);
    transition: transform .2s ease, opacity .2s ease; }
  .fab svg { width: 24px; height: 24px; }
  .fab.away { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }
  body:has(.rail.open, .lb:not([hidden]), .clar-wrap:not([hidden]), .top.s-open, .cz:not([hidden]), .ed-wrap:not([hidden])) .fab { display: none; }
  /* запас под лентой: последняя запись и её кнопки — выше карандаша */
  .sc, .dlg:not(.clar-dlg) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .ib-pane { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .sc.ib-list { padding-bottom: 0; }
  .ib-space { margin-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* тосты — на время под шапкой, на всю ширину */
  .toast { top: calc(env(safe-area-inset-top, 0px) + 62px); bottom: auto; left: 12px; right: 12px; transform: none; max-width: none; animation: toast-in .2s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }

  /* корзина у записи — только на компьютере; на телефоне удаление свайпом */
  .acts .act.del, .c-foot .act.del { display: none; }
  .je, .card, .irow { touch-action: pan-y; }

  /* правка на весь экран, как окно новой заметки */
  .ed-wrap { padding: 0; background: var(--a-bg); }
  .ed { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .ed-h { display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 8px; background: var(--a-glass); }
  .ed-h small, .ed-h .ed-x { display: none; }
  .ed-cancel, .ed-savetop { display: block; }
  .ed-f { display: none; }
  .ed-warn { order: 1; margin: 10px 12px 0; border: 0; border-left: 3px solid var(--a-warn); border-radius: 4px; padding: 8px 10px; }
  .ed-warn.err { border-left-color: var(--a-danger); }
  .ed-b { order: 2; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .ed textarea, .tag-add { font-size: 16px; }
  .tag-add { width: 140px; }
  .ed-uns { top: env(safe-area-inset-top, 0px); bottom: auto; height: 52px; padding: 0 10px 0 14px; }
  .ed-uns .btn { padding: 6px 10px; }
  .ed-uns .lw-l { display: none; }
  .ed-uns .lw-s { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .fab, .top.s-open .search { transition: none; animation: none; } }

/* ================= страница /users — люди и расход (только админ) ================= */
#app.users-mode > .shell, #app.users-mode > .fab, #app.users-mode > .scrim { display: none; }
.menu-hr { border: 0; border-top: 1px solid var(--a-line); margin: 3px 0; }
.users { flex: 1; min-height: 0; overflow-y: auto; }
.users.busy .u-body { opacity: .6; transition: opacity .2s; }
.u-top { position: sticky; top: 0; z-index: 5; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--a-line);
  background: var(--a-glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.u-top h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.u-top .sp { flex: 1; }
.u-back { display: inline-flex; }
.seg { display: inline-flex; border: 1px solid var(--a-line2); border-radius: 4px; overflow: hidden; background: var(--a-surface); }
.seg button { border: 0; border-left: 1px solid var(--a-line2); background: none; padding: 5px 11px; font-size: 13px; font-weight: 500; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 600; }
.seg button { white-space: nowrap; }
.seg .s { display: none; }
.u-body { max-width: 1160px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.u-wait, .u-err { color: var(--a-muted); padding: 40px 0; text-align: center; }
.u-tiles { display: grid; grid-template-columns: 1.35fr 1fr 1.25fr; gap: 12px; }
.u-tile { border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.u-tl { display: flex; justify-content: space-between; gap: 8px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
.u-since { font: 400 11.5px var(--font); letter-spacing: 0; text-transform: none; }
.u-big { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.u-big b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.u-big small { display: block; font-size: 12px; color: var(--a-muted); margin-top: 3px; }
.u-big b.bad, .u-q b.bad { color: var(--a-danger); }
.u-q b.warn { color: var(--a-warn); }
.u-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; border-bottom: 1px solid var(--a-line2); }
.u-bars i { flex: 1; min-width: 0; background: var(--a-accent); opacity: .8; border-radius: 2px 2px 0 0; }
.u-bars i.now { opacity: 1; }
.u-axis { display: flex; gap: 3px; font-size: 10.5px; color: var(--a-muted); font-variant-numeric: tabular-nums; margin-top: -4px; }
.u-axis span { flex: 1; min-width: 0; white-space: nowrap; overflow: visible; }
.u-q { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; border-bottom: 1px dashed var(--a-line); }
.u-q b { font-variant-numeric: tabular-nums; }
.u-meta { margin: 0; font-size: 12.5px; color: var(--a-muted); }
.u-str { display: flex; flex-direction: column; font-size: 12.5px; }
.u-str > div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--a-line); }
.u-str > div:last-child { border-bottom: 0; }
.u-str code { font: 11.5px var(--mono); color: var(--a-muted); }
.u-str > div > span:last-child { color: var(--a-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.u-ph h2 { margin: 0; font-size: 15px; font-weight: 700; }
.u-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--a-muted); }
.u-legend span { display: inline-flex; align-items: center; gap: 5px; }
.u-legend i { width: 9px; height: 9px; border-radius: 2px; }
.k-text { background: #0f8f80; } .k-voice { background: #60a5fa; } .k-media { background: #f59e0b; } .k-link { background: #a78bfa; } .k-doc { background: #94a3b8; }
.u-thead, .u-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 150px; gap: 10px 14px; align-items: center; }
.u-thead { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); padding: 6px 10px; border-bottom: 1px solid var(--a-line2); }
.u-row { padding: 10px; border-bottom: 1px solid var(--a-line); font-size: 13.5px; }
.u-row.blk > :not(.u-act) { opacity: .5; }
.u-row.confirm { background: color-mix(in srgb, var(--a-danger) 7%, transparent); }
.u-who b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; }
.u-who small { display: block; font-size: 12px; color: var(--a-muted); overflow-wrap: anywhere; }
.u-role { font: 600 10.5px var(--mono); color: var(--a-accent); background: var(--a-soft); border-radius: 3px; padding: 0 5px; }
.u-notes b, .u-ai b { font-size: 15px; font-variant-numeric: tabular-nums; }
.u-notes small, .u-ai small { color: var(--a-muted); font-size: 12px; }
.u-mix { display: flex; height: 6px; width: 100%; max-width: 160px; border-radius: 3px; overflow: hidden; margin-top: 5px; background: var(--a-line); }
.u-share { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.u-sbar { width: 90px; height: 6px; background: var(--a-line); border-radius: 3px; overflow: hidden; }
.u-sbar i { display: block; height: 100%; background: var(--a-accent); }
.u-qs { display: flex; flex-wrap: wrap; gap: 4px; }
.u-pill { display: inline-flex; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.u-pill.bad { background: color-mix(in srgb, var(--a-danger) 12%, transparent); color: var(--a-danger); }
.u-pill.warn { background: color-mix(in srgb, var(--a-warn) 12%, transparent); color: var(--a-warn); }
.u-pill.ok { background: color-mix(in srgb, var(--a-ok) 12%, transparent); color: var(--a-ok); }
.u-pill.mut { background: var(--a-line); color: var(--a-muted); font-weight: 500; }
.u-act { justify-self: end; }
.u-danger { color: var(--a-danger); }
.u-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.u-confirm > span:first-child { flex: 1; min-width: 220px; }
.u-cbtns { display: flex; gap: 8px; }
.u-yes { background: var(--a-danger); border-color: var(--a-danger); color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .u-top { gap: 8px; padding: 0 12px; padding-top: env(safe-area-inset-top, 0px); height: calc(54px + env(safe-area-inset-top, 0px)); flex-wrap: nowrap; }
  .u-top h1 { font-size: 16px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .u-top .seg, .u-top .me-wrap { flex: none; }
  .u-back .u-bl { display: none; }   /* на телефоне у «назад» только стрелка — место вкладкам и кебабу */
  .u-back { padding: 6px 8px; }
  .seg button { padding: 5px 9px; }
  .seg .l { display: none; }
  .seg .s { display: inline; }
  .u-body { padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .u-tiles { grid-template-columns: minmax(0, 1fr); }
  .u-big b { font-size: 22px; }
  .u-thead { display: none; }
  .u-list { display: flex; flex-direction: column; gap: 10px; }
  .u-row { grid-template-columns: minmax(0, 1fr) auto !important; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; padding: 10px 12px; }
  .u-who { grid-column: 1; grid-row: 1; }
  .u-act { grid-column: 2; grid-row: 1; align-self: start; }
  .u-notes, .u-ai, .u-qs { grid-column: 1 / -1; }
  .u-mix { max-width: none; }
  .u-row.confirm { border-color: color-mix(in srgb, var(--a-danger) 35%, transparent); }
  .u-confirm .u-cbtns { margin-left: auto; }
}

/* ответ ИИ целиком: пока он показан, прокручивается вся колонка — ответ, под ним лента во всю высоту */
.main.has-ans { overflow-y: auto; overflow-x: clip; }
.main.has-ans > .stage { flex: 0 0 100%; }
.main.has-ans .sc { overscroll-behavior-y: auto; }   /* лента дошла до верха — дальше едет колонка, к ответу */

/* ================= приложение на телефоне (PWA): без сети, очередь, установка ================= */
.net { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 12.5px; border-bottom: 1px solid var(--a-line); }
.net svg { width: 15px; height: 15px; flex: none; }
.net.off { background: #26313a; color: #eef2f5; border-bottom-color: transparent; }
.net.off b { color: #ffd9a8; font-weight: 600; }
.net.on { background: var(--a-soft); color: var(--a-ink); }
/* без сети — что требует сервера, приглушено (нажатие объясняет тостом) */
html.offline .act.edit, html.offline .act.del, html.offline .act.clr, html.offline .askbtn, html.offline .pane-edit,
html.offline .clar-del { opacity: .4; }
.fl-off { font-size: 12px; color: var(--a-muted); }
/* очередь новых заметок — над лентой, в стиле записи журнала */
.outbox { flex: none; padding: 0 16px; max-height: 40%; overflow: auto; }
.outbox .je { max-width: min(var(--colw), 780px); margin: 0 auto; }
.outbox .je:first-child { border-top: 0; }
.ob-files { font-size: 12.5px; color: var(--a-muted); }
.ob-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--a-muted); font-style: italic; }
.ob-st.wait { color: var(--a-warn); font-style: normal; font-weight: 500; }
.ob-st svg { width: 14px; height: 14px; }
.je.ob.fail { background: color-mix(in srgb, var(--a-danger) 5%, transparent); }
.ob-fail { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12.5px; color: var(--a-danger); font-weight: 600; }
.ob-fail .linkbtn { font-size: 12.5px; }
/* плашка «Установить» */
.install-slot:empty { display: none; }
.install { margin: 8px 12px 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 10px 8px 10px 12px;
  border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 4px; box-shadow: 0 6px 20px var(--a-shadow2); font-size: 13.5px; }
.install-logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--a-accent); color: var(--a-accent-ink); }
.install-logo svg { width: 24px; height: 24px; }
.install-t { line-height: 1.3; font-weight: 500; }
.install-t small { display: block; color: var(--a-muted); font-size: 12px; font-weight: 400; }
.install .btn { grid-column: 2; grid-row: 2; justify-self: start; }
.install-x { grid-column: 3; grid-row: 1; align-self: start; }
/* подсказка iPhone */
.ios-wrap { position: fixed; inset: 0; z-index: 96; background: var(--a-scrim); }
.ios-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--a-menu); border-radius: 16px 16px 0 0; padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; }
.ios-sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--a-line2); align-self: center; }
.ios-sheet h2 { margin: 0; font-size: 17px; }
.ios-sheet p { margin: 0; font-size: 13.5px; color: var(--a-muted); }
.ios-sheet .btn { align-self: flex-end; }
.ios-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.ios-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.ios-steps li::before { content: counter(s); width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--a-soft); color: var(--a-accent); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.ios-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--a-soft); color: #0a84ff; display: grid; place-items: center; flex: none; }
.ios-ic svg { width: 17px; height: 17px; }
/* стрелка вниз — к «Поделиться» в панели Safari (она под страницей, в самом низу экрана) */
.ios-arrow { position: absolute; left: 50%; bottom: 4px; width: 2px; height: 22px; margin-left: -1px; background: #fff; z-index: 2; }
.ios-arrow::after { content: ""; position: absolute; left: -5px; bottom: -2px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
@media (max-width: 760px) { .outbox { padding: 0 12px; } .net { padding: 7px 12px; } }
@media (max-width: 760px) { html.offline .toast { top: calc(env(safe-area-inset-top, 0px) + 98px); } }   /* под полосой «Нет сети» */
.ob-st.up { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-style: normal; color: var(--a-ink); width: min(260px, 100%); }
.ob-bar { display: block; height: 3px; border-radius: 2px; background: var(--a-line); overflow: hidden; }
.ob-bar b { display: block; height: 100%; width: 0; background: var(--a-accent); transition: width .2s; }
/* неотправленные в ленте */
.je.local.fail { background: color-mix(in srgb, var(--a-danger) 5%, transparent); }
.card.local { border-style: dashed; }
.st-mini.bad { color: var(--a-danger); font-style: normal; font-weight: 600; }
.ob-files { display: inline-flex; align-items: center; gap: 5px; }
.ob-files svg { width: 14px; height: 14px; }
.tr-l { font-weight: 600; }
.stk { display: block; width: 128px; max-width: 100%; height: auto; max-height: 128px; object-fit: contain; background: none; }
.stk-e { font-size: 56px; line-height: 1; width: auto; }
.tm .vp { width: 300px; max-width: 100%; }   /* в переписке без пузыря плеер не сжимается до кнопки */
.bub.with-media > .photos, .bub.with-media > .vp, .bub.with-media > .file { margin: 2px 0 6px; }
.bub.with-media > .transcript { margin: 0 0 6px; }
.tm .cw { margin: 0 4px; max-width: 420px; }
.tm .cw .transcript { margin: 0; }
.tm.mine .cw { align-items: flex-end; text-align: right; }
/* описание и текст картинки — под ней */
.bub.with-media > .media-desc, .bub.with-media > .cw, .bub.with-media > .sp { margin: 0 0 6px; font-size: 13px; }
.tm > .media-desc, .tm > .sp, .tm > .cw:has(.media-desc) { margin: 0 4px; font-size: 13px; max-width: 420px; }
.c-body > .media-desc, .c-body > .cw:has(.media-desc) { font-size: 13px; }

/* ---------- Подтверждение на месте — компонент дизайн-системы (DESIGN.md) ---------- */
.linkbtn.bad { color: var(--a-danger); }
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--a-danger); font-size: 13px; }

/* ---------- корзина: пункт внизу «Типов», лента из удалённых ---------- */
/* значок корзины в шапке — включён, как тип в сайдбаре */
.me.kebab.tbtn[aria-pressed="true"] { background: var(--a-soft); color: var(--a-accent); border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-line)); }
.je.in-trash { cursor: pointer; }
.je.in-trash:hover { background: var(--a-row-hover); }
.trash-mode .compose { display: none; }
.trash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--a-muted); }
.trash-bar .tb-t { color: var(--a-ink); font-weight: 600; }
.trash-bar .soon, .trash-line .soon { color: var(--a-warn); font-weight: 600; }
.trash-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; width: 100%; font-size: 12.5px; color: var(--a-muted); }
.trash-acts { display: inline-flex; gap: 14px; margin-left: auto; }
.trash-acts .linkbtn, .trash-line .confirm { font-size: 13px; }
/* сама заметка в корзине приглушена, строка корзины — нет */
.je.in-trash .je-main > :not(.je-foot), .card.in-trash > :not(.c-foot) { opacity: .72; }
.card.in-trash .c-foot { flex-wrap: wrap; }

/* ---------- /users: мои запросы к ИИ ---------- */
.u-log { display: flex; flex-direction: column; }
.u-log-note { margin: 4px 0 6px; font-size: 12.5px; color: var(--a-muted); max-width: 80ch; }
.u-log-i { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--a-line); min-width: 0; }
.u-log-h { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 4px 12px; font-size: 13.5px; min-width: 0; }
.u-log-t { color: var(--a-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-log-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-muted); }
.u-log-m { color: var(--a-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u-log-b { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--a-muted); }
.u-log-i.bad .u-log-h b, .u-log-err { color: var(--a-danger); }
.u-log-err { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.u-log-more { align-self: flex-start; margin-top: 8px; }
@media (max-width: 760px) {
  .u-log-h { grid-template-columns: auto 1fr auto; }
  .u-log-p { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- журнал действий (Ж1): /history и раздел на /users ---------- */
.jr-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jr-box.busy { opacity: .6; transition: opacity .2s; }
.jr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.jr-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.jr-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.jr-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--a-muted); background: var(--a-surface);
  border: 1px solid var(--a-line2); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.jr-chip i { width: 8px; height: 8px; border-radius: 50%; }
.jr-chip[aria-pressed="true"] { background: var(--a-soft); color: var(--a-accent); border-color: color-mix(in srgb, var(--a-accent) 35%, var(--a-line2)); }
.jr-chip:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.jr-note { margin: 0; font-size: 12.5px; color: var(--a-muted); }
.jr-list { display: flex; flex-direction: column; }
.jr-day { margin: 12px 0 2px; font-size: 15px; font-weight: 700; text-transform: capitalize; }
.jr { display: grid; grid-template-columns: 44px 26px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--a-line); min-width: 0; }
.jr-t { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 3px; }
.jr-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-accent); }
.jr-ic svg { width: 15px; height: 15px; }
.jr-ic.bad { background: color-mix(in srgb, var(--a-danger) 14%, transparent); color: var(--a-danger); }
.jr-ic.sys { background: color-mix(in srgb, var(--a-muted) 16%, transparent); color: var(--a-muted); }
.jr-ic.in { background: color-mix(in srgb, var(--a-n3) 14%, transparent); color: var(--a-n3); }
.jr-x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-s { font-size: 14px; overflow-wrap: anywhere; }
.jr-who { font-weight: 600; }
.jr-bad { color: var(--a-danger); }
.jr-n { font-weight: 500; }
button.jr-n { font-size: inherit; text-align: left; }
.jr-n.gone { color: var(--a-muted); font-style: italic; font-weight: 400; }
.jr-n small { color: var(--a-muted); font-weight: 400; }
.jr-src { font-size: 12px; color: var(--a-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jr-nl { display: flex; gap: 8px; align-items: baseline; font-size: 13px; min-width: 0; }
.jr-id { flex: none; font: 12px var(--mono); color: var(--a-muted); }
.jr-more { align-self: flex-start; margin-top: 8px; }
@media (max-width: 600px) {
  .jr { grid-template-columns: 40px 1fr; }
  .jr-ic { display: none; }
  .jr-filters { margin-left: 0; }
}