/* ═══════════════════════════════════════════════════════════════════════════
   TOLK AI · Motion5 — layer 2: the workspace.
   Desktop: fixed sidebar + glass topbar + centred content column.
   Mobile (≤900px): drawer + bottom navigation + bottom sheets. The mobile
   layout is its own composition, not a squeezed desktop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ambient field ────────────────────────────────────────────────────────
   Four soft blobs and a very slow drift. Painted behind everything, never
   animated on layout properties, switched off by prefers-reduced-motion. */
.ambient{
  position:fixed;inset:0;z-index:var(--z-ambient);pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% -10%,rgba(80,216,199,.20),transparent 60%),
    radial-gradient(90% 70% at 4% 8%,rgba(23,187,168,.13),transparent 62%),
    linear-gradient(170deg,var(--bg) 0%,var(--bg-2) 46%,#eef7f6 100%);
}
:root[data-theme=dark] .ambient{
  background:
    radial-gradient(120% 90% at 78% -10%,rgba(23,187,168,.18),transparent 60%),
    radial-gradient(90% 70% at 4% 8%,rgba(10,159,145,.14),transparent 62%),
    linear-gradient(170deg,var(--bg) 0%,var(--bg-2) 50%,#0b1a1b 100%);
}
.blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  will-change:transform;
}
.blob.b1{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(80,216,199,.55),transparent 68%)}
.blob.b2{width:640px;height:640px;right:-200px;top:-220px;background:radial-gradient(circle,rgba(23,187,168,.42),transparent 70%)}
.blob.b3{width:460px;height:460px;left:22%;bottom:-240px;background:radial-gradient(circle,rgba(157,232,215,.40),transparent 70%)}
.blob.b4{width:300px;height:300px;right:16%;bottom:-120px;background:radial-gradient(circle,rgba(10,159,145,.24),transparent 70%)}

/* Decorative foliage — abstract, drawn in SVG, purely ornamental. */
.foliage{position:absolute;pointer-events:none;opacity:.9}
.foliage.left{left:-30px;top:120px;width:190px}
.foliage.right{right:-20px;bottom:40px;width:160px;transform:scaleX(-1)}

/* ── Scrim ─────────────────────────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(8,26,25,.42);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--d-standard) var(--e-out);
}
body.drawer-open .scrim,body.sheet-open .scrim{opacity:1}

/* ═══════════════════════ Sidebar ═══════════════════════ */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);
  z-index:var(--z-sidebar);
  display:flex;flex-direction:column;gap:12px;
  padding:18px 16px 16px;
  background:var(--surface-soft);
  gap:12px;
  border-right:1px solid var(--line);
  overflow:hidden;
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 2px}
.sidebar-head .wordmark{font-size:20px}

.new-chat{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:0 14px;border-radius:var(--r-lg);
  color:var(--fill-ink);font-weight:700;font-size:15px;
  background:linear-gradient(135deg,var(--fill-a),var(--fill-b));
  box-shadow:var(--sh-teal);overflow:hidden;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.new-chat:hover{transform:translateY(-1px);box-shadow:var(--sh-teal-lg)}
.new-chat:active{transform:translateY(0) scale(.99)}
.new-chat .kbd{margin-left:auto}
.new-chat .kbd kbd{background:rgba(255,255,255,.24);color:var(--fill-ink)}

/* Nav ------------------------------------------------------------------- */
.nav{position:relative;display:flex;flex-direction:column;gap:2px}
.nav-indicator{
  position:absolute;left:0;width:3px;height:26px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  opacity:0;
  transition:transform var(--d-standard) var(--e-spring),opacity var(--d-fast) var(--e-out);
}
.nav-item{
  display:flex;align-items:center;gap:13px;
  min-height:40px;padding:0 14px;border-radius:var(--r-md);
  color:var(--text-2);font-weight:600;font-size:15px;text-align:left;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.nav-item .ico{color:var(--muted);flex:0 0 auto;transition:color var(--d-fast) var(--e-out),transform var(--d-standard) var(--e-spring)}
.nav-item:hover{background:var(--mint-2);color:var(--text)}
.nav-item:hover .ico{color:var(--brand-deep);transform:scale(1.08)}
/* §7. Активный пункт: скругление как у всей навигации, мягкая подсветка и
   тонкая полоска слева вместо прямоугольной плашки. Раньше заливка совпадала
   с границами кнопки, и пункт читался как вставленный прямоугольник. */
.nav-item[aria-current=page]{
  background:linear-gradient(90deg,var(--mint-3),rgba(221,248,242,0));
  color:var(--brand-deep);font-weight:700;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(23,187,168,.16);
}
:root[data-theme=dark] .nav-item[aria-current=page]{
  background:linear-gradient(90deg,var(--mint-3),rgba(18,48,46,0));
}
/* Полоску слева не рисуем: она уже есть и ездит — .nav-indicator. Вторая
   такая же, статичная, спорила бы с ней при переходе между разделами. */
.nav-item[aria-current=page]{padding-left:18px}
.nav-item[aria-current=page] .ico{color:var(--brand-deep)}
.nav-item:hover{border-radius:var(--r-pill)}
.nav-item .badge{margin-left:auto;height:22px;font-size:11.5px;padding:0 8px}

.side-sep{height:1px;background:var(--line);margin:4px 6px}

/* History ---------------------------------------------------------------
   Only this block scrolls. It must never be allowed to collapse: with
   `min-height:0` a 900px-tall screen squeezed it to zero and the whole
   dialogue list silently disappeared. */
.nav{flex:0 0 auto}
.side-scroll{
  flex:1 1 auto;min-height:132px;overflow:auto;overscroll-behavior:contain;
  margin:0 -6px;padding:0 6px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.side-scroll::-webkit-scrollbar{width:8px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
/* A row that happens to fall on the fold fades out instead of being sliced. */
.side-scroll{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
}
.side-scroll::-webkit-scrollbar{width:8px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
/* A row that happens to fall on the fold fades out instead of being sliced. */
.side-scroll{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 20px),transparent);
}
.hist-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px 6px;font-weight:800;font-size:14px;color:var(--text);
}
.hist-head .count{
  min-width:28px;height:22px;padding:0 8px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-sunken);color:var(--muted);font-weight:700;font-size:12.5px;
}
.chat-row{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:46px;padding:6px 10px;border-radius:var(--r-md);text-align:left;
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.chat-row:hover{background:var(--mint-2)}
.chat-row[aria-current=true]{background:var(--mint-3)}
.chat-row .ico{color:var(--muted);flex:0 0 auto}
.chat-row .t{min-width:0}
.chat-row .t b{display:block;font-weight:600;font-size:14px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row .t span{display:block;font-size:12.5px;color:var(--muted-2)}
.chat-row .kill{
  margin-left:auto;flex:0 0 auto;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;color:var(--muted-2);opacity:0;
  transition:opacity var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.chat-row:hover .kill,.chat-row .kill:focus-visible{opacity:1}
.chat-row .kill:hover{background:var(--danger-soft);color:var(--danger)}
.show-more{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:38px;padding:0 10px;border-radius:var(--r-md);
  color:var(--muted);font-size:13.5px;font-weight:600;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.show-more:hover{background:var(--mint-2);color:var(--brand-deep)}

/* Sidebar foot ---------------------------------------------------------- */
.side-foot{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.balance-card{padding:16px 16px 10px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.balance-card .top{display:flex;align-items:flex-start;gap:12px}
.balance-card .lab{font-size:14px;font-weight:600;color:var(--muted)}
.balance-card .amt{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.balance-card .plus{
  margin-left:auto;width:44px;height:38px;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--fill-ink);
  background:linear-gradient(140deg,var(--fill-ia),var(--fill-ib));
  box-shadow:var(--sh-teal);
  transition:transform var(--d-fast) var(--e-spring),box-shadow var(--d-fast) var(--e-out);
}
.balance-card .plus:hover{transform:translateY(-1px) scale(1.04);box-shadow:var(--sh-teal-lg)}
.balance-card .btn{margin-top:12px}
.balance-card .mini-nav{margin-top:6px;display:flex;flex-direction:column;gap:0}
.mini-link{
  display:flex;align-items:center;gap:12px;min-height:42px;padding:0 6px;
  border-radius:var(--r-sm);color:var(--text-2);font-size:14.5px;font-weight:500;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.mini-link .ico{color:var(--muted)}
.mini-link:hover{background:var(--mint-2);color:var(--brand-deep)}
.mini-link:hover .ico{color:var(--brand-deep)}

.account{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  text-align:left;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.account:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.avatar{
  width:40px;height:40px;border-radius:var(--r-pill);flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,var(--fill-a),var(--fill-b));
  color:var(--fill-ink);font-weight:800;font-size:15px;
}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:72px;height:72px;font-size:24px}
.account .t{min-width:0}
.account .t b{display:block;font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .t span{display:block;font-size:12.5px;color:var(--muted-2)}
.account .ico.chev{margin-left:auto;color:var(--muted-2)}

/* A short window cannot hold the reference density. The three shortcuts go
   first — they are also in the account menu in the top bar. */
@media(min-width:901px) and (max-height:940px){
  .balance-card .mini-nav{display:none}
  .balance-card{padding-bottom:16px}
}

/* ═══════════════════════ Shell ═══════════════════════ */
.shell{
  position:relative;z-index:var(--z-content);
  margin-left:var(--sidebar);min-height:100vh;
  display:flex;flex-direction:column;
}
body.rail .sidebar{width:var(--sidebar-rail)}
body.rail .shell{margin-left:var(--sidebar-rail)}
body.rail .sidebar .nav-label,
body.rail .sidebar .wordmark span,
body.rail .sidebar .new-chat span,
body.rail .sidebar .side-scroll,
body.rail .sidebar .balance-card .lab,
body.rail .sidebar .balance-card .amt,
body.rail .sidebar .balance-card .btn,
body.rail .sidebar .mini-link span,
body.rail .sidebar .account .t,
body.rail .sidebar .account .chev,
body.rail .sidebar .nav-item .badge{display:none}
body.rail .sidebar{padding:18px 12px 16px;align-items:center}
body.rail .nav-item,body.rail .mini-link{justify-content:center;padding:0;width:52px}
body.rail .new-chat{justify-content:center;padding:0;width:52px}
body.rail .balance-card{padding:10px;width:52px}
body.rail .balance-card .top{justify-content:center}
body.rail .balance-card .plus{margin:0;width:32px;height:32px}
body.rail .account{justify-content:center;padding:8px;width:52px}
body.rail .nav-indicator{display:none}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:var(--z-rail);
  display:flex;align-items:center;gap:14px;
  height:var(--topbar);padding:0 var(--gutter);
  background:var(--surface-glass);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-standard) var(--e-out),box-shadow var(--d-standard) var(--e-out);
}
body.scrolled .topbar{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(16,80,72,.06)}
.topbar .grow{display:flex;justify-content:center}

.top-search{
  width:100%;max-width:392px;min-height:42px;
  border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);padding:0 8px 0 16px;
}
.top-search input{font-size:14px}
.top-search kbd{background:var(--surface-sunken)}
.top-search .kbd{margin-left:auto;padding-right:6px}

.model-pill{max-width:290px}
.model-pill .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-pill .logo-tile{width:26px;height:26px;padding:3px;border:0;background:none}

.wallet-pill{
  display:inline-flex;align-items:center;gap:10px;
  height:42px;padding:0 16px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-weight:800;font-size:14.5px;flex:0 0 auto;color:var(--text);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.wallet-pill:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.wallet-pill:active{transform:translateY(0) scale(.99)}
.wallet-pill .ico{color:var(--brand)}
.wallet-pill .sum{letter-spacing:-.01em}

.theme-btn .ico{transition:transform var(--d-emphasized) var(--e-spring)}
.theme-btn:hover .ico{transform:rotate(38deg)}
:root[data-theme=dark] .theme-btn:hover .ico{transform:rotate(-24deg)}

.top-avatar{
  width:40px;height:40px;border-radius:var(--r-pill);overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.top-avatar:hover{transform:translateY(-1px) scale(1.03);box-shadow:var(--sh-2)}

/* ═══════════════════════ Main ═══════════════════════ */
.main{flex:1 1 auto;display:flex;flex-direction:column;padding:0 var(--gutter) 28px}
.wrap{width:100%;max-width:var(--content);margin:0 auto}
.view{display:none;flex:1 1 auto;flex-direction:column}
.view.on{display:flex}

.view-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);padding:var(--s-5) 0 var(--s-4);
}
.view-head h1{font-size:var(--t-h1);line-height:var(--lh-head);font-weight:800;letter-spacing:var(--ls-head)}
.view-head p{margin-top:var(--s-1);color:var(--muted);font-size:var(--t-lead);max-width:var(--measure)}
.view-head>div{min-width:0}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:var(--s-6) 0 var(--s-1);text-align:center}
.hero-mark{
  width:clamp(72px,7vw,112px);height:auto;margin:0 auto var(--s-4);
  filter:drop-shadow(0 18px 34px rgba(10,120,110,.26));
  will-change:transform;
}
.hero h1{
  font-size:var(--t-display);font-weight:800;letter-spacing:var(--ls-display);
  line-height:var(--lh-tight);
}
.hero .sub{
  margin-top:var(--s-3);font-size:var(--t-lead);font-weight:500;color:var(--muted);
  letter-spacing:-.01em;
}
.hero .sub b{color:var(--text);font-weight:800}

/* Handwritten annotations · decorative, hidden from assistive tech. */
.scribble{
  position:absolute;font:600 25px/1.12 var(--f-hand);color:var(--brand-deep);
  opacity:.92;pointer-events:none;user-select:none;
}
.scribble.l{left:2%;top:54px;transform:rotate(-9deg);text-align:center;width:180px}
.scribble.r{right:.5%;top:18px;transform:rotate(7deg);text-align:center;width:152px}
.scribble svg{margin:4px auto 0;color:var(--brand-2)}
.hero-deco{position:absolute;right:1%;top:106px;width:126px;pointer-events:none;opacity:.95;
  filter:drop-shadow(0 14px 26px rgba(10,120,110,.22));will-change:transform}
.hero-note{
  position:absolute;right:13%;top:86px;width:112px;height:72px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(226,246,242,.8));
  border:1px solid var(--line);box-shadow:var(--sh-3);
  transform:rotate(-9deg);pointer-events:none;overflow:hidden;
}
.hero-note::before,.hero-note::after{
  content:'';position:absolute;left:14px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-3),rgba(80,216,199,.25));
}
.hero-note::before{top:20px;width:64px}
.hero-note::after{top:36px;width:44px;opacity:.6}
@media(max-width:1340px){.scribble,.hero-deco,.hero-note,.foliage{display:none}}

/* ── Quick actions ──────────────────────────────────────────────────────── */
/* Одна строка подсказок и ничего больше — как на пустых экранах ChatGPT,
   Claude и Gemini. Всё, что просто ведёт в раздел, живёт в левом меню. */
/* Четыре в ряд — только пока подписи влезают в строку. На 1280 с открытым
   меню под текст остаётся меньше 120px, и «Придумай идею» ломалось на две
   строки. auto-fit сам переходит на три и две колонки: перенос строки в
   карточке выглядит хуже, чем более крупная карточка. */
.quicks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;
  margin-top:24px;
}
@media(min-width:1500px){
  .quicks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.quick{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:14px;padding:16px;text-align:left;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface-card);box-shadow:var(--sh-2);
  overflow:hidden;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.quick::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(180px 120px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.75),transparent 70%);
  opacity:0;transition:opacity var(--d-standard) var(--e-out);
}
:root[data-theme=dark] .quick::after{background:radial-gradient(180px 120px at var(--mx,50%) var(--my,0%),rgba(80,216,199,.12),transparent 70%)}
.quick:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.quick:hover::after{opacity:1}
.quick:hover .tile{transform:scale(1.07) rotate(-3deg)}
.quick:active{transform:translateY(0) scale(.99)}
.quick .txt{min-width:0}
/* Слово не рвём посередине: «Изображени/е» выглядит как брак вёрстки.
   Поэтому overflow-wrap:normal, а подписи подобраны так, чтобы
   помещались в строку даже на 280px — проверено измерением. */
