/* The system's own fonts (as ChatGPT): text and code. Weights in use: 400, 600, 700. */
/* The family is set once, on body; form controls take it from there (browsers give them their own otherwise). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
:root {
  --font-sans: -apple-system-body, ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
/* Chat pages on top of app.css (the dashboard's ReUI base-nova): sign-in (ReUI auth-1), the chat
   (ReUI ai-chat-1 transcript and composer), files, account, employees. */

/* ---------- sign-in: the form alone, in the middle of the page ---------- */
/* Behind it ReUI auth-1's background (Magic UI's animated grid pattern): 40px cells, the lines gray-400 at 7% (dark:
   gray-500 at 6%), cells in the text colour that light up to 8% and go out again (login.js), everything fading out
   towards the edges. ReUI draws it on a box of 120% × 116% from −10%/−8%; here the box is the window and the ellipse is
   the same one in window terms, so the lines stay on whole pixels at any width. The body's photo is not used here. */
body.auth-page { background: var(--background); }
.auth-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--foreground);
  -webkit-mask-image: radial-gradient(86.4% 74.24% at 50% 47.68%, #000, rgba(0,0,0,.72), transparent);
  mask-image: radial-gradient(86.4% 74.24% at 50% 47.68%, #000, rgba(0,0,0,.72), transparent);
}
.auth-grid { position: absolute; inset: 0; width: 100%; height: 100%; stroke: oklch(70.7% .022 261.325 / 7%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-grid { stroke: oklch(55.1% .027 264.364 / 6%); } }
:root[data-theme="dark"] .auth-grid { stroke: oklch(55.1% .027 264.364 / 6%); }
.auth-cell { position: absolute; width: 39px; height: 39px; background: currentColor; opacity: 0; }
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 48px 16px; }
/* The form in a block, as ReUI auth-4: a Frame (app.css .card), its panel padded 40px 36px, from 640px 44px all round
   (px-9 py-10 sm:p-11). Up to 384px wide (max-w-sm; auth-4 has 448, the user wanted it narrower) — the fields 286px. */
.auth-card { width: 100%; max-width: 384px; }
.card-body.auth-form { display: grid; gap: 16px; padding: 40px 36px; }
@media (min-width: 640px) { .card-body.auth-form { padding: 44px; } }
.auth-head { display: grid; justify-items: center; gap: 4px; text-align: center; margin-bottom: 8px; }
.auth-logo { width: 40px; height: 40px; display: block; margin-bottom: 8px; border-radius: 8.57px; }   /* the mark's rx 6 of 28 */
/* On the dark panel (#171717, the colour of the mark's own square) the square would vanish: a 1px ring, as ReUI's logo tile. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-logo { box-shadow: 0 0 0 1px var(--border); } }
:root[data-theme="dark"] .auth-logo { box-shadow: 0 0 0 1px var(--border); }
/* The lines under the logo as ReUI auth-1's: 12px below the logo (gap-3), the title text-xl font-semibold
   tracking-tight (20px/28px, −0.025em), 4px (gap-1) to the line under it, text-sm muted (14px/20px, from body). */
.auth-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.025em; }
.auth-head p { margin: 0; color: var(--muted-foreground); }
/* Input with icons inside (ReUI c-input-group-21, shadcn base-nova InputGroup): the border and focus ring are on the
   group, the input is bare (pr-1.5); the end addon has pr-2, pulled in by 0.3rem when it holds a button; buttons are
   ghost icon-xs 24px, radius 7 (radius − 3), icons 16px; plain icons in the addon are muted. */
.input-group { display: flex; align-items: center; width: 100%; min-width: 0; height: 32px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.input-group-xl { height: 40px; }
.input-group:has(> .input:focus-visible) { border-color: var(--ring-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-focus) 50%, transparent); }
.input-group > .input { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-right: 6px; }
.input-group > .input:focus-visible { border: 0; box-shadow: none; }
.input-group-addon { display: flex; align-items: center; gap: 8px; padding-right: 8px; color: var(--muted-foreground); }
.input-group-addon:has(> button) { margin-right: -4.8px; }
.input-group-addon svg.i { width: 16px; height: 16px; }
/* Text in a field (ReUI c-input-group-8/9: InputGroupText): a unit after the value («500 МБ»), or a sign before it (an
   addon with .start); 14px in the muted tone, the input 8px from it. */
.input-group-text { font-size: 14px; line-height: 20px; white-space: nowrap; }
.input-group-addon.start { order: -1; padding: 0 0 0 8px; }
.input-group:has(> .input-group-addon.start) > .input { padding-left: 8px; }
.input-group > .input[type=number] { -moz-appearance: textfield; }
.input-group > .input[type=number]::-webkit-inner-spin-button, .input-group > .input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-group-btn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--foreground); cursor: pointer; }
.input-group-btn:hover { background: var(--muted); }
.input-group-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-focus) 50%, transparent); }
/* The user's rule (30.10.2026): in a form the button stands as far from the last field's box as the boxes stand from
   each other — 42px: the stack's 16px gap + the next field's label line (20) and its gap (6), which the button has not. */
.auth-form .btn-primary { width: 100%; margin-top: 26px; }
.form-stack { display: grid; gap: 16px; }
.form-stack > :last-child { margin-top: 26px; }
/* ReUI base-nova sizes: sm 28px, default 32px, lg 36px; xl 40px is ours, one step up (the sign-in form). */
.btn-xl { height: 40px; padding: 0 16px; }
.input-xl { height: 40px; padding: 0 12px; }
.brand-logo { width: 32px; height: 32px; flex: none; display: block; border-radius: 10px; }   /* as the dashboard's .brand-tile */

/* ---------- sidebar: chats ---------- */
.chat-list .sb-button { position: relative; }
/* Room for the «⋯» (and a pinned chat's pin in its place), and none on the folded rail. */
.chat-list .sb-button:has(.sb-more) { padding-right: 32px; }
.shell.collapsed .chat-list .sb-button { padding-right: 8px; }
.chat-list .sb-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A pinned chat: its pin always shows at the right (SidebarMenuAction: size-5, right-1); when the «⋯» comes (hover,
   the open chat, touch) the pin steps left of it. The title keeps room for both. */
.sb-pin { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted-foreground); pointer-events: none; }
.sb-pin svg.i { width: 14px; height: 14px; }
.chat-list .sb-button:has(.sb-pin) { padding-right: 52px; }
.chat-list .sb-button:is(:hover, :focus-within, [aria-current="page"]) .sb-pin, .chat-list .sb-button:has(.sb-more.open) .sb-pin { right: 26px; }
.chat-list .running-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--series); flex: none; animation: pulse 1.2s infinite; }
.sb-empty { padding: 4px 8px; color: var(--muted-foreground); font-size: 12.8px; line-height: 18px; }
.user-menu[hidden], .composer-files[hidden], .btn[hidden], .tool-toggle[hidden] { display: none; }
button.sb-button { border: 0; background: none; font: inherit; color: inherit; width: 100%; cursor: pointer; text-align: left; }
button.sb-button:hover { background: var(--sidebar-accent); }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
/* The chat's title is the path's page (as every header: .breadcrumb), a button that renames the chat: the same text,
   a fill on hover reaching 6px beyond it. */
.chat-title { min-width: 0; height: 28px; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: text; }
.chat-title:hover { background: var(--muted); }
/* A plain page title in the header, as the last crumb of «Мои файлы» (not a button). */
.header-spacer { flex: 1; }
.transcript-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.transcript { flex: 1; min-height: 0; overflow-y: auto; }
/* ReUI message-scroller: fade the last min(12%, 40px) while not at the end; the round outline icon-sm «↓»
   16px over the bottom, in 200ms (out of the way in 400ms: down by its height, 95%, transparent). */
