@import url("/static/fonts.css");

:root{
  /* Начертания Inter лежат в static/fonts, объявлены в static/fonts.css.
     Дальше — системный шрифт: он подставится, пока файл не загрузился. */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --side-w:290px;
  /* Мы умеем обе схемы — браузер выбирает по системной сам. Без этой строки
     он считает страницу светлой и красит по-своему всё, что рисует сам:
     выпадающие списки, поля формы, подстановку сохранённых значений и фон
     страницы до того, как применится наш CSS. На тёмной теме это давало
     белые вспышки и светлые системные элементы посреди тёмного интерфейса. */
  color-scheme: light dark;
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --line:#272c37;
  --text:#e7e9ee; --muted:#98a0b0; --accent:#6ea8fe; --accent-2:#2b6cb0;
  --ok:#57c98b; --warn:#e5b567; --err:#ef6f6f;
  /* Полоса прокрутки: приглушённый цвет текста, а не системный серый */
  --scroll:rgba(152,160,176,.30); --scroll-hover:rgba(152,160,176,.55);
  /* Грань и тень для того, что должно читаться поднятым над страницей.
     Отдельно от --line: та рисует границы таблиц и панелей, где заметная
     линия была бы шумом. Задаются на обе темы — на светлой тень работает,
     а грань почти не нужна, на тёмной наоборот. */
  --edge:rgba(255,255,255,.14); --lift:rgba(0,0,0,.34);
  --accent-soft:rgba(110,168,254,.18);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7f9; --panel:#fff; --panel-2:#f0f2f6; --line:#dfe3ea;
         --text:#131722; --muted:#5f6878; --accent:#2b6cb0; --accent-2:#1a4d80;
         --scroll:rgba(95,104,120,.28); --scroll-hover:rgba(95,104,120,.5);
         --edge:#d3d9e4; --lift:rgba(15,23,42,.10);
         --accent-soft:rgba(43,108,176,.16); }
}

/* Полоса прокрутки. Системная — сплошная и светлее панели, поэтому на тёмном
   фоне читается как чужая деталь. Делаем тонкой и полупрозрачной, дорожку
   убираем совсем: видно только сам ползунок, и только там, где есть что
   прокручивать.

   Записано дважды: свойства scrollbar-* — стандарт (их берут Firefox
   и Chrome от 121), ::-webkit-scrollbar — то, чем это делалось раньше
   и что до сих пор понимают Safari и старые Chrome. Современный браузер,
   увидев стандартные свойства, webkit-правила игнорирует, поэтому конфликта
   между ними нет. */
/* Safari на телефоне сам увеличивает шрифт в узких колонках, если ему
   не сказать иначе, и вёрстка расползается. */
html{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;
  -webkit-text-size-adjust:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
/* Прозрачная рамка с background-clip даёт ползунку воздух по краям:
   иначе тонкая полоса лепится вплотную к содержимому. */
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:999px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:content-box}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* Высота ровно в экран, и ни пикселем больше. Строка сетки без minmax(0,1fr)
   считается по содержимому: длинная переписка растягивала её вместе со всей
   страницей, меню тянулось на всю высоту документа, а лента сообщений при
   этом не прокручивалась — скроллилась страница целиком. min-height:0 у обеих
   колонок разрешает им быть ниже содержимого, и overflow:auto внутри наконец
   работает. dvh — для мобильных, где адресная строка съедает часть 100vh. */
body{margin:0;display:grid;grid-template-columns:var(--side-w) 1fr;
  grid-template-rows:minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden;
  background:var(--bg);color:var(--text);
  font:15px/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);padding:8px 14px}
/* Кнопка со значком. Без этого правила svg — строчный элемент и встаёт
   на базовую линию текста, то есть заметно выше его середины; на глаз
   это читается как «съехало», хотя ничего не съезжало. Правило узкое
   (:has(svg)) и слабое по весу: у .icon-btn, .more-item и прочих свои
   отступы, и они его перекрывают, как и перекрывали.

   Выравнивания по горизонтали здесь намеренно нет. Кнопка шириной
   по содержимому от него не меняется, а у кнопки во всю ширину оно
   почти всегда не по центру: строка меню — это строка, и текст в ней
   начинается слева. Одна такая строка уже уехала в центр, пока правило
   было шире, чем нужно. */
button:has(svg){display:inline-flex;align-items:center;gap:8px}
button:hover{border-color:var(--accent)}
.primary{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.primary:hover{background:var(--accent)}
.danger{background:transparent;border-color:var(--err);color:var(--err)}
.ghost{background:transparent;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);padding:6px 12px;border-radius:8px;font-size:13px}
.block{width:100%}
input,select,textarea{font:inherit;background:var(--panel-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
/* Граница панели — её собственный фон, а не линия: фон уже темнее страницы,
   и полоска поверх него только добавляет шума. */
.sidebar{background:var(--panel);
  display:flex;flex-direction:column;gap:10px;padding:14px;
  min-height:0;overflow:hidden}
.chat-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px;margin-top:4px}
.chat-item{position:relative;padding:8px 34px 8px 10px;border-radius:8px;cursor:pointer;
  font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
/* Управление диалогом появляется по наведению: в покое список должен
   оставаться списком названий. */
.chat-actions{position:absolute;top:3px;right:2px;display:flex;gap:0;opacity:0;
  background:linear-gradient(90deg,transparent,var(--panel-2) 28%)}
.chat-item:hover .chat-actions,.chat-item:focus-within .chat-actions{opacity:1}
.chat-actions .icon-btn{padding:5px}
.chat-actions svg{width:15px;height:15px}
.chat-item:hover{background:var(--panel-2);color:var(--text)}
.chat-item.active{background:var(--panel-2);color:var(--text)}
.chat-item .snip{display:block;font-size:12px;color:var(--muted);opacity:.8}
/* Без разделителей: панель отделена от страницы собственным фоном, и лишняя
   полоска над кнопкой только режет угол на части. */
.sidebar-foot{padding-top:10px;font-size:13px}
.account-btn{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;font-size:13px;background:transparent;color:var(--text)}
.account-btn #account-name{flex:1;text-align:left;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.account-btn .ava{color:var(--muted)}
.account-btn .door{color:var(--muted)}
.account-btn:hover .door{color:var(--accent)}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
/* Возврат и заголовок встают по левому краю содержимого, а не по краю
   окна. Колонка содержимого на всех страницах одна и та же — 820 точек
   по центру: и `.msg` в переписке, и `.home-inner`/`.docs-inner` за
   вычетом полей. Заголовок, живущий по своим правилам, ломал бы эту
   вертикаль, и на широком экране это особенно заметно: подпись
   в дальнем углу, а текст под ней — посередине.

   Поля, а не max-width у самой шапки: полоска снизу должна идти через
   всё окно, а она рисуется по внешнему краю. max() удерживает прежние
   14 точек, пока окно уже колонки. */
.topbar{padding-inline:max(14px, calc((100% - 820px) / 2))}
.more{position:relative}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:25;min-width:190px;
  padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  box-shadow:0 12px 28px rgba(0,0,0,.34)}
.more-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border:none;border-radius:7px;background:transparent;color:var(--text);font-size:13.5px;
  text-decoration:none}