.quick .txt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.012em;line-height:1.26;
  overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.quick .txt span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted-2);line-height:1.35}
.quick .go{color:var(--muted-2);transition:transform var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out)}
.quick:hover .go{transform:translateX(3px);color:var(--brand-deep)}
.quick[aria-disabled=true]{opacity:.72;cursor:not-allowed}
.quick[aria-disabled=true]:hover{transform:none;box-shadow:var(--sh-2)}

/* ── Composer ───────────────────────────────────────────────────────────── */
.composer-wrap{margin-top:28px;position:relative}
.composer{
  position:relative;padding:18px 18px 14px;border-radius:var(--r-2xl);
  background:var(--surface-card);
  border:1px solid var(--line);
  box-shadow:var(--sh-4);
  backdrop-filter:blur(10px);
  transition:box-shadow var(--d-standard) var(--e-out),border-color var(--d-standard) var(--e-out),transform var(--d-standard) var(--e-out);
}
.composer:focus-within{border-color:rgba(23,187,168,.42);box-shadow:var(--sh-4),0 0 0 4px rgba(23,187,168,.10)}
/* §6. Подсветка рамки: градиент идёт по контуру, пока поле в фокусе.
   Рисуем слоем ПОД содержимым и с pointer-events:none — эффект не имеет
   права перехватывать клики и выделение текста. Маска оставляет только
   рамку: заливать градиентом всё поле значит испортить читаемость. */
.composer::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--glow,0deg),
    rgba(23,187,168,0) 0deg, var(--brand-3) 70deg,
    var(--brand-2) 130deg, rgba(23,187,168,0) 220deg, rgba(23,187,168,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity var(--d-standard) var(--e-out);
}
.composer::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;
  box-shadow:inset 0 0 26px rgba(23,187,168,.14);
  transition:opacity var(--d-standard) var(--e-out);
}
.composer:focus-within::before,.composer:focus-within::after{opacity:1}
.composer.busy::before{opacity:1}
/* Содержимое поднимаем над подсветкой: иначе она ложится поверх текста. */
/* Слой содержимого над свечением рамки. `:not(.sr-only)` здесь
   обязателен: position:relative снимал работу clip у скрытых подписей, и
   «Запрос к нейросети» — подпись для экранного диктора — печаталась
   поверх поля ввода как обычный текст. */
