/* 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 ---------- */
body.auth-page {
  background-color: var(--background);
  background-image:
    linear-gradient(var(--sidebar-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--sidebar-border) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 48px 16px; }
.auth-form { width: 100%; max-width: 360px; display: grid; gap: 16px; background: color-mix(in srgb, var(--background) 85%, transparent); padding: 8px; border-radius: 12px; }
.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: 12px; }
.auth-head h1 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.auth-head p { margin: 0; color: var(--muted-foreground); }
.pw { position: relative; }
.pw .input { padding-right: 40px; }
.pw .btn-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
/* From the last field to the button 30px, as in ReUI auth-5 (16px gap + 14px). */
.auth-form .btn-primary { width: 100%; margin-top: 14px; }
/* ReUI base-nova sizes: sm 28px, default 32px, lg 36px; xl 40px is ours, one step up (the sign-in form). */
.btn-lg { height: 36px; padding: 0 12px; }
.input-lg { height: 36px; padding: 0 12px; }
.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 delete button only where there is one (chats), and none on the folded rail. */
.chat-list .sb-button:has(.sb-del, .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; }
.chat-list .sb-del { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; opacity: 0; }
.chat-list .sb-button:hover .sb-del, .chat-list .sb-button[aria-current="page"] .sb-del { opacity: 1; }
.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; }
.sidebar-footer { position: relative; }
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; }
.chat-title { display: inline-block; border: 0; background: none; font-weight: 600; font-size: 12.8px; line-height: 28px; color: var(--foreground); height: 28px; padding: 0 8px; border-radius: 8px; cursor: text; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title:hover { background: var(--muted); }
/* A plain page title in the header, as the last crumb of «Мои файлы» (not a button). */
.header-title { padding: 2px 4px; font-weight: 600; color: var(--foreground); }
.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; }
.msg-user { display: grid; justify-items: end; gap: 4px; }
.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; }
.files-dir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick-row > svg.i:last-child { margin-left: auto; }
a.pick-row { text-decoration: none; }
a.pick-row > svg.i:last-child { visibility: visible; color: var(--muted-foreground); }
.file-chip.img { height: auto; padding: 4px; }
.file-chip.img img { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; display: block; }
.msg-ai { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
.ai-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); display: grid; place-items: center; }
.ai-avatar svg.i { width: 16px; height: 16px; }
.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 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; }
.md th, .md td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.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. */
.codeblock-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 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: 12px 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: right; 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; }
.ai-error a { color: inherit; }
.ai-actions { display: flex; gap: 2px; }
.ai-actions .btn-icon { color: var(--muted-foreground); width: 24px; height: 24px; }
.ai-actions .btn-icon svg.i { width: 14px; height: 14px; }

/* 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); }
.composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
/* Quote over the input (from «Спросить»): muted, two lines at most */
.composer-quote[hidden] { display: none; }
.composer-quote { display: flex; align-items: flex-start; gap: 8px; margin: 8px 8px 0; padding: 6px 4px 6px 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; 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 svg.i { width: 16px; height: 16px; }
.tool-toggle.icon-only { width: 32px; padding: 0; justify-content: center; }
.tool-toggle.open { background: var(--muted); color: var(--foreground); }
.composer-strip.note { color: var(--foreground); }
/* «Из моей папки» sheet: folders open, files toggle (a check when added to the message) */
.pick-list { display: grid; gap: 2px; margin-top: 8px; }
.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[data-act=pick-cd] > svg.i:last-child { visibility: visible; color: var(--muted-foreground); }
.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; }
.composer-clear { margin-left: auto; }   /* «Очистить поле»: next to «Отправить», only while there is text */
.composer-clear:not([hidden]) + .send-btn { margin-left: 4px; }
.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 ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.crumbs button { border: 0; background: none; font: inherit; color: var(--muted-foreground); padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.crumbs button:hover { color: var(--foreground); }
.crumbs button:last-child { color: var(--foreground); font-weight: 600; }
.crumbs svg.i { width: 14px; height: 14px; color: var(--muted-foreground); }
a.file-name { text-decoration: none; }
.file-name { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--foreground); padding: 0; cursor: pointer; text-align: left; }
.file-name svg.i { width: 16px; height: 16px; color: var(--muted-foreground); flex: none; }
.file-name.dir svg.i { color: var(--series); }
.file-name small { color: var(--muted-foreground); }
.dropzone { border: 1px dashed var(--input); border-radius: 12px; padding: 16px; text-align: center; color: var(--muted-foreground); }
.dropzone.drag { border-color: var(--series); color: var(--foreground); background: color-mix(in srgb, var(--series) 5%, transparent); }
.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; }
.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; }
/* A question with its explanation right under it, in one font. */
.sheet-text { display: grid; gap: 4px; }
.sheet-text p { margin: 0; }
.sheet-text .hint { font-size: inherit; }

/* 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; }
.sheet-text .switch-row .hint { font-size: 12.8px; }
.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 spin { to { transform: rotate(360deg); } }
@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; }
.limit-block + .limit-block, #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; }
/* 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 (mx-3.5, border-l), items 28px with px-2. */
.sb-menu-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 14px; padding: 2px 0 2px 10px; border-left: 1px solid var(--sidebar-border); transform: translateX(1px); }
.sb-menu-sub .sb-button { height: 28px; padding: 0 8px; }
/* 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. */
.chat-crumb { display: inline-flex; align-items: center; color: var(--muted-foreground); text-decoration: none; padding: 2px 4px; border-radius: 4px; max-width: 30vw; }
.chat-crumb:hover { color: var(--foreground); }
.chat-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-sep { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
.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 { position: relative; }
.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-del, .shell.collapsed .sb-empty { display: none; }
  .shell.collapsed #user-btn > svg.i { display: none; }
}
/* The user button in the footer: as wide as the separator above it (ReUI c-sidebar-1), radius 8px, filled on hover
   and while its menu is open. The avatar is 24px (ReUI app-shell) with 4px around it, so it stands at the same place
   open and folded (x 20; folded the button is the rail's 32px wide, the avatar on its center line) and never
   touches the edge of the fill. The height is 40px in both, so nothing moves up or down either. */
