/* =====================================================================
 * Общая дизайн-система страниц-приложений (check.html, task.html).
 * Единые токены и компоненты: одинаковые элементы используют одинаковые
 * стили — кнопки, иконки-кнопки, сегмент-переключатели, селекты, поля
 * ввода, панели, модалки, чат, чипы и статус-пилюли.
 * Скоуп: body.check-page / body.task-page. Темы — через [data-theme].
 * ===================================================================== */

/* ------------------------------- tokens ------------------------------ */
body.check-page,
body.task-page {
  color-scheme: light;
  --radius: var(--radius-lg);
  --radius-sm: var(--radius-md);
  --font: var(--font-task);
  --ctl-h: 2rem;
  --task-space: clamp(0.85rem, 1.6vw, 1.05rem);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --ring-soft: 0 0 0 2px rgba(0, 0, 0, 0.04), 0 0 0 4px rgba(0, 0, 0, 0.12);
  --inset-highlight: color-mix(in srgb, #000 3%, transparent);
  --body-glow: rgba(var(--primary-rgb), 0.08);
  --panel-inset: var(--border-inset);
  --hairline: var(--border-inset);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.1);
  --tint-2: rgba(0, 0, 0, 0.02);
  --tint-3: rgba(0, 0, 0, 0.03);
  --tint-4: rgba(0, 0, 0, 0.04);
  --tint-5: rgba(0, 0, 0, 0.05);
  --tint-6: rgba(0, 0, 0, 0.06);
  --tint-7: rgba(0, 0, 0, 0.07);
  --tint-8: rgba(0, 0, 0, 0.08);
  --tint-10: rgba(0, 0, 0, 0.1);
  --tint-12: rgba(0, 0, 0, 0.12);
  --tint-14: rgba(0, 0, 0, 0.14);
  --tint-18: rgba(0, 0, 0, 0.18);
  --tint-28: rgba(0, 0, 0, 0.28);
  --tint-35: rgba(0, 0, 0, 0.35);
  --tint-38: rgba(0, 0, 0, 0.38);
  --tint-40: rgba(0, 0, 0, 0.4);
  --tint-42: rgba(0, 0, 0, 0.42);
  --tint-65: rgba(0, 0, 0, 0.65);
  --overlay-sunken: rgba(0, 0, 0, 0.04);
  --overlay-modal: rgba(0, 0, 0, 0.45);
  --toggle-track-bg: rgba(0, 0, 0, 0.06);
  --input-bg: var(--bg-surface);
  --input-border: var(--border);
  --input-border-hover: var(--border-interactive);
  --input-border-focus: var(--border-interactive-focus);
  --input-focus-ring: color-mix(in srgb, var(--accent) 18%, transparent);
  --dropzone-bg: var(--bg-surface-hover);
  --dropzone-bg-hover: #f1f5f9;
  --dropzone-bg-active: #e2e8f0;
  --dropzone-border: var(--border-interactive);
  --dropzone-border-hover: var(--border-interactive-hover);
  --dropzone-border-active: var(--border-interactive-focus);
  --chat-assistant-bg-top: #f8fafc;
  --chat-assistant-bg-bottom: #f1f5f9;
  --chat-user-shadow: rgba(0, 0, 0, 0.04);
  --err-text: #b91c1c;
  --warn-text: #c2410c;
}

[data-theme="dark"] body.check-page,
[data-theme="dark"] body.task-page {
  color-scheme: dark;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-secondary);
  --ring-soft: 0 0 0 2px var(--tint-8), 0 0 0 4px rgba(255, 255, 255, 0.2);
  --inset-highlight: color-mix(in srgb, #fff 5%, transparent);
  --body-glow: var(--tint-6);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --tint-2: rgba(255, 255, 255, 0.02);
  --tint-3: rgba(255, 255, 255, 0.03);
  --tint-4: rgba(255, 255, 255, 0.04);
  --tint-5: rgba(255, 255, 255, 0.05);
  --tint-6: rgba(255, 255, 255, 0.06);
  --tint-7: rgba(255, 255, 255, 0.07);
  --tint-8: rgba(255, 255, 255, 0.08);
  --tint-10: rgba(255, 255, 255, 0.1);
  --tint-12: rgba(255, 255, 255, 0.12);
  --tint-14: rgba(255, 255, 255, 0.14);
  --tint-18: rgba(255, 255, 255, 0.18);
  --tint-28: rgba(255, 255, 255, 0.28);
  --tint-35: rgba(255, 255, 255, 0.35);
  --tint-38: rgba(255, 255, 255, 0.38);
  --tint-40: rgba(255, 255, 255, 0.4);
  --tint-42: rgba(255, 255, 255, 0.42);
  --tint-65: rgba(255, 255, 255, 0.65);
  --border-inset: var(--tint-8);
  --overlay-sunken: rgba(0, 0, 0, 0.22);
  --overlay-modal: rgba(0, 0, 0, 0.66);
  --toggle-track-bg: rgba(0, 0, 0, 0.38);
  --input-bg: #131313;
  --input-focus-ring: color-mix(in srgb, var(--accent) 24%, transparent);
  --dropzone-bg: #141414;
  --dropzone-bg-hover: #181818;
  --dropzone-bg-active: #1d1d1d;
  --chat-assistant-bg-top: #181818;
  --chat-assistant-bg-bottom: #141414;
  --chat-user-shadow: var(--tint-4);
  --err-text: #f0b0b0;
  --warn-text: #f0c4a8;
}