.composer>*:not(.sr-only){position:relative;z-index:1}
.composer textarea{
  display:block;width:100%;min-height:52px;max-height:230px;resize:none;
  background:none;border:0;padding:4px 2px 2px;
  font-size:17px;line-height:1.5;color:var(--text);
  scrollbar-width:thin;
}
.composer-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.composer-bar .tools{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.composer-bar .right{display:flex;align-items:center;gap:12px;margin-left:auto}
.send{
  width:54px;height:50px;border-radius:var(--r-lg);flex:0 0 auto;
  display:grid;place-items:center;color:var(--fill-ink);
  background:linear-gradient(140deg,var(--fill-ia),var(--fill-ib));
  box-shadow:var(--sh-teal);overflow:hidden;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),filter var(--d-fast) var(--e-out);
}
.send:hover{transform:translateY(-1px);box-shadow:var(--sh-teal-lg)}
.send:active{transform:translateY(0) scale(.96)}
.send[aria-disabled=true]{background:var(--surface-sunken);color:var(--muted-2);box-shadow:none;cursor:not-allowed}
.send.stop{background:linear-gradient(140deg,#c9463f,#e0403c)}


/* ── Home panels ────────────────────────────────────────────────────────── */
/* Одна панель вместо двух: «Популярные модели» дублировали каталог и
   ссылку в него же, а список моделей на главной — витрина поставщика. */
.panels{margin-top:32px}
.panel{padding:0 0 18px;border-radius:var(--r-lg);
  background:var(--surface-card);border:1px solid var(--line);box-shadow:var(--sh-2)}

.feed{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.feed-row{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:56px;padding:8px 8px;border-radius:var(--r-md);text-align:left;
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.feed-row:hover{background:var(--mint-2)}
.feed-row .t{min-width:0}
.feed-row .t b{display:block;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-row .t span{display:block;font-size:13px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-row .chev{margin-left:auto;color:var(--muted-2);transition:transform var(--d-fast) var(--e-out)}
.feed-row:hover .chev{transform:translateX(3px)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* ── Подвал (§14) ─────────────────────────────────────────────────────────
   Две части: верх со смыслом и ссылками, низ с припиской и годом. Он
   отделён от содержимого не рамкой, а другим фоном и воздухом — рамка во
   всю ширину спорила бы с карточками над ней. */
.foot{
  margin-top:var(--s-8);padding:var(--s-7) var(--gutter) var(--s-5);
  color:var(--muted);font-size:var(--t-sm);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,var(--surface-soft) 60%);
}
.foot-top{
  display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:var(--s-6);
  align-items:start;max-width:var(--content);margin:0 auto;
}
.foot-brand{display:flex;flex-direction:column;gap:var(--s-3)}
.foot .wordmark{font-size:18px}
.foot .wordmark img{display:block;width:30px;height:30px}
.foot-cols{display:flex;gap:var(--s-8);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:var(--s-2);min-width:132px}
.foot-col .t-label{margin-bottom:var(--s-1)}
.foot-col a,.foot-col button{
  align-self:flex-start;text-align:left;font-size:var(--t-sm);font-weight:600;
  color:var(--muted);padding:3px 0;
  transition:color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.foot-col a:hover,.foot-col button:hover{color:var(--brand-deep);transform:translateX(2px)}
.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;max-width:var(--content);margin:var(--s-6) auto 0;
  padding-top:var(--s-4);border-top:1px solid var(--line);
  color:var(--muted-2);font-size:var(--t-caption);
}
@media(max-width:760px){
  .foot{margin-top:var(--s-6);padding:var(--s-6) var(--gutter) var(--s-5)}
  .foot-top{grid-template-columns:1fr;gap:var(--s-5)}
  .foot-cols{gap:var(--s-5);width:100%}
  .foot-col{flex:1 1 132px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}

/* Порядок на главной один для всех ширин: приветствие, поле ввода, затем
   подсказки. Поле ввода — главный элемент экрана, а не то, до чего надо
   доскроллить. `order` требует, чтобы контейнер был flex. */
.chat .wrap{display:flex;flex-direction:column}
.chat #thread{order:0}
.chat #hero{order:1}
.chat .composer-wrap{order:2}
.chat #quicksBlock{order:3}
.chat #panels{order:4}
.chat.has-msgs #thread{order:1}
.chat.has-msgs .composer-wrap{order:9}
/* Пока в диалоге есть сообщения, подсказки и «Продолжить» не нужны: они
   отвлекают от переписки и отодвигают её вверх. */
.chat.has-msgs #quicksBlock,.chat.has-msgs #panels{display:none}

/* Ритм главной. Раньше отступы между блоками были заданы каждым блоком
   по-своему (24 у сетки, 28 у панели, 40 у героя) — и вертикальный ритм
   рассыпался. Теперь расстояние принадлежит родителю и берётся из шкалы. */
.chat #quicksBlock{margin-top:var(--s-6)}
.chat #panels{margin-top:var(--s-7)}
.block>.section-head{margin-bottom:var(--s-4)}

/* ═══════════════════════ Chat ═══════════════════════ */
/* .view.on already supplies `display:flex; flex-direction:column`.
   Re-declaring display here would beat `.view{display:none}` and leave the
   chat pane visible on every other screen. */
.chat{min-height:0}
.thread{display:flex;flex-direction:column;gap:20px;padding:26px 0 8px}
.chat:not(.has-msgs) .thread{padding:0}

.msg{display:flex;gap:12px;max-width:100%}
.msg.user{justify-content:flex-end}
.bubble{
  max-width:min(680px,84%);padding:14px 17px;border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--mint-2),var(--mint));
  color:var(--text);font-size:15.5px;line-height:1.55;
  border:1px solid rgba(15,90,80,.07);
  box-shadow:var(--sh-1);
}
.bubble .time{display:block;margin-top:6px;text-align:right;font-size:11.5px;color:var(--muted-2)}
.msg.ai{align-items:flex-start}
.msg.ai .who{
  width:32px;height:32px;border-radius:var(--r-pill);flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;padding:5px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.answer{
  flex:1 1 auto;min-width:0;max-width:820px;
  padding:16px 18px;border-radius:var(--r-xl);
  background:var(--surface-card);border:1px solid var(--line);box-shadow:var(--sh-2);
}
.answer .time{display:block;margin-top:10px;font-size:11.5px;color:var(--muted-2);text-align:right}
.acts{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.act{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;
  border-radius:var(--r-pill);color:var(--muted);font-size:12.5px;font-weight:600;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.act:hover{background:var(--mint-2);color:var(--brand-deep)}
.act:active{transform:scale(.96)}

/* Markdown ------------------------------------------------------------- */
.prose{font-size:15.5px;line-height:1.62;color:var(--text)}
.prose>*+*{margin-top:12px}
.prose h1,.prose h2,.prose h3,.prose h4{font-weight:800;letter-spacing:-.018em;line-height:1.24}
.prose h1{font-size:22px}.prose h2{font-size:19px}.prose h3{font-size:17px}.prose h4{font-size:15.5px}
.prose ul,.prose ol{padding-left:22px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:5px}
.prose li::marker{color:var(--brand)}
.prose strong{font-weight:800}
.prose em{font-style:italic}
.prose a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px}
.prose code{
  font:500 13.5px/1.4 var(--f-mono);padding:2px 6px;border-radius:7px;
  background:var(--surface-sunken);
}
.prose blockquote{
  padding:8px 0 8px 16px;border-left:3px solid var(--brand-3);color:var(--muted);
}
.prose hr{border:0;height:1px;background:var(--line)}
.prose img{border-radius:var(--r-md);box-shadow:var(--sh-2)}
.codeblock{
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--surface-sunken);
}
.codeblock .bar{
  display:flex;align-items:center;gap:8px;padding:7px 10px 7px 14px;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:700;
}
.codeblock pre{margin:0;padding:14px;overflow:auto;font:500 13.5px/1.55 var(--f-mono)}
.codeblock code{background:none;padding:0;font-size:inherit}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.prose table{border-collapse:collapse;width:100%;font-size:14px}
.prose th,.prose td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{background:var(--surface-sunken);font-weight:800}
.prose tr:last-child td{border-bottom:0}

/* Typing indicator ----------------------------------------------------- */
.typing{display:inline-flex;gap:5px;align-items:center;height:22px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--brand-3);display:block}

/* Потоковый ответ: курсор в конце текста, пока модель печатает. Ставим его
   отдельным элементом, а не ::after у текста: разметка ответа пересобирается
   на каждом кадре, и курсор внутри неё мигал бы вразнобой. */
.msg.streaming .answer{position:relative}
.caret{
  display:inline-block;width:2px;height:1.05em;margin-left:2px;
  vertical-align:text-bottom;border-radius:1px;background:var(--brand);
  animation:caretBlink 1s steps(1,end) infinite;
}
.msg.streaming .live{display:inline}
.msg.streaming .live>:last-child{display:inline}
/* Ответ, оставшийся незаконченным: человек остановил или связь оборвалась.
   Отметка нужна, чтобы обрыв не выглядел как полноценный ответ модели. */
.msg .cut-mark{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-size:12px;font-weight:700;color:var(--warn);
}

/* ═══════════════════════ Catalogue ═══════════════════════ */
/* Полоса над каталогом: поиск и фильтры. На 150 моделях поиск важнее
   фильтров, поэтому он первый и не сжимается ниже читаемой ширины. */
.cat-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:18px}
.cat-search{flex:0 1 320px;min-width:220px}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-bar .filters{padding-bottom:0}
@media(max-width:560px){
  .cat-bar{gap:10px}
  .cat-search{flex:1 1 100%}
  .cat-bar .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .cat-bar .filters::-webkit-scrollbar{display:none}
}
.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.model-card{
  display:flex;flex-direction:column;gap:12px;padding:18px;text-align:left;
  border-radius:var(--r-lg);background:var(--surface-card);
  border:1px solid var(--line);box-shadow:var(--sh-2);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.model-card:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.model-card .hd{display:flex;align-items:center;gap:12px}
.model-card .hd .t{min-width:0}
.model-card .hd b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-card .hd span{display:block;font-size:12.5px;color:var(--muted-2)}
.model-card .desc{font-size:13.5px;color:var(--muted);line-height:1.42;flex:1 1 auto}
.model-card .ft{display:flex;align-items:center;justify-content:space-between;gap:10px}
.model-card .price{font-weight:800;font-size:15px}
.model-card[aria-current=true]{border-color:var(--brand-3);background:linear-gradient(160deg,var(--mint-2),var(--surface) 62%)}
.model-card .tags{display:flex;gap:6px;flex-wrap:wrap}
/* Хвост каталога: пока порции догружаются, место под них занято, и сетка
   не дёргается. Это же кнопка — если наблюдатель прокрутки недоступен. */
.grid-more{
  grid-column:1 / -1;display:grid;place-items:center;min-height:52px;
  border-radius:var(--r-lg);background:var(--surface-sunken);
  color:var(--muted);font-size:13.5px;font-weight:700;cursor:pointer;
}
.grid-more[hidden]{display:none}
/* Возможности модели. Отмеченное «умеет» — мятным, отмеченное «не умеет» —
   нейтрально серым: это не ошибка, а честная характеристика. */
.model-card .caps{display:flex;gap:6px;flex-wrap:wrap}
.cap{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--brand-ink);
  font-size:11.5px;font-weight:700;white-space:nowrap;
}
.cap .ico{opacity:.85}
.cap.no{background:var(--surface-sunken);color:var(--muted-2)}

/* ═══════════════════════ Studio forms ═══════════════════════ */
.studio{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start}
.ws{padding:20px;border-radius:var(--r-lg);background:var(--surface-card);
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.ws h2{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:14px}
.form-row{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.form-row>label,.lbl{font-size:13px;font-weight:700;color:var(--muted)}
.ta{
  width:100%;min-height:104px;max-height:320px;resize:vertical;padding:13px 14px;
  border-radius:var(--r-md);background:var(--surface-sunken);border:1px solid transparent;
  font-size:14.5px;line-height:1.5;
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.ta:focus{background:var(--surface);border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.14)}
/* Однострочное поле и строка с флажком: нужны там, где действие требует
   набранного подтверждения, а не одной кнопки. */
/* Однострочное поле — тот же примитив, что .inp: одна высота, один радиус,
   один фокус. Отдельные 46 px и 15 px здесь были причиной того, что строка
   формы выглядела собранной из разных наборов. */
.in{
  width:100%;min-height:var(--h-md);padding:0 var(--s-3);
  border-radius:var(--r-md);background:var(--surface-sunken);border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--text);
  transition:border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.in:hover:not(:focus):not(:disabled){background:var(--surface);border-color:var(--line)}
.in:focus{outline:none;background:var(--surface);border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.14)}
.in[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(208,54,49,.12)}
/* .check описан в style.css вместе с самой отрисовкой флажка. Здесь его
   больше нет: прежнее правило возвращало системный квадратик. */
.seg{display:flex;gap:7px;flex-wrap:wrap}
.seg button{
  min-height:38px;padding:0 14px;border-radius:var(--r-sm);
  background:var(--surface-sunken);font-weight:700;font-size:13.5px;color:var(--text-2);
  border:1px solid transparent;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out);
}
.seg button:hover{background:var(--mint-2);color:var(--brand-deep)}
.seg button[aria-pressed=true]{background:var(--mint-3);color:var(--brand-deep);border-color:var(--brand-3)}
.pick{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px;
  border-radius:var(--r-md);background:var(--surface-sunken);text-align:left;font-weight:600;
  transition:background var(--d-fast) var(--e-out)}
.pick:hover{background:var(--mint-2)}
.pick .val{margin-left:auto;color:var(--muted);font-weight:700}
.pick .chev{color:var(--muted-2)}

.stages{display:flex;flex-direction:column;gap:0;margin:4px 0 2px}
.stage{display:flex;align-items:center;gap:12px;min-height:40px;font-size:14px;color:var(--muted-2)}
.stage .dot{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-sunken);color:var(--muted-2);
  transition:background var(--d-standard) var(--e-out),color var(--d-standard) var(--e-out),transform var(--d-standard) var(--e-spring);
}
.stage.done .dot{background:var(--fill-ia);color:var(--fill-ink)}
.stage.done{color:var(--text)}
.stage.live .dot{background:var(--mint);color:var(--brand-deep);transform:scale(1.12)}
.stage.live{color:var(--text);font-weight:700}

/* Gallery -------------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.shot{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--surface-sunken);border:1px solid var(--line);aspect-ratio:1;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.shot:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .over{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(6,32,30,.72));
  color:#fff;font-size:12.5px;line-height:1.35;
  opacity:0;transition:opacity var(--d-standard) var(--e-out);
}
.shot:hover .over,.shot:focus-within .over{opacity:1}
.shot .tools{display:flex;gap:6px;margin-top:8px}
.shot .tools a,.shot .tools button{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.shot .tools a:hover,.shot .tools button:hover{background:rgba(255,255,255,.34);transform:translateY(-1px)}

/* Balance -------------------------------------------------------------- */
.bal-hero{
  display:flex;align-items:center;gap:18px;padding:24px;border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--mint-2),var(--mint) 70%,#d3f4ec);
  border:1px solid var(--line);box-shadow:var(--sh-2);
}
:root[data-theme=dark] .bal-hero{background:linear-gradient(150deg,#10292a,#123331)}
.bal-hero .tile{width:56px;height:56px;border-radius:var(--r-lg);background:rgba(255,255,255,.7);color:var(--brand)}
:root[data-theme=dark] .bal-hero .tile{background:rgba(255,255,255,.08)}
.bal-hero .lab{font-size:14px;color:var(--muted);font-weight:600}
.bal-hero .amt{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.bal-hero .acts{margin:0 0 0 auto}
/* Четыре суммы в ряд, пока хватает ширины: сетка из трёх колонок
   оставляла четвёртую кнопку сиротой на второй строке. */
.amount-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--s-3)}
.amount{
  min-height:56px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  font-weight:800;font-size:16px;letter-spacing:-.01em;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out);
}
.amount:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.amount[aria-pressed=true]{background:var(--mint-2);border-color:var(--brand-3);color:var(--brand-deep);box-shadow:0 0 0 3px rgba(23,187,168,.14)}
.amount.wide{grid-column:span 2;font-size:15px;font-weight:700}
.amount[aria-disabled=true]{color:var(--muted-2);cursor:not-allowed;transform:none;background:var(--surface-sunken);box-shadow:none;border-color:transparent}
.pay-row{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:0 16px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--sh-1);font-weight:700;width:100%;text-align:left;
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.pay-row:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.pay-row .yk{font-weight:800;color:#8b3ffd;font-size:17px;letter-spacing:-.02em}
.pay-row .chev{margin-left:auto;color:var(--muted-2)}

.ops{display:flex;flex-direction:column}
.op{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--line)}
.op:last-child{border-bottom:0}
.op .t{min-width:0}
.op .t b{display:block;font-size:14px;font-weight:700}
.op .t span{display:block;font-size:12.5px;color:var(--muted-2)}
.op .v{margin-left:auto;font-weight:800;white-space:nowrap}
.op .v.pos{color:var(--ok)}
.op .v.neg{color:var(--text)}

/* Plans ---------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.plan{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-lg);
  background:var(--surface-card);border:1px solid var(--line);box-shadow:var(--sh-2)}
.plan h3{font-size:17px;font-weight:800}
.plan .p{font-size:28px;font-weight:800;letter-spacing:-.03em}
.plan ul{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted);flex:1 1 auto}
.plan ul li{display:flex;gap:8px;align-items:flex-start}
.plan ul .ico{color:var(--brand);flex:0 0 auto;margin-top:2px}

/* Rows (profile / settings) ------------------------------------------- */
.rows{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-card);border:1px solid var(--line);box-shadow:var(--sh-2)}
.row-link{
  display:flex;align-items:center;gap:14px;min-height:56px;padding:0 16px;
  border-bottom:1px solid var(--line);text-align:left;font-size:15px;font-weight:600;width:100%;
  transition:background var(--d-fast) var(--e-out)}
.row-link:last-child{border-bottom:0}
.row-link:hover{background:var(--mint-2)}
.row-link .ico{color:var(--muted);flex:0 0 auto}
.row-link .val{margin-left:auto;color:var(--muted);font-weight:700}
.row-link .chev{color:var(--muted-2);margin-left:auto}
.row-link .val+.chev{margin-left:0}
.row-link.danger{color:var(--danger)}
.row-link.danger .ico{color:var(--danger)}

/* Devices (active sessions) -------------------------------------------- */
.back-link{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:8px;
  font-size:13px;font-weight:700;color:var(--muted);
  transition:color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out)}