.sidebar-footer #user-btn.sb-button.lg { height: 40px; margin: 0; padding: 0 4px; gap: 8px; width: 100%;
  background: transparent; border: 0; border-radius: 8px; }
.sidebar-footer #user-btn .sb-avatar { width: 24px; height: 24px; }
.sidebar-footer #user-btn .sb-avatar svg.i { width: 14px; height: 14px; }
/* The fill as on the sidebar's links: sidebar-accent on hover, the active fill while its menu is open. */
.sidebar-footer #user-btn.sb-button.lg:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar-footer #user-btn.sb-button.lg[aria-expanded="true"] { background: var(--sidebar-active); }

/* icon-only toggle (attach): icon-sm 32×32 */
.tool-toggle:not(:has(span)) { width: 32px; padding: 0; justify-content: center; }
/* 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 */
.user-menu button:hover, .user-menu a:hover { background: var(--muted); color: var(--accent-foreground); }

/* Sidebar actions as ReUI c-sidebar-1: «+» on a group label (sidebar-group-action) and «⋯» on a project (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-group-label { position: relative; }
.sb-group-action, .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-group-action svg.i, .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; }
.sb-group-label .sb-group-action { font-size: 14px; }
/* «+ Новый проект» = shadcn SidebarGroupAction: its own fill under the pointer, as the sidebar's links
   (the project row's «⋯» has none: the row itself lights up). */
.sb-group-action { transition: background-color .15s, color .15s; }
.sb-group-action:hover, .sb-group-action:focus-visible { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
#ctx-menu { width: 128px; } /* ReUI 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[data-act=project-delete] { color: var(--destructive-text); }
#ctx-menu button[data-act=project-delete]:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
@media (min-width: 768px) { .shell.collapsed .sb-group-action, .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 */
.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); }
.sheet-overlay[data-starting], .sheet-overlay[data-ending] { opacity: 0; }
.sheet[data-starting], .sheet[data-ending] { opacity: 0; translate: 2.5rem 0; }
.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 by its right edge (768px and wider, not when folded) */
.sb-resize { display: none; }
@media (min-width: 768px) {
  .sidebar { position: relative; }
  .sb-resize { display: block; position: absolute; top: 0; bottom: 0; right: 0; z-index: 5; width: 8px; cursor: col-resize; touch-action: none; outline: 0; }
  /* As on the claude dashboard (ReUI SidebarRail): three round 2px dots 5px apart in the middle of the edge,
     the dot tone of the collapsed group label; darker under the pointer. */
  .sb-resize::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%;
    color: color-mix(in srgb, var(--sidebar-foreground) 40%, transparent); background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
  .sb-resize:hover::after, .sb-resize:focus-visible::after, .shell.resizing .sb-resize::after { color: color-mix(in srgb, var(--sidebar-foreground) 50%, transparent); }
  .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: one line thickness at every size, ≈1.05px on screen like the main stem of the system font at 14px regular
   (SF Pro, Segoe UI), as on the claude dashboard; the stroke does not scale with the icon (lucide counts it on a
   24×24 grid). The select chevron (a 16px picture in app.css) has stroke-width 1.6 = 1.05 × 24 / 16. */
svg.i { stroke-width: 1.05px; }
symbol * { vector-effect: non-scaling-stroke; }

/* Phones (≤639px): header buttons lose their text and keep the icon — but «Файлы» and «Заметки» have no icon,
   so they keep the text. */
@media (max-width: 639px) {
  .inset-header .btn-sm:not(:has(svg)) { width: auto; padding: 0 8px; }
  .inset-header .btn-sm:not(:has(svg)) span { display: inline; }
}
/* Touch screens (no hover): the project «⋯» is always there; row actions get a finger-sized 28px target
   (ReUI icon-sm). The trash stays on the open chat only, as with the mouse. */
@media (hover: none) {
  .chat-list .sb-more { opacity: 1; }
  .sb-group-action, .sb-more, .chat-list .sb-del { width: 28px; height: 28px; right: 2px; }
}

/* «Быстрые запросы» in the profile */
.starter-list { display: grid; margin: 4px 0 16px; }
.starter-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.starter-row + .starter-row { border-top: 1px solid var(--border); }
.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); }
.starter-add { display: grid; gap: 12px; }

/* «Профиль»: 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; }
.subnav { flex: none; width: var(--sidebar-width); padding: 8px; border-right: 1px solid var(--border); overflow-y: auto; }
.subnav .sb-button { color: var(--foreground); }
.subnav-layout > .page { flex: 1; min-width: 0; min-height: 0; overflow: auto; align-content: start; }
/* Below 1024px a 256px 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 .sb-group-label { display: none; }
  .subnav .sb-menu { flex-direction: row; gap: 4px; overflow-x: auto; }
  .subnav .sb-button { width: auto; flex: none; }
}

/* 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; }
.input[aria-invalid="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent); }

/* 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;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .15s, border-color .15s;
}
.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 as ReUI agent-activity's footer: items split by a small round dot. */
.ai-actions .ai-meta { display: inline-flex; align-items: center; gap: 8px; align-self: center; padding-left: 4px; font-variant-numeric: tabular-nums; }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; flex: none; }