/* base.css — variables, reset, typography, base controls.
   The style guide is public/css/STYLEGUIDE.md: every colour, size and gap
   below is the only place those values are written. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  color-scheme: light;
  /* Surfaces and text */
  --bg: #f2f5f3; --surface: #ffffff; --surface-2: #f8faf9; --border: #dce5e1; --border-strong: #a7b7b1;
  --text: #20312d; --text-dim: #566963;
  --on-accent: #fff; --on-accent-dark: #123c34;
  --bg-translucent: rgba(242,245,243,0.94); --surface-translucent: rgba(255,255,255,0.94);
  --overlay: rgba(27,43,38,0.38); --pre-bg: rgba(32,49,45,0.06);
  --raise-1: rgba(24,60,48,0.025); --raise-2: rgba(24,60,48,0.045); --raise-3: rgba(24,60,48,0.07);
  --ring-light: rgba(32,49,45,0.2);
  /* Accent */
  --accent: #176b5b; --accent-hover: #105447;
  --accent-soft: rgba(23,107,91,0.09); --accent-soft-2: rgba(23,107,91,0.18);
  --accent-glow: rgba(23,107,91,0.25); --accent-glow-strong: rgba(23,107,91,0.5);
  --user-bg: #e4f2ec; --ai-bg: var(--surface);
  /* States */
  --error: #b42318; --error-soft: rgba(180,35,24,0.08);
  --error-bg: #fff3f1; --error-border: #edc7c2; --error-text: #8f2119;
  --success: #18734f; --success-soft: rgba(24,115,79,0.09); --success-dim: rgba(24,115,79,0.22);
  --warning: #a35c0a; --warning-soft: rgba(163,92,10,0.09); --warning-dim: rgba(163,92,10,0.22);
  --warning-bg: #fff5e8; --warning-border: #ecd2ad; --warning-text: #80500f;
  --info: #315f9d; --info-soft: rgba(49,95,157,0.08); --info-dim: rgba(49,95,157,0.22); --info-glow: rgba(49,95,157,0.3);
  --copy-success: #e4f2ec; --copy-success-text: #176b5b;
  --model-sonnet: #3b82f6; --model-opus: #a855f7; --model-haiku: #f59e0b;
  --tool-read: #8b5cf6; --tool-bash: #f59e0b; --tool-edit: #10b981;
  --tool-write: #06b6d4; --tool-search: #ec4899; --tool-default: #6b7280;
  /* Shape */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px;
  --radius: var(--radius-lg);
  --shadow-md: 0 8px 24px rgba(24,45,37,0.12); --shadow-lg: 0 14px 42px rgba(24,45,37,0.2); --shadow-up: 0 -4px 20px rgba(24,45,37,0.12);
  /* Type: the scale is fixed; --font-input is 16px so iOS does not zoom a field */
  --font-xs: 10px; --font-sm: 11px; --font-md: 13px; --font-base: 14px; --font-lg: 15px; --font-xl: 16px; --font-2xl: 18px; --font-3xl: 20px; --font-icon: 24px;
  --font-input: 16px;
  --mono: 'SF Mono', Monaco, monospace;
  /* Space: 4 / 8 / 12 / 16 / 24 / 32 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Controls: compact (toolbars), regular (card actions), touch (main actions) */
  --control-sm: 32px; --control-md: 36px; --control-lg: 44px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141a18; --surface: #1c2421; --surface-2: #232d29; --border: #34423c; --border-strong: #52645c;
  --text: #e6eeea; --text-dim: #a8b8b0;
  --on-accent: #10251e; --on-accent-dark: #d8eee4;
  --bg-translucent: rgba(20,26,24,0.94); --surface-translucent: rgba(28,36,33,0.96);
  --overlay: rgba(0,0,0,0.62); --pre-bg: rgba(0,0,0,0.24);
  --raise-1: rgba(255,255,255,0.025); --raise-2: rgba(255,255,255,0.045); --raise-3: rgba(255,255,255,0.07);
  --ring-light: rgba(230,238,234,0.3);
  --accent: #55c5a2; --accent-hover: #72d6b5;
  --accent-soft: rgba(85,197,162,0.12); --accent-soft-2: rgba(85,197,162,0.2);
  --accent-glow: rgba(85,197,162,0.24); --accent-glow-strong: rgba(85,197,162,0.45);
  --user-bg: #203b31; --ai-bg: var(--surface);
  --error: #ff8278; --error-soft: rgba(255,130,120,0.12);
  --error-bg: #382321; --error-border: #70413b; --error-text: #ffaaa2;
  --success: #6ed3a2; --success-soft: rgba(110,211,162,0.12); --success-dim: rgba(110,211,162,0.23);
  --warning: #f0b96e; --warning-soft: rgba(240,185,110,0.12); --warning-dim: rgba(240,185,110,0.23);
  --warning-bg: #382f22; --warning-border: #685238; --warning-text: #f4c987;
  --info: #86b9ff; --info-soft: rgba(134,185,255,0.12); --info-dim: rgba(134,185,255,0.23); --info-glow: rgba(134,185,255,0.3);
  --copy-success: #203b31; --copy-success-text: #8be0bb;
  --shadow-md: 0 8px 24px rgba(0,0,0,0.32); --shadow-lg: 0 14px 42px rgba(0,0,0,0.44); --shadow-up: 0 -4px 20px rgba(0,0,0,0.32);
}
html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif; background: var(--bg); color: var(--text); }
body, #workspace, #login, .header, .preview-toolbar, .composer, .messages { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
/* Focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button, button *, [role="button"], [role="button"] *, [role="tab"], [role="tab"] *,
.btn, .btn *, .chip, .chip *, .biz-actions a {
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Base controls (STYLEGUIDE.md). Older class names keep working; these
   carry the shared look so a new element needs no new rule. --- */
/* Secondary button: transparent, border, accent on hover / when active */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--control-md); padding: var(--space-1) 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font: inherit; font-size: var(--font-md); line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--compact { min-height: var(--control-sm); padding: 0 var(--space-3); }
.btn--touch { min-height: var(--control-lg); padding: var(--space-3) var(--space-4); font-size: var(--font-base); }
/* Primary button: one per screen */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
/* Chip: a filter or a choice, compact height, pill shape */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font: inherit; font-size: var(--font-md); cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.active, .chip.on { color: var(--accent); border-color: var(--accent); }
/* Card: a block in the feed or in a panel */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--font-md); }
.card--status { border-left: 3px solid var(--info); }
/* Field: text input, textarea, select */
.field {
  width: 100%; min-height: var(--control-md); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-base); outline: none;
}
.field:focus { border-color: var(--accent); }
/* Muted text and section labels */
.text-dim { color: var(--text-dim); }
.section-label { font-size: var(--font-sm); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
/* Centered placeholder text in a modal body ("Загрузка…", "Нет файлов") */
.modal-loading { color: var(--text-dim); padding: var(--space-5); text-align: center; }
.modal-error { color: var(--error); padding: var(--space-5); text-align: center; }