.back-link:hover{color:var(--brand-deep)}
.back-link:hover .ico{transform:translateX(-2px)}
.back-link .ico{transition:transform var(--d-fast) var(--e-out)}
.devs{display:flex;flex-direction:column}
.dev{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.dev:last-child{border-bottom:0}
.dev>.tile{width:42px;height:42px;border-radius:var(--r-md);flex:0 0 auto}
.dev .t{min-width:0;flex:1 1 auto}
.dev .t b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.dev .t>span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted-2)}  /* только строка «последняя активность»: плашка живёт внутри <b> */
.dev .now{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--brand-ink);font-size:11.5px;font-weight:800;letter-spacing:.01em}
.dev .now i{display:block;width:6px;height:6px;border-radius:50%;background:var(--ok);
  animation:livePulse 2.4s var(--e-inout) infinite}
.dev .cut{flex:0 0 auto}
.dev-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

/* Предупреждение на экране: не тревога, а факт, о котором надо знать
   заранее (срок хранения работ, отключённая возможность). */
.notice{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;margin-bottom:16px;border-radius:var(--r-md);
  background:var(--surface-sunken);border:1px solid var(--line);
  font-size:13.5px;line-height:1.45;color:var(--text-2);
}
.notice .ico{flex:0 0 auto;margin-top:1px;color:var(--warn)}
.notice.temp{align-items:center;flex-wrap:wrap;background:var(--mint-2);border-color:var(--mint)}
.notice.temp .ico{color:var(--brand-deep)}
.notice.temp .btn-ghost{margin-left:auto;flex:0 0 auto}
@media(max-width:560px){.notice.temp .btn-ghost{margin-left:0;width:100%}}
/* На узком экране кнопка уходит под текст, но остаётся в его колонке —
   так видно, к какому устройству она относится. */