.transcript.fade-b { -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - min(12%, 40px)), transparent 100%); mask-image: linear-gradient(#000 0, #000 calc(100% - min(12%, 40px)), transparent 100%); }
.to-bottom { position: absolute; left: 50%; bottom: 16px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 9999px; background: var(--background); color: var(--foreground); cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  transition: translate .2s cubic-bezier(.23, 1, .32, 1), scale .2s cubic-bezier(.23, 1, .32, 1), opacity .2s cubic-bezier(.23, 1, .32, 1); translate: -50% 0; }
.to-bottom:hover { background: var(--muted); }
.to-bottom svg.i { width: 16px; height: 16px; }
.to-bottom[data-active="false"] { pointer-events: none; translate: -50% 100%; scale: .95; opacity: 0; transition-duration: .4s; transition-timing-function: cubic-bezier(.7, 0, .84, 0); }
.transcript-inner { max-width: 768px; margin: 0 auto; padding: 24px; display: grid; gap: 24px; }
/* The day between messages, as ReUI's separator marker: muted 14/20, 1px border-colored lines to both sides, 12px off. */
.day-sep { scroll-margin-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.day-sep::before { margin-right: 4px; }
.day-sep::after { margin-left: 4px; }
.msg-user { display: grid; justify-items: end; gap: 4px; }
/* The avatar column (32px + 8px) on the right: the last piece sits beside the avatar, its bottom 4px under the
   avatar's (a one-line bubble has it centered), everything else ends where that piece ends. */
.msg-user > :not(.msg-user-line) { margin-right: 40px; }
.msg-user-line { display: flex; justify-content: flex-end; align-items: flex-end; gap: 8px; width: 100%; }
.msg-user-line > :first-child { min-width: 0; }
.msg-user-line > .bubble { max-width: calc(80% - 32px); }
.msg-avatar { margin-bottom: 4px; }
.msg-avatar.ghost { visibility: hidden; }
.bubble { background: var(--muted); border: 1px solid transparent; border-radius: 14px; padding: 8px 12px; max-width: 80%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.625; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 80%; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: 12.8px; color: var(--foreground); text-decoration: none; max-width: 260px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip svg.i { width: 14px; height: 14px; color: var(--muted-foreground); flex: none; }
.file-chip button { border: 0; background: none; padding: 0; color: var(--muted-foreground); cursor: pointer; display: grid; }
.ai-files { display: flex; flex-wrap: wrap; gap: 6px; }
#chat-files-btn { display: contents; }
.pick-row > svg.i:last-child { margin-left: auto; }
.file-chip.img { height: auto; padding: 4px; cursor: pointer; }
/* Image viewer as fancybox over the system's backdrop (the sheets' overlay: black 10%, no blur), fading in;
   the image with radius 10 and shadow-lg; the buttons are round 40px cards (ring + shadow) as the system's popovers;
   the thumbnails strip below: 56x40, radius 8, the current one ringed. */
.viewer { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(0, 0, 0, .1); opacity: 0; transition: opacity .25s cubic-bezier(.4, 0, .2, 1); }
.viewer.open { opacity: 1; }
.viewer-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 16px; }
.viewer-count, .viewer-name { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 1px 3px rgba(0, 0, 0, .1); font-size: 13px; }
.viewer-count:empty { display: none; }
.viewer-count { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.viewer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 32px; color: var(--muted-foreground); }
.viewer-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--card);
  color: var(--foreground); cursor: pointer; text-decoration: none; transition: background-color .15s, scale .15s;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.viewer-btn:hover { background: var(--muted); }
.viewer-btn:active { scale: .95; }
.viewer-btn svg.i { width: 18px; height: 18px; }
.viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 80px 16px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; user-select: none; cursor: default;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.viewer-nav { position: absolute; top: 50%; translate: 0 -50%; }
.viewer-nav.prev { left: 20px; }
.viewer-nav.next { right: 20px; }
.viewer-thumbs { display: flex; justify-content: safe center; gap: 8px; overflow-x: auto; padding: 4px 16px 16px; scrollbar-width: none; }
.viewer-thumbs button { flex: none; width: 56px; height: 40px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--muted);
  cursor: pointer; opacity: .6; transition: opacity .15s, box-shadow .15s; box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent); }
.viewer-thumbs button:hover { opacity: 1; }
.viewer-thumbs button.active { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground); }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .viewer-head { padding: 12px; }
  .viewer-stage { padding: 0 8px 12px; }
  .viewer-nav.prev { left: 12px; }
  .viewer-nav.next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .viewer { transition: none; } }
.file-chip.img img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
/* The picture's file is gone: its place kept (120×90 in the chip), only «Файл удалён» in grey. */
.file-chip.img.gone { width: 130px; height: 100px; justify-content: center; cursor: default; color: var(--muted-foreground); background: var(--muted); }
/* Pictures the AI made, in its answer as ChatGPT shows them: large (up to 360px), radius 16px, no frame; one that has
   just appeared comes out of a blur (1.2s), once. */
.ai-images { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip.img.ai-image { padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; }
.file-chip.img.ai-image img { width: auto; height: auto; max-width: min(100%, 360px); max-height: 360px; border-radius: 16px; }
.file-chip.img.ai-image.reveal img { animation: img-reveal 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes img-reveal { from { filter: blur(24px) saturate(.6); opacity: .3; transform: scale(1.02); } to { filter: none; opacity: 1; transform: none; } }
/* While the AI makes a picture (app.js imageAsk): ChatGPT's card — a square in the muted tone with a slow soft light
   drifting over it, «Создаю изображение» in its corner with a shine running along the words. */
.img-gen { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--muted); }
.img-gen::before { content: ""; position: absolute; inset: -30%; filter: blur(32px); animation: img-gen-drift 5s ease-in-out infinite alternate;
  background: radial-gradient(circle at 30% 35%, color-mix(in srgb, var(--foreground) 9%, transparent), transparent 40%),
    radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--foreground) 6%, transparent), transparent 45%); }
@keyframes img-gen-drift { to { transform: translate(12%, 8%) rotate(25deg); } }
.img-gen-label { position: absolute; top: 12px; left: 14px; font-size: 14px; line-height: 20px; color: transparent;
  background: linear-gradient(90deg, var(--muted-foreground) 35%, var(--foreground) 50%, var(--muted-foreground) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: text-shine 2.2s linear infinite; }
@keyframes text-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .img-gen::before, .img-gen-label, .file-chip.img.ai-image.reveal img { animation: none; } .img-gen-label { color: var(--muted-foreground); } }
.msg-ai { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
.ai-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; padding-top: 4px; }
/* Long code lines and wide tables scroll inside their block, the answer never gets wider than the column. */
.ai-body > *, .md > * { min-width: 0; max-width: 100%; }
.ai-meta { color: var(--muted-foreground); font-size: 12px; line-height: 16px; font-weight: 600; }

/* markdown answer */
.md { line-height: 1.625; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md table { margin: 0 0 12px; }
/* Headings on the ReUI (Tailwind) scale: text-xl/lg/base/sm with their line heights */
.md h1, .md h2, .md h3, .md h4 { margin: 20px 0 8px; font-weight: 600; }
.md h1 { font-size: 20px; line-height: 28px; } .md h2 { font-size: 18px; line-height: 28px; } .md h3 { font-size: 16px; line-height: 24px; } .md h4 { font-size: 14px; line-height: 20px; }
.md ul, .md ol { padding-left: 24px; }
.md li + li { margin-top: 4px; }
.md a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.md a.file-link > code { text-decoration: underline; text-underline-offset: 2px; }   /* a named file that is there */
.md blockquote { border-left: 3px solid var(--border); padding-left: 12px; color: var(--muted-foreground); }
.md code { font-family: var(--font-mono); font-size: 12.8px; background: var(--muted); border-radius: 4px; padding: 1px 4px; }
.md table { border: 1px solid var(--border); border-radius: 8px; display: block; overflow-x: auto; }
/* Tables in an answer (and a file's preview): cells wrap their text and size by it — the data tables' rules (one line,
   the first column taking the rest with max-width 0, a 40px head) are for the panels' lists, not for text. */
.md th, .md td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: normal; overflow-wrap: break-word; width: auto; min-width: 0; max-width: none; height: auto; }
.md th.short, .md td.short { white-space: nowrap; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.codeblock { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 0 0 12px; background: var(--card); }
/* ReUI code-block (ai-chat-1): header 36 (0 12, gap 8) with the title in 12px mono, icon-sm buttons 28 r8 with
   14px icons; code 13px on 24px lines, 12px padding; line numbers muted/50 in a sticky gutter, then the fold column
   (18px) and a 10px gap; GitHub-light colours. */
/* 12px from the border to what is seen, on every side: the title, the line numbers (left-aligned under it), the
   code's first and last line (8px + the 24px line's 4px), the icons (5px + 7px inside their 28px buttons). */
.codeblock-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 5px 0 12px; border-bottom: 1px solid var(--border); }
.codeblock-title { font: 12px/16px var(--font-mono); color: var(--muted-foreground); }
.codeblock-head .btn-icon { width: 28px; height: 28px; border-radius: 8px; }
.codeblock-head .btn-icon svg.i { width: 14px; height: 14px; }
.codeblock-head .btn-icon + .btn-icon { margin-left: -4px; }
.codeblock pre { margin: 0; padding: 8px 0; overflow-x: auto; }
.codeblock pre code { display: block; width: max-content; min-width: 100%; background: none; padding: 0; border-radius: 0; white-space: normal; color: #24292e; tab-size: 4;
  font: 13px/24px var(--font-mono); }