.more-item:hover{background:var(--panel-2)}
.more-item svg{color:var(--muted)}
.hint{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#notices{padding:0 20px}
.notice{margin:10px 0;padding:10px 12px;border-radius:8px;font-size:14px;
  background:rgba(229,181,103,.12);border:1px solid var(--warn);color:var(--text)}
.notice.err{background:rgba(239,111,111,.12);border-color:var(--err)}
/* Уведомление с кнопкой: текст занимает строку, кнопка не сжимается
   и на узком экране переносится под него. */
.notice-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.notice-action span{flex:1;min-width:200px}
.notice-action button{flex:none;padding:5px 12px;font-size:13px;
  background:var(--panel);border-color:var(--line)}
.notice-action button:hover{border-color:var(--accent)}
.messages{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.empty{margin:auto;text-align:center;color:var(--muted);max-width:460px}
.empty h1{color:var(--text);font-size:24px;margin:0 0 8px}
/* Реплики читаются как переписка: своё — справа в пузыре, ответ — слева
   и без рамки. Пузырь у обоих делал ленту решёткой из одинаковых плашек,
   в которой не видно, где чей ход. Ответ длиннее вопроса в разы, и рамка
   вокруг него только сужает строку — читать его надо как текст. */
.msg{max-width:820px;width:100%;align-self:center;display:flex;flex-direction:column}
.msg .bubble{white-space:pre-wrap;word-wrap:break-word}

/* ---------- разметка ответа ----------
   У разобранного пузыря переносы держат теги, а не пробелы, поэтому
   pre-wrap здесь снимается: иначе между абзацами оставались бы пустые
   строки из исходника. */
.bubble.md{white-space:normal}
.bubble.md > :first-child{margin-top:0}
.bubble.md > :last-child{margin-bottom:0}
.bubble.md p{margin:0 0 10px}
.bubble.md h3,.bubble.md h4,.bubble.md h5,.bubble.md h6{
  margin:16px 0 8px;font-weight:600;line-height:1.3}
.bubble.md h3{font-size:17px}
.bubble.md h4{font-size:15.5px}
.bubble.md h5,.bubble.md h6{font-size:15px;color:var(--muted)}
.bubble.md ul,.bubble.md ol{margin:0 0 10px;padding-left:22px}
.bubble.md li{margin:3px 0}
.bubble.md li > ul,.bubble.md li > ol{margin:3px 0 0}
.bubble.md a{color:var(--accent)}
.bubble.md a:hover{text-decoration:underline}
.bubble.md strong{font-weight:600}
.bubble.md del{color:var(--muted)}
.bubble.md hr{margin:14px 0;border:none;border-top:1px solid var(--line)}
.bubble.md blockquote{margin:0 0 10px;padding:2px 0 2px 12px;
  border-left:3px solid var(--line);color:var(--muted)}
/* Код набирается моноширинным: в нём значимы пробелы и похожие знаки. */
.bubble.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px}
.bubble.md pre{margin:0 0 10px;padding:12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);overflow-x:auto}
.bubble.md pre code{display:block;padding:0;border:none;background:none;
  font-size:13px;line-height:1.5;white-space:pre}
/* Широкая таблица прокручивается внутри себя: иначе она растягивает
   переписку и ломает ширину всей ленты. */
.bubble.md .md-table{margin:0 0 10px;overflow-x:auto}
.bubble.md table{border-collapse:collapse;font-size:14px;min-width:100%}
.bubble.md th,.bubble.md td{padding:7px 11px;border:1px solid var(--line);
  text-align:left;vertical-align:top}
.bubble.md th{background:var(--panel-2);font-weight:600;white-space:nowrap}
/* Рамки вокруг ответа больше нет, и граница хода держится воздухом:
   новый вопрос отделяется от предыдущего ответа заметнее, чем абзацы
   внутри самого ответа. */
.msg.user{align-items:flex-end;margin-top:10px}
.msg.user:first-child{margin-top:0}
.msg.user .bubble{max-width:78%;padding:10px 14px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line)}
.msg.user .meta{justify-content:flex-end}

/* Без пузыря: ни фона, ни рамки, ни боковых отступов — ответ начинается
   от той же линии, до которой доходит вопрос. */