@media(max-width:560px){
  .dev{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"ico txt" "gap act";
    align-items:center;column-gap:12px;row-gap:10px}
  .dev>.tile{grid-area:ico}
  .dev .t{grid-area:txt}
  .dev .cut{grid-area:act;justify-self:start}
}

/* ═══════════════════════ States ═══════════════════════ */
/* Пустые состояния переведены на общий примитив .state (style.css): два
   похожих блока с разными отступами и размерами были той самой
   «несогласованностью», о которой шла речь. Класс .empty остаётся как
   псевдоним для разметки, которая ещё его использует. */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  padding:var(--s-7) var(--s-5);text-align:center;color:var(--muted);
}
.empty .tile{width:56px;height:56px;border-radius:var(--r-lg)}
.empty h3{font-size:var(--t-h3);font-weight:800;color:var(--text)}
.empty p{max-width:var(--measure-narrow);font-size:14.5px;line-height:var(--lh-body)}
.soon{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--mint);color:var(--brand-ink);font-weight:800;font-size:12.5px;
}
.sk{
  border-radius:var(--r-md);
  background:linear-gradient(100deg,var(--surface-sunken) 20%,rgba(255,255,255,.65) 44%,var(--surface-sunken) 68%);
  background-size:280% 100%;
}
:root[data-theme=dark] .sk{background:linear-gradient(100deg,var(--surface-sunken) 20%,rgba(255,255,255,.07) 44%,var(--surface-sunken) 68%);background-size:280% 100%}
.sk.line{height:13px;margin:7px 0}
.sk.card{height:150px}
.offline{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-pill);
  background:#2a1d1d;color:#ffd9d6;box-shadow:var(--sh-pop);font-weight:700;font-size:13.5px;
}

/* ═══════════════════════ Overlays ═══════════════════════ */
.pop{
  position:fixed;z-index:var(--z-pop);min-width:260px;max-width:min(460px,calc(100vw - 24px));
  padding:8px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop);
  transform-origin:top center;
}
.pop.wide{width:min(460px,calc(100vw - 24px));padding:12px}
.menu-item{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:44px;padding:0 12px;border-radius:var(--r-sm);text-align:left;
  font-size:14.5px;font-weight:600;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out)}
.menu-item .ico{color:var(--muted);flex:0 0 auto}
.menu-item:hover{background:var(--mint-2);color:var(--brand-deep)}
.menu-item:hover .ico{color:var(--brand-deep)}
.menu-item .val{margin-left:auto;color:var(--muted);font-weight:700;font-size:13px}
.menu-item[aria-disabled=true]{color:var(--muted-2);cursor:not-allowed}
.menu-item.danger{color:var(--danger)}
.menu-item.danger .ico{color:var(--danger)}
.menu-sep{height:1px;background:var(--line);margin:6px 8px}
.menu-title{padding:8px 12px 6px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Model picker (shared by popover and sheet) --------------------------- */
.picker{display:flex;flex-direction:column;gap:12px;min-height:0}
.picker .cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.picker .cats::-webkit-scrollbar{display:none}
.picker .list{display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:min(58vh,520px);
  padding:2px;scrollbar-width:thin}
.model-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:13px;
  padding:14px;border-radius:var(--r-lg);text-align:left;width:100%;
  background:var(--surface-soft);border:1px solid transparent;
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.model-row:hover{background:var(--surface);border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-1px)}
.model-row[aria-checked=true]{background:linear-gradient(150deg,var(--mint-2),var(--mint));border-color:var(--brand-3)}
.model-row .t{min-width:0}
.model-row .t b{display:block;font-size:16px;font-weight:800;letter-spacing:-.018em}
.model-row .t .d{display:block;margin-top:3px;font-size:13.5px;color:var(--muted);line-height:1.36}
.model-row .t .m{display:flex;align-items:center;gap:10px;margin-top:9px}
.model-row .t .m .price{font-weight:800;font-size:14.5px}
.mark{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:2px solid var(--line-2);color:transparent;
  transition:background var(--d-fast) var(--e-out),border-color var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),transform var(--d-standard) var(--e-spring);
}
.model-row[aria-checked=true] .mark{background:var(--fill-ia);border-color:var(--fill-ia);color:var(--fill-ink);transform:scale(1.06)}

/* Dialog --------------------------------------------------------------- */
.dialog-host{
  position:fixed;inset:0;z-index:var(--z-dialog);
  display:grid;place-items:center;padding:20px;
  background:rgba(8,26,25,.44);backdrop-filter:blur(4px);
}
.dialog{
  width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;
  padding:24px;border-radius:var(--r-2xl);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop);
}
.dialog h2{font-size:21px;font-weight:800;letter-spacing:-.02em;padding-right:36px}
.dialog .sub{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.5}
.dialog .body{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.dialog .actions{display:flex;gap:10px;margin-top:20px}
.dialog .actions .btn,.dialog .actions .btn-ghost{flex:1 1 auto}
.dialog-close{position:absolute;right:16px;top:16px}
.code-box{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:var(--r-lg);background:var(--mint-2);
  font:800 30px/1 var(--f);letter-spacing:.22em;color:var(--brand-ink);
}

/* Bottom sheet --------------------------------------------------------- */
.sheet-host{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;align-items:flex-end}
.sheet{
  width:100%;max-height:88vh;display:flex;flex-direction:column;gap:14px;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:var(--surface);box-shadow:var(--sh-pop);
  border-top:1px solid var(--line);
}
.sheet-head{display:flex;align-items:center;gap:12px}
.sheet-head h2{font-size:22px;font-weight:800;letter-spacing:-.022em;flex:1 1 auto}
.sheet-grip{
  width:40px;height:4px;border-radius:2px;background:var(--line-strong);
  margin:-8px auto 2px;
}

/* Toast ---------------------------------------------------------------- */
.toasts{
  position:fixed;right:24px;bottom:24px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:11px;max-width:min(400px,calc(100vw - 32px));
  padding:13px 16px;border-radius:var(--r-md);pointer-events:auto;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop);
  font-size:14px;font-weight:600;
}
.toast .ico{flex:0 0 auto;color:var(--brand)}
.toast.err .ico{color:var(--danger)}
.toast.ok .ico{color:var(--ok)}

/* Cookie --------------------------------------------------------------- */
.cookie{
  /* Отступ считается от высоты нижней навигации: на телефоне полоска
     садилась прямо на неё и закрывала кнопки. */
  position:fixed;left:50%;bottom:calc(var(--bottom-nav,0px) + 20px);
  transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  width:min(720px,calc(100vw - 24px));padding:14px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-pop);
  font-size:13.5px;color:var(--muted);
}

/* ═══════════════════════ Mobile ═══════════════════════
   The phone layout is a separate composition: a compact topbar, a single
   scrolling column, a bottom navigation bar, and sheets instead of popovers. */
.mtop,.bnav,.mback{display:none}

