:root {
  --bg: #0d1117;
  --panel: #151b23;
  --card: #1b232e;
  --line: #28313d;
  --txt: #e8edf4;
  --mut: #8b96a6;
  --dim: #5c6774;
  --blue: #4c8dff;
  --green: #33c48d;
  --amber: #f0a132;
  --red: #e5484d;
  --lock: #3a4552;
  --r: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* Ф1 фикс-лист v2 п.2: документ залочен во вьюпорте — страница не «елозит»
     резиновым скроллом iOS/Android, скроллится только контент-зона экрана */
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

/* поля ввода ≥16px — iOS Safari не автозумит поле при фокусе (п.2 фикс-листа) */
input,
textarea,
select {
  font-size: 16px;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app > .screen,
.app > [class*="screen"],
.app > .login {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* у полноэкранного чата скроллится ЛОГ (внутри), а не секция — композер
   и шапка остаются на месте, как в мессенджере */
.app > .chat-screen {
  overflow: hidden;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--txt);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 10px;
}

.chip--dashed {
  color: var(--blue);
  border-style: dashed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: var(--card);
  color: var(--txt);
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
}

.btn--wide {
  display: flex;
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
  background: rgba(76, 141, 255, 0.16);
  color: var(--blue);
}

.badge--green {
  background: rgba(51, 196, 141, 0.16);
  color: var(--green);
}

.badge--amber {
  background: rgba(240, 161, 50, 0.18);
  color: var(--amber);
}

.badge--red {
  background: rgba(229, 72, 77, 0.18);
  color: var(--red);
}

.pill-row {
  display: flex;
  gap: 6px;
}

.pill {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: var(--lock);
}

.pill--done {
  background: var(--green);
}

.pill--act {
  background: var(--blue);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--green));
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.field__label {
  font-size: 12.5px;
  color: var(--mut);
}

.field__input {
  min-height: 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--txt);
}

.field__input:focus {
  outline: none;
  border-color: var(--blue);
}

/* Задача 17: плейсхолдер "оставь пустым для web-токена" обрезался внутри
   узкого инпута на 320px (текст длиннее content-width поля) — уменьшаем
   только шрифт плейсхолдера, набранный текст остаётся обычного размера. */
.field__input::placeholder {
  font-size: 12px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 13, 0.66);
  border: none;
}

.modal__sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  padding: 20px;
}

@media (min-width: 768px) {
  .modal {
    align-items: center;
  }

  .modal__sheet {
    border-radius: var(--r);
  }
}

.nav {
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px));
}

.nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.2;
  position: relative;
  /* сброс браузерных стилей <button> — .nav__item используется и для
     <a> (роуты), и для <button> (Выйти); оба должны выглядеть одинаково */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav__icon {
  font-size: 17px;
  font-style: normal;
}

.nav__item--active {
  color: var(--blue);
}

.nav__badge {
  position: absolute;
  top: 2px;
  right: 20%;
  background: var(--amber);
  color: #12161c;
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 8px;
  padding: 0 4px;
}

/* Десктоп: навигацию НЕ прячем (E2E доводки 01.08: display:none оставлял
   десктоп без «Выйти» и переходов между разделами вообще) — та же нижняя
   панель, но компактно по центру. */
@media (min-width: 1024px) {
  .nav {
    justify-content: center;
    gap: 8px;
  }

  .nav__item {
    flex: 0 0 128px;
  }
}

.login {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login__card {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px;
}

.login__title {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}

.login__subtitle {
  color: var(--mut);
  margin: 6px 0 22px;
}

.login__error {
  color: var(--red);
  font-size: 13px;
  margin: -6px 0 12px;
}

.login__hint {
  color: var(--dim);
  font-size: 11.5px;
  text-align: center;
  margin-top: 12px;
}

.screen {
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.screen__title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.screen__note {
  color: var(--mut);
}

.screen__note--error {
  color: var(--red);
}

.screen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.screen__header .screen__title {
  margin: 0;
}

.field__hint {
  color: var(--dim);
  font-size: 11px;
}

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card {
  display: block;
  text-decoration: none;
  min-height: 44px;
}

.project-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.project-card__name {
  font-size: 15px;
  font-weight: 650;
  color: var(--txt);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Задача 17: длинная ниша ("лечение суставов без операции · Казань+Уфа")
   выпирала за карточку на 320px (chip не умел сжиматься, hscroll
   scrollWidth 360 > 320). `display: inline-block` (вместо унаследованного
   `inline-flex` из `.chip`) — чтобы `text-overflow: ellipsis` реально
   работало на самом боксе чипа, а не на анонимных flex-айтемах текста. */
.project-card__niche {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--mut);
}

.project-card__progress {
  height: 6px;
  border-radius: 4px;
  background: var(--lock);
  overflow: hidden;
}

.project-card__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--blue);
  transition: width 0.25s ease;
}

