/* Zorum — тема по эталону Антона (М19): тёплый чёрный + золото + сериф. docs/design/mobile-reference.md.
   Существующие классы перекрашиваются через переменные; ниже — мобильные компоненты М19. */
:root {
  --bg:#0e0c0a; --bg2:#141110; --card:#1b1712; --fg:#ece5d6; --muted:#8f8672;
  --accent:#d0a94e; --accent-soft:#3a2f18; --line:#2a241c; --err:#e08a6b;
  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* авторский input{display:block} иначе перебивает UA [hidden] */
body { margin:0; font:15px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
       background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2 { font-family:var(--serif); font-weight:600; letter-spacing:.2px; }

/* базовая (десктоп/админ) шапка — остаётся для страниц без табов */
.topbar { display:flex; align-items:center; justify-content:space-between;
          padding:12px 20px; border-bottom:1px solid var(--line); }
.brand { font-family:var(--serif); font-weight:700; letter-spacing:2px; color:var(--accent); }
.nav { display:flex; align-items:center; gap:16px; }
.who { color:var(--muted); font-size:13px; }
.main { max-width:920px; margin:28px auto; padding:0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; }
.narrow { max-width:360px; margin:48px auto; }
h1 { margin-top:0; font-size:26px; }
label { display:block; margin:14px 0; color:var(--muted); font-size:13px; }
input, select, textarea { display:block; width:100%; margin-top:6px; padding:11px 13px; font-size:15px;
        background:var(--bg2); color:var(--fg); border:1px solid var(--line); border-radius:10px; }
button { margin-top:8px; padding:11px 18px; font-size:15px; background:var(--accent);
         color:#241c08; font-weight:600; border:0; border-radius:10px; cursor:pointer; }
button:hover { filter:brightness(1.06); }
button:disabled { opacity:.6; cursor:default; }
.inline { display:inline; margin:0; }
.link { background:none; color:var(--accent); padding:0; margin:0; font-weight:400; }
.error, .err { color:var(--err); }
.muted { color:var(--muted); }
.muted.small { color:var(--muted); font-size:12px; }
.banner { border:1px solid #5c4a1e; background:#241d0d; color:var(--accent); border-radius:12px;
          padding:12px 16px; margin:16px 0; font-size:14px; }
.soon { margin-top:24px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); }
.chip { border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12px; color:var(--muted); }
a.chip:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
table { border-collapse:collapse; width:100%; margin-top:12px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; }
details { margin-top:8px; } summary { cursor:pointer; color:var(--accent); }
code { background:var(--bg2); padding:2px 6px; border-radius:6px; }
.ok { color:#7cba8c; }

/* метрики / кабинет */
.periodform { display:flex; align-items:end; gap:12px; margin:16px 0 24px; }
.periodform label { margin:0; } .periodform input { width:auto; } .periodform button { margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.mname { color:var(--muted); font-size:13px; }
.mvalue { font-family:var(--serif); font-size:28px; font-weight:600; margin:8px 0; }
.mrefusal { color:var(--muted); font-style:italic; margin:8px 0; }
.toplist { margin:8px 0; padding-left:20px; font-size:14px; }
.whence { font-size:13px; }

/* ── М19.1: ПОСТОЯННАЯ ОБОЛОЧКА приложения (шапка + табы + панель истории + меню профиля) ──
   §5: слева — открыть панель истории, центр — вордмарк, справа — профиль; под шапкой — 2 таба. */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#241c08;
             padding:8px 14px; border-radius:0 0 10px 0; }
.skip-link:focus { left:0; }
.appshell { position:sticky; top:0; z-index:40; background:var(--bg);
            border-bottom:1px solid var(--line); }
.appbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
          padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; }
.wordmark { grid-column:2; justify-self:center; font-family:var(--serif); font-size:22px;
            letter-spacing:5px; color:var(--accent); font-weight:600; padding-left:5px; }
.wordmark:hover { text-decoration:none; }

/* панель истории и меню профиля — нативные <details>; убираем стандартный маркер disclosure */
.drawer, .profile-menu { position:relative; }
.drawer > summary, .profile-menu > summary { list-style:none; cursor:pointer; display:inline-flex; }
.drawer > summary::-webkit-details-marker, .profile-menu > summary::-webkit-details-marker { display:none; }

/* слева: кнопка открытия панели истории */
.drawer { justify-self:start; }
.drawer-btn { align-items:center; justify-content:center; width:42px; height:40px; border-radius:12px;
              border:1px solid var(--line); color:var(--muted); background:transparent; }
.drawer-btn:hover { color:var(--fg); }
.drawer-btn svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
/* содержимое <details> скрыто, пока панель закрыта — открывается кликом по кнопке (работает без JS) */
.drawer-scrim { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.5); }
.drawer-panel { position:fixed; top:0; left:0; z-index:61; height:100%; width:min(320px, 86vw);
                background:var(--bg2); border-right:1px solid var(--line); overflow-y:auto;
                padding:calc(env(safe-area-inset-top) + 16px) 16px 24px; box-shadow:2px 0 26px rgba(0,0,0,.55); }
.drawer-new { display:block; border:1px solid var(--accent); color:var(--accent); border-radius:12px;
              padding:10px 14px; text-align:center; font-weight:600; margin-bottom:8px; }
.drawer-new:hover { background:var(--accent-soft); text-decoration:none; }
.drawer-day { color:var(--muted); font-size:11px; letter-spacing:.6px; text-transform:uppercase; margin:18px 0 6px; }
.drawer-turns { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.drawer-turns a { display:block; color:var(--fg); padding:9px 10px; border-radius:9px; font-size:14px;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer-turns a:hover { background:var(--card); text-decoration:none; }
.drawer-empty { font-size:14px; margin-top:14px; }

/* справа: меню профиля (имя, компания, «Выход») */
.profile-menu { justify-self:end; }
.avatar { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card);
          color:var(--accent); font-family:var(--serif); font-weight:600; font-size:17px;
          display:flex; align-items:center; justify-content:center; }
.profile-menu[open] > summary .avatar { border-color:var(--accent); }
.profile-pop { position:absolute; right:0; top:46px; z-index:61; min-width:200px; background:var(--card);
               border:1px solid var(--line); border-radius:14px; padding:12px 14px;
               box-shadow:0 10px 30px rgba(0,0,0,.5); }
.profile-name { font-weight:600; }
.profile-company { font-size:13px; margin-top:2px; }
.profile-link { display:block; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:14px; }
.profile-logout-form { margin:8px 0 0; }
.profile-logout { margin:0; padding:0; background:none; color:var(--err); font-weight:600; }
.profile-logout:hover { text-decoration:underline; filter:none; }

/* ряд табов под шапкой: «Чат» / «Уведомления» (активный — золотая подложка) */
.apptabs { display:flex; gap:8px; padding:2px 14px 10px; }
.apptab { flex:0 0 auto; padding:7px 18px; border-radius:999px; border:1px solid var(--line);
          color:var(--muted); background:transparent; font-size:14px; }
.apptab:hover { text-decoration:none; color:var(--fg); }
.apptab.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); font-weight:600; }