.cb-line { display: flex; min-height: 24px; }
.cb-line[hidden] { display: none; }
.cb-gutter { position: sticky; left: 0; z-index: 1; flex: none; display: flex; align-items: center; padding-left: 12px; background: var(--card); user-select: none; }
.cb-gutter::before { content: attr(data-n); width: calc(var(--cb-digits) * 1ch); text-align: left; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
.cb-fold { flex: none; display: grid; place-items: center; width: 18px; height: 24px; margin-right: 10px; padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); cursor: pointer; }
.cb-fold:hover { color: var(--foreground); }
.cb-fold svg.i { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .15s; }
.cb-fold[aria-expanded="false"] svg.i { transform: none; }
.cb-text { white-space: pre; padding-right: 12px; }
.cb-line.folded .cb-text::after { content: " …"; color: var(--muted-foreground); }
.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ { color: #d73a49; }
.hljs-title, .hljs-title.class_, .hljs-title.function_ { color: #6f42c1; }
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: #005cc5; }
.hljs-regexp, .hljs-string, .hljs-meta .hljs-string { color: #032f62; }
.hljs-built_in, .hljs-symbol { color: #e36209; }
.hljs-comment, .hljs-code, .hljs-formula { color: #6a737d; }
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: #22863a; }
.hljs-section { color: #005cc5; font-weight: 600; }
.hljs-bullet { color: #735c0f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
.hljs-addition { color: #22863a; background: #f0fff4; }
.hljs-deletion { color: #b31d28; background: #ffeef0; }

/* work steps: commands, file changes, search, plan */
.steps-box { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.steps-box > summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; cursor: pointer; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.steps-box > summary::-webkit-details-marker { display: none; }
.steps-box > summary svg.i { width: 14px; height: 14px; }
.steps-box > summary .chev { margin-left: auto; transition: transform .15s; }
.steps-box[open] > summary .chev { transform: rotate(90deg); }
.step-list { border-top: 1px solid var(--border); display: grid; }
.step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 8px 12px; font-size: 12.8px; line-height: 18px; }
.step + .step { border-top: 1px solid var(--border); }
.step > svg.i { width: 14px; height: 14px; margin-top: 2px; color: var(--muted-foreground); }
.step .mono { overflow-wrap: anywhere; }
.step pre { margin: 6px 0 0; max-height: 220px; overflow: auto; background: var(--muted); border-radius: 6px; padding: 8px; font-size: 12px; line-height: 17px; white-space: pre-wrap; }
.step .tag { color: var(--muted-foreground); }
.step.failed > svg.i { color: var(--destructive-text); }
.todo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.todo li.done { color: var(--muted-foreground); text-decoration: line-through; }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); }
.thinking svg.i { animation: spin 1s linear infinite; width: 14px; height: 14px; }
.ai-error { display: flex; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent); background: color-mix(in srgb, var(--destructive) 6%, transparent); color: var(--destructive-text); border-radius: 10px; padding: 8px 8px 8px 12px; }
.ai-error svg.i { width: 16px; height: 16px; margin-top: 2px; flex: none; }
/* The answer's footer as ReUI ai-chat-1: time, then the buttons (24px, 12px icons), 4px under the answer; shown while
   the answer is hovered or holds focus, always on touch screens and phones. It keeps its place, so nothing jumps. */
.ai-actions { display: flex; align-items: center; gap: 2px; margin-top: -8px; opacity: 0; pointer-events: none;
  transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
.msg-ai:hover .ai-actions, .msg-user:hover .ai-actions, .ai-actions:focus-within { opacity: 1; pointer-events: auto; }
.msg-user .ai-actions { margin-top: 0; }
@media (hover: none), (max-width: 767px) { .ai-actions { opacity: 1; pointer-events: auto; } }
.ai-actions .btn-icon { color: var(--muted-foreground); width: 24px; height: 24px; }
.ai-actions .btn-icon svg.i { width: 12px; height: 12px; }

/* welcome of an empty chat */
.welcome { max-width: 768px; margin: 0 auto; padding: 14vh 16px 24px; display: grid; justify-items: center; gap: 20px; text-align: center; }
.welcome h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; }
.welcome p { margin: -12px 0 0; color: var(--muted-foreground); }
.starters-block { display: grid; justify-items: center; gap: 8px; }
.starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.starters button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground); font: inherit; cursor: pointer; }
.starters button:hover { background: var(--muted); }
.starters svg.i { width: 14px; height: 14px; color: var(--muted-foreground); }
.starters .starter-new { color: var(--muted-foreground); border-style: dashed; }   /* «Добавить шаблон»: the same pill, quieter */
.starters .starter-new:hover { color: var(--foreground); }

/* composer */
.composer-wrap { flex: none; padding: 0 16px 8px; }
/* ReUI frame: a muted header row (notices) over the white panel with the input; without notices only the panel. */
.composer-starters { max-width: 768px; margin: 0 auto; }
.composer-starters:not(:empty) { margin-bottom: 12px; }
/* On a phone the chips are one row that scrolls sideways, so they do not push the input up. */
@media (max-width: 767px) {
  .composer-starters .starters-block { justify-items: stretch; }
  .composer-starters .starters { min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .composer-starters .starters button { flex: none; }
}
.composer-frame { max-width: 768px; margin: 0 auto; border-radius: 14px; }
.composer-frame:has(#strip > *) { border: 1px solid var(--border); background: var(--frame); }
.composer-frame:has(#strip > *) .composer { margin: 0 -1px -1px; }
.composer { border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); overflow: hidden; }
.composer.drag { border-color: var(--series); box-shadow: 0 0 0 3px color-mix(in srgb, var(--series) 25%, transparent); }
.composer-strip { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.composer-strip svg.i { width: 14px; height: 14px; }
.composer-strip a { color: var(--foreground); }
/* A waiting message: «В очередь» • its first line … [Отправить] × — the ReUI ai-chat header row. */
.queue-row { gap: 8px; padding-right: 6px; }
.queue-row + .queue-row, .composer-strip + .queue-row { margin-top: -6px; }
.queue-label { flex: none; color: var(--foreground); }
.meta-sep { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-btn { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--input); border-radius: 7px; background: var(--card); color: var(--foreground); font: inherit; font-weight: 600; cursor: pointer; }
.strip-btn:hover { background: var(--muted); }
a.strip-btn { display: inline-flex; align-items: center; text-decoration: none; }
.strip-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted-foreground); cursor: pointer; }
.strip-x:hover { background: var(--muted); color: var(--foreground); }
.strip-x svg.i { width: 14px; height: 14px; }
.composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
/* An attached picture as in ChatGPT's composer: a 56px thumbnail, radius 12px; while it uploads, darkened with a white
   ring filling up; its × (20px, the text's color) on the corner, shown on hover and always on touch screens. */
.attach-img { position: relative; width: 56px; height: 56px; flex: none; }
.attach-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.attach-img::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); pointer-events: none; }
.attach-img.loading::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: rgba(0, 0, 0, .4); }
.attach-ring { position: absolute; inset: 0; z-index: 1; width: 24px; height: 24px; margin: auto; transform: rotate(-90deg); }
.attach-ring circle { fill: none; stroke-width: 2.5; }
.attach-ring .bg { stroke: rgba(255, 255, 255, .35); }
.attach-ring .v { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .2s; }
.attach-x { position: absolute; top: -6px; right: -6px; z-index: 2; width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--card); border-radius: 50%; background: var(--foreground); color: var(--background); cursor: pointer; opacity: 0; transition: opacity .15s; }
.attach-x svg.i { width: 12px; height: 12px; }
.attach-img:hover .attach-x, .attach-x:focus-visible { opacity: 1; }
@media (hover: none) { .attach-x { opacity: 1; } }
/* Quote over the input (from «Спросить»): muted, two lines at most */
.composer-quote[hidden] { display: none; }
/* Icon, first line and the close button on one center line: 7px above and under an 18px line, the 20px button
   overhangs it by 1px on both sides, so it stands 6px from the top, bottom and right edges. */
.composer-quote { display: flex; align-items: flex-start; gap: 8px; margin: 8px 8px 0; padding: 7px 6px 7px 10px; border-radius: 10px; background: var(--muted); color: var(--muted-foreground); font-size: 12.8px; line-height: 18px; }
.composer-quote > svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.composer-quote > span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer-quote > button { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: -1px 0; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.composer-quote > button:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
.composer-quote > button svg.i { width: 14px; height: 14px; }
/* The quote in a sent message, over the bubble */
.msg-quote { display: flex; align-items: flex-start; gap: 6px; max-width: 80%; color: var(--muted-foreground); font-size: 12.8px; line-height: 18px; }
.msg-quote svg.i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.msg-quote span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
/* «Спросить» over selected text: ReUI outline button sm with the popover shadow */
.ask-sel[hidden] { display: none; }
.ask-sel { position: fixed; z-index: 40; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font-weight: 600; font-size: 12.8px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.ask-sel:hover { background: var(--muted); }
.ask-sel svg.i { width: 14px; height: 14px; }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--foreground); font: inherit; line-height: 20px; padding: 8px 10px; min-height: 64px; max-height: 240px; }
.composer textarea::placeholder { color: var(--muted-foreground); }
.composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 8px; }
.tool-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 8px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--muted-foreground); font: inherit; font-weight: 600; cursor: pointer; }
.tool-toggle:hover { background: var(--muted); color: var(--foreground); }
.tool-toggle[aria-pressed="true"] { background: var(--muted); color: var(--foreground); }
.tool-toggle.locked { cursor: default; }   /* «Сайт» of a chat that works with the site: on for good */
.tool-toggle svg.i { width: 16px; height: 16px; }
.tool-toggle.icon-only { width: 32px; padding: 0; justify-content: center; }
/* A phone with «Сайт» besides «Поиск» and «Шаблоны»: the three with their names push «Отправить» out of the field, so
   they keep only their icons there (the names stay as tooltips and for screen readers). */