@media(max-width:900px){
  :root{--gutter:16px;--topbar:60px;--bottom-nav:68px}

  /* The drawer scrolls as one column on a phone: pinning the balance card
     would clip it on a 780px screen. */
  .sidebar{overflow-y:auto;overscroll-behavior:contain}
  .side-scroll{min-height:0;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .side-foot{margin-top:0}
  .balance-card .mini-nav{display:flex}

  .sidebar{
    width:min(324px,86vw);z-index:var(--z-drawer);
    transform:translate3d(-104%,0,0);
    box-shadow:none;
    border-right:0;border-radius:0 var(--r-2xl) var(--r-2xl) 0;
    transition:transform var(--d-standard) var(--e-inout),box-shadow var(--d-standard) var(--e-out);
  }
  body.drawer-open .sidebar{transform:translate3d(0,0,0);box-shadow:var(--sh-pop)}
  .sidebar{padding-top:calc(18px + env(safe-area-inset-top))}
  .shell{margin-left:0}
  .scrim{display:block}
  body:not(.drawer-open):not(.sheet-open) .scrim{display:none}

  /* Compact topbar: burger / title / action. */
  .topbar{display:none}
  .mtop{
    position:sticky;top:0;z-index:var(--z-rail);
    display:flex;align-items:center;gap:12px;
    height:var(--topbar);padding:0 var(--gutter);
    padding-top:env(safe-area-inset-top);
    height:calc(var(--topbar) + env(safe-area-inset-top));
    background:var(--surface-glass);backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-bottom:1px solid transparent;
    transition:border-color var(--d-standard) var(--e-out);
  }
  body.scrolled .mtop{border-bottom-color:var(--line)}
  .mtop .wordmark{font-size:19px}
  .mtop .mtitle{flex:1 1 auto;text-align:center;font-size:17px;font-weight:800;letter-spacing:-.018em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtop .mmodel{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
  .mtop .mmodel .pill{min-height:36px;max-width:100%}
  .mback{display:grid}

  .main{padding-bottom:calc(var(--bottom-nav) + 18px + env(safe-area-inset-bottom))}
  .hero{padding:6px 0 0}
  .hero-mark{width:66px;height:66px;margin-bottom:8px}
  .hero h1{font-size:clamp(24px,6.6vw,29px)}
  .hero .sub{font-size:15px;margin-top:6px}

  /* Поле ввода закреплено внизу, поэтому в потоке его нет: сверху
     приветствие, подсказки и «Продолжить». */
  .chat #hero{order:1}
  .chat #quicks{order:2}
  .chat #thread{order:3}
  .chat #panels{order:4}
  .chat.has-msgs #thread{order:1}
  .quicks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
  /* На телефоне значок встаёт над подписью. Причина арифметическая: в две
     колонки на 360px под текст остаётся ~80px, и «Придумай идею» рядом со
     значком не помещается ни в одну строку — приходилось либо рвать слово,
     либо обрезать. Значок сверху отдаёт подписи всю ширину карточки, и все
     подписи укладываются в одну строку начиная с 360px. */
  .quick{
    grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;
    justify-items:start;align-content:start;
    padding:13px 13px 12px;gap:9px;border-radius:var(--r-lg);height:92px}
  .quick .tile{width:34px;height:34px;border-radius:11px}
  .quick .go{display:none}
  .quick .txt b{
    font-size:14px;letter-spacing:-.018em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-clamp:2;overflow:hidden;
  }
  /* Ниже 360px две колонки перестают вмещать даже короткую подпись —
     переходим в одну, вместо того чтобы обрезать текст. */
  @media(max-width:359px){
    .quicks{grid-template-columns:minmax(0,1fr);gap:10px}
    .quick{grid-template-columns:auto minmax(0,1fr);align-items:center;
      height:auto;min-height:62px;padding:11px 13px;gap:12px}
    .quick .tile{width:38px;height:38px}
    .quick .txt b{-webkit-line-clamp:1;line-clamp:1}
  }

  .composer{padding:14px 14px 12px;border-radius:var(--r-xl)}
  .composer textarea{min-height:42px;font-size:16px}
  .composer-bar{margin-top:8px;gap:8px}
  .composer-bar .tools{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .composer-bar .tools::-webkit-scrollbar{display:none}
  .iconbtn{
    display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
    border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
    color:var(--text-2);box-shadow:var(--sh-1);
    transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
  }
  .iconbtn:hover{color:var(--brand-deep)}
  .iconbtn:active{transform:scale(.93)}
  .iconbtn[aria-disabled=true]{color:var(--muted-2)}
  .send{width:52px;height:46px}
  
  .panels{margin-top:24px}
    .feed{padding:0 8px}
  .card-head{padding:16px 16px 10px}

  .studio{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .model-grid{grid-template-columns:minmax(0,1fr)}
  .view-head{padding:16px 0 14px}
  .view-head h1{font-size:23px}
  .bal-hero{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
  .bal-hero .acts{margin:0;width:100%;display:flex;gap:10px}
  .bal-hero .acts>*{flex:1 1 auto}
  /* Две в ряд: четыре суммы в три колонки давали сироту во второй строке,
     а на 390 px ширины кнопка в 99 px едва вмещала «2 000 ₽». */
  .amount-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{flex-direction:column;gap:10px;text-align:center;padding-bottom:0}
  .foot .mid{order:3}
  .thread{padding:16px 0 4px;gap:16px}
  .bubble{max-width:88%;font-size:15px}
  .answer{padding:14px}
  .msg.ai .who{width:28px;height:28px}
  .toasts{left:16px;right:16px;bottom:calc(var(--bottom-nav) + 16px + env(safe-area-inset-bottom));align-items:stretch}
  .toast{max-width:none}
  .cookie{bottom:calc(var(--bottom-nav) + 12px + env(safe-area-inset-bottom))}
  .offline{bottom:calc(var(--bottom-nav) + 14px + env(safe-area-inset-bottom))}

  /* Bottom navigation */
  .bnav{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
    display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--bottom-nav) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--nav-glass);backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line);
  }
  .bnav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--muted-2);font-size:11px;font-weight:700;
    transition:color var(--d-fast) var(--e-out);
  }
  .bnav button .ico{transition:transform var(--d-standard) var(--e-spring)}
  .bnav button[aria-current=page]{color:var(--brand-deep)}
  .bnav button[aria-current=page] .ico{transform:translateY(-2px) scale(1.08)}
  .bnav button:active .ico{transform:scale(.9)}

  /* Chat composer docks above the bottom navigation and rides the keyboard. */
  /* На телефоне поле ввода живёт внизу, в зоне большого пальца, а весь
     контент прокручивается над ним — как в мессенджере. Высота поля
     переменная (текст растёт), поэтому запас снизу берётся из --composer-h,
     который ставит JS по фактическому размеру. */
  .chat .composer-wrap{
    position:fixed;z-index:var(--z-nav);
    left:var(--gutter);right:var(--gutter);
    bottom:calc(var(--bottom-nav) + 10px + env(safe-area-inset-bottom));
    margin:0;
    transition:bottom var(--d-standard) var(--e-inout),transform var(--d-standard) var(--e-inout);
  }
  .chat .composer{box-shadow:var(--sh-4),0 -2px 30px rgba(20,90,78,.06)}
  .chat .composer-wrap::before{
    content:'';position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);
    bottom:100%;height:28px;pointer-events:none;
    background:linear-gradient(to top,rgba(238,247,246,.92),rgba(238,247,246,0));
  }
  :root[data-theme=dark] .chat .composer-wrap::before{
    background:linear-gradient(to top,rgba(11,26,27,.92),rgba(11,26,27,0));
  }
  .disclaimer{margin-top:6px;font-size:11px}
  /* Запас под закреплённое поле ввода живёт внутри самого раздела, а не у
     всей страницы. Когда он был у .main, между содержимым и подвалом
     появлялись 280 px пустоты — та самая «пустая секция» из замечаний.
     Теперь пустота уехала под подвал, где она и должна быть: это запас
     прокрутки, а не дыра в вёрстке. */
  body.dock-composer .main{padding-bottom:var(--s-4)}
  /* Сам раздел не удлиняем: иначе запас превращается в пустоту между
     содержимым и подвалом. Запас прокрутки берёт на себя подвал ниже. */
  body.dock-composer .view.chat{padding-bottom:var(--s-4)}
  body.dock-composer .foot{
    padding-bottom:calc(var(--bottom-nav) + var(--composer-h,132px) + 26px + env(safe-area-inset-bottom));
  }
  /* На других разделах поле не закреплено — запас нужен только под навигацию. */
  .main{padding-bottom:calc(var(--bottom-nav) + var(--s-5) + env(safe-area-inset-bottom))}
  /* Последнее сообщение не должно уезжать под закреплённое поле. */
  body.dock-composer .msg{scroll-margin-bottom:calc(var(--composer-h,132px) + var(--bottom-nav) + 24px)}

  /* Клавиатура открыта: нижняя навигация уезжает, поле садится на её место. */
  body.kbd-open .bnav{transform:translateY(110%);pointer-events:none}
  body.kbd-open .chat .composer-wrap{bottom:calc(10px + env(safe-area-inset-bottom))}
  .bnav{transition:transform var(--d-standard) var(--e-inout)}
}

@media(max-width:1200px) and (min-width:901px){
  :root{--sidebar:248px;--gutter:24px}
  .quicks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panels{grid-template-columns:minmax(0,1fr)}
  }
@media(min-width:1600px){:root{--content:1240px;--gutter:40px}}
@media(max-width:420px){
  .quicks{gap:10px}
  .quick{padding:12px}
  .amount-grid{gap:9px}
  .amount{min-height:52px;font-size:15px}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}

/* Touch targets never fall below 44px on coarse pointers. */
@media(pointer:coarse){
  .act,.chip,.show-more,.mini-link,.feed-row,.chat-row,.nav-item,.menu-item,
  .bnav button,.row-link,.seg button{min-height:var(--tap)}
  .btn-icon,.circle{min-width:40px;min-height:40px}
  /* Звёздочка «моя модель» была 32 px: попасть по ней пальцем можно было
     только со второго раза. */
  .star,.kill,.iconbtn{min-width:var(--tap);min-height:var(--tap)}
}

/* ── Desktop / phone control swap ────────────────────────────────────────
   Both rules only ever set `display:none`, so the element keeps whatever
   display its own class gives it (flex for a row, grid for an icon button)
   instead of being forced into one. */
@media(min-width:901px){ .m-only{display:none !important} }
@media(max-width:900px){ .d-only{display:none !important} }

/* ── Provider monogram · the honest fallback when no licensed brand file
      has been supplied. Distinct letter and hue per provider — never one
      generic icon for everything, and never an emoji. ─────────────────── */
.mono{
  display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;
  font:800 15px/1 var(--f);letter-spacing:-.02em;color:#fff;
  /* Тон подбирается по провайдеру, светлота фиксирована: белая литера должна
     читаться на любом из них. */
  background:linear-gradient(145deg,hsl(var(--h,172) 58% 32%),hsl(var(--h,172) 66% 22%));
  text-transform:uppercase;
}
.logo-tile.lg .mono{font-size:19px}
.logo-tile.sm .mono{font-size:11px}
.logo-tile:has(>.mono){padding:0;border-color:transparent}

/* ═══════════════════════ Режим работы ═══════════════════════
   Быстрый режим — основной: пользователь описывает задачу, модель выбирает
   TOLK. Pro отдаёт выбор и настройки человеку. */
.mode-switch{
  display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-pill);
  background:var(--surface-sunken);flex:0 0 auto;
}
.mode-switch button{
  min-height:34px;padding:0 14px;border-radius:var(--r-pill);
  font-weight:700;font-size:13.5px;color:var(--muted);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.mode-switch button:hover{color:var(--brand-deep)}
.mode-switch button[aria-selected=true]{
  background:var(--surface);color:var(--text);box-shadow:var(--sh-1);
}

/* Строка под композером: решение роутера слева, цена шага справа. */
/* ── Цена запуска ─────────────────────────────────────────────────────────
   Раньше под полем ввода стояла строка на две трети ширины: разбор решения
   роутера, имя модели, «входит в тариф, деньги с баланса не спишутся».
   Человеку перед нажатием нужно одно число, и оно должно быть рядом с
   кнопкой, а не в подвале карточки. */
.cost{
  display:inline-flex;align-items:center;height:32px;padding:0 var(--s-3);
  border-radius:var(--r-pill);background:var(--mint-3);color:var(--brand-ink);
  font-weight:800;font-size:13.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  animation:riseSm var(--d-fast) var(--e-out) backwards;
}
:root[data-theme=dark] .cost{background:var(--mint-2)}
/* Оговорки роутера — под значком рядом с ценой: они важны, но не каждому
   и не всегда, а строкой текста они отнимали экран у самого ввода. */
.note-btn{
  width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--warn);background:transparent;
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
}
.note-btn:hover{background:rgba(168,99,15,.12)}
.note-btn:active{transform:scale(.94)}