.project-card__stage {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--dim);
}

/* Ф2 §6.2: живая строка карточки — этап + модуль + лиды/CPA + бейджи */
.project-card__foot {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.project-card__foot .project-card__stage {
  display: inline;
  margin-top: 0;
}

.project-card__module {
  font-size: 11.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}

.project-card__spacer {
  flex: 1;
}

.project-card__stat {
  font-size: 11.5px;
  color: var(--txt);
  white-space: nowrap;
}

.project-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.project-card__badges .badge {
  cursor: pointer;
}

.project-card__stale {
  font-size: 10.5px;
  color: var(--dim);
}

.project-card--skeleton {
  pointer-events: none;
}

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--panel) 25%, var(--line) 37%, var(--panel) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton--title {
  height: 16px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton--chip {
  height: 20px;
  width: 40%;
  margin-bottom: 12px;
  border-radius: 20px;
}

.skeleton--bar {
  height: 6px;
  width: 100%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

.new-project__form {
  max-width: 420px;
}

.new-project__error {
  color: var(--red);
  font-size: 13px;
  margin: -6px 0 12px;
}

/* Ф1 фикс-лист п.2: заметная пометка на dev — проект создастся песочницей
   (`_pesochnica-<slug>`) и не тронет боевые id (guards.py, allow_sandbox_project). */
.new-project__sandbox-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(240, 161, 50, 0.12);
  border: 1px solid rgba(240, 161, 50, 0.35);
  color: var(--amber);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 16px;
}

/* ── Э2 · Проект/Конвейер (задача 14) ─────────────────────────────────────
   Одна разметка для всех ширин (`ProjectScreen.js`), брейкпоинты — чистым
   CSS: <768px и 768-1023px — паттерн B (мокап 02-B), боковая колонка и
   панель чата скрыты, чат — кнопкой в шапке; >=1024px — три зоны (мокап
   03-desktop-3zone): лента пилюль/подписи скрываются, вместо них боковая
   колонка с тем же списком модулей, справа появляется панель чата. */

.project-screen {
  max-width: 720px;
}

.project-screen__appbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.project-screen__back {
  font-size: 20px;
  color: var(--mut);
}

.project-screen__name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  /* Задача 17: имя проекта должно сжиматься/усекаться первым — иначе на
     тесных 320px flex забирает пиксели у `.project-screen__chat-btn`
     (44px min-width) и хит-зона проваливается до ~42px. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-screen__spacer {
  flex: 1;
}

.project-screen__chat-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* Задача 16, §5.3 (лайт-модель): непрочитанные события чата проекта. */
.project-screen__chat-btn-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--card);
}

.project-screen__pillrow {
  margin-bottom: 6px;
}

.project-screen__pilllabels {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 10px;
  margin-bottom: 18px;
}

.project-screen__pilllabel {
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: 10px;
  color: var(--dim);
  cursor: pointer;
  min-height: 28px;
}

.project-screen__pilllabel--on {
  color: var(--blue);
  font-weight: 600;
}

.project-screen__pilllabel--locked {
  cursor: default;
  opacity: 0.6;
}

.project-screen__layout {
  display: block;
}

.project-screen__side,
.project-screen__chat {
  display: none;
}

.project-screen__side-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--mut);
  cursor: pointer;
  font-size: 13px;
}

.project-screen__side-item--active {
  background: rgba(76, 141, 255, 0.12);
  color: var(--txt);
}

.project-screen__side-item--selected {
  box-shadow: inset 0 0 0 1px var(--blue);
}

.project-screen__side-item--locked {
  color: var(--dim);
  cursor: default;
}

.project-screen__side-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex: none;
  background: var(--card);
  border: 1px solid var(--lock);
  color: var(--dim);
}

.project-screen__side-item--done .project-screen__side-dot {
  background: rgba(51, 196, 141, 0.16);
  color: var(--green);
  border-color: var(--green);
}

.project-screen__side-item--active .project-screen__side-dot {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.project-screen__side-label {
  flex: 1;
}

.project-screen__side-badge {
  margin-left: auto;
}

.project-screen__main {
  min-width: 0;
}

.project-screen__crumbs {
  color: var(--dim);
  font-size: 11.5px;
  margin-bottom: 6px;
}

.project-screen__mh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.project-screen__mh-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}

.project-screen__chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.project-screen__chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