@media (max-width: 479px) {
  .composer-bar:has(> [data-act=site]) .tool-toggle > span { display: none; }
  .composer-bar:has(> [data-act=site]) .tool-toggle { width: 32px; padding: 0; justify-content: center; }
}
.tool-toggle.open { background: var(--muted); color: var(--foreground); }
.composer-strip.note { color: var(--foreground); }
.composer-strip.error { color: var(--destructive-text); }   /* a message that could not be sent */
/* «Из моей папки» sheet: folders open, files toggle (a check when added to the message) */
.pick-list { display: grid; gap: 2px; margin-top: 8px; }
/* File tree as ReUI Tree: rows 32px, radius 8, each level 20px in (the fill starts there too); a folder: muted chevron,
   4px, the folder (open or closed), 8px, its name; a file stands where a folder's icon does (28px).
   Guide lines as ReUI's tree with lines: one background of 1px border-colored lines every 20px, 4px to the left, so a
   line runs under the middle of its folder's chevron; the rows are opaque and leave it showing only in their indent.
   No gap between rows (ReUI has 2px, where its lines show as dots across the whole width). */
.tree { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.tree::before { content: ""; position: absolute; inset: 0 0 0 -4px; pointer-events: none;
  background: repeating-linear-gradient(to right, transparent 0 19px, var(--border) 19px 20px); }
.tree-row { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; margin-left: calc(var(--depth) * 20px);
  border-radius: 8px; background: var(--card); color: var(--foreground); text-decoration: none; }
.tree-row[hidden] { display: none; }
.tree-row:hover { background: var(--muted); }
.tree-row svg.i { width: 16px; height: 16px; flex: none; }
.tree-label { flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; padding: 0 8px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tree-chev { color: var(--muted-foreground); margin-right: 4px; transform: rotate(90deg); transition: transform .15s; }
.tree-dir { color: var(--folder); margin-right: 8px; }
.tree-row[aria-expanded="false"] .tree-chev { transform: none; }
.tree-row[aria-expanded="true"] .ic-closed, .tree-row[aria-expanded="false"] .ic-open { display: none; }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row.file { padding: 0 8px 0 28px; }
.tree-row.file > svg.i { color: var(--muted-foreground); }
.tree-row.file > small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.tree-open { margin-right: 4px; height: 24px; opacity: 0; }
.tree-row:hover .tree-open, .tree-open:focus-visible { opacity: 1; }
@media (hover: none) { .tree-open { opacity: 1; } }
.pick-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.pick-row:hover { background: var(--muted); }
.pick-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row > small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.pick-row svg.i { width: 16px; height: 16px; flex: none; color: var(--muted-foreground); }
.pick-row > svg.i:last-child { visibility: hidden; color: var(--foreground); }
.pick-row:is([data-act=pick-cd], [data-act=move-cd]) > svg.i:last-child { visibility: visible; color: var(--muted-foreground); }
.pick-row.up > svg.i:last-child { color: var(--muted-foreground); }
.pick-row:is([data-act=pick-cd], [data-act=move-cd]):not(.up) > svg.i:first-child { color: var(--folder); }
.pick-row.on { background: var(--muted); }
.pick-row.on > svg.i:last-child { visibility: visible; }
.pick-empty { padding: 8px; }
.send-btn { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; border: 0; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; cursor: pointer; }
/* «Очистить поле»: next to «Отправить» (and «Остановить» between them while an answer runs), only while there is
   text; it takes the push to the right, so the buttons stand the bar's 4px apart. «~», not «+»: «Остановить» sits
   between them in the markup even when hidden. */
.composer-clear { margin-left: auto; }
.composer-clear:not([hidden]) ~ .send-btn { margin-left: 0; }
.send-btn:disabled { opacity: .35; cursor: default; }
.send-btn svg.i { width: 16px; height: 16px; }
.composer-note { text-align: center; color: var(--muted-foreground); font-size: 12px; line-height: 16px; padding-top: 8px; }

/* ---------- files ---------- */
/* «Файлы»: the folder path in the header, as the other pages' (.breadcrumb): grey folders, the open one plain.
   Each crumb keeps 4px around it to be clicked; the row steps back 4px, so the text starts where the others' does. */
.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; margin-left: -4px; }
.crumbs button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; font: inherit; color: var(--muted-foreground); padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.crumbs button:last-child { flex-shrink: .2; }   /* one line: short of room the folders above give way first, with «…» */
.crumbs button:hover { color: var(--foreground); }
.crumbs button:last-child { color: var(--foreground); }
.crumbs svg.i { flex: none; width: 14px; height: 14px; color: var(--muted-foreground); }
a.file-name { text-decoration: none; }
.file-name { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; border: 0; background: none; font: inherit; color: var(--foreground); padding: 0; cursor: pointer; text-align: left; }
.file-label { display: grid; min-width: 0; }
.file-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { display: none; font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-name svg.i { width: 16px; height: 16px; color: var(--muted-foreground); flex: none; }
.file-name.dir svg.i { color: var(--folder); }
/* «..»: as tall as the 28px buttons of the other rows, so every row is the same height. */
.file-name.up { height: 28px; color: var(--muted-foreground); }
.files-table .up-row, .files-table tr[data-dir='1'] { cursor: pointer; }
/* An empty subfolder: the empty state as a row under «..». */
.files-table .empty-row td { padding: 0; }
.files-table tbody tr.empty-row:hover td { background: none; }
.files-table tr[data-dir='1'] td.sel:has(input) { cursor: default; }
.up-row:hover .file-name.up { color: var(--foreground); }
.file-name small { color: var(--muted-foreground); }
/* A column, each block its real height (a grid gave the head one 32px row, and on a phone its buttons, wrapped to a
   second line, fell under the table). Narrow (a phone, a tablet upright): the table
   loses the size and time columns, they go under the name (.file-meta), and the row's «Скачать» (it is in «⋯»). */
.main > .inset-header ~ .page.files-page { display: flex; flex-direction: column; container-type: inline-size; }
.files-page > * { flex-shrink: 0; }   /* taller than the screen, the page scrolls: no block is squeezed (the head's min-height is 32px) */
/* Over the table: the search (filters by name as it is typed) and, with something picked, its actions. */
.files-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.files-search { position: relative; flex: 1 1 240px; }   /* the whole width; the picked files' actions beside it when any */
.files-search svg.i { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted-foreground); pointer-events: none; }
.files-search .input { width: 100%; padding-left: 34px; }
.files-picked { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.files-picked[hidden] { display: none; }
/* Files dragged over the page: the table says where they go (no drop zone of its own takes the room). */
.files-card { position: relative; }
.drop-hint { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--ring-focus); border-radius: inherit; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--foreground); font-weight: 600; }
.drop-hint svg.i { width: 20px; height: 20px; color: var(--muted-foreground); }
.files-card.drag .drop-hint { display: flex; }
.files-table .empty .btn { margin-top: 8px; }
@container (max-width: 560px) {
  .files-table th:nth-child(3), .files-table td:nth-child(3), .files-table th:nth-child(4), .files-table td:nth-child(4) { display: none; }
  .file-meta { display: block; }
  .files-table .row-actions > a { display: none; }
}
#upload-progress:empty { display: none; }
/* The folder's space under the list (the admin's limit, 500 МБ by default); red past 90%. In the admin's
   «Пользователи» a folder over its limit is red. */