/* Приложенные файлы: чипы над полем ввода. На чипе сразу видно, прочитался
   ли текст — «приложил и не работает» не должно быть тихой ситуацией. */
/* Скрытое поле выбора файла. Не .sr-only: там clip:rect(0 0 0 0), и часть
   браузеров и автоматизации не считает такое поле доступным для выбора
   файла. Здесь поле есть, оно нулевого размера и прозрачное, но живое. */
.file-pick{
  position:absolute;width:1px;height:1px;opacity:0;
  left:0;bottom:0;
}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.file-chip{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:6px 8px 6px 10px;border-radius:var(--r-md);
  background:var(--mint-2);border:1px solid var(--mint);
}
.file-chip.plain{background:var(--surface-sunken);border-color:var(--line)}
.file-chip .ico{flex:0 0 auto;color:var(--brand-deep)}
.file-chip.plain .ico{color:var(--muted-2)}
.file-chip .t{min-width:0;display:flex;flex-direction:column}
.file-chip .t b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.file-chip .t span{font-size:11px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.file-chip .x{
  display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;
  border-radius:50%;color:var(--muted-2);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.file-chip .x:hover{background:var(--surface);color:var(--danger)}
.composer.drop{border-color:var(--brand-3);box-shadow:0 0 0 4px rgba(23,187,168,.16)}
.bubble-files{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.bubble-files .one{display:inline-flex;align-items:center;gap:6px;font-size:12px;opacity:.85}

/* Приписка об ошибках. Стоит под полем ввода и никуда не уезжает: это не
   подсказка роутера, которая появляется и исчезает, а постоянное
   предупреждение — ровно так же, как в боте. */
/* Счётчик символов (§10). Показываем не всегда, а с 70% лимита: цифра,
   которая висит с первого символа, только отвлекает. */
.counter{
  position:absolute;right:18px;bottom:calc(100% + 6px);
  font-size:11.5px;font-weight:700;color:var(--muted-2);
  background:var(--surface-card);padding:1px 7px;border-radius:999px;
  border:1px solid var(--line);
}
.counter.warn{color:var(--warn);border-color:rgba(168,99,15,.28)}
.counter.over{color:var(--danger);border-color:rgba(208,54,49,.3)}
/* Тот же счётчик, но в обычном блоке формы, а не над закреплённым полем. */
.counter.inline{
  position:static;display:block;margin-top:6px;text-align:right;
  background:none;border:0;padding:0;
}


.disclaimer{
  margin-top:8px;padding:0 2px;text-align:center;
  font-size:12px;line-height:1.35;color:var(--muted-2);
}

/* Автовыбор в пилюле модели */
.model-pill.auto .name{font-weight:800}
.model-pill .auto-tag{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--mint);color:var(--acc-ink,var(--brand-ink));
  font-size:11px;font-weight:800;margin-left:2px;
}

/* Избранное */
.star{
  display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-pill);
  color:var(--muted-2);flex:0 0 auto;
  transition:color var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out),transform var(--d-standard) var(--e-spring);
}
.star:hover{background:var(--mint-2);color:var(--brand-deep)}
.star[aria-pressed=true]{color:var(--brand)}
.star[aria-pressed=true] .ico{transform:scale(1.08)}
.model-card .hd .star{margin-left:auto}
.model-row .t .m .star{margin-left:auto}

/* Подпись под ответом: что и сколько списано */
.answer .charge{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:12px;color:var(--muted);
}
.answer .charge b{color:var(--text);font-weight:800}

/* Копирование таблицы */
.table-wrap{position:relative}
.table-wrap .copy-table{
  position:absolute;right:8px;top:8px;opacity:0;
  transition:opacity var(--d-fast) var(--e-out);
}
.table-wrap:hover .copy-table,.table-wrap:focus-within .copy-table{opacity:1}

@media(max-width:1200px){
  .topbar #newChatTop{display:none}
}
@media(max-width:900px){
  .mode-switch{display:none}
  /* На телефоне цена стоит там же, у кнопки запуска: строка под полем
     съедала экран, а ответ на вопрос «сколько это стоит» должен быть под
     большим пальцем. */
  .cost{height:30px;padding:0 10px;font-size:13px}
}

/* Кнопка копирования в подтверждённом состоянии */
.act.ok{background:var(--mint);color:var(--brand-deep)}
.act.ok .ico{color:var(--brand)}
.codeblock .act.ok{background:var(--mint)}

/* ═══════════════════════════════════════════════════════════════════════════
   Слой отделки: свет, переезжающие индикаторы, отклик на касание.
   Всё на transform / opacity / filter, всё гасится prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Свечение за знаком в герое ────────────────────────────────────────── */
.hero::before{
  content:'';position:absolute;top:24px;left:50%;width:220px;height:220px;
  margin-left:-110px;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,
    rgba(80,216,199,.55),rgba(23,187,168,.18),rgba(157,232,215,.5),
    rgba(10,159,145,.22),rgba(80,216,199,.55));
  filter:blur(34px);opacity:.5;
}
:root[data-theme=dark] .hero::before{opacity:.42}
.hero-mark,.hero h1,.hero .sub{position:relative;z-index:1}
@media(max-width:900px){.hero::before{top:6px;width:170px;height:170px;margin-left:-85px}}

/* ── Карточки подсказок: блик и магнитное притяжение к курсору ───────── */
.quick{--tx:0px;--ty:0px}
.quick::before{
  content:'';position:absolute;inset:-40% -60%;pointer-events:none;z-index:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translate3d(-60%,0,0);opacity:0;
}
:root[data-theme=dark] .quick::before{
  background:linear-gradient(105deg,transparent 38%,rgba(120,240,225,.16) 50%,transparent 62%);
}
.quick:hover::before{opacity:1;animation:sheen 720ms var(--e-out)}
.quick>*{position:relative;z-index:1}
.quick:hover{transform:translate3d(var(--tx),calc(var(--ty) - 2px),0)}

/* ── Переезжающая таблетка нижней навигации ───────────────────────────── */
.bnav-pill{
  position:absolute;top:8px;height:34px;border-radius:var(--r-pill);
  background:var(--mint-3);opacity:0;pointer-events:none;
  transition:transform var(--d-standard) var(--e-spring),width var(--d-standard) var(--e-spring),opacity var(--d-fast) var(--e-out);
}

/* ── Переезжающий фон переключателя режима ───────────────────────────── */
.mode-switch{position:relative}
.mode-thumb{
  position:absolute;top:3px;bottom:3px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--sh-1);opacity:0;pointer-events:none;
  transition:transform var(--d-standard) var(--e-spring),width var(--d-standard) var(--e-spring),opacity var(--d-fast) var(--e-out);
}
.mode-switch button{position:relative;z-index:1}
.mode-switch button[aria-selected=true]{background:none;box-shadow:none}

/* ── Отклик на касание ────────────────────────────────────────────────── */
@media(pointer:coarse){
  .quick:active,.chip:active,.pill:active,.row-link:active,
  .model-card:active,.feed-row:active,.amount:active,.model-row:active{
    transform:scale(.975)
  }
  .quick:hover{transform:none}
  .quick:hover::before{animation:none;opacity:0}
}

/* ── Живая цифра баланса ──────────────────────────────────────────────── */
.amt,.sum,.bal-hero .amt{font-variant-numeric:tabular-nums}
.sum.bump,.amt.bump{animation:bump var(--d-emphasized) var(--e-spring)}

/* ═══════════════════════════════════════════════════════════════════════════
   Ревизия дизайна · 18.09 — плотность, акценты, состояния
   Правки собраны в конце файла осознанно: выше живёт каркас Motion5, и
   переписывать его целиком ради оттенков — значит рисковать вёрсткой,
   которая уже проверена на всех ширинах.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Группы в меню (§5) ───────────────────────────────────────────────────
   Восемь пунктов подряд читались как список ссылок. Надзаголовок делит их
   на «Работа», «Создание», «Материалы» — навигация становится структурой. */
.nav-group{
  padding:var(--s-4) var(--s-4) var(--s-1);
  font-size:var(--t-label);font-weight:800;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted-2);
}
.nav-group:first-child{padding-top:var(--s-2)}
.rail .nav-group{opacity:0;height:0;padding:0;overflow:hidden}

/* ── Карточка баланса ──────────────────────────────────────────────────── */
.balance-card .note{margin-top:2px;font-size:var(--t-caption);color:var(--muted-2)}
.balance-card .amt{font-variant-numeric:tabular-nums}

/* ── Быстрые действия: набор, а не четыре одинаковых прямоугольника ──────
   Слева — цветная кромка категории, которая вырастает при наведении, и
   лёгкий оттенок того же цвета в фоне. Разница видна, но набор остаётся
   одним семейством: ни радиуса, ни тени вразнобой. */
.quicks-block{
  padding:var(--s-5);border-radius:var(--r-2xl);
  background:
    radial-gradient(120% 140% at 0% 0%,var(--mint-2),transparent 62%),
    var(--surface-soft);
  border:1px solid var(--line);
}
:root[data-theme=dark] .quicks-block{
  background:radial-gradient(120% 140% at 0% 0%,rgba(23,187,168,.07),transparent 62%),var(--surface-soft);
}
.quicks{margin-top:0}
.quick{
  gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background:var(--surface);
}
/* Кромка: 3 px в покое, 5 px при наведении. Цвет приходит из data-cat той
   же плитки, поэтому кромка и иконка всегда одного семейства. */