/* ---------------------------- page chrome ---------------------------- */
body.check-page,
body.task-page {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  margin: 0;
  min-height: 100dvh;
  height: 100dvh;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  background:
    radial-gradient(ellipse 100% 70% at 50% -15%, var(--body-glow) 0%, transparent 52%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.check-page ::selection,
body.task-page ::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

body.check-page [hidden],
body.task-page [hidden] {
  display: none !important;
}

/* единые скрытые скроллбары */
body.check-page,
body.check-page *,
body.check-page *::before,
body.check-page *::after,
body.task-page,
body.task-page *,
body.task-page *::before,
body.task-page *::after {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.check-page *::-webkit-scrollbar,
body.task-page *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.check-page .dashboard-footer,
body.task-page .dashboard-footer {
  padding: var(--task-space);
  flex-shrink: 0;
}

body.check-page .header,
body.task-page .header {
  flex-shrink: 0;
}

/* -------------------------------- panel ------------------------------ */
body.check-page .panel,
body.task-page .panel {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.68rem, 1.6vw, 0.9rem);
  box-shadow: var(--shadow-sm);
}

body.check-page .layout .panel,
body.task-page .app-sidebar .panel,
body.task-page .app-main .panel {
  margin-top: 0;
  padding: var(--task-space);
}

/* «островки» левой колонки — градиентная панель */
body.task-page .app-sidebar .app-sidebar-panel,
body.task-page .app-sidebar .doc-chat-panel,
body.check-page .col-side .panel {
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--surface) 94%, var(--emphasis) 3.5%) 0%,
    color-mix(in srgb, var(--bg-elevated) 88%, transparent) 100%
  );
  border-color: var(--border);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 var(--inset-highlight);
}

/* ------------------------------ controls ----------------------------- */
body.check-page .btn,
body.task-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-interactive);
  padding: 0.45rem 0.65rem;
  min-height: var(--ctl-h);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  box-shadow: none;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.1s ease;
}

body.check-page .btn:hover:not(:disabled),
body.task-page .btn:hover:not(:disabled) {
  color: var(--emphasis);
  background: color-mix(in srgb, var(--surface-hover) 92%, var(--bg) 8%);
  border-color: var(--border-interactive-hover);
}

body.check-page .btn:focus-visible,
body.task-page .btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

body.check-page .btn:active:not(:disabled),
body.task-page .btn:active:not(:disabled) {
  transform: scale(0.98);
}

body.check-page .btn:disabled,
body.task-page .btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

body.check-page .btn-ghost,
body.task-page .btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border-color: var(--border-subtle);
  font-weight: 500;
}

body.check-page .btn-ghost:hover:not(:disabled),
body.task-page .btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--tint-4);
  border-color: var(--border-interactive);
}

body.check-page .btn-icon.btn-ghost,
body.task-page .btn-icon.btn-ghost,
body.check-page .btn-icon.btn-ghost:hover:not(:disabled),
body.task-page .btn-icon.btn-ghost:hover:not(:disabled) {
  border-color: transparent;
}

body.check-page .btn-icon,
body.task-page .btn-icon {
  display: inline-grid;
  place-items: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  padding: 0;
  border-radius: var(--radius-xs);
}

body.check-page .btn-icon--sm,
body.task-page .btn-icon--sm {
  width: 1.55rem;
  height: 1.55rem;
  min-height: 1.55rem;
}

body.check-page .btn-icon--round,
body.task-page .btn-icon--round {
  border-radius: 999px;
}