/* ── М19: экран Чата ── */
.chat-hero { text-align:center; padding:13vh 8px 8px; }
.chat-hero h1 { font-size:34px; line-height:1.15; margin:0 0 14px; color:var(--fg); }
.chat-hero .sub { color:var(--muted); max-width:340px; margin:0 auto; }
/* M28.1/Э6: поле ввода закреплено внизу — лента растёт над ним, как в любом чате.
   sticky, а не fixed: элемент остаётся в потоке, поэтому не перекрывает последнюю реплику
   и не требует компенсирующего отступа снизу. */
.askform { position:sticky; bottom:8px; z-index:5;
           display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
           border-radius:20px; padding:10px 12px; margin:16px 0 8px; }
.askform label { flex:1; margin:0; }
.askform input[type=text] { margin:0; border:0; background:transparent; padding:8px 4px; }
.askform input[type=text]:focus { outline:none; }
.askform .send { width:44px; height:44px; padding:0; border-radius:50%; display:flex; align-items:center;
                 justify-content:center; flex:0 0 auto; }
.attachform { margin:6px 0; }
.attachlabel { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:14px;
               border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; }
.tip-label { color:var(--accent); font-size:12px; letter-spacing:1.5px; margin:22px 0 8px; }
.tip-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
            border-radius:14px; padding:14px 16px; color:var(--fg); }
.tip-card .spark { color:var(--accent); }
.receipt { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin:12px 0; }
.receipt .rline { margin:4px 0; }

/* ── лента чата (видимая история, М19) ── */
.turn { margin:0 0 6px; }
.turn + .turn { border-top:1px solid var(--line); margin-top:16px; padding-top:6px; }
.asked-q { color:var(--muted); font-size:14px; margin:16px 0 0; padding:0 4px; }
.answer { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:8px 0 8px; }
.answer .atext { margin:0 0 8px; } .answer .prewrap { white-space:pre-wrap; }
.answer .origin { color:var(--muted); font-size:13px; margin-top:8px; }
.answer .whence { display:inline-block; font-size:13px; margin:8px 12px 0 0; }
.cite { margin:12px 0 0; padding:10px 14px; border-left:3px solid var(--accent); background:var(--bg2); border-radius:0 10px 10px 0; }
.cite .quote { margin:0 0 6px; } .cite .src { color:var(--muted); font-size:13px; }