.quick::before{
  content:'';position:absolute;left:0;top:var(--s-3);bottom:var(--s-3);
  width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--qa,var(--brand-2)),var(--qb,var(--brand)));
  transition:width var(--d-fast) var(--e-out),top var(--d-fast) var(--e-out),bottom var(--d-fast) var(--e-out);
}
.quick:hover::before{width:5px;top:6px;bottom:6px}
.quick[data-cat=text]{--qa:var(--c-text);--qb:var(--c-text)}
.quick[data-cat=idea]{--qa:var(--c-idea);--qb:var(--c-idea)}
.quick[data-cat=image]{--qa:var(--c-image);--qb:var(--c-image)}
.quick[data-cat=video]{--qa:var(--c-video);--qb:var(--c-video)}
.quick[data-cat=audio]{--qa:var(--c-audio);--qb:var(--c-audio)}
.quick[data-cat=doc]{--qa:var(--c-doc);--qb:var(--c-doc)}
.quick[data-cat=all]{--qa:var(--c-all);--qb:var(--c-all)}
.quick[data-cat=find]{--qa:var(--c-find);--qb:var(--c-find)}
/* Стрелка появляется в круге — так видно, что карточка ведёт дальше, и при
   этом в покое она не шумит. */
.quick .go{
  width:28px;height:28px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:transparent;
  transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.quick:hover .go{background:var(--mint-3)}

/* ── Панель «Продолжить» ─────────────────────────────────────────────────
   Заголовок вынесен наружу, поэтому саму карточку рисуем только когда в ней
   есть содержимое: пустая белая коробка на пол-экрана — это и была «пустая
   секция» из замечаний. */
.panel{background:none;border:0;box-shadow:none;padding:0}
.panel .feed{
  border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden;
}
.panel .feed:empty{display:none}
.panel .feed .state{background:none;border:0}

/* ── Секции внутри разделов ──────────────────────────────────────────────
   .ws — рабочая карточка раздела. Ей нужен один отступ и один заголовок,
   а не «h2 сверху и как получится». */
.ws>h2{
  font-size:var(--t-h3);font-weight:800;letter-spacing:-.015em;
  margin-bottom:var(--s-4);
}
.ws+.ws{margin-top:var(--s-5)}

/* ── Сетка быстрых действий ───────────────────────────────────────────────
   Четыре карточки не должны ломаться на «три и одна»: осиротевшая карточка
   во второй строке выглядит как ошибка вёрстки. До 1100 px — две в ряд
   (2×2, честная сетка), дальше — четыре, и карточка становится вертикальной:
   в колонке подписи хватает места, и её не приходится обрезать. */
.quicks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
@media(min-width:1100px){
  .quicks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .quick{
    grid-template-columns:1fr;align-items:start;
    gap:var(--s-3);padding:var(--s-5) var(--s-4) var(--s-4) var(--s-5);
    min-height:150px;
  }
  .quick .txt{padding-right:var(--s-6)}
  .quick .go{position:absolute;right:var(--s-3);top:var(--s-3)}
  .quick .tile{width:44px;height:44px}
}
@media(min-width:1500px){.quicks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){
  .quicks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .quicks-block{padding:var(--s-4);border-radius:var(--r-xl)}
}

/* Пустое состояние внутри панели не должно занимать пол-экрана. */
.panel .feed .state{padding:var(--s-6) var(--s-4)}
.panel .feed .state.framed{border:0}

/* ── Боковое меню на невысоких экранах ────────────────────────────────────
   Баг: содержимое меню (кнопка, разделы, история, баланс, профиль) в сумме
   1137 px, а на ноутбуке высота окна 800–1000. Меню было overflow:hidden с
   min-height у истории — и профиль с «Настройками» просто обрезался: до них
   нельзя было добраться ни скроллом, ни клавиатурой.

   Решение по шагам: сначала сжимается история диалогов (её место —
   переменное), и только если и этого мало, прокручивается само меню.
   Ничего важного не остаётся за краем экрана. */
.sidebar{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.side-foot{flex:0 0 auto}
@media(max-height:1080px){
  .side-scroll{min-height:0}
}
@media(max-height:820px){
  /* Совсем низкое окно: ссылки под балансом становятся строкой иконок —
     три строки по 42 px превращаются в одну по 52. */
  .balance-card .mini-nav{flex-direction:row;gap:var(--s-1)}
  .balance-card .mini-nav .mini-link{
    flex:1 1 0;flex-direction:column;gap:3px;min-height:52px;padding:6px 2px;
    font-size:11px;text-align:center;border-radius:var(--r-md);
  }
  .balance-card{padding:var(--s-3) var(--s-3) var(--s-2)}
  .balance-card .amt{font-size:22px}
  .new-chat{min-height:44px}
  .nav-group{padding-top:var(--s-3)}
}

/* ── Мобильное меню как отдельный экран (§13) ─────────────────────────────
   Прокрутка страницы под открытым меню блокируется: иначе палец двигал
   содержимое под затемнением, и меню выглядело приклеенным к чужому экрану. */
body.drawer-open,body.sheet-open,body.dialog-open{overflow:hidden}
@media(max-width:900px){
  body.drawer-open .sidebar{touch-action:pan-y}
  /* Кнопка закрытия должна быть заметной, а не «крестиком где-то там». */
  .sidebar #drawerClose{
    width:40px;height:40px;background:var(--surface-sunken);
    border:1px solid var(--line);box-shadow:none;
  }
  .sidebar #drawerClose:hover{background:var(--danger-soft);color:var(--danger)}
  /* Индикатор раздела в ящике не нужен: активный пункт и так залит, а
     полоска у скругления пилюли читалась как случайный зелёный обрезок.
     !important здесь по делу: позицию и прозрачность полоске ставит
     рантайм инлайном, и обычное правило до неё не достаёт. */
  .sidebar .nav-indicator{opacity:0 !important}
}
/* Индикатор в меню не ездит, пока меню закрыто и анимация не нужна. */
.nav-indicator{will-change:transform}

/* ── Панель каталога: поиск, категории, сортировка (§5) ───────────────────
   Категории — не список ссылок, а рельс: на телефоне он прокручивается
   пальцем с примагничиванием, по краям — растворение, чтобы было видно, что
   список продолжается. Поиску возвращена видимая поверхность: на светлом
   фоне поле без границы читалось как строка текста с иконкой. */
.cat-bar{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding-bottom:var(--s-4);
}
.cat-search{
  flex:0 1 320px;min-width:220px;
  background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1);
}
.cat-search:focus-within{box-shadow:var(--sh-2),0 0 0 4px rgba(23,187,168,.14)}
.cat-bar .sort{margin-left:auto;flex:0 0 auto}
.cat-bar .sort .sel select{
  min-width:190px;background:var(--surface);border-color:var(--line);
  box-shadow:var(--sh-1);font-size:var(--t-sm);
}
.filters{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
@media(max-width:900px){
  .cat-bar .sort{margin-left:0;flex:1 1 100%}
  .cat-bar .sort .sel select{width:100%}
}
@media(max-width:560px){
  .cat-bar{gap:var(--s-2)}
  .cat-search{flex:1 1 100%}
  .cat-bar .filters{
    flex-wrap:nowrap;overflow-x:auto;width:100%;
    scrollbar-width:none;scroll-snap-type:x proximity;
    padding:2px var(--s-4) 2px 2px;margin-inline:-2px;
    /* Растворение у правого края: видно, что чипы продолжаются. */
    -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  }
  .cat-bar .filters::-webkit-scrollbar{display:none}
  .cat-bar .filters>.chip{scroll-snap-align:start;flex:0 0 auto}
}

/* ── Без дублей заголовка на телефоне ────────────────────────────────────
   Название раздела уже стоит в верхней строке; тот же текст крупным кеглем
   под ней — дубль, который съедает первый экран. Оставляем пояснение: оно
   несёт смысл, а не повторяет надпись. */
@media(max-width:900px){
  body.has-mtitle .view.on>.wrap>.view-head>div>h1{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
  body.has-mtitle .view.on>.wrap>.view-head{padding-top:var(--s-4)}
}

/* Блок истории не должен сжиматься до половины строки: обрезанная фраза
   читается как поломка. Одна строка — минимум, дальше работает прокрутка. */
.side-scroll{min-height:48px}
@media(max-height:1080px){.side-scroll{min-height:48px}}

/* ── Тарифы: иерархия без выдуманной популярности ─────────────────────────
   Подсвечен тот тариф, который у человека сейчас. Ярлыка «выбирают чаще»
   здесь нет: таких данных сервис не собирает, а придуманная популярность —
   это обман на экране, где человек тратит деньги. */
.plans{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-4)}
@media(min-width:1000px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{padding:var(--s-5);gap:var(--s-3)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.plan.current{
  border-color:var(--brand-3);
  box-shadow:var(--sh-3),0 0 0 3px rgba(23,187,168,.14);
}
.plan.current .plan-head .badge{background:var(--mint);color:var(--brand-ink)}
/* Бесплатный тариф — не такой же прямоугольник, как платные: он не
   продаётся, и кнопки у него нет. */
.plan.free{background:var(--surface-soft);box-shadow:var(--sh-1)}
.plan .btn{margin-top:auto}
.avatar{position:relative;overflow:hidden}
.avatar .profile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.model-card{position:relative}
.model-choose{padding:0;border:0;background:none;color:inherit;font:800 15.5px/1.4 Manrope,sans-serif;text-align:left;cursor:pointer}
.model-choose::after{content:"";position:absolute;inset:0;border-radius:inherit}
.model-choose:focus-visible{outline:none}
.model-card:has(.model-choose:focus-visible){outline:2px solid var(--brand-ink);outline-offset:3px}
.model-card .star{position:relative;z-index:1}
.model-row{position:relative}
.model-pick{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.model-row .star{position:relative;z-index:1}
.logo-tile:has([data-brand="openai"]),.logo-tile:has([data-brand="grok"]),.logo-tile:has([data-brand="bfl"]),.logo-tile:has([data-brand="luma"]){background:#fff}