.files-space { margin: 0; }
.files-space.full { color: var(--destructive-text); }
td.over { color: var(--destructive-text); }
.progress { height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--series); width: 0; transition: width .2s; }

/* ---------- account and employees ---------- */
.narrow { max-width: 720px; }
/* «Рекомендации» (app.js renderTips): 720px of text, the page itself scrolling full width (its scrollbar at the edge);
   in the card a term and its text side by side (the term 180px, 16px apart), one under the other on phones; 12px
   between the rows. */
.tips-page > * { width: 100%; max-width: 720px; }
h2.card-title { margin: 0; }
.tips { margin: 0; display: grid; gap: 12px; }
.tip { display: grid; gap: 2px; line-height: 20px; }
.tip dt { font-weight: 500; }
.tip dd { margin: 0; color: var(--muted-foreground); }
@media (min-width: 640px) { .tip { grid-template-columns: 180px 1fr; gap: 16px; } }
.device { display: grid; gap: 12px; }
.device-code { font: 600 24px/32px var(--font-mono); letter-spacing: .08em; }
.steps-num { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.secret { display: flex; align-items: center; gap: 8px; }
.secret code { font: 600 14px/20px var(--font-mono); background: var(--muted); border-radius: 6px; padding: 4px 8px; }
.hint { color: var(--muted-foreground); font-size: 12.8px; line-height: 18px; }
p.hint { margin: 0; }   /* the space around it is the container's gap (.page, .sheet-body, cards), never the browser's 1em */
/* A question with its explanation right under it, in one font. */
.sheet-text { display: grid; gap: 4px; }
.sheet-text p { margin: 0; }

/* Switch (ReUI / shadcn base-nova): 32×18.4 track, 16px thumb, primary when on. */
.switch-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; cursor: pointer; }
.switch-row > span { display: grid; gap: 2px; }
.switch-label { font-weight: 600; }
.switch {
  appearance: none; flex: none; position: relative; width: 32px; height: 18.4px; margin: 1px 0 0; border-radius: 999px;
  border: 1px solid transparent; background: var(--input); cursor: pointer; outline: none;
  transition: background-color .15s, box-shadow .15s;
}
.switch::before {
  content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--background); transition: transform .15s;
}
.switch:checked { background: var(--primary); }
.switch:checked::before { background: var(--primary-foreground); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .switch:not(:checked)::before { background: var(--foreground); } }
:root[data-theme="dark"] .switch:not(:checked)::before { background: var(--foreground); }
.switch:checked::before { transform: translateX(calc(100% - 2px)); }
.switch:focus-visible { border-color: var(--ring-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-focus) 50%, transparent); }

@keyframes pulse { 50% { opacity: .3; } }
.step a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }

/* subscription limits on the employees page */
.limit-block { display: grid; gap: 12px; padding: 16px; }
#limits-box > div + div .limit-block { border-top: 1px solid var(--border); }
/* One line: name, plan, subscription end; in a narrow card the plan gives way first. */
.limit-head { display: flex; align-items: baseline; gap: 12px; min-width: 0; white-space: nowrap; }
.limit-head > span { overflow: hidden; text-overflow: ellipsis; }
.limit-head > .cell-main { flex: none; }
.limit-until { margin-left: auto; flex: none; color: var(--muted-foreground); font-size: 12.8px; }
.limit-until.soon { color: var(--warning); font-weight: 600; }
/* On a phone the plan and «подписка до …» go under the name instead of running off the edge. */
@media (max-width: 767px) {
  .limit-head { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .limit-until { margin-left: 0; flex-basis: 100%; }
}
/* Overview: one table row per employee (the full cells are on «Подписки») */
.limits-table .lim-pct { display: flex; align-items: center; gap: 8px; }
.limits-table .lim-pct .num { min-width: 36px; font-weight: 600; }
.meter.sm { height: 8px; gap: 2px; width: 48px; }
.limits-table th + th, .limits-table td + td { padding-left: 4px; }
#limits-box { container-type: inline-size; }
@container (max-width: 359px) { .limits-table .meter.sm, .limits-table .lim-plan { display: none; } }
.limits-table .soon { color: var(--warning); font-weight: 600; }
.limit-block .quota { grid-auto-flow: row; grid-template-columns: repeat(var(--cells), minmax(0, 1fr)); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
@media (max-width: 767px) { .limit-block .quota { grid-template-columns: minmax(0, 1fr); } }

/* projects */
/* A project's chats: ReUI SidebarMenuSub, a line under the folder icon (ml-3.5, border-l, pl-2.5 py-0.5, gap-1),
   items 32px with px-2 as the rows above; on the right they end where the project's row ends (ReUI has mx/px there). */
.sb-menu-sub { display: flex; flex-direction: column; gap: 4px; margin: 0 0 0 14px; padding: 2px 0 2px 10px; border-left: 1px solid var(--sidebar-border); transform: translateX(1px); }
.sb-menu-sub .sb-button { height: 32px; padding: 0 8px; transform: translateX(-1px); }   /* px-2 -translate-x-px; 32px as the project row (ReUI: h-7) */
/* The project's icon: a folder, on hover the fold arrow (right when folded, down when open). */
.sb-fold { position: relative; flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.sb-fold svg.i { grid-area: 1 / 1; width: 16px; height: 16px; }
.sb-fold svg.i:last-child { opacity: 0; transition: transform .2s ease; }
.sb-fold[aria-expanded="true"] svg.i:last-child { transform: rotate(90deg); }
.sb-button:hover .sb-fold svg.i:first-child, .sb-fold:focus-visible svg.i:first-child { opacity: 0; }
.sb-button:hover .sb-fold svg.i:last-child, .sb-fold:focus-visible svg.i:last-child { opacity: 1; }
.sb-fold:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; }
/* Folding slides the chats open and shut: rows 0fr ↔ 1fr, with a fade. */
.sb-fold-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -2px;   /* folded it takes no menu gap */
  transition: grid-template-rows .2s ease, opacity .2s ease; }
.sb-fold-wrap[data-open] { grid-template-rows: 1fr; opacity: 1; }
.sb-fold-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sb-fold-wrap, .sb-fold svg.i:last-child { transition: none; } }
/* In the icon rail the folder is just the project's icon: a click opens the project, nothing folds. */
.shell.collapsed .sb-fold { pointer-events: none; }
.shell.collapsed .sb-fold svg.i:first-child { opacity: 1; }
.shell.collapsed .sb-fold svg.i:last-child { opacity: 0; }
/* Same as the «Мои файлы» crumbs: text only, no fill. */
.project-welcome { padding-top: 10vh; }
/* A project's chats: ReUI agent-activity (frame with a header, white panel; rows py-2 px-4, gap 8, icon 16,
   text 13/20, time 12px muted tabular on the right). */