/* ── М19: лента уведомлений (карточки) ── */
.notif-list, .alerts { list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:12px; }
.alert { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
         display:grid; grid-template-columns:auto 1fr auto; column-gap:12px; align-items:start; }
.alert .ic { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex;
             align-items:center; justify-content:center; color:var(--accent); grid-row:1 / span 3; }
.alert .score { font-family:var(--serif); font-weight:600; font-size:18px; color:var(--accent); }
.alert .doc { font-weight:600; } .alert .reason { color:var(--fg); margin:4px 0; }
.alert .time { color:var(--muted); font-size:11px; white-space:nowrap; } .alert .small { font-size:12px; }
.alert a { color:var(--accent); }
.subhead { color:var(--muted); margin:2px 0 14px; font-size:14px; }

/* профиль */
.profileform fieldset { border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px 0; }
.profileform legend { padding:0 8px; color:var(--muted); font-size:13px; }
.radio { display:block; margin:10px 0; cursor:pointer; }
.radio input { width:auto; margin-right:8px; }
.pushbox { border:1px solid var(--line); border-radius:14px; padding:16px; margin:18px 0; }
.adminnav { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }
.adminnav a { padding:8px 14px; border:1px solid var(--line); border-radius:10px; }
.rowacts { display:flex; gap:12px; }
body { padding-bottom:24px; }

/* ── QA-виджет тест-мастера («?» в углу) ── */
#qa-fab { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:100;
          width:44px; height:44px; border-radius:50%; background:var(--accent); color:#241c08;
          font:700 20px/1 var(--serif); border:0; box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:pointer; padding:0; }
#qa-fab:hover { filter:brightness(1.06); }
#qa-panel { position:fixed; right:16px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:100;
            width:min(340px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line2);
            border-radius:16px; padding:16px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
#qa-panel .qa-h { font-family:var(--serif); font-size:16px; margin-bottom:8px; }
#qa-panel textarea { width:100%; margin:0; resize:vertical; }
#qa-panel .qa-note { color:var(--muted); font-size:11.5px; margin:8px 0 10px; }
#qa-panel .qa-row { display:flex; align-items:center; gap:12px; }
#qa-panel .qa-row button { margin:0; }
#qa-panel .qa-link { background:none; color:var(--muted); padding:0; font-weight:400; }
#qa-panel .qa-done { color:var(--accent); font-size:14px; margin-top:8px; }

/* M28.1/Э6: строка состояния — непосредственно под полем ввода, а не под лентой.
   min-height держит место: без него появление подписи дёргало бы раскладку вверх-вниз. */
.chat-status { position:sticky; bottom:0; z-index:5; margin:4px 0 0; min-height:1.2em;
               text-align:center; }

/* M28.1/Э7: реплики как чат — пузырь пользователя справа, ответ слева.
   Время ВНУТРИ пузыря, в правом нижнем углу, без глифа часов: глиф занимал строку и читался
   как отдельное сообщение. */
.turn { display:flex; flex-direction:column; gap:6px; margin:14px 0; }
.bubble-user { align-self:flex-end; max-width:80%; position:relative;
               background:var(--accent-soft, #2a2417); border:1px solid var(--line);
               border-radius:16px 16px 4px 16px; padding:10px 14px 22px; }
.bubble-user .btext { margin:0; overflow-wrap:anywhere; }
.bubble-user .btime { position:absolute; right:12px; bottom:6px; font-size:11px;
                      color:var(--muted); white-space:nowrap; }
.turn .answer { align-self:flex-start; max-width:92%; margin:0; }

/* M28.2/Э10: видимостью заставки и подсказки правит ОДИН класс на обёртке — «в ленте пусто».
   Не два независимых условия (шаблон + скрипт), которые однажды разойдутся: скрипт снимает
   ровно этот класс, шаблон ровно его ставит. */
.chatpage:not(.is-empty) .chat-hero,
.chatpage:not(.is-empty) .tip-label,
.chatpage:not(.is-empty) .tip-card { display:none; }

/* Э11: подсказка — кнопка (кликается и с клавиатуры), но выглядит как карточка. */
.tip-card { display:block; width:100%; text-align:left; cursor:pointer;
            font:inherit; color:inherit; }
.tip-card:hover { border-color:var(--accent, #c8a44b); }