.msg.assistant{align-items:stretch}
.msg.assistant .bubble{padding:2px 0 0;background:none;border:none}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--muted);margin-top:6px}
.meta .tag{border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.meta button{padding:2px 8px;font-size:12px;background:transparent}
.cursor::after{content:"▍";color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.typing{color:var(--muted);font-size:13px}
/* Блок ввода — то, ради чего страницу открыли, и он обязан читаться
   как поле, а не как продолжение фона. Своей подложки для этого мало:
   на тёмной теме панель отличается от фона на несколько единиц яркости,
   и граница цвета --line теряется вместе с ней. Поэтому у него своя
   грань (заметнее общей линии) и тень: тень поднимает его над страницей
   там, где разница в яркости почти не работает. */
.composer{display:flex;flex-direction:column;gap:8px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  box-shadow:0 6px 22px var(--lift)}
.composer:focus-within{border-color:var(--accent);
  box-shadow:0 6px 22px var(--lift), 0 0 0 3px var(--accent-soft)}
.composer textarea{resize:none;max-height:200px;border:none;background:transparent;padding:4px}
.composer textarea:focus{outline:none}
.composer-row{display:flex;align-items:center;gap:6px}
.composer-row .icon-btn{border-radius:9px}
.grow{flex:1}
/* В переписке блок ввода стоит в подвале и держит ту же ширину, что и сообщения. */
.composer-dock{padding:12px 20px 16px;border-top:1px solid var(--line);background:var(--bg)}
.composer-dock .composer{max-width:820px;margin:0 auto}

/* Выбор модели — такая же кнопка строки, а не поле формы. */
.model-pick{position:relative;display:flex;align-items:center;gap:5px;border-radius:999px;
  padding:4px 8px;color:var(--muted);min-width:0;
  border:none;background:transparent;font:inherit;cursor:pointer}
/* min-width:0 обязателен: без него флекс-элемент не сжимается уже своего
   текста, и строка под полем ввода вылезала за экран вместо многоточия. */
#model-label{font-size:13px;color:var(--text);max-width:190px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-pick:hover{background:var(--panel-2)}
.model-pick .spark{width:16px;height:16px;color:var(--accent)}
.model-pick .chev{width:14px;height:14px}

.icon-btn.rec{color:var(--err);border-color:var(--err)}
.icon-btn.stop{color:var(--err)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);
  border-radius:12px;padding:20px;width:min(420px,92vw)}
dialog h2{margin:0 0 4px;font-size:18px}
dialog .muted{color:var(--muted);font-size:13px;margin:0 0 12px}
dialog input{margin-bottom:8px}
dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:12px 0 0}
.error{color:var(--err);font-size:13px;min-height:18px}
/* flex:none — страховка: меню выложено колонкой, и любое правило,
   раздающее элементам остаток места, растянуло бы поиск по высоте. */
.sidebar .search-box{margin-top:6px;flex:none}
.sidebar .search-box input{font-size:13px}






.older {
  display: block;
  margin: 8px auto 16px;
  padding: 6px 14px;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: .75;
}
.older:hover { opacity: 1; }

/* ================= сворачиваемое меню ================= */
body.side-collapsed{ --side-w:68px }

svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bolt{fill:currentColor;stroke:none}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15;display:none}

.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px}
.logo{display:inline-flex;padding:4px;border:none}
/* Знак нарисован заливкой, а не обводкой, поэтому общее правило
   svg{fill:none;stroke:currentColor} для него не годится — перебиваем.
   Цвета задаём здесь, а не атрибутами fill в разметке: CSS всё равно
   перебил бы атрибуты. Заливка по умолчанию — тело облачка, остальное
   красится по классам. */