@media (min-width: 1024px) {
  .project-screen {
    max-width: 1180px;
  }

  .project-screen__chat-btn {
    display: none;
  }

  .project-screen__pillrow,
  .project-screen__pilllabels {
    display: none;
  }

  .project-screen__layout {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 20px;
    align-items: start;
  }

  .project-screen__side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px;
  }

  .project-screen__chat {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    min-height: 320px;
    /* фиксируем высоту панели — иначе `.chat-screen__log` растёт с лентой
       событий бесконечно; лог скроллится внутри, шапка/composer на месте. */
    height: calc(100vh - 140px);
    max-height: 720px;
    overflow: hidden;
  }

  .project-screen__chat .chat-screen--compact {
    height: 100%;
  }
}

/* ── ConveyorModule / StageRow / ModuleInputs (задача 14) ─────────────── */

.module-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module-panel__zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module-panel__stages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-panel__error {
  color: var(--red);
  font-size: 13px;
}

/* Ф1 фикс-лист v2 п.1: карточка «модуль готов → дальше» под модулем */
.next-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.next-step__note {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
}

.gallery-screen__next {
  margin-top: 14px;
}

.module-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-panel__action-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.module-panel__action-hint {
  color: var(--dim);
  font-size: 11.5px;
}

.module-panel__hint {
  color: var(--dim);
  font-size: 11.5px;
  text-align: center;
}

.stage-row {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.stage-row__dot {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--panel);
  border: 1.5px solid var(--lock);
  color: var(--dim);
}

.stage-row--done .stage-row__dot {
  background: rgba(51, 196, 141, 0.16);
  color: var(--green);
  border-color: var(--green);
}

.stage-row--running .stage-row__dot,
.stage-row--review .stage-row__dot {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.stage-row__body {
  flex: 1;
  min-width: 0;
}

.stage-row__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

.stage-row__status {
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}

.stage-row__hint {
  color: var(--mut);
  font-size: 12px;
  margin-top: 3px;
}

.stage-row__log {
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--mut);
  max-height: 120px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.stage-row__log-line + .stage-row__log-line {
  margin-top: 3px;
}

.stage-row__error {
  color: var(--red);
  font-size: 12px;
  margin-top: 4px;
}

/* v3 п.2-3: живой статус «что агент делает сейчас», бейджи и пояснение гейта */
.stage-row__badge {
  flex: none;
  font-size: 10px;
}

.stage-row__status--review {
  color: var(--amber);
}

.stage-row__now {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--txt);
  overflow-wrap: anywhere;
}

/* v4 п.4: ход чата прерван рестартом сервиса */
.chat-screen__interrupted {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 12px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--amber);
  font-size: 12.5px;
}

/* v4 п.4: стадия прервана рестартом сервиса — не «выполняется» */
.stage-row__now--interrupted {
  color: var(--amber);
}

.stage-row__resume {
  margin-top: 6px;
}

.stage-row__spinner {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  animation: stage-spin 0.9s linear infinite;
}

@keyframes stage-spin {
  to {
    transform: rotate(360deg);
  }
}

.stage-row__gate-note {
  color: var(--amber);
  font-size: 11.5px;
  margin-top: 4px;
}