.project-chats { width: 100%; max-width: 576px; text-align: left; }
.project-chats .card-body { padding: 4px 0; }
.project-chats .count { padding: 0 6px; border-radius: 6px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.project-chat { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--foreground); text-decoration: none; font-size: 13px; line-height: 20px; }
.project-chat:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.project-chat svg.i { flex: none; width: 16px; height: 16px; color: var(--muted-foreground); }
.project-chat svg.spin { animation: spin 1s linear infinite; }
.project-chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On hover the time gives way to «Переименовать» and «Удалить»; on touch screens they are always there. */
.project-chat-actions { display: none; gap: 2px; margin: -4px -8px -4px 0; }
.project-chat-actions svg.i { color: inherit; }
.project-chat:hover .project-chat-time, .project-chat:focus-within .project-chat-time { display: none; }
.project-chat:hover .project-chat-actions, .project-chat:focus-within .project-chat-actions { display: flex; }
@media (hover: none) { .project-chat-time { display: none; } .project-chat-actions { display: flex; } }
.project-chat-time { flex: none; color: var(--muted-foreground); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }

/* Folded sidebar (icon rail, app.css): no chat titles without icons, no delete buttons, no menu chevron. */
@media (min-width: 768px) {
  .shell.collapsed .sb-chats, .shell.collapsed .sb-fold-wrap, .shell.collapsed .sb-pin, .shell.collapsed .sb-empty { display: none; }
  /* The rail: no tabs; the projects' icons stay whatever tab was open. */
  .shell.collapsed .sb-tabs-group { display: none; }
  .shell.collapsed .sb-panel[data-panel=projects][hidden] { display: block; }
  .shell.collapsed .sb-newchat[hidden] { display: flex; }   /* «Новый чат» on the rail whatever the tab */
  .shell.collapsed #user-btn > svg.i { display: none; }
}
/* The footer as ReUI echo-chat: «Рекомендации» a small link (28px, 12/16, muted, the text's color on hover); under it, 8px
   apart, the profile card — 1px border, the page's background, radius 10px, 6px around the 32px avatar (the same for
   the admin and employees), the name 13/16 500 and an 11px muted line under it, the ellipsis 16px at half opacity 4px
   from the edge; muted on hover and while its menu is open. On the rail: the link is a 32px icon, the card only the
   avatar (28px) in a round 32px button, both on the rail's center line. */
.sb-button.sb-sm { height: 28px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
/* «Рекомендации» are for the users: not in the admin's sidebar, nor its skeleton (which the first paint's rule shows). */
.shell[data-role=admin] .sb-sm, .shell[data-role=admin]:has(#nav > .skel-nav) .sb-sm.skel-only { display: none; }
a.sb-button.sb-sm:hover, .sb-button.sb-sm[aria-current="page"] { color: var(--sidebar-foreground); }
.sidebar-footer .sb-profile { height: 46px; padding: 6px; gap: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); }
.sidebar-footer .sb-profile.skel-only { border-color: transparent; background: none; }
button.sb-profile:hover, button.sb-profile[aria-expanded="true"] { background: var(--muted); }
.sb-profile .sb-avatar { background: var(--sidebar-active); }   /* lighter than the chat's avatars: the sidebar's own tone */
.sb-profile .sb-text { row-gap: 0; }
.sb-profile .sb-title { font-size: 13px; line-height: 16px; font-weight: 500; }
.sb-profile .sb-sub { font-size: 11px; line-height: 12px; color: var(--muted-foreground); }
#user-btn .user-more { margin: 0 4px 0 auto; opacity: .5; }
@media (min-width: 768px) {
  .shell.collapsed .sb-button.sb-sm { height: 32px; color: var(--sidebar-foreground); }
  .shell.collapsed .sb-sm > span { display: none; }
  .shell.collapsed .sidebar-footer .sb-profile { width: 32px; height: 32px; padding: 1px; border-color: transparent; border-radius: 50%; background: none; }
  .shell.collapsed button.sb-profile:hover, .shell.collapsed button.sb-profile[aria-expanded="true"] { background: var(--muted); }
  .shell.collapsed .sb-profile .sb-avatar { width: 28px; height: 28px; }
}

/* Textarea in sheets (ReUI textarea: 8px 10px, 14/20, radius 10) */
.textarea { display: block; width: 100%; min-height: 64px; height: auto; padding: 8px 10px; resize: vertical; line-height: 20px; }
.textarea.mono { font-size: 12.8px; line-height: 20px; }
/* ReUI destructive button: tinted, not solid */
.btn-destructive { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive-text); }
.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 20%, transparent); }

/* User menu as ReUI's dropdown (c-sidebar-1): opens 4px to the right of the user button, bottoms aligned, as wide as
   the button (224px); 4px padding, radius 10px, a 1px ring and shadow-md; label 12/16 500 muted, 4px 6px; separators
   edge to edge with 4px above and below; items 28px, 4px 6px, radius 8px, 14/20, gap 6px, 16px icons, filled
   #f5f5f5 on hover. Fixed, placed by app.js from the button (the sidebar clips its content). */
.user-menu { position: fixed; z-index: 50; width: 224px; padding: 4px; display: grid; background: var(--card); border-radius: 10px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent), 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.user-menu-sep { height: 1px; margin: 4px -4px; background: var(--border); }
.user-menu button, .user-menu a { display: flex; align-items: center; gap: 6px; height: 28px; padding: 4px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--accent-foreground); font-weight: 400; font-size: 14px; line-height: 20px; text-decoration: none; cursor: pointer; text-align: left; }
.user-menu button svg.i, .user-menu a svg.i { width: 16px; height: 16px; }   /* items in ReUI's popover text #171717, not the page's #0a0a0a */
/* ReUI menus: the items' icons in the muted grey, «Удалить»'s in its red. */
.user-menu button svg.i, .user-menu a svg.i { color: var(--muted-foreground); }
.user-menu .danger svg.i { color: inherit; }
.user-menu button:hover, .user-menu a:hover { background: var(--muted); color: var(--accent-foreground); }

/* «⋯» on a chat or a project as ReUI c-sidebar-1 (shown on hover and while its menu is open) — 20×20, 4px from the
   right edge, radius 8px, 16px icon. Hidden on the folded rail. */
