/* 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) */
html[data-env="dev"]::after { content: "DEV"; position: fixed; top: 6px; right: 8px; z-index: 9999; padding: 2px 8px; border-radius: 6px; background: #e8590c; color: #fff; font: 700 11px/16px var(--mono); letter-spacing: .08em; pointer-events: none; }
@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 .me-wrap { grid-column: 3; justify-self: end; margin-left: 12px; }
/* логотип — верх сайдбара, той же высоты, что шапка: нижние границы одной линией */
.brand { flex: none; height: 54px; display: flex; align-items: center; line-height: 1.15; min-width: 0; padding: 0 18px; border-bottom: 1px solid var(--a-line); }
.brand-t { display: flex; flex-direction: column; 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 { display: none; width: 32px; height: 32px; border-radius: 4px; place-items: center; background: var(--a-soft); color: var(--a-accent); }
.brand-mark svg { width: 18px; height: 18px; }
.shell.mini .brand-mark { display: grid; }
/* свернуть / развернуть — на правом краю сайдбара, поверх всего */
.fold { position: absolute; z-index: 30; left: calc(var(--railw) - 12px); top: 68px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--a-line2); background: var(--a-menu); color: var(--a-muted); display: grid; place-items: center; box-shadow: 0 2px 8px var(--a-shadow2); }
.fold:hover { color: var(--a-accent); border-color: var(--a-accent); }
.fold svg { width: 14px; height: 14px; transition: transform .15s; }
.shell.mini .fold svg { transform: rotate(180deg); }
.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 > h2 { font-size: 15px; margin: 0 8px; font-weight: 600; }
.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; max-height: 45%; overflow: auto; 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: 1; min-width: 0; resize: none; border: 0; background: none; padding: 7px 6px 7px 10px; line-height: 21px; height: 35px; max-height: 184px; overflow-y: hidden; outline: none; font-size: 15px; }
.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; }
.media-text { font-size: 13px; color: var(--a-muted); }
.media-text summary { cursor: pointer; width: fit-content; }
.media-text pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--mono); background: var(--a-soft); border-radius: 4px; padding: 8px 10px; max-height: 240px; overflow: auto; }
.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 .act svg { width: 15px; height: 15px; }
/* пересланная переписка */
.thread { display: flex; flex-direction: column; gap: 6px; }
.bub { align-self: flex-start; max-width: 88%; min-width: 0; background: var(--a-me); border: 1px solid var(--a-line); border-radius: 10px 10px 10px 3px; padding: 6px 10px 4px; overflow-wrap: anywhere; }
.bub.mine { align-self: flex-end; background: var(--a-soft); border-color: var(--a-accent); border-radius: 10px 10px 3px 10px; }
.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; }
.bub .photos, .bub .vp, .bub .file, .bub .circ { margin-top: 4px; }
.thread.sm .bub-tx { font-size: 13px; }
.bub-more { font-size: 12px; color: var(--a-muted); }
.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; }
.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; }
.tag-edit { display: flex; flex-wrap: wrap; gap: 6px; width: min(440px, 100%); }
.tag-in { flex: 1 1 180px; min-width: 0; border: 1px solid var(--a-accent); border-radius: 4px; padding: 3px 8px; background: var(--a-surface); font: 13px var(--mono); outline: none; }
.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 { 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; 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; min-width: 0; }
.c-foot time { font-size: 11px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.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: 48px; height: 48px; border-radius: 4px; display: grid; place-items: center; background: var(--a-soft); color: var(--a-accent); }
.login-mark svg { width: 26px; height: 26px; }
.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); }
.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 18px; justify-content: flex-start; }
  .shell.mini .brand-mark { display: none; }
  .railbtn { display: grid; }
  .top { display: flex; gap: 8px; padding: 0 12px; }
  .top .search { flex: 1; }
  .top .me-wrap { margin-left: 0; }
  .railbtn { width: 36px; height: 36px; }
  .search input, .pill textarea, .tag-in, .rq { font-size: 16px; } /* iOS не зумит при фокусе */
  .over { padding: 8px 12px 0; max-height: 45%; }
  .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 { flex-basis: 100%; }
  .c-foot time { margin-right: auto; }
  .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; } }