/* v3 п.1: карточка результата стадии прямо в модуле */
.stage-result {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.stage-result__note {
  font-size: 12px;
  color: var(--mut);
}

.stage-result__note--error {
  color: var(--red);
}

.stage-result__note--warn {
  color: var(--amber);
}

.stage-result__card {
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.stage-result__head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.stage-result__title {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.stage-result__summary {
  font-size: 12px;
  color: var(--mut);
}

.stage-result__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stage-result__chip {
  font-size: 10.5px;
}

.stage-result__chip--ok {
  color: var(--green);
  border-color: rgba(51, 196, 141, 0.4);
}

.stage-result__chip--warn {
  color: var(--amber);
  border-color: rgba(240, 161, 50, 0.4);
}

.stage-result__chip--fail {
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.4);
}

.stage-result__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stage-result__link {
  color: var(--blue);
  font-size: 12px;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.stage-result__md {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  max-height: 280px;
  overflow: hidden;
  position: relative;
}

.stage-result__md:not(.stage-result__md--full)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48px;
  background: linear-gradient(transparent, var(--panel));
}

.stage-result__md--full {
  max-height: none;
  overflow: auto;
}

.stage-result__md h1,
.stage-result__md h2,
.stage-result__md h3,
.stage-result__md h4 {
  font-size: 13px;
  margin: 10px 0 4px;
}

.stage-result__md p,
.stage-result__md ul,
.stage-result__md ol {
  margin: 6px 0;
}

.stage-result__md ul,
.stage-result__md ol {
  padding-left: 18px;
}

.stage-result__md table {
  border-collapse: collapse;
  font-size: 11.5px;
}

.stage-result__md th,
.stage-result__md td {
  border: 1px solid var(--line);
  padding: 4px 7px;
  text-align: left;
}

.stage-result__md .table-scroll {
  overflow-x: auto;
}

.stage-result__md pre {
  overflow-x: auto;
  background: var(--card);
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
}

.stage-result__toggle {
  justify-self: start;
}

.stage-row__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn--sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12.5px;
}

.input-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-zone--error {
  border-color: var(--red);
}

.input-zone__label {
  font-size: 12.5px;
  color: var(--mut);
}

.input-zone__textarea {
  min-height: 74px;
  padding: 10px 12px;
  resize: vertical;
}

.input-zone__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.input-zone__remove {
  border: none;
  background: none;
  color: inherit;
  font-size: 10px;
  margin-left: 4px;
  padding: 0;
  cursor: pointer;
}

.input-zone__add {
  position: relative;
  cursor: pointer;
}

.input-zone__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.input-zone__error {
  color: var(--red);
  font-size: 12px;
}

.module-panel__gallery-link {
  align-self: flex-start;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

/* ── Gallery / VariantCard (задача 15, §3.2 Э3, мокап 04-gallery.html) ──
   Раскладка экрана переиспользует `.project-screen__*` (шапка/пилюли/три
   зоны — идентичные брейкпоинты <768 / 768-1023 / >=1024, задача 14);
   здесь — только то, что специфично галерее: тулбар фильтров и сетка
   карточек (мобайл — 1 колонка, десктоп — сетка, как в мокапе). */

.gallery-screen__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}

.gallery-screen__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gallery-screen__filter {
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}

.gallery-screen__filter--on {
  background: rgba(76, 141, 255, 0.16);
  border: 1px solid rgba(76, 141, 255, 0.5);
  color: var(--txt);
}

.gallery-screen__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .gallery-screen__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gallery-screen__grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}

.variant-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  transition: border-color 0.15s, opacity 0.15s;
}

.variant-card--fav {
  border-color: var(--amber);
}

.variant-card--killed {
  opacity: 0.5;
}

.variant-card__prev {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(135deg, #232c38, #1a222c);
  border: 1px solid var(--line);
  overflow: hidden;
}

.variant-card__prev-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.variant-card__prev-empty {
  width: 100%;
  height: 100%;
}

.variant-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.variant-card__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.variant-card__pill {
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex: none;
}

.variant-card__pill--star {
  color: var(--amber);
  background: rgba(240, 161, 50, 0.15);
}

.variant-card__pill--keep {
  color: var(--green);
  background: rgba(51, 196, 141, 0.15);
}

.variant-card__pill--kill {
  color: var(--red);
  background: rgba(229, 72, 77, 0.15);
}

.variant-card__summary {
  color: var(--mut);
  font-size: 12px;
}

.variant-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.variant-card__chip {
  font-size: 10px;
  padding: 2px 8px;
  cursor: default;
}

.variant-card__chip--ok {
  color: var(--green);
}

.variant-card__chip--warn {
  color: var(--amber);
}

.variant-card__chip--fail {
  color: var(--red);
}

.variant-card__chip--fp-ok {
  color: var(--green);
}

.variant-card__chip--fp-bad {
  color: var(--red);
}

.variant-card__link {
  color: var(--blue);
  font-size: 12px;
}

.variant-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.variant-card__btn {
  flex: 1;
  min-height: 40px;
  padding: 6px 4px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mut);
}

.variant-card__btn--star {
  color: var(--amber);
  border-color: rgba(240, 161, 50, 0.4);
}

.variant-card__btn--star.variant-card__btn--active {
  background: rgba(240, 161, 50, 0.16);
  border-color: var(--amber);
  color: var(--amber);
}

.variant-card__btn--keep {
  color: var(--green);
  border-color: rgba(51, 196, 141, 0.4);
}

.variant-card__btn--keep.variant-card__btn--active {
  background: rgba(51, 196, 141, 0.16);
  border-color: var(--green);
  color: var(--green);
}

.variant-card__btn--kill {
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.35);
}

.variant-card__btn--kill.variant-card__btn--active {
  background: rgba(229, 72, 77, 0.14);
  border-color: var(--red);
  color: var(--red);
}

/* "Спросить агента" (задача 16, §9 п.3) — своя строка под ⭐/✓/✕, чтобы не
   ужимать тач-цели трёх вердиктов до нечитаемой ширины на 320px. */
.variant-card__btn--ask {
  flex: 1 1 100%;
  color: var(--blue);
  border-color: rgba(76, 141, 255, 0.35);
}