.logo svg{width:26px;height:26px;fill:#fff;stroke:none}
/* Подложка — единственное, что зависит от темы. Фирменный цвет плитки
   #12151a почти совпадает с тёмной панелью сайдбара (#171a21): квадрат
   сливается с фоном и знак теряет форму иконки приложения. Поэтому база
   (она же тёмная тема) — осветлённый вариант, а в светлой возвращаем
   фирменный, как на png/icon-*. Точки внутри облачка остаются тёмными
   в обеих темах: они лежат на белом и от фона не зависят.

   Одного осветления мало — оно даёт плитке отличаться от фона, но не
   даёт ей быть видимой: этим занимается отступ вокруг облачка, см.
   комментарий к знаку в разметке. */
.logo .logo-plate{fill:#262c38}
@media (prefers-color-scheme:light){ .logo .logo-plate{fill:#12151a} }
.logo .logo-dot{fill:#12151a}
.logo .logo-dot-mid{fill:#ffb020}
/* Цветом отозваться на наведение знак уже не может — гасим прозрачностью. */
.logo:hover{opacity:.85}

/* Пункты меню — строки текста со значком, без рамок и заливок. */
.side-nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.side-item{width:100%;padding:8px 10px;border:none;border-radius:8px;
  background:transparent;color:var(--text);font-size:14px;text-decoration:none}
.side-item:hover{background:var(--panel-2);border-color:transparent}
.side-item svg{color:var(--muted)}
.side-item:hover svg{color:var(--text)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:6px;background:transparent;border:1px solid transparent;color:var(--muted)}
.icon-btn:hover{color:var(--text);border-color:var(--line)}
.only-mobile{display:none}

.side-action{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.side-mini{display:none}

/* Свёрнутое меню — только иконки: список и подписи прячутся, кнопки
   центрируются, ширина сетки уходит в --side-w. */
body.side-collapsed .sidebar{padding:14px 10px;align-items:center}
body.side-collapsed .chat-list,
body.side-collapsed .side-label{display:none}
body.side-collapsed .side-head{justify-content:center}
body.side-collapsed .logo{display:none}
body.side-collapsed .side-action{justify-content:center;padding:8px}
body.side-collapsed .side-mini{display:inline-flex}
body.side-collapsed .sidebar-foot{width:100%;margin-top:auto;display:flex;
  flex-direction:column;align-items:center;border-top:none}
body.side-collapsed .account-btn{width:auto;justify-content:center;padding:8px}
body.side-collapsed .upgrade{padding:10px;justify-content:center}

/* ================= кнопка Upgrade ================= */
.upgrade{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  margin-bottom:10px;padding:10px 12px;border-radius:10px;color:#fff;
  border:1px solid transparent;
  background:linear-gradient(135deg,#7c5cff,#2b6cb0 60%,#1f9e7a);
  box-shadow:0 6px 18px rgba(124,92,255,.28)}
.upgrade:hover{filter:brightness(1.08);border-color:transparent}
.upgrade .side-label{display:block;line-height:1.25}
.upgrade b{font-size:14px}
.upgrade small{display:block;font-size:11px;opacity:.85}

/* ================= главная ================= */
/* Полоса прокрутки не должна съедать правое поле.

   Она забирает свои пятнадцать точек справа, и поля становятся разными:
   12 слева, 27 справа — на странице картинок это видно, потому что она
   всегда длиннее экрана. `both-edges` резервирует место с обеих сторон:
   поля снова равны, а заодно страница с длинным содержимым перестаёт быть
   уже страницы с коротким — при переходе с главной в документы вёрстка
   не сдвигается.

   На телефонах и в macOS полосы накладные, они ширины не занимают,
   и правило там по стандарту ничего не делает. */
.home,.docs{scrollbar-gutter:stable both-edges}
.home{flex:1;overflow:auto}
/* Ширина листа одна на весь сервис: главная, документы и картинки —
   одна и та же страница, и при переходе между ними содержимое не должно
   съезжать. Отступы по краям тоже общие: их правят в трёх местах ниже
   (широкий экран, планшет с телефоном, узкий телефон), а не в каждой
   странице отдельно. */
.home-inner,.docs-inner{max-width:860px;margin:0 auto;padding:34px 20px 48px}
.home-inner{display:flex;flex-direction:column;gap:22px}
.hello{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.hello h1{margin:0;font-size:30px;letter-spacing:-.3px}
.hello p{margin:0;max-width:520px;color:var(--muted);font-size:15px;line-height:1.5}

.send-round{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:10px;
  background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.send-round:hover{background:var(--accent);border-color:var(--accent)}
.send-round:disabled{opacity:.45;cursor:default;background:var(--panel-2);
  border-color:var(--line);color:var(--muted)}

.mode-chip{align-self:flex-start;display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--accent);border:1px solid var(--accent);
  border-radius:999px;padding:2px 6px 2px 10px}
.mode-chip button{padding:0 4px;border:none;background:transparent;color:inherit;font-size:14px;line-height:1}

.chips-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:-4px}
.chip-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border-radius:999px;background:var(--panel);font-size:13.5px}
.chip-btn .emo{font-size:15px;line-height:1}
.chip-btn.active{border-color:var(--accent);color:var(--accent)}
.chip-btn.small{padding:5px 12px;font-size:12.5px}

/* Продолжения стоят под последним ответом и держат ширину сообщений. */
.followups{display:flex;flex-wrap:wrap;gap:8px;max-width:820px;width:100%;
  align-self:center;padding:2px 0 6px}

/* Примеры: сверху кусок готового ответа, снизу название. Текст уходит
   в затухание — видно, что это фрагмент, а не весь ответ. */
.examples h2{margin:0 0 10px;font-size:15px;font-weight:600}
.example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.example{display:flex;flex-direction:column;padding:0;overflow:hidden;
  border-radius:12px;background:var(--panel);text-align:left}
.example:hover{border-color:var(--accent)}
.example-preview{flex:1;min-height:104px;padding:12px;background:var(--panel-2);
  font-size:12px;line-height:1.55;color:var(--muted);white-space:pre-wrap;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.example-name{display:flex;align-items:center;gap:8px;padding:10px 12px;
  font-size:13px;font-weight:600}
.example-name .emo{font-size:15px;line-height:1}
.examples-note{margin:10px 0 0;font-size:12px;color:var(--muted)}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card h2{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.card h2 svg{color:var(--accent)}
.card textarea{resize:none;max-height:160px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border-radius:999px;font-size:13px;background:transparent;color:var(--muted)}
.chip:hover{color:var(--text)}
.chip.active{background:var(--panel-2);border-color:var(--accent);color:var(--text)}
/* Кадр: рисунок пропорции и подпись в одной кнопке. Иконка мельче обычной —
   рядом с текстом 13 px восемнадцать точек выглядят кляксой. */
.ratios .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px}
.ratios .chip svg{width:15px;height:15px;opacity:.85}
.ratios .chip.active svg{opacity:1;color:var(--accent)}

.premium-list{margin:0;padding:0 0 0 2px;list-style:none;
  display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.premium-list li{position:relative;padding-left:20px;color:var(--muted);line-height:1.5}
.premium-list li::before{content:"";position:absolute;left:4px;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--warn)}
.premium-list b{color:var(--text);font-weight:600}
.soon{margin-left:4px;padding:1px 7px;border-radius:999px;font-size:11px;
  color:var(--muted);border:1px solid var(--line)}

.chats-empty{margin:8px 10px;font-size:12.5px;color:var(--muted);line-height:1.4}

.auth-switch{margin:2px 0 0;font-size:13px;color:var(--muted)}
.linkish{padding:0;border:none;background:transparent;color:var(--accent);font-size:13px}
.linkish:hover{text-decoration:underline}

.chat-head{padding:10px 20px 0}
.chat-head .ghost{display:inline-flex;align-items:center;gap:6px}


/* ================= страница документов ================= */
/* Флажки: общее правило полей формы растянуло бы их на всю ячейку. */
input[type=checkbox]{width:auto;accent-color:var(--accent)}

.docs-page #notices{position:fixed;top:12px;right:16px;z-index:40;max-width:360px;padding:0}
.docs{flex:1;overflow:auto}
/* Заголовок страницы и возврат живут в шапке, а не в теле: полоса
   вверху была пустой, а над содержимым стояла вторая, из-за чего
   страница начиналась с двух заголовков подряд и теряла экран
   на пустоту. */
.topbar-back{flex:none}
/* Страница аккаунта свой заголовок оставила в теле: там он единственный
   на странице с вкладками, и наверх его никто не просил. */
.docs-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.docs-head h1{margin:0;font-size:24px;letter-spacing:-.2px}
.topbar-title{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Остаток хранилища — только у того, кто за него платит: бесплатному
   счётчик показывал бы предел, о который он, скорее всего, не ударится. */
.usage{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Ссылка на текущую страницу в меню. */
.side-action.active{background:var(--panel-2);border-color:transparent;color:var(--text)}
.side-action.active svg{color:var(--text)}

.docs-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.docs-bar button{display:inline-flex;align-items:center;gap:7px}
.sort-tools{display:flex;align-items:center;gap:8px}
.sort-pick{position:relative;display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--muted)}
.sort-pick:hover{border-color:var(--accent)}
#sort-label{font-size:13px;color:var(--text)}
.sort-pick select{position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:none;opacity:0;cursor:pointer}
#sort-dir svg{transition:transform .12s}
#sort-dir.flip svg{transform:rotate(180deg)}
.search-box{display:flex;align-items:center;gap:6px;min-width:220px;
  border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--panel-2)}
.search-box svg{color:var(--muted)}
.search-box input{border:none;background:transparent;padding:8px 0}
.search-box input:focus{outline:none}
.view-switch{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-switch .icon-btn{border:none;border-radius:0;padding:8px}
.view-switch .icon-btn.active{background:var(--panel-2);color:var(--text)}

.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:-6px 0 16px;font-size:13px;color:var(--muted)}
.crumb{padding:2px 4px;border:none;background:transparent;color:var(--accent);font-size:13px}
.crumb:hover{text-decoration:underline}
.crumb.current{color:var(--text);padding:2px 4px}
.crumb-sep{opacity:.5}

.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:16px 0 18px;padding:22px 16px;text-align:center;
  border:1.5px dashed var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .12s,background .12s}
.dropzone b{font-size:14px}
/* Только прямой потомок: правило без «>» красило приглушённым любой span
   внутри блока — включая надпись на кнопке «Загрузить», отчего кнопка
   выглядела выключенной, хотя работала. */
.dropzone > span{font-size:12px;color:var(--muted)}
.dropzone button{margin-top:8px}
.dz-icon{width:30px;height:30px;color:var(--muted)}
/* Файл летит над страницей — блок готов его принять; над самим блоком
   подсветка сильнее, чтобы было видно, куда отпускать. */
.dropzone.armed{border-color:var(--accent)}
.dropzone.over{border-color:var(--accent);background:var(--panel-2)}
.dropzone.over .dz-icon{color:var(--accent)}
.bulk{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px}
.bulk button{padding:5px 10px;font-size:13px}

.docs-table{width:100%;border-collapse:collapse;font-size:14px}
.docs-table th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);
  padding:8px 10px;border-bottom:1px solid var(--line)}
.docs-table td{padding:6px 10px;border-bottom:1px solid var(--line)}
.doc-row:hover{background:var(--panel)}
.c-check{width:38px}
.c-type,.c-size,.c-date{width:120px;white-space:nowrap;color:var(--muted)}
.c-act{width:110px}
.name-cell{display:flex;align-items:center;gap:8px;min-width:0}
.chev-btn{display:inline-flex;padding:2px;border:none;background:transparent;color:var(--muted)}
.chev-btn svg{transition:transform .12s}
.chev-btn.open svg{transform:rotate(90deg)}
.chev-space{display:inline-block;width:22px}
.i-folder{color:var(--warn)}
.i-file{color:var(--muted)}
.name-btn{padding:2px 0;border:none;background:transparent;color:var(--text);
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-btn:hover{color:var(--accent);border-color:transparent}
.row-actions{display:flex;gap:2px;justify-content:flex-end;opacity:0;transition:opacity .1s}
.doc-row:hover .row-actions,.doc-row:focus-within .row-actions,
.doc-card:hover .row-actions,.doc-card:focus-within .row-actions{opacity:1}

.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.doc-card{position:relative;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.card-check{position:absolute;top:10px;left:10px}
.doc-card .row-actions{position:absolute;top:6px;right:6px}
.card-open{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  padding:16px 4px 4px;border:none;background:transparent;color:var(--text)}
.card-open svg{width:34px;height:34px}
.card-open b{max-width:100%;font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card-open span{font-size:12px;color:var(--muted)}

.docs-empty{padding:28px 4px;color:var(--muted);font-size:14px}


/* ================= окна «поделиться» и «поддержка» ================= */
.sheet{position:relative;width:min(460px,92vw)}
.sheet h2{margin:0 0 6px;font-size:18px}
.sheet .muted{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.5}
.sheet menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:16px 0 0}
.sheet menu button{padding:8px 16px}
.copy-row{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.copy-row input{border:none;background:transparent;padding:6px 0;font-size:13px}
.copy-row input:focus{outline:none}
.dialog-x{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.dialog-x:hover{color:var(--text)}

/* ================= страница аккаунта ================= */
.card-block{padding:18px 20px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.card-block h2{margin:0 0 10px;font-size:15px;font-weight:600}
.card-block p{margin:0 0 12px}
.card-block .premium-list{margin:0 0 12px}
.card-block .advanced{margin:0 0 14px}
.card-block .advanced-body input{width:100%;max-width:320px}
.acc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* Опасное действие выглядит опасным, но не кричит: оно стоит рядом
   с обычными, и красная заливка превращала бы страницу в предупреждение. */
.danger{border-color:var(--danger,#c0554d);color:var(--danger,#c0554d);background:transparent}
.danger:hover{background:rgba(192,85,77,.12)}
.facts{margin:0;display:grid;gap:10px}
.facts > div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.facts > div:last-child{border-bottom:0;padding-bottom:0}
/* Когда под списком ещё что-то есть, ему нужен воздух: без этого строка
   «Храним с» слипается со следующим абзацем. Последним в карточке список
   отступа не получает — иначе внизу повисает пустота. */
.card-block .facts:not(:last-child){margin-bottom:14px}
.facts dt{color:var(--muted);font-size:13px}
.facts dd{margin:0;font-size:13px}
/* Общая .hint однострочная и режется многоточием — здесь пояснение
   в две строки, и обрывать его нельзя: оно про необратимое действие. */
.card-block .hint{white-space:normal;overflow:visible;max-width:70ch;line-height:1.5}

/* ================= страница картинок ================= */
/* Честное состояние «пока нечем»: не прячем страницу, а называем причину. */
.offline{display:flex;flex-direction:column;gap:4px;margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--warn);border-radius:12px;background:rgba(229,181,103,.10)}
.offline b{font-size:14px}
.offline span{font-size:13px;color:var(--muted);line-height:1.5}
.offline button{align-self:flex-start;margin-top:8px;padding:7px 14px;font-size:13px}

.tabs{display:flex;gap:4px;margin-bottom:14px;padding:3px;
  border:1px solid var(--line);border-radius:10px;width:fit-content;background:var(--panel)}
.tab{padding:7px 16px;border:none;border-radius:8px;background:transparent;
  color:var(--muted);font-size:13.5px}
.tab.active{background:var(--panel-2);color:var(--text)}

.panel{display:flex;flex-direction:column;gap:14px;padding:16px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.panel textarea{resize:none;max-height:180px}
.field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.field-label{font-size:12.5px;color:var(--muted);min-width:44px}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-foot .hint{max-width:60ch}
.panel-foot > :only-child{margin-left:auto}

.source{display:flex;flex-direction:column;align-items:center;gap:12px}
.source img{max-height:260px;border-radius:12px}
.source-empty{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;
  padding:24px 16px;text-align:center;border:1.5px dashed var(--line);border-radius:12px}
.source-empty svg{width:30px;height:30px;color:var(--muted)}
.source-empty b{font-size:14px}
.source-empty span{font-size:12.5px;color:var(--muted);max-width:46ch;line-height:1.5}
.source-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* Расширенные настройки: свёрнуты, пока не понадобились. */
.advanced{margin-top:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.advanced summary{padding:11px 14px;font-size:13px;color:var(--muted);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.advanced summary::-webkit-details-marker{display:none}
/* Стрелка своя, а не браузерная: у системной в Safari другой цвет и размер. */
.advanced summary::before{content:'';width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s}
.advanced[open] summary::before{transform:rotate(45deg)}
.advanced summary:hover{color:var(--text)}
.advanced-body{display:flex;flex-direction:column;gap:12px;
  padding:12px 14px 14px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.advanced summary::before{transition:none}}
/* Недоступная кнопка обязана выглядеть недоступной: иначе человек нажимает
   и не понимает, почему ничего не произошло. */
.panel button:disabled{opacity:.45;cursor:default}
.chip.locked{opacity:.5}
.chip.locked::after{content:'✦';margin-left:6px;font-size:10px}

/* Ожидание с числом, а не бесконечная надпись «думаю» (FR-1005). */
.wait{margin:0;font-size:12.5px;color:var(--muted)}
.wait::before{content:'';display:inline-block;width:8px;height:8px;margin-right:7px;
  border-radius:50%;background:var(--accent);animation:wait-pulse 1.1s ease-in-out infinite}
@keyframes wait-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.wait::before{animation:none;opacity:.7}}

/* Результат показывается сразу: искать только что созданное в общей
   галерее — лишний шаг между «нажал» и «получил». */
.result{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.result-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.result-head h2{margin:0;font-size:15px;font-weight:600}
.result img{max-width:100%;max-height:520px;align-self:flex-start;
  border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}
.result-actions .ghost{padding:6px 12px;font-size:12.5px;text-decoration:none}

.presets,.styles{margin-top:26px}
.presets h2,.gallery h2,.styles h2{margin:0 0 10px;font-size:15px;font-weight:600}
/* Колонок столько, сколько влезет: на широком экране четыре, на планшете
   три, на телефоне две. Жёсткое число ломалось в обе стороны — на узком
   экране название не помещалось в кнопку, на широком кнопки растягивались. */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.preset{display:flex;align-items:center;gap:9px;padding:12px;border-radius:12px;
  background:var(--panel);text-align:left;font-size:13px}
.preset .emo{font-size:18px;line-height:1}
.preset b{font-weight:600}

.gallery{margin-top:26px}
.pic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pic{margin:0;display:flex;flex-direction:column;gap:0;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pic img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel-2)}
.pic figcaption{padding:9px 11px 0;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pic-actions{display:flex;justify-content:flex-end;padding:6px 8px 8px}
.pic-actions button{padding:4px 10px;font-size:12px}



/* ================= окно «что умеет» ================= */
.skills{width:min(540px,94vw)}
.skill-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.skill-list li{display:flex;gap:12px;align-items:flex-start}
.skill-list .emo{font-size:20px;line-height:1.2;flex:none;width:24px;text-align:center}
.skill-list b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.skill-list div span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ================= окно «все модели» ================= */
.models{width:min(560px,94vw)}
.models-list{display:flex;flex-direction:column;gap:4px;max-height:56vh;overflow:auto}
.models-list h3{margin:14px 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.models-list h3:first-child{margin-top:0}
.model-row{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:9px 11px;border:1px solid transparent;border-radius:9px;background:transparent}
.model-row:hover:not(:disabled){background:var(--panel-2);border-color:var(--line)}
.model-row b{font-size:13.5px;font-weight:600;display:flex;align-items:baseline;gap:8px}
/* Ярлык «по подписке» — рядом с названием, а не вместо описания:
   человеку нужно и то, чем модель отличается, и почему она недоступна. */
.model-row .lock{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:1px 6px}
.model-row span{font-size:12px;color:var(--muted)}
.model-row.current{border-color:var(--accent)}
.model-row:disabled{opacity:.5;cursor:default}


/* ================= узкие экраны =================
   Все правила ширины собраны в конце файла, и это не вкусовщина.
   Раньше блок @media стоял в середине, а базовые правила, которые он
   переопределяет, — ниже него. Сила селекторов одинаковая, поэтому
   побеждало то, что записано позже, то есть базовое. Так молча
   отменились три вещи сразу: кнопка меню на телефоне (`.only-mobile`
   ниже по файлу возвращала ей display:none, и меню было не открыть),
   отступы главной и раскладка примеров в два столбца. */

@media (max-width:860px){
  body{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:20;top:0;bottom:0;left:0;width:290px;
    transform:translateX(-100%);transition:transform .18s ease}
  body.side-mobile-open .sidebar{transform:none}
  body.side-mobile-open .scrim{display:block}
  .only-mobile{display:inline-flex}
  .home-inner,.docs-inner{padding:20px 14px 40px}
  .topbar{padding-inline:14px}

  /* Примеры — лента с прокруткой вбок вместо двух строк карточек.
     Две строки занимали треть экрана сразу под полем ввода, а это
     всего лишь образцы ответов: показать их надо, отдавать им пол-экрана
     не надо. Отрицательное поле уводит ленту под края экрана, чтобы было
     видно, что вбок есть продолжение.

     Отступ по краям задан полями первой и последней карточки, а не
     padding'ом ленты. Padding у горизонтального скроллера браузеры
     обрабатывают по-разному — левый край оставался прижатым к экрану;
     поля элементов лежат внутри прокручиваемого содержимого и работают
     везде одинаково. scroll-padding нужен затем же: без него прилипание
     ставит карточку вплотную к краю, мимо отступа. */
  .example-grid{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:72%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-left:14px;
    margin-left:-14px;margin-right:-14px;padding:0 0 4px}
  .example{scroll-snap-align:start}
  .example-grid > .example:first-child{margin-left:14px}
  .example-grid > .example:last-child{margin-right:14px}
  .example-preview{min-height:78px}

  /* Шесть кнопок-подсказок в одну колонку — это шесть строк. Ужимаем поля,
     чтобы вставали по две в ряд, но высоту оставляем: по ним попадают
     пальцем. */
  .chip-btn{padding:8px 10px;gap:5px;font-size:13px}

  /* Блок загрузки на телефоне: перетаскивать файлы там нечем, поэтому
     от него нужна одна кнопка, а не приглашение на три строки. */
  .dropzone{margin:12px 0 14px;padding:14px 12px;gap:4px}
  .dropzone #dz-hint{display:none}
  .dropzone b{font-size:13.5px}
  .dz-icon{width:24px;height:24px}

  /* Шрифт полей ровно 16px. Safari на iOS увеличивает страницу при фокусе
     в любое поле мельче 16px и обратно её не возвращает: человек тапает
     в строку ввода и остаётся с уехавшей вёрсткой до перезагрузки. */
  input,select,textarea,.sidebar .search-box input{font-size:16px}

  /* Палец крупнее курсора: 30 px — это цель, в которую промахиваются. */
  .icon-btn{padding:9px}
  .chat-actions .icon-btn{padding:8px}
  .meta button{padding:6px 10px;font-size:12.5px}

  /* Название модели длиннее экрана уводило строку под полем ввода
     в перенос: слева вложение, справа микрофон и отправка. */
  #model-label{max-width:120px}

  /* Нижняя полоса-указатель на iPhone перекрывает нижние ~34 px экрана,
     а там стоит поле ввода. env даёт 0 там, где полосы нет, поэтому
     на остальных устройствах ничего не меняется. */
  .composer-dock{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .home-inner,.docs-inner{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .sidebar{padding-bottom:calc(14px + env(safe-area-inset-bottom));
    padding-left:calc(14px + env(safe-area-inset-left))}
  /* Вырез камеры в горизонтальной ориентации съедает край страницы. */
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* Экран без мыши. Наведения на нём не бывает, поэтому всё, что появлялось
   по hover, было просто недоступно: переименовать и удалить диалог,
   действия над файлом в списке документов. Показываем сразу. */
@media (hover:none){
  .chat-actions,.row-actions{opacity:1}
  /* Кнопки теперь стоят всегда, и названию диалога нужно место под них,
     иначе оно уходит под них и обрывается многоточием раньше времени. */
  .chat-item{padding-right:70px}
}

@media (max-width:720px){
  .docs-table .c-type,.docs-table .c-date{display:none}
  /* Только поиск в панели документов: она — горизонтальный ряд, и там
     flex:1 отдаёт полю остаток ширины. Тот же класс стоит в боковом меню,
     а оно выложено колонкой, и растягивался бы он по высоте. */
  .docs-bar .search-box{min-width:0;flex:1}
}

/* Совсем узкий экран: размер файла уступает место имени — имя важнее,
   а поля по краям ужимаются: на 320 px двадцать восемь точек полей —
   это десятая часть строки. */
@media (max-width:480px){
  .docs-table .c-size{display:none}
  /* Две вкладки с длинными названиями на 320 px помещаются впритык:
     поля кнопок ужимаем, чтобы полоса не начала уезжать вбок. */
  .tab{padding:7px 11px;font-size:13px}
  .home-inner,.docs-inner{padding-left:12px;padding-right:12px}
  .topbar{padding-inline:12px}
  .docs-head h1{font-size:20px}
  /* В шапке на узком экране и так тесно: бургер, возврат, заголовок
     и «ещё». Остаток места — цифра, которую можно посмотреть
     на странице аккаунта; заголовок страницы важнее. */
  .topbar .usage{display:none}
}

/* ---------- страницы документов ---------- */
/* Политика, соглашение, контакты. Страница живёт без сайдбара и без
   скриптов: на неё приходят по прямой ссылке — из письма, из формы
   оплаты, из выдачи, — и приложение вокруг документа не нужно.
   Разметку собирает app/legal.py, здесь только оформление. */
/* Общий body — это сетка приложения на всю высоту окна с обрезкой:
   прокручиваются внутренние колонки, а не страница. Документу нужно
   ровно обратное, поэтому здесь снимается не только сетка, но и
   высота с обрезкой — иначе текст обрывается на первом экране
   и прокрутить его нечем. */
body.legal{display:block;height:auto;min-height:100vh;overflow:visible;
  background:var(--bg);color:var(--text)}
.legal-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;max-width:760px;margin:0 auto;padding:18px 20px 0}
.legal-lang{color:var(--muted);text-decoration:none;font-size:14px;
  padding:6px 10px;border-radius:8px}
.legal-lang:hover{color:var(--text);background:var(--panel)}
/* Ширина строки — не вкусовая величина: длинную строку глаз теряет
   при переносе, и документ, который и так читают через силу, становится
   нечитаемым совсем. */
.legal-doc{max-width:760px;margin:0 auto;padding:24px 20px 40px;
  font-size:15px;line-height:1.7}
.legal-doc h1{font-size:26px;line-height:1.25;margin:8px 0 20px}
.legal-doc h2{font-size:18px;line-height:1.35;margin:30px 0 10px}
.legal-doc p{margin:0 0 14px}
.legal-doc ul,.legal-doc ol{margin:0 0 14px;padding-left:22px}
.legal-doc li{margin:0 0 7px}
.legal-doc a{color:var(--accent)}
.legal-doc table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:14px}
.legal-doc th,.legal-doc td{border:1px solid var(--line);padding:8px 10px;
  text-align:left;vertical-align:top}
.legal-doc th{background:var(--panel);font-weight:600}
/* Свёрнутый вопрос (FAQ). Двадцать три ответа подряд — это несколько
   экранов сплошного текста, по которым нельзя найти нужное; свёрнутые
   вопросы превращают их в список, помещающийся на экран.

   Парой details/summary, а не скриптом: страница документов намеренно
   обходится без них, и заводить файл ради раскрывания одного абзаца
   значило бы отдать работу, которую браузер делает сам. Заодно это
   работает до загрузки чего бы то ни было и с клавиатуры.

   Текст ответа при этом остаётся в разметке, а не подгружается, —
   поиск и «найти на странице» его видят. Свёрнуто оно только на глаз. */
.legal-doc details{border-bottom:1px solid var(--line)}
.legal-doc h2 + details{border-top:1px solid var(--line)}
.legal-doc summary{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 0;cursor:pointer;
  font-weight:500;line-height:1.45;
  /* Треугольник браузера убираем: он рисуется по-своему в каждом
     и не встаёт в строку с текстом. Свой знак — ниже. */
  list-style:none}
.legal-doc summary::-webkit-details-marker{display:none}
/* Знак раскрытия — плюс, который становится минусом. Не «шеврон»:
   плюс одинаково читается в любом начертании и не зависит от шрифта
   со значками, которого на странице нет. */
.legal-doc summary::after{
  content:"";flex:0 0 auto;margin-left:auto;position:relative;
  width:13px;height:13px;margin-top:5px;
  background:
    linear-gradient(var(--muted),var(--muted)) center/13px 1.5px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/1.5px 13px no-repeat;
  transition:transform .18s ease}
.legal-doc details[open] summary::after{
  transform:rotate(90deg);
  background:linear-gradient(var(--muted),var(--muted)) center/13px 1.5px no-repeat}
.legal-doc summary:hover{color:var(--accent)}
.legal-doc summary:hover::after{
  background-image:linear-gradient(var(--accent),var(--accent)),
                   linear-gradient(var(--accent),var(--accent))}
/* Обводка только для клавиатуры: мышью её видеть незачем, а без неё
   страница непроходима табом. */
.legal-doc summary:focus{outline:none}
.legal-doc summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Ответ. Отступ слева выравнивает его по вопросу и отделяет от списка. */
.legal-doc details > *:not(summary){margin-left:2px}
.legal-doc details > p{margin:0 0 12px}
.legal-doc details > p:first-of-type{margin-top:2px}
.legal-doc details > *:last-child{margin-bottom:16px}
/* Группа вопросов: заголовок прижат к своему списку, а не висит
   посередине между чужим и своим. Правило узкое — только там, где
   за заголовком идёт свёрнутый список; общий отступ h2 в документах
   трогать незачем, политика и соглашение свёрстаны по нему. */
.legal-doc h2:has(+ details){margin-bottom:6px}

/* Недописанный документ. Заметно намеренно: политика с пустыми местами,
   принятая за действующую, хуже отсутствия страницы. Признак ставит
   app/legal.py по самому тексту — пока в нём есть метка «заполнить». */
.legal-doc .legal-draft{margin:0 0 22px;padding:11px 14px;border-radius:9px;
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.45);
  color:var(--text);font-size:14px}
/* Дата редакции: без неё нельзя доказать, с какой версией согласился
   человек, поэтому она видна, а не спрятана в подвал. */
.legal-doc .legal-date{margin-top:28px;padding-top:14px;
  border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.legal-foot{max-width:760px;margin:0 auto;padding:0 20px 40px;
  color:var(--muted);font-size:14px}
.legal-foot a{color:var(--muted)}
.legal-foot a:hover{color:var(--text)}
@media (max-width:600px){
  .legal-doc{font-size:15px;padding:18px 16px 32px}
  .legal-doc h1{font-size:22px}
}