body.check-page .btn-sm,
body.task-page .btn-sm {
  min-height: 1.65rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* основной акцентный action */
body.check-page .btn-accent,
body.task-page .btn-accent {
  color: var(--on-cta);
  background: var(--cta);
  border-color: color-mix(in srgb, var(--cta) 70%, var(--border-strong) 30%);
}

body.check-page .btn-accent:hover:not(:disabled),
body.task-page .btn-accent:hover:not(:disabled) {
  color: var(--on-cta);
  background: var(--cta-hover);
  border-color: color-mix(in srgb, var(--cta-hover) 75%, var(--border-strong) 25%);
}

body.check-page .btn-accent:disabled,
body.task-page .btn-accent:disabled {
  color: var(--on-cta);
  background: var(--cta) !important;
  border-color: color-mix(in srgb, var(--cta) 70%, var(--border-strong) 30%);
}

body.check-page .btn-danger,
body.task-page .btn-danger {
  color: #e8a0a0;
  background: rgba(232, 160, 160, 0.08);
  border-color: rgba(232, 160, 160, 0.35);
}

body.check-page .btn-danger:hover:not(:disabled),
body.task-page .btn-danger:hover:not(:disabled) {
  color: var(--err-text);
  background: rgba(232, 160, 160, 0.14);
  border-color: rgba(232, 160, 160, 0.55);
}

body.check-page .btn-icon.btn-danger,
body.task-page .btn-icon.btn-danger {
  color: rgba(232, 160, 160, 0.85);
  background: transparent;
  border-color: transparent;
}

body.check-page .btn-icon.btn-danger:hover:not(:disabled),
body.task-page .btn-icon.btn-danger:hover:not(:disabled) {
  color: var(--err-text);
  background: rgba(232, 160, 160, 0.12);
  border-color: transparent;
}

body.check-page .btn-success,
body.task-page .btn-success {
  color: #9ed4ad;
  background: rgba(158, 212, 173, 0.08);
  border-color: rgba(158, 212, 173, 0.35);
}

body.check-page .btn-success:hover:not(:disabled),
body.task-page .btn-success:hover:not(:disabled) {
  color: #b8e8c4;
  background: rgba(158, 212, 173, 0.14);
  border-color: rgba(158, 212, 173, 0.55);
}

body.check-page .btn-info,
body.task-page .btn-info {
  color: #9ec4e8;
  background: rgba(158, 196, 232, 0.08);
  border-color: rgba(158, 196, 232, 0.35);
}

body.check-page .btn-info:hover:not(:disabled),
body.task-page .btn-info:hover:not(:disabled) {
  color: #b8d8f5;
  background: rgba(158, 196, 232, 0.14);
  border-color: rgba(158, 196, 232, 0.55);
}

body.check-page .btn-warning,
body.task-page .btn-warning {
  color: #e8c49e;
  background: rgba(232, 196, 158, 0.08);
  border-color: rgba(232, 196, 158, 0.35);
}

body.check-page .btn-warning:hover:not(:disabled),
body.task-page .btn-warning:hover:not(:disabled) {
  color: var(--warn-text);
  background: rgba(232, 196, 158, 0.14);
  border-color: rgba(232, 196, 158, 0.55);
}

/* --------------------- segmented control + toolbar ------------------- */
/* утопленная панель-полоса: внутри — бесшовные .tab/селекты/кнопки */
body.check-page .tabs-bar,
body.task-page .tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.14rem;
  min-height: calc(2rem + 2 * 0.14rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* компактный вариант для самостоятельного сегмент-переключателя */
body.check-page .tabs-bar--compact,
body.task-page .tabs-bar--compact {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  margin: 0;
  min-height: 0;
}

body.check-page .tabs-bar-lead,
body.task-page .tabs-bar-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}

body.check-page .tabs-bar-right,
body.task-page .tabs-bar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

body.check-page .tabs,
body.task-page .tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

body.check-page .tab,
body.task-page .tab {
  font: inherit;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.33rem 0.6rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

body.check-page .tab:focus-visible,
body.task-page .tab:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

body.check-page .tab:hover:not(.active),
body.task-page .tab:hover:not(.active) {
  color: var(--text);
  background: var(--tint-4);
}

body.check-page .tab.active,
body.task-page .tab.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

body.check-page .tabs-actions,
body.task-page .tabs-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
}

/* текстовые кнопки внутри панели-полосы — под общий ритм ~1.85rem,
 * чтобы не выпирали рядом с табами и инлайн-селектами */
body.check-page .tabs-bar .btn:not(.btn-icon):not(.btn-sm),
body.task-page .tabs-bar .btn:not(.btn-icon):not(.btn-sm) {
  min-height: 1.85rem;
  padding: 0.3rem 0.6rem;
}

/* ------------------------- selects и inputs -------------------------- */
/* Базовый вид полей ввода — на общих --input-* токенах.
 * На task-page инпуты стилизованы контекстно (модалки, тулбары) — там свои
 * правила поверх тех же токенов; здесь — базовое правило для .check-app
 * (низкая специфичность, чтобы .select-inline/.res-search его перебивали). */
.check-app select,
.check-app input[type="number"],
.check-app input[type="text"],
.check-app input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  height: var(--ctl-h);
  padding: 0 0.65rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.check-app select:focus,
.check-app input:not([type="checkbox"]):not([type="file"]):focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-focus-ring);
}