.variant-card__notice {
  color: var(--amber);
  font-size: 11.5px;
}

.variant-card__error {
  color: var(--red);
  font-size: 11.5px;
}

.variant-card__comments {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-card__thread {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.variant-card__msg {
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.4;
}

.variant-card__msg--owner {
  background: rgba(76, 141, 255, 0.12);
  border: 1px solid rgba(76, 141, 255, 0.3);
}

.variant-card__msg--agent {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mut);
}

.variant-card__msg-time {
  display: block;
  color: var(--dim);
  font-size: 9.5px;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.variant-card__comment-form {
  display: flex;
  gap: 6px;
}

.variant-card__comment-input {
  flex: 1;
  min-height: 38px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 10px;
  color: var(--txt);
  font-size: 12px;
}

.variant-card__comment-send {
  min-width: 38px;
  min-height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--mut);
  cursor: pointer;
}

.variant-card__comment-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Э6 · Чат агента проекта (задача 16) ───────────────────────────────────
   Один компонент (`Chat.js`) рендерит и полноэкранный маршрут `#/p/{id}/chat`,
   и постоянную панель десктопа (`.chat-screen--compact`, встроена в
   `.project-screen__chat`, высота которой ограничена в @1024px-блоке выше). */

.chat-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.chat-screen--compact {
  gap: 0;
}

.chat-screen__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.chat-screen--compact .chat-screen__head {
  padding: 12px 14px;
}

.chat-screen__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
}

.chat-screen__dot--live {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(51, 196, 141, 0.18);
}