.sb-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--sidebar-foreground); cursor: pointer; }
.sb-more svg.i { width: 16px; height: 16px; }
/* No fill of their own (ReUI): the row's hover fill is enough, and it stays while the project's menu is open. */
.chat-list .sb-button:has(.sb-more.open) { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sb-more { opacity: 0; }
.chat-list .sb-button:hover .sb-more, .sb-more:focus-visible, .sb-more.open { opacity: 1; }
.chat-list .sb-button[aria-current="page"] .sb-more { opacity: 1; }   /* the open chat keeps its «⋯», as ChatGPT */
#ctx-menu { width: max-content; min-width: 128px; overflow-x: hidden; } /* ReUI: as wide as its items, at least min-w-32 */
#ctx-menu button { white-space: nowrap; }
/* The composer's «+» menu = ReUI ai-chat-1 «Add context»: 256 wide, a muted 12px label, two-line items
   52 high (8px 6px, gap 12) with a 16px icon, 14px title and 12px muted line. */
#ctx-menu.wide { width: 256px; }
.menu-label { padding: 4px 6px; font-weight: 600; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
#ctx-menu button:has(.mi-text) { height: auto; padding: 8px 6px; gap: 12px; }
.mi-text { display: grid; min-width: 0; text-align: left; }
.mi-text > span { font-size: 14px; line-height: 20px; }
.mi-text > small { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
/* ReUI destructive item: destructive text and icon, a destructive/10 fill on hover. */
#ctx-menu button.danger { color: var(--destructive-text); }
#ctx-menu button.danger:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
/* ReUI context menu: min-w-36, as wide as its longest item. */
#ctx-menu.context { width: auto; min-width: 144px; }
/* The chat's panel: ReUI popover width (288px), scrolls inside; rows of one line, a file's download icon at the end,
   a request's number in front. On phones nearly the whole width. */
#ctx-menu.panel { width: 288px; max-height: min(480px, calc(100dvh - 72px)); align-content: start; }
#ctx-menu.panel .cp-row { min-width: 0; }
#ctx-menu.panel .cp-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ctx-menu.panel .cp-row > svg.i { color: var(--muted-foreground); }
.cp-num { flex: none; min-width: 16px; color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
/* The day over a group of files or requests: smaller and lighter than the section label; a click goes to that day. */
#ctx-menu .cp-day { height: auto; padding: 6px 6px 2px; color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
#ctx-menu .cp-day:hover { background: none; color: var(--foreground); }
.cp-empty { padding: 4px 6px; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }
.msg-user { scroll-margin-top: 16px; }
@media (max-width: 767px) { #ctx-menu.panel { width: calc(100vw - 16px); } }
/* ReUI dropdown: never taller than the room it has (max-h-(--available-height)), the rest scrolls; a long list of
   quick prompts stops at 320px. */
#ctx-menu { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
#ctx-menu.tall { max-height: min(320px, calc(100dvh - 16px)); }
.files-table tr.open td { background: color-mix(in srgb, var(--muted) 50%, transparent); }
@media (min-width: 768px) { .shell.collapsed .sb-more { display: none; } }

/* ReUI sheet: the overlay fades in 150ms, the sheet fades and comes 2.5rem from the right in 200ms; out the same way.
   One that opens over the whole window («Во весь экран») comes out of the middle instead, as ReUI's dialog: 96% → 100%. */
.sheet-overlay { transition: opacity .15s cubic-bezier(.4, 0, .2, 1); }
.sheet { transition: opacity .2s cubic-bezier(.4, 0, .2, 1), translate .2s cubic-bezier(.4, 0, .2, 1), scale .2s cubic-bezier(.4, 0, .2, 1); }
.sheet-overlay[data-starting], .sheet-overlay[data-ending] { opacity: 0; }
.sheet[data-starting], .sheet[data-ending] { opacity: 0; translate: 2.5rem 0; }
.sheet.full[data-starting], .sheet.full[data-ending] { translate: none; scale: .96; }
.sheet-overlay[data-ending], .sheet[data-ending] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sheet-overlay, .sheet { transition: none; } }

/* ---------- agents page (as the claude dashboard's «Агенты») ---------- */
.agents-codex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn.spin svg { animation: spin .8s linear infinite; }
.cell-link { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cell-link:focus-visible { outline: 2px solid var(--ring-focus); outline-offset: 2px; border-radius: 4px; }
#agents-table tbody tr { cursor: pointer; }
.cell-wrap { display: block; }
.todo-row { display: grid; gap: 6px; padding: 8px 0; }
.todo-row:first-child { padding-top: 0; }
.todo-row:last-child { padding-bottom: 0; }
.todo-row + .todo-row { border-top: 1px solid var(--border); }
.sheet-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.schedule-row { display: flex; gap: 8px; }
.schedule-row > * { flex: 1; min-width: 0; }
.schedule-row > [hidden] { display: none; }
.schedule-row input[type=time] { flex: 0 0 120px; }
.report { display: grid; gap: 16px; }
.report-summary { display: flex; align-items: flex-start; gap: 8px; }
.report-summary .badge { margin-top: 0; flex: none; }
.report-summary > span:last-child { color: var(--muted-foreground); }
.report-section { display: grid; gap: 8px; }
.section-title { font-weight: 600; }
.findings { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.findings li { display: flex; align-items: flex-start; gap: 8px; }
.findings li .dot { margin-top: 6px; flex: none; }
.todo-item { display: grid; gap: 6px; }
.step-tool { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.step-input { display: block; overflow-x: auto; white-space: pre-wrap; word-break: break-all; font: 12px/16px var(--font-mono); }
.step-text { color: var(--muted-foreground); white-space: pre-wrap; }

/* The sidebar's width, dragged on the edge between it and the page (768px and wider, not when folded), as ReUI's
   resizable handle on echo-chat: a grip 24px high (radius 10px, the border's tone), primary under the pointer and
   while dragging; no line of its own. It is 5px wide, 2px on each side of the page's 1px border, so it stands exactly
   in the middle of the edge and stays crisp (4px could only be centered at half a pixel, which the browser rounds).
   The element itself has no width — it sits on the edge whatever the sidebar's width or the zoom; ::before is the
   12px to catch. */
.sb-resize { display: none; }
@media (min-width: 768px) {
  .sb-resize { display: block; position: relative; z-index: 5; flex: none; width: 0; cursor: col-resize; touch-action: none; outline: 0; }
  .sb-resize::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 12px; }
  .sb-resize::after { content: ""; position: absolute; top: 50%; left: -2px; width: 5px; height: 24px; margin-top: -12px; border-radius: 10px;
    background: var(--border); transition: background-color .15s; }
  .sb-resize:hover::after, .sb-resize:focus-visible::after, .shell.resizing .sb-resize::after { background: var(--primary); }
  .shell.collapsed .sb-resize { display: none; }
  .shell.resizing .sidebar { transition: none; }
  .shell.resizing, .shell.resizing * { cursor: col-resize !important; user-select: none; }
}

/* As on the claude dashboard: the header stays at the top of the panel, only the page under it scrolls
   (the pages render their header into #main, so #main becomes a column and .page the scrolling part). */
.main:has(> .inset-header) { display: flex; flex-direction: column; overflow: hidden; }
.main > .inset-header ~ .page { flex: 1; min-height: 0; overflow: auto; align-content: start; }

/* Icons as ReUI (lucide): stroke 2 on the 24×24 grid, scaled with the icon (app.css) — one weight for every icon,
   that of the text beside it (1.33px at 16px, 1.17px at 14px). Tried and dropped, 29.10.2026: a 1px line half a pixel
   off made straight strokes black and sharp but left diagonals pale — the icons looked like from different sets.
   Less contrast comes the ReUI way instead: menu icons in the muted grey, a sheet's header buttons at 70%. */

/* «Файлы», «Содержание» and a project's «Инструкции» over the chat: text only on wider screens, the icon only on phones. */
@media (min-width: 640px) { .inset-header :is([data-act=chat-panel], [data-act=project-notes]) svg.i { display: none; } }
/* Phones (≤639px): the chat's title needs the room, so its section (or project, in the sidebar too) goes. */
@media (max-width: 639px) { .inset-header .breadcrumb:has(> .chat-title) > :not(.chat-title) { display: none; } }
/* Touch screens (no hover): the «⋯» of projects and chats is always there (a pinned chat's pin left of it); row
   actions get a finger-sized 28px target (ReUI icon-sm). */
@media (hover: none) {
  .chat-list .sb-more { opacity: 1; }
  .chat-list .sb-pin { right: 32px; }
  .sb-more { width: 28px; height: 28px; right: 2px; }
}

/* «Шаблоны» in the profile */
.starter-list { display: grid; margin: 8px 0 16px; }   /* 8 + the row's 8 = 16 under the hint */
.starter-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.starter-row + .starter-row { border-top: 1px solid var(--border); }
/* Pagination of a list (ReUI data-grid): «1–5 из 19» muted, then outline ‹ › 28px. */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: -8px 0 16px; }
.pager-info { margin-right: 8px; font-size: 12.8px; line-height: 18px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.pager .btn:disabled { opacity: .5; cursor: default; }
.starter-text { display: grid; flex: 1; min-width: 0; }
.starter-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }


/* «Профиль»: a menu column inside the panel (the dashboard's second-level navigation), the page beside it;
   on phones and tablets the menu is a row over the page. */
.main > .inset-header ~ .subnav-layout { flex: 1; min-height: 0; display: flex; }
/* The second-level menu (Профиль) as ReUI's flowly settings: a 200px column, groups with an 11px uppercase label and a
   line between them; items 28px, 8px in from the column's edges, 12.8px grey — the open one dark, medium, on muted. */
.subnav { flex: none; width: 200px; padding: 4px 0; border-right: 1px solid var(--border); overflow-y: auto; }
.subnav-group + .subnav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.subnav-label { padding: 8px 12px 4px; font-size: 11px; line-height: 16.5px; font-weight: 500; text-transform: uppercase; color: var(--muted-foreground); }
.subnav .sb-button { width: auto; height: 28px; margin: 0 8px; padding: 0 10px; gap: 10px; font-size: 12.8px; line-height: 19.2px; color: var(--muted-foreground); }
.subnav .sb-button:hover { color: var(--foreground); background: color-mix(in srgb, var(--muted) 60%, transparent); }
.subnav .sb-button[aria-current="page"] { color: var(--foreground); font-weight: 500; background: var(--muted); }
.subnav-layout > .page { flex: 1; min-width: 0; min-height: 0; overflow: auto; align-content: start; }
/* Below 1024px a column next to the sidebar leaves the page too narrow: the menu becomes a row on top. */
@media (max-width: 1023px) {
  .main > .inset-header ~ .subnav-layout { flex-direction: column; }
  .subnav { width: auto; border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .subnav { display: flex; gap: 4px; padding: 8px; overflow-x: auto; }
  .subnav-group, .subnav .sb-menu { display: contents; }
  .subnav-label { display: none; }
  .subnav .sb-button { flex: none; margin: 0; }
}

/* Fields as ReUI base-nova Input / Textarea: muted placeholder, colour transition, red ring when invalid */
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
.input, .select { transition: border-color .15s, box-shadow .15s; }

/* Checkbox (ReUI / shadcn base-nova): 16px, radius 4, input border; primary with a check when on, dash when partly. */
.checkbox {
  appearance: none; flex: none; position: relative; display: block; width: 16px; height: 16px; margin: 0; border-radius: 4px;
  border: 1px solid var(--input); background: transparent; cursor: pointer; outline: none;
  transition: box-shadow .15s, border-color .15s;   /* no shadow in base-nova */
}
.checkbox:checked, .checkbox:indeterminate { background: var(--primary); border-color: var(--primary); }
.checkbox:checked::after, .checkbox:indeterminate::after {
  content: ""; position: absolute; inset: 0; background: var(--primary-foreground);
  -webkit-mask: var(--mark) center / 14px no-repeat; mask: var(--mark) center / 14px no-repeat;
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.checkbox:indeterminate::after { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.checkbox:focus-visible { border-color: var(--ring-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-focus) 50%, transparent); }

/* «Мои файлы»: the selection column comes first, the name column still takes the free width. */
.files-table th.sel, .files-table td.sel { width: 1px; min-width: 0; max-width: none; padding-right: 0; }
.files-table th:nth-child(2), .files-table td:nth-child(2) { width: 100%; }
.files-table td:nth-child(2) { max-width: 0; min-width: 120px; }
.files-table tr.selected td { background: var(--muted); }

/* Answer meta: when it ended — how long it thought. */
.ai-actions .ai-meta { padding-right: 4px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* «Обновить» in «Мои файлы»: the table is half seen while the list is loading again. */
.files-page .busy { opacity: .3; pointer-events: none; transition: opacity .15s; }

/* File icons by type (app.js fileGlyph): Tailwind 4 -500 tones as ReUI c-tree-5. A row's own grey for its icons
   must not win over the type, hence !important (a utility, like Tailwind's !text-…). */
svg.i.ft-doc { color: #2b7fff !important; }     /* blue-500: Word and other documents */
svg.i.ft-sheet { color: #00bc7d !important; }   /* emerald-500: tables */
svg.i.ft-pdf { color: #fb2c36 !important; }     /* red-500 */
svg.i.ft-img { color: #ad46ff !important; }     /* purple-500: pictures */

/* A conversation in parts («Продолжить в новом чате»). In the chat: its start (the link back, the summary the AI was
   given) and its end (the link on), in the day separator's tone. */
.chain-sep { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted-foreground); font-size: 13px; line-height: 20px; text-align: center; }
.chain-sep svg.i { width: 14px; height: 14px; flex: none; }
.chain-sep a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.chain-sep a:hover { text-decoration-color: currentColor; }
.carry { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--card); font-size: 14px; }
.carry > summary { cursor: pointer; color: var(--muted-foreground); font-size: 13px; }
.carry[open] > summary { margin-bottom: 8px; }
/* The sidebar: the number of parts after the title, a fold for the earlier ones. */
.sb-parts { flex: none; display: inline-flex; align-items: center; gap: 1px; height: 20px; padding: 0 2px 0 6px; margin-left: auto; border: 0; border-radius: 6px; background: none; color: var(--muted-foreground); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.sb-parts:hover { color: var(--foreground); }
.sb-parts svg.i { width: 12px; height: 12px; transition: transform .15s; }
.sb-parts[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.shell.collapsed .sb-parts { display: none; }

/* A file opened in a sheet (app.js previewFile): the text, the table or the code. */
.sheet.wide { width: min(880px, calc(100vw - 16px)); }
.sheet-tools .btn-icon { opacity: .7; }   /* ReUI sheet close: opacity-70, hover 100 */
.sheet-tools .btn-icon:hover, .sheet-tools .btn-icon:focus-visible, .sheet-tools .btn-icon[aria-pressed="true"] { opacity: 1; }
/* «Во весь экран»: the window less 8px on every side, as the main block. */
.sheet.wide.full { left: 8px; width: auto; }
/* Phones and tablets: a file's sheet is always over the whole window (openSheet), so no button for it. */
@media (max-width: 1023px) { .sheet-full { display: none; } }
/* A file's editor (PROJECT.md of a project, a text file in «Файлы»): the field fills the sheet down to its footer. */
.sheet-body:has(> .field.editor) { align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.sheet-body > .field.editor { display: flex; flex-direction: column; min-height: 0; }
.sheet-body > .field.editor > .textarea { flex: 1; min-height: 0; resize: none; }
.preview .md > :last-child { margin-bottom: 0; }
/* A code file: the code itself, no frame or block header (the sheet is the frame, its header has the buttons); the line
   numbers under the sheet's title, the first line where a Markdown file's text begins. */
.preview .code-file .codeblock { border: 0; border-radius: 0; background: none; margin: 0; overflow: visible; }
.preview .code-file .codeblock-head { display: none; }
.preview .codeblock [data-act=dl-code] { display: none; }   /* the sheet's header downloads the file */
.preview .code-file .codeblock pre { padding: 0; }
.preview .code-file .cb-gutter { padding-left: 0; }
/* Windows never scroll sideways: whatever is in a sheet is as wide as the sheet at most (a grid item would otherwise
   be as wide as its longest code line), and text, code and tables wrap to it. In the code a wrapped line keeps its
   number at its top. */
.sheet-body > * { min-width: 0; }
.sheet .md table { display: table; width: 100%; }
.sheet .md th, .sheet .md td { overflow-wrap: anywhere; }
.sheet .codeblock pre { overflow-x: visible; }
.sheet .codeblock pre code { width: auto; }
.sheet .cb-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet .cb-gutter { align-items: flex-start; }
/* A file's text in its sheet ending with a code block (the text's field, as «Точный промпт» of a prompt file): the
   block reaches down to the sheet's bottom, as the editor's field does. The preview is a column for it; margins do not
   collapse in a column, so a heading keeps its 20px over a paragraph (8 + 12) and a line its 16px (4 + 12). */
.sheet-body:has(> .preview > .md > .codeblock:last-child) { display: flex; flex-direction: column; }
.sheet-body > .preview:has(> .md > .codeblock:last-child) { flex: 1 0 auto; display: flex; flex-direction: column; }
.preview > .md:has(> .codeblock:last-child) { flex: 1 0 auto; display: flex; flex-direction: column; }
.preview > .md:has(> .codeblock:last-child) > :is(h1, h2, h3, h4) { margin-top: 8px; }
.preview > .md:has(> .codeblock:last-child) > hr { margin-top: 4px; }
.preview > .md:has(> .codeblock:last-child) > :first-child { margin-top: 0; }
.preview > .md > .codeblock:last-child { flex: 1 0 auto; margin-bottom: 0; }

/* The sidebar's tabs «Чаты | Проекты» as ReUI's (echo-chat): a 32px strip in the foreground's 5%, 3px inside, radius 10;
   the open tab white with a hairline shadow, the other in the foreground's 60%, 14px medium. */
.sb-tabs { display: flex; height: 32px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.sb-tabs [role=tab] { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 14px; font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 60%, transparent); cursor: pointer; transition: color .15s, background-color .15s; }
.sb-tabs [role=tab]:hover { color: var(--foreground); }
.sb-tabs [role=tab][aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); }
.sb-tabs [role=tab]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring-focus) 50%, transparent); }
.sb-panel[hidden], .sb-group[hidden] { display: none; }

/* A sidebar group's label that folds it (echo-chat): the name, its count in grey at the right and an arrow, up when open. */
.sb-group-toggle { width: 100%; gap: 4px; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.sb-group-toggle:hover { color: var(--sidebar-foreground); }
.sb-count { margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.sb-group-toggle svg.i { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.sb-group-toggle[aria-expanded="false"] svg.i { transform: rotate(180deg); }
.sb-group:has(> .sb-group-toggle) + .sb-group:has(> .sb-group-toggle) { padding-top: 0; }
/* The rail: the projects' icons stay, whatever their group or its folding; the labels go. */
.shell.collapsed [data-panel=projects] .sb-fold-wrap[data-gfold] { display: grid; grid-template-rows: 1fr; opacity: 1; }
.shell.collapsed .sb-group-toggle { display: none; }