.check-app select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 11px;
}

/* инлайн-селект внутри .tabs-bar — без рамки, как кнопки-призраки */
body.check-page .tabs-filter,
body.task-page .tabs-filter {
  flex-shrink: 0;
  margin: 0;
}

body.check-page .select-inline,
body.task-page .select-inline {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--muted);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  padding: 0.3rem 1.5rem 0.3rem 0.48rem;
  margin: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: min(11rem, 34vw);
  box-sizing: border-box;
  cursor: pointer;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.28rem center;
  background-size: 0.65rem;
  transition:
    color 0.14s ease,
    background-color 0.14s ease;
}

body.check-page .select-inline:hover:not(:disabled),
body.task-page .select-inline:hover:not(:disabled) {
  color: var(--text);
  background-color: var(--tint-4);
}

body.check-page .select-inline:focus,
body.task-page .select-inline:focus {
  outline: none;
}

body.check-page .select-inline:focus-visible,
body.task-page .select-inline:focus-visible {
  box-shadow: var(--ring);
}

body.check-page .select-inline:disabled,
body.task-page .select-inline:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* бесшовное текстовое поле поиска внутри .tabs-bar */
body.check-page input.res-search,
body.task-page input.res-search {
  flex: 1 1 12rem;
  width: auto;
  min-width: 9rem;
  height: auto;
  min-height: 0;
  padding: 0.3rem 0.65rem 0.3rem 1.75rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23888' stroke-width='2'/%3E%3Cpath d='M21 21l-4.3-4.3' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

body.check-page input.res-search:hover,
body.task-page input.res-search:hover {
  background-color: var(--tint-4);
}

body.check-page input.res-search:focus,
body.task-page input.res-search:focus {
  outline: none;
  border-color: transparent;
  box-shadow: var(--ring);
}

/* --------------------------- filter chips ---------------------------- */
body.check-page .chip,
body.task-page .gantt-status-filter-btn {
  appearance: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  background: var(--tint-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

body.check-page .chip:hover,
body.task-page .gantt-status-filter-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
}

body.check-page .chip:focus-visible,
body.task-page .gantt-status-filter-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* --------------------------- status pill ----------------------------- */
body.check-page .st,
body.task-page .project-docs-active-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--tint-12);
  background: var(--tint-6);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------- modal ------------------------------- */
body.check-page .dlg-card,
body.task-page .task-modal-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

body.check-page .dlg-head,
body.task-page .task-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}

body.check-page .dlg-head h2,
body.task-page .task-modal-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

body.check-page .dlg-head .btn-icon,
body.task-page .task-modal-head .btn-icon {
  font-size: 1.2rem;
  line-height: 1;
}

body.check-page .dlg-body,
body.task-page .task-modal-form {
  padding: 0.9rem 1rem 1rem;
}

/* -------------------------------- chat ------------------------------- */
body.check-page .chat-log,
body.task-page .doc-chat-messages {
  flex: 1;
  min-height: 7.5rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.55rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}

body.check-page .chat-input,
body.task-page .doc-chat-composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  resize: vertical;
  max-height: 9rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.55rem 0.62rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: inherit;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

body.check-page .chat-input::placeholder,
body.task-page .doc-chat-composer textarea::placeholder {
  color: var(--dim);
}

body.check-page .chat-input:focus-visible,
body.task-page .doc-chat-composer textarea:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 2px var(--input-focus-ring);
}

/* пузырь пользователя */
body.check-page .cmsg-user,
body.task-page .doc-chat-bubble--user {
  background: var(--bg-elevated);
  border-color: var(--border-interactive);
  color: var(--text);
  box-shadow: 0 1px 0 var(--chat-user-shadow);
}

/* карточка ответа ассистента */
body.check-page .cmsg-bot,
body.task-page .doc-chat-bubble--assistant .doc-chat-md:not([hidden]) {
  padding: 0.62rem 0.72rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-interactive);
  background: linear-gradient(180deg, var(--chat-assistant-bg-top) 0%, var(--chat-assistant-bg-bottom) 100%);
}

body.check-page .cmsg-bot.cmsg-err,
body.task-page .doc-chat-bubble--error.doc-chat-bubble--assistant .doc-chat-md:not([hidden]) {
  border-color: color-mix(in srgb, var(--err) 55%, var(--border));
  color: var(--err);
}