.chat-screen__head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-screen__head-text small {
  color: var(--dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-screen__cost {
  margin-left: auto;
  color: var(--mut);
}

.chat-screen__stop {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.4);
}

.chat-screen__handover {
  margin: 0 14px;
  padding: 10px 12px;
  background: rgba(51, 196, 141, 0.1);
  border: 1px solid rgba(51, 196, 141, 0.3);
  border-radius: 10px;
  font-size: 12.5px;
}

.chat-screen__handover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.chat-screen__log {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  padding: 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-screen__more {
  align-self: center;
  min-height: 34px;
  padding: 5px 12px;
  font-size: 11.5px;
}

.chat-screen__activity,
.chat-screen__thinking,
.chat-screen__launch {
  font-size: 12px;
  color: var(--mut);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
}

.chat-screen__msg {
  max-width: 92%;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.chat-screen__msg--user {
  align-self: flex-end;
  background: rgba(76, 141, 255, 0.16);
  border: 1px solid rgba(76, 141, 255, 0.3);
  white-space: pre-wrap;
}

.chat-screen__msg--assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
}

.chat-screen__msg--assistant :is(p, ul, ol) {
  margin: 0 0 8px;
}

.chat-screen__msg--assistant :last-child {
  margin-bottom: 0;
}

.chat-screen__msg--error {
  align-self: stretch;
  background: rgba(229, 72, 77, 0.12);
  border: 1px solid rgba(229, 72, 77, 0.35);
  color: var(--red);
}

/* v4 п.5: реплика в очереди — тот же пузырь владельца, но полупрозрачный
   пунктир, пока не доставлена; пометка снизу */
.chat-screen__msg--queued {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-screen__queued-note {
  font-size: 11px;
  color: var(--mut);
}

.chat-screen__queue-note {
  margin: 0;
  padding: 6px 14px 0;
  font-size: 12px;
  color: var(--mut);
}

.chat-screen__composer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.chat-screen__input {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 13.5px;
}

.chat-screen__send {
  min-width: 44px;
}

/* ── Задача 17: тач-цели ≥44×44px на мобильных (вёрстка-гейт, финальная
   приёмка Ф1) ─────────────────────────────────────────────────────────
   Гейт мерил getBoundingClientRect и нашёл несколько элементов с фактическим
   hit-box <44×44 на 320/390px: `‹` назад, 💬 чат, кнопки стадий Э2,
   фильтры галереи, ссылка "Открыть сайт", вердикт-кнопки варианта, кнопка
   отправки комментария. Увеличиваем хит-зону (padding/min-height/min-width),
   НЕ размер иконки/шрифта — компактный десктопный вид (>=768px) не трогаем,
   гейт его не требует ("на десктопе можно оставить компактнее"). */

.project-screen__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 767px) {
  .project-screen__chat-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Кнопки стадий Э2 (✓ Принять / Пропустить) и "ещё"/"стоп" в чате —
     все `.btn--sm`, десктоп оставляем компактным (min-height 34px). */
  .btn--sm {
    min-height: 44px;
  }

  .gallery-screen__filter {
    min-height: 44px;
  }

  .variant-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .variant-card__btn {
    min-height: 44px;
  }

  .variant-card__comment-send {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Ф2: экран «Решения» (Э8) ─────────────────────────────────────────── */

.decisions-screen__group {
  margin-bottom: 18px;
}

.decisions-screen__group-title {
  font-size: 12.5px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.decision-card {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.decision-card--now {
  border-color: rgba(229, 72, 77, 0.55);
}

.decision-card__head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.decision-card__title {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.decision-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.decision-card__meta .chip {
  text-decoration: none;
  color: var(--mut);
}

.decision-card__why {
  font-size: 12.5px;
  color: var(--mut);
  overflow-wrap: anywhere;
}

.decision-card__error {
  font-size: 12px;
  color: var(--red);
}

.decision-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision-card__actions .btn {
  text-decoration: none;
}

/* ── Ф2: экран «Связки» (Э5) ──────────────────────────────────────────── */

.bundles-screen__summary {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  padding: 0 2px;
}

.bundles-screen__tablewrap {
  display: none;
  padding: 4px;
  overflow-x: auto;
}

.bundles-screen__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.bundles-screen__table th,
.bundles-screen__table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: top;
}

.bundles-screen__table th {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bundles-screen__table tr:last-child td {
  border-bottom: 0;
}

.bundles-screen__link {
  color: var(--blue);
  text-decoration: none;
}

.bundles-screen__cid {
  text-decoration: none;
  color: var(--txt);
  margin: 0 4px 4px 0;
}

.bundles-screen__cards {
  display: grid;
  gap: 10px;
}

.bundle-card {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.bundle-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.bundle-card__domain {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.bundle-card__rows {
  margin: 0;
  display: grid;
  gap: 6px;
}

.bundle-card__row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.bundle-card__row dt {
  flex: none;
  width: 92px;
  font-size: 11.5px;
  color: var(--dim);
}

.bundle-card__row dd {
  margin: 0;
  font-size: 12.5px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bundle-card__note {
  font-size: 12px;
  color: var(--mut);
}

@media (min-width: 768px) {
  .bundles-screen__tablewrap {
    display: block;
  }

  .bundles-screen__cards {
    display: none;
  }
}

/* ── Автопилот (v7 п.2) ─────────────────────────────────────────────────── */

.autopilot {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.autopilot__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.autopilot__title {
  font-size: 14px;
}

.autopilot__spacer {
  flex: 1;
}

.autopilot__now,
.autopilot__reason {
  margin: 0;
  font-size: 12.5px;
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: 8px;
}

.autopilot__reason--error {
  color: var(--red, #d33);
}

.autopilot__composer {
  display: flex;
  gap: 8px;
}

.autopilot__input {
  flex: 1;
  min-width: 0;
}

.autopilot__log-toggle {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font-size: 11.5px;
  color: var(--dim);
  cursor: pointer;
  min-height: 28px;
}

.autopilot__log {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.autopilot__log-line {
  font-size: 11.5px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

/* ── Контент-папки клиента proofs/ (v7 п.3) ─────────────────────────────── */

.proofs {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}

.proofs__folders {
  display: grid;
  gap: 8px;
}

.proofs__folder-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.proofs__folder-name {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.proofs__count {
  color: var(--dim);
}

.proofs__icon-btn {
  background: none;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  color: var(--mut);
}

.proofs__files {
  display: grid;
  gap: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--line, rgba(128, 128, 128, 0.25));
}

.proofs__file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.proofs__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}

.proofs__file-icon {
  width: 44px;
  text-align: center;
  flex: none;
}

.proofs__file-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.proofs__file-name small {
  color: var(--dim);
}

.proofs__new {
  display: flex;
  gap: 8px;
}

.proofs__new-input {
  flex: 1;
  min-width: 0;
}

/* ── Решения: вкладки Активные/Архив (v7 п.4б) ──────────────────────────── */

.decisions-screen__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.decisions-screen__tab {
  cursor: pointer;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  min-height: 44px;
}

.decisions-screen__tab--on {
  outline: 2px solid var(--acc, #4a7dff);
}

.project-card__stage--operational {
  font-weight: 600;
}

/* ── Ф3б: Канбан (Э5/Э6) — эталон вёрстки design-mockups/05-kanban-pm.html ── */

.kb-screen {
  max-width: 1340px;
}

.kb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kb-head__title {
  margin: 0;
  flex: none;
}

.kb-head__sync {
  cursor: pointer;
}

.kb-head__sync:disabled {
  opacity: 0.55;
  cursor: default;
}

.kb-head__spacer {
  flex: 1;
}

.kb-head__add {
  min-height: 36px;
}

.kb-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kb-filters__scope {
  display: flex;
  gap: 6px;
}

.kb-fpill {
  cursor: pointer;
  font-weight: 600;
}

.kb-fpill--on {
  background: rgba(76, 141, 255, 0.14);
  border-color: rgba(76, 141, 255, 0.5);
}

.kb-fdrop {
  font-size: 12px;
  color: var(--mut);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 10px;
  max-width: 180px;
}

.kb-search {
  flex: 1;
  min-width: 120px;
  max-width: 230px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--txt);
  font-size: 13px;
  padding: 7px 12px;
}

.kb-search:focus {
  outline: none;
  border-color: var(--blue);
}

.kb-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 10px;
  overflow-x: auto;
}

.kb-tab {
  flex: none;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.kb-tab--on {
  background: rgba(76, 141, 255, 0.16);
  border-color: rgba(76, 141, 255, 0.5);
}

.kb-tab--over {
  border-color: var(--amber);
  background: rgba(240, 161, 50, 0.16);
}

/* мобила <768px: колонки — свайп со scroll-snap; десктоп: грид 4 колонки */
.kb-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.kb-col {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 10px;
  min-height: 200px;
}

.kb-col--over {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset;
}

.kb-colhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 12px;
  color: var(--mut);
  font-size: 12px;
  font-weight: 600;
}

.kb-colhead b {
  color: var(--txt);
}

.kb-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-col__empty {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  margin: 14px 0;
}

.kb-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* вертикальный скролл жив (pan-y), карточку поднимает long-press */
.kb-card--grab {
  touch-action: pan-y;
}

.kb-card:hover {
  border-color: #3b4c63;
}

.kb-card--decision {
  border-left: 3px solid var(--amber);
}

.kb-card--lifted {
  opacity: 0.45;
  border-style: dashed;
}

.kb-toprow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.kb-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 9px;
}

.kb-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: none;
}

.kb-ava--mini {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.kb-aname {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-aico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 11px;
  flex: none;
  color: var(--mut);
}

.kb-agentlabel {
  font-size: 10.5px;
  color: var(--mut);
  white-space: nowrap;
}

.kb-ptag {
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.01em;
  flex: none;
}

.kb-ptag--right {
  margin-left: auto;
}

.kb-wait {
  font-size: 9.5px;
  font-weight: 700;
  color: #12161c;
  background: var(--amber);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: auto;
  flex: none;
}

.kb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 10.5px;
}

.kb-meta .chip {
  padding: 2px 8px;
}

.kb-chip--flag,
.kb-chip--over {
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.1);
  font-weight: 600;
}

.kb-chip--sync {
  color: var(--dim);
  border-style: dashed;
}

/* «поднятая» карточка следует за пальцем/курсором мини-призраком */
.kb-ghost {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -120%) rotate(-1.4deg);
  max-width: 220px;
  background: var(--card);
  border: 1px solid #3b4c63;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .kb-tabs {
    display: none;
  }

  .kb-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    overflow: visible;
  }

  .kb-col {
    min-height: 320px;
  }
}

/* модалки канбана (создание задачи + деталь) */
.kb-sheet {
  max-height: 86vh;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .kb-sheet {
    max-width: 600px;
  }
}

.kb-sheet__title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.kb-sheet__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.kb-sheet__desc {
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

/* деталь задачи — мокап .taskmodal */
.kb-taskmodal__sheet {
  padding: 18px 20px 20px;
}

.kb-tm__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 9px;
}

.kb-tm__title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  flex: 1;
  line-height: 1.35;
}

.kb-tm__close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--mut);
  font-size: 12px;
  flex: none;
  cursor: pointer;
}

.kb-tm__tags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kb-tm__select {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 11px;
}

.kb-tm__conflict {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(240, 161, 50, 0.12);
  border: 1px solid rgba(240, 161, 50, 0.45);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 14px;
  color: var(--amber);
  font-size: 12.5px;
  font-weight: 600;
}

.kb-tm__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 16px;
}

.kb-tm__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kb-tm__label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.kb-tm__input {
  min-height: 38px;
  width: 100%;
}

.kb-tm__section {
  margin-bottom: 16px;
}

.kb-tm__h5 {
  font-size: 12px;
  color: var(--mut);
  font-weight: 600;
  margin: 0 0 9px;
}

.kb-tm__desc {
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.kb-tm__desc-edit {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
  margin-bottom: 8px;
}

.kb-tm__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 0;
}

.kb-tm__check--done .kb-tm__check-title {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: var(--lock);
}

.kb-tm__check-title {
  flex: 1;
  min-width: 0;
}

.kb-tm__mini-select {
  max-width: 110px;
  font-size: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mut);
  padding: 3px 6px;
}

.kb-tm__subform {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.kb-tm__subform .kb-tm__input {
  flex: 1;
  min-width: 0;
}

.kb-tm__attach-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.kb-tm__attach {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

.kb-tm__attach-img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--line);
  flex: none;
}

.kb-tm__attach-file {
  font-size: 18px;
  flex: none;
}

.kb-tm__attach-name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-tm__attach-name small {
  color: var(--dim);
}

.kb-tm__upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.kb-tm__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.kb-tm__more {
  margin-bottom: 8px;
}

.kb-tm__comment {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.kb-tm__comment--agent {
  border-color: rgba(76, 141, 255, 0.35);
}

.kb-tm__comment-who {
  font-size: 10px;
  color: var(--dim);
  margin-bottom: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kb-tm__comment-act {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}

.kb-tm__comment-text {
  font-size: 12.5px;
  color: var(--txt);
  line-height: 1.45;
  white-space: pre-wrap;
}

.kb-tm__comment-deleted {
  font-size: 12px;
  color: var(--dim);
  font-style: italic;
}

.kb-tm__composer {
  position: relative;
  margin-top: 10px;
}

.kb-tm__composer-input {
  width: 100%;
  padding: 10px 12px;
  resize: vertical;
  margin-bottom: 8px;
}

.kb-tm__mentions {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.kb-tm__mention {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--txt);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.kb-tm__mention:hover {
  background: var(--card);
}

.kb-tm__history {
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin: 0 0 12px;
}

.kb-tm__footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kb-tm__archive {
  margin-left: auto;
}

/* ── Ф3б: экран «Команда» (Э7) ── */

.team-screen .team-card {
  margin-bottom: 12px;
}

.team-card--off {
  opacity: 0.6;
}

.team-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.team-card__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.team-card__login {
  color: var(--mut);
  font-size: 11.5px;
}

.team-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.team-card__projects {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.team-card__none {
  color: var(--dim);
  font-size: 12px;
  margin: 0 0 10px;
}

.team-card__devices {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.team-card__device {
  color: var(--dim);
  font-size: 11px;
}

.team-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.team-card__danger {
  color: var(--red);
  border-color: rgba(229, 72, 77, 0.4);
}

.team-card__assign {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-card__assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-height: 32px;
}

.team-form {
  margin-top: 16px;
}

.team-form__title {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 12px;
}

.team-token__title {
  font-size: 16px;
  font-weight: 650;
  margin: 0 0 10px;
}

.team-token__warn {
  color: var(--amber);
  font-size: 12.5px;
  margin: 0 0 12px;
}

.team-token__value {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  word-break: break-all;
  margin-bottom: 14px;
}

.team-token__actions {
  display: flex;
  gap: 8px;
}

/* ── Ф4: экран «Доступы» ── */

.acc-summary {
  margin-bottom: 16px;
}

.acc-summary__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

.acc-summary__label {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: none;
  width: 96px;
}

.acc-summary__file {
  font-size: 11.5px;
  color: var(--mut);
  word-break: break-all;
}

.acc-summary__note {
  color: var(--dim);
  font-size: 11.5px;
  margin: 8px 0 0;
}

.acc-missing {
  margin-bottom: 18px;
}

.acc-missing__title {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 10px;
}

.acc-missing__card {
  margin-bottom: 10px;
}

.acc-missing__proj {
  display: block;
  margin-bottom: 8px;
}

.acc-missing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.acc-missing__what {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.acc-missing__hint {
  color: var(--mut);
  font-size: 12px;
}

.acc-missing__note {
  color: var(--dim);
  font-size: 10.5px;
  margin: 8px 0 0;
}

.acc-group {
  margin-bottom: 14px;
}

.acc-group__title {
  font-size: 13px;
  font-weight: 650;
  color: var(--mut);
  margin: 0 0 8px;
}

.acc-group__card {
  padding: 6px 16px;
}

.acc-key {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.acc-key:last-child {
  border-bottom: none;
}

.acc-key__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acc-key__field {
  font-size: 13px;
}

.acc-key__mask {
  margin-left: auto;
  color: var(--dim);
  font-size: 11.5px;
  font-family: ui-monospace, monospace;
}

.acc-key__comment {
  color: var(--dim);
  font-size: 11px;
}

/* Ф3б: в нижней навигации 5 пунктов + «Выйти» — на самых узких (320px)
   ужимаем шрифт и паддинги, чтобы «Конвейер» не резался */
@media (max-width: 379px) {
  .nav__item {
    padding: 6px 1px;
    font-size: 9.5px;
  }

  .nav__icon {
    font-size: 15px;
  }
}