/* Skipi web — refined design system.
   Light by default (owner canon 20.07); user preference respected via
   prefers-color-scheme. All chat/settings class names preserved. */
:root {
  /* Палитра лендинга skipi.app — journey.css (skipi-landing 2dfba8d), дословно (№91) */
  --paper:    #ffffff;
  --ink:      #0a1f33;
  --body:     #46586b;
  --muted:    #8595a6;
  --hairline: #dbe4ec;
  --accent:   #007a86;
  --accent-dk:#005e68;
  /* Роли приложения поверх палитры (структура прежняя, только цвета) */
  --bg: #f4f9fa;                /* тинт секции #contours лендинга */
  --fg: var(--ink);
  --accent-strong: var(--accent-dk);
  --card: var(--paper);
  --border: var(--hairline);
  --border-strong: color-mix(in srgb, var(--ink) 20%, var(--paper));
  --warn: #9a6700;
  --ring: color-mix(in srgb, var(--accent) 32%, transparent);
  /* primary-действие = ink-пилюля, hover = accent-dk (как .cta лендинга) */
  --btn-bg: var(--ink);
  --btn-bg-hover: var(--accent-dk);
  --shadow-sm: 0 1px 2px rgba(10, 31, 51, .04), 0 1px 3px rgba(10, 31, 51, .03);
  --shadow-md: 0 6px 18px rgba(10, 31, 51, .08);
  --shadow-lg: 0 16px 40px rgba(10, 31, 51, .13);
  --r: 12px;
  --r-lg: 16px;
  --topbar-bg: rgba(255, 255, 255, .82);
  /* Полировка №106: спокойные нейтрально-серые поверхности чата (эстетика
     Grok/Claude в светлой теме) поверх фирменной teal-палитры лендинга */
  /* №127 раунд 2 (D1): зоны сайдбар↔холст разведены по фону. Холст чата —
     near-white (белее), сайдбар — заметно теплее/сероватее, чтобы рабочая зона
     читалась сразу (ориентир Claude). Композер остаётся белым (--chat-surface). */
  --chat-bg: #ffffff;           /* холст чата — чистый near-white */
  --chat-surface: #ffffff;      /* композер / карточки на холсте */
  --chat-sidebar-bg: #f4f3ef;   /* сайдбар — тёплый серо-бежевый (контраст с холстом) */
  --chat-hairline: #e6e4de;     /* деликатный нейтральный бордер (чуть плотнее под новым фоном) */
  --chat-hover: #eceae3;        /* мягкая подсветка hover (читается на фоне сайдбара) */
  --bubble: #f4f3f0;            /* пузырь assistant — нейтрально-серый, плоский */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f15;
    --fg: #e7edf3;
    --body: #93a1b1;
    --muted: #93a1b1;
    --accent: #3fb4c1;          /* teal-акцент для тёмной темы (вместо старого синего) */
    --accent-strong: #6fcdd8;
    --card: #141b24;
    --border: #232d38;
    --border-strong: #33404d;
    --warn: #d4a72c;
    --ring: color-mix(in srgb, var(--accent) 40%, transparent);
    /* на тёмном фоне ink-пилюля не читается — primary = teal-акцент */
    --btn-bg: var(--accent);
    --btn-bg-hover: var(--accent-strong);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
    --topbar-bg: rgba(20, 27, 36, .72);
    /* dark: сохранить существующую пару, сайдбар чуть светлее холста (D1-паритет) */
    --chat-bg: #0d1219;
    --chat-surface: #141b24;
    --chat-sidebar-bg: #161d27;   /* сайдбар — чуть светлее холста для читаемости зоны */
    --chat-hairline: #232d38;
    --chat-hover: #1e2732;
    --bubble: #1e2732;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
.narrow { max-width: 560px; }

/* ── header ── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; border-bottom: 1px solid var(--border);
  background: var(--topbar-bg); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.topbar .brand {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--fg); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.topbar .brand::before {
  /* Фирменный знак Skipi (owner 2026-08-05) вместо CSS-кружка */
  content: ""; width: 1.15rem; height: 1.15rem; border-radius: 30%;
  flex: none; vertical-align: middle;
  background-image: url(/static/skipi-icon-192.png);
  background-size: cover; background-position: center;
}
/* Мобильный редизайн app-like (owner 2026-08-12): ☰ истории в слим-топбаре.
   По умолчанию (десктоп >720px и вне чата) скрыт; показывается только на
   странице чата в @media ≤720px (правило ниже). */
.topbar-history {
  display: none; flex: none; background: transparent; color: var(--fg);
  border: 0; padding: .1rem .3rem; font-size: 1.35rem; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.topbar nav { display: flex; gap: .15rem; flex-wrap: wrap; }
.topbar nav a {
  color: var(--body); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: .38rem .7rem; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.topbar nav a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
/* Ролевая навигация Broker/Crewing (owner 14.08): модуль дома, недоступный в
   вебе, — видимый, но некликабельный пункт с бейджем «Soon» */
.topbar nav .nav-soon {
  color: var(--body); font-size: .93rem; font-weight: 500;
  padding: .38rem .7rem; border-radius: 8px;
  opacity: .55; cursor: default; white-space: nowrap;
}
.soon-badge {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; margin-left: .3rem; padding: .08rem .35rem;
  border-radius: 999px; border: 1px solid currentColor; vertical-align: 1px;
}
.topbar a { color: var(--fg); text-decoration: none; }
.topbar .auth { margin-left: auto; display: flex; gap: .9rem; align-items: center; font-size: .93rem; }
.topbar .auth a, .topbar .auth .user { color: var(--body); font-weight: 500; }
.topbar .auth a:hover { color: var(--accent); }

/* ── mobile bottom tab-bar (owner 2026-08-12) ──
   Рендерится всегда, но на десктопе (>720px) скрыт; появляется только на
   мобильном (@media max-width:720px ниже), где заменяет верхнюю модульную
   навигацию. Высота ~56px + safe-area (iPhone home-indicator). */
.mobile-tabbar { display: none; }

footer {
  padding: 1.6rem 1rem; text-align: center;
  border-top: 1px solid var(--border); color: var(--body); font-size: .9rem;
}
footer a { color: var(--body); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ── typography / hero ── */
h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); letter-spacing: -.028em; line-height: 1.12; }
.hero { text-align: center; margin: 3.6rem 0 2.6rem; }
.hero p { max-width: 36rem; margin: 1rem auto 0; color: var(--body); font-size: 1.06rem; }
.hero-cta {
  display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
  margin: 1.9rem 0 .7rem;
}
.hero-cta .btn { min-width: 11rem; padding: .8rem 1.5rem; font-size: 1rem; }
.hero-trust {
  color: var(--body); font-size: .86rem; margin: .5rem 0 0;
  display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap;
}
.hero-trust span { display: inline-flex; align-items: center; gap: .3rem; }

/* ── cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.3rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--fg); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.card span {
  color: var(--accent); font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.card span::after { content: "→"; transition: transform .15s ease; }
.card:hover span::after { transform: translateX(3px); }
.card-block {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem 1.2rem; margin: 1rem 0;
  box-shadow: var(--shadow-sm);
}

/* ── apps section ── */
.apps { margin: 2.6rem 0; }
.apps-title { font-size: 1.15rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.apps-note { color: var(--body); margin: 0 0 1.2rem; font-size: .95rem; }

/* ── "What Skipi solves" (problem-first landing, owner-GO 2026-08-05) ── */
.hero .hero-value { color: var(--fg); font-weight: 500; }
.solves { margin: 2.6rem 0; }
.solves .apps-title { margin-bottom: 1.2rem; }
.solve-card { cursor: default; }
.solve-card p { margin: 0; color: var(--body); font-size: .93rem; line-height: 1.45; flex: 1; }
.solve-links { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .5rem; }
.solve-links a {
  color: var(--accent); font-weight: 600; font-size: .92rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
}
.solve-links a::after { content: "→"; transition: transform .15s ease; }
.solve-links a:hover::after { transform: translateX(3px); }

/* ── chat log (shared) ── */
.chat-log {
  min-height: 200px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem; margin-bottom: .8rem;
}
.msg { margin: .5rem 0; white-space: pre-wrap; }
.msg-row { margin: 1.15rem 0; display: flex; flex-direction: column; max-width: 88%; }
.msg-row.user { margin-left: auto; align-items: flex-end; }
.msg-row.assistant { margin-right: auto; align-items: flex-start; }
/* №127-F: per-message роль-лейблы убраны (сторона баббла и так читаема).
   Класс скрыт на случай старой разметки в кэше/истории. */
.msg-role { display: none; }
.msg-row .bubble {
  padding: .55rem .95rem; border-radius: 18px;
  text-align: left; line-height: 1.6; font-size: 1.02rem;
}
/* №127-G: user-баббл — предформатированный текст (переносы как есть);
   assistant-баббл рендерит markdown (собственная типографика ниже). */
.msg-row.user .bubble { white-space: pre-wrap; }
/* Полировка №106: user — мягкая нейтральная «пилюля» (не насыщенный teal);
   assistant — плоская строка без фона/бордера (эстетика Grok/Claude) */
.msg-row.user .bubble {
  background: var(--chat-hover); color: var(--fg);
  border-bottom-right-radius: 6px;
}
.msg-row.assistant .bubble {
  background: transparent; padding-left: 0; padding-right: 0;
}
.msg.user { color: var(--accent); }
.msg.status { color: var(--muted); font-style: italic; }

/* №127-G: типографика markdown внутри assistant-баббла (светлая тема) */
.msg-row.assistant .bubble p { margin: 0 0 .6rem; }
.msg-row.assistant .bubble p:last-child { margin-bottom: 0; }
.msg-row.assistant .bubble ul,
.msg-row.assistant .bubble ol { margin: .3rem 0 .6rem; padding-left: 1.3rem; }
.msg-row.assistant .bubble li { margin: .15rem 0; }
.msg-row.assistant .bubble a { color: var(--accent); text-decoration: underline; }
.msg-row.assistant .bubble code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em;
  background: var(--chat-hover); border-radius: 6px; padding: .08em .35em;
}
.msg-row.assistant .bubble pre {
  background: var(--chat-hover); border: 1px solid var(--chat-hairline);
  border-radius: 10px; padding: .7rem .85rem; overflow-x: auto; margin: .4rem 0 .7rem;
}
.msg-row.assistant .bubble pre code {
  background: none; padding: 0; font-size: .9em; white-space: pre;
}

/* №127-H: typing-индикатор — три пульсирующие точки + подпись ожидания */
.msg.status.typing { font-style: normal; display: inline-flex; align-items: center; gap: .5rem; }
.typing-dots { display: inline-flex; gap: .22rem; align-items: center; }
.typing-dots span {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--muted); display: inline-block;
  animation: typing-bounce 1.2s infinite ease-in-out both;
}
.typing-dots span:nth-child(2) { animation-delay: .16s; }
.typing-dots span:nth-child(3) { animation-delay: .32s; }
.typing-label { color: var(--muted); font-size: .9rem; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}
/* №164: круговой спиннер + счётчик секунд рядом с точками/подписью ожидания.
   Цвета — из тем-переменных (--accent/--border/--muted), поэтому светлая
   (default :root) и тёмная (prefers-color-scheme) работают без хардкода. */
.typing-spinner {
  width: .95rem; height: .95rem; flex: 0 0 auto;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.typing-elapsed { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: .7; }
  .typing-spinner { animation: none; border-top-color: var(--accent); opacity: .8; }
}

/* ── forms ── */
.chat-form textarea, textarea, input[type=email], input[type=password],
input[type=text], input[type=date], input[type=number], select {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--card); color: var(--fg); font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea:focus, input:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
form input + input { margin-top: .6rem; }
form input + button, form select + button, form textarea + button { margin-top: .8rem; }
.chat-actions { display: flex; gap: .6rem; margin-top: .5rem; }
button {
  padding: .6rem 1.1rem; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--btn-bg); color: #fff; font: inherit; font-weight: 600;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
button:hover { background: var(--btn-bg-hover); }
button:active { transform: translateY(1px); }
button.secondary, .linklike {
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-strong); font-weight: 600;
}
button.secondary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.linklike { border: 0; padding: 0; }
label { display: block; margin: .8rem 0 .3rem; }
.hint, .warn { color: var(--body); font-size: .92rem; }
.warn { color: var(--warn); }
.price { font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.refcode {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem;
  font-weight: 700; background: var(--card); border: 1px dashed var(--accent);
  padding: .5rem .9rem; border-radius: 10px; display: inline-block;
}
.copy-code { font-size: .9rem; padding: .4rem .8rem; }
/* SaaS conversion plumbing (BACKLOG №125): CTA-кнопка в статус-сообщении чата
   (дневной лимит → оффер). Светлая тема по канону, палитра акцента. */
.cta-btn {
  display: inline-block; margin-top: .5rem; text-decoration: none;
  background: var(--accent); color: #fff; font-weight: 600; font-style: normal;
  padding: .5rem 1rem; border-radius: 10px;
}
.cta-btn:hover { background: var(--accent-strong, var(--accent)); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
table.tokens { width: 100%; border-collapse: collapse; }
table.tokens td { padding: .45rem .4rem; border-bottom: 1px solid var(--border); }
.st-active { color: #1a7f37; }
.st-expiring { color: var(--warn); }
.st-expired { color: #b02a37; }
.hidden { display: none; }
.prose p { margin: .8rem 0; }

/* ── classic auth UX (OWNER 2026-08-05 (6)) ── */
.auth-card {
  max-width: 400px; margin: 2.8rem auto; padding: 1.8rem 1.7rem 1.5rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.auth-card h1 { margin: 0 0 1.1rem; text-align: center; font-size: 1.5rem; }
.btn, .btn-block {
  display: inline-block; padding: .7rem 1.3rem; border: 0; border-radius: 10px;
  cursor: pointer; background: var(--btn-bg); color: #fff; font: inherit;
  font-weight: 600; text-decoration: none; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }
.btn-block { display: block; width: 100%; }
.btn-primary { background: var(--btn-bg); color: #fff; }
.btn-secondary {
  background: var(--card); color: var(--accent);
  border: 1px solid var(--border-strong); box-shadow: none;
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: var(--accent);
}
.auth-links { text-align: center; margin: 1rem 0 0; line-height: 1.9; }
.auth-links a { color: var(--accent); }
.auth-divider {
  display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0;
  color: var(--body);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; border-top: 1px solid var(--border);
}
.tg-login { text-align: center; }
.hero p { max-width: 36rem; margin: 1rem auto 0; color: var(--body); }

/* ── Grok-style chat (OWNER 2026-08-05 (8)): sidebar + composer ── */
/* Полировка №106: спокойный нейтральный холст на всю страницу-чат */
body.page-chat { background: var(--chat-bg); }
body.page-chat main { max-width: none; padding: 0; background: var(--chat-bg); }
body.page-chat footer { display: none; }
/* D2: чёткий hairline под топбаром на странице чата (отделяет шапку от рабочей
   зоны; вертикальный border-right сайдбара уже есть — виден на новом фоне) */
body.page-chat .topbar { border-bottom: 1px solid var(--chat-hairline); }
/* A4: бренд «Skipi» дублируется (топбар + .sidebar-brand). На странице чата
   текст бренда в топбаре убран из DOM (base.html block topbar_brand пуст);
   .brand остаётся как home-ссылка с фирменным знаком-иконкой (::before). gap:0
   убирает пустой промежуток после исчезнувшего текста. Навигация не трогается. */
body.page-chat .topbar .brand { gap: 0; }
.chat-shell {
  display: flex; align-items: stretch;
  height: calc(100dvh - 3.4rem); min-height: 420px; overflow: hidden;
}
.chat-sidebar {
  width: 264px; flex: 0 0 264px; display: flex; flex-direction: column;
  /* D1: сайдбар залит теплее холста чата → зоны читаются раздельно */
  background: var(--chat-sidebar-bg); border-right: 1px solid var(--chat-hairline);
  min-height: 0;
}
.sidebar-top { padding: 1rem 1rem .6rem; }
.sidebar-brand {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
  color: var(--fg); text-decoration: none; margin-bottom: .8rem;
}
.sidebar-brand::before {
  /* Фирменный знак Skipi (owner 2026-08-05) вместо CSS-кружка */
  content: ""; width: 1.2rem; height: 1.2rem; border-radius: 30%;
  flex: none; vertical-align: middle;
  background-image: url(/static/skipi-icon-192.png);
  background-size: cover; background-position: center;
}
.new-chat {
  display: block; width: 100%; padding: .6rem .9rem; text-align: left;
  border-radius: 12px; font-weight: 600;
  /* A3 (№127 раунд 2): «Новый чат» — явно кликабельная кнопка: чёткая
     accent-рамка на белом фоне сайдбара + accent-текст; hover — лёгкая
     accent-заливка. Не кричащая, но сразу читается как основное действие. */
  background: var(--chat-surface); color: var(--accent);
  border: 1px solid var(--accent); box-shadow: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.new-chat:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--chat-surface));
  color: var(--accent-strong);
}
.sidebar-history { flex: 1; overflow-y: auto; padding: .4rem .6rem; min-height: 0; }
.sidebar-heading {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: .5rem .5rem .25rem;
}
/* D3: заголовок date-группы = мелкий muted caps (как .sidebar-heading), воздух */
.session-group {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: .55rem .5rem .2rem;
}
/* №127-B/D3: hairline-разделители секций истории + воздух между группами
   (первая — без верхней линии; пустые группы заголовок не рендерят — app.js) */
.chat-sessions .session-group:not(:first-child) {
  border-top: 1px solid var(--chat-hairline); margin-top: .5rem; padding-top: .65rem;
}
.session-item {
  display: flex; align-items: center; gap: .5rem; position: relative;
  width: 100%; text-align: left; background: transparent;
  color: var(--body); border: 0; border-radius: 10px; padding: .48rem .6rem;
  margin: .1rem 0; font-size: .92rem; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
/* №127-B: ведущая иконка чата + усечение только заголовка (не иконки) */
.session-item .session-icon { flex: none; color: var(--muted); opacity: .8; }
.session-item .session-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A2: hover — мягкая подсветка (не путать с active); плавный transition выше */
.session-item:hover { background: var(--chat-hover); color: var(--fg); }
.session-item:hover .session-icon { color: var(--accent); }
/* A1: текущая открытая сессия — заполненная accent-tint пилюля + левая
   accent-полоса; active ровно один (app.js проставляет .active/aria-current) */
.session-item.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--chat-sidebar-bg));
  color: var(--fg); font-weight: 600;
}
.session-item.active::before {
  content: ""; position: absolute; left: 0; top: .28rem; bottom: .28rem;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.session-item.active .session-icon { color: var(--accent); }
/* A5 (P2): маленькая accent-точка-индикатор у активной сессии */
.session-item.active .session-title::after {
  content: ""; display: inline-block; width: .4rem; height: .4rem;
  margin-left: .4rem; border-radius: 50%; background: var(--accent);
  vertical-align: middle;
}
/* A5: иконки истории чуть контрастнее (было opacity .8 / muted) */
.session-item .session-icon { opacity: 1; color: var(--body); }
.sessions-empty { color: var(--muted); font-size: .9rem; padding: .4rem .5rem; }
.sidebar-user { border-top: 1px solid var(--chat-hairline); padding: .8rem 1rem; font-size: .92rem; }
/* №127-D: строка юзера = аватар-инициал + имя/email + бейдж плана */
.sidebar-user-row { display: flex; align-items: center; gap: .55rem; }
.sidebar-user-avatar {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--chat-surface));
  color: var(--accent); font-weight: 700; font-size: .95rem; line-height: 1;
  text-transform: uppercase;
}
.sidebar-user-meta { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-email { color: var(--body); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* №127-D: пилюля плана Free/PRO */
.plan-badge {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  padding: .12rem .5rem; border-radius: 999px; line-height: 1.4;
  text-transform: uppercase;
}
.plan-badge.plan-free { background: var(--chat-hover); color: var(--muted); }
.plan-badge.plan-pro {
  background: color-mix(in srgb, var(--accent) 16%, var(--chat-surface));
  color: var(--accent);
}
.sidebar-user-link { display: inline-block; margin-top: .5rem; color: var(--accent); }
.chat-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  max-width: 860px; margin: 0 auto; padding: 0 1rem; width: 100%;
}
.chat-main-top { flex: 0 0 auto; padding-top: .5rem; }
.sidebar-toggle {
  display: none; background: transparent; color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: .3rem .6rem;
}
.chat-empty { flex: 0 1 auto; margin: auto 0; text-align: center; padding: 2.5rem 1rem; }
/* Полировка №106: спокойный welcome — знак вместо крупного teal-слова,
   мягкая шкала заголовка (эстетика пустого-стейта Grok/Claude) */
.chat-empty-logo {
  width: 3rem; height: 3rem; margin: 0 auto .9rem; border-radius: 26%;
  background-image: url(/static/skipi-icon-192.png);
  background-size: cover; background-position: center;
  font-size: 0; color: transparent; box-shadow: var(--shadow-sm);
}
.chat-empty h1 { margin: .3rem 0 .5rem; font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.02em; }
.chat-empty > .hint { color: var(--muted); font-size: 1.02rem; }
/* Мобильный редизайн app-like (owner 2026-08-12): одностроковое приветствие —
   аддитивная разметка, на десктопе (>720px) скрыта; включается в @media ≤720px
   вместо desktop-подзаголовка + welcome-абзаца. */
.chat-empty-greeting { display: none; }
/* №104(в): онбординг новичка — welcome-блок + suggested-первый вопрос */
.chat-welcome { margin-top: 1.4rem; }
.chat-welcome p { color: var(--body); font-size: .98rem; max-width: 34rem; margin: 0 auto .8rem; line-height: 1.55; }
.suggest-q {
  background: var(--chat-surface); color: var(--body); font-size: .95rem;
  border: 1px solid var(--chat-hairline); border-radius: 999px;
  padding: .55rem 1.15rem; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.suggest-q:hover { background: var(--chat-hover); border-color: var(--border-strong); color: var(--fg); }
/* №127-C: сетка стартовых чипов — по центру, перенос, ровные интервалы */
.chat-suggests {
  display: flex; flex-wrap: wrap; gap: .55rem;
  justify-content: center; max-width: 40rem; margin: 0 auto;
}
body.page-chat .chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 0;
  background: transparent; padding: 1rem .2rem .4rem; margin-bottom: 0;
}
/* Полировка №106: композер — мягкая просторная «пилюля», нейтральный бордер,
   деликатная тень; в фокусе — тихое teal-кольцо (эстетика Grok/Claude) */
.composer {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: .5rem;
  background: var(--chat-surface); border: 1px solid var(--chat-hairline);
  border-radius: 26px; padding: .5rem .5rem .5rem 1.25rem;
  margin: .5rem 0 1.4rem; box-shadow: var(--shadow-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--chat-hairline));
  box-shadow: var(--shadow-md), 0 0 0 3px var(--ring);
}
.composer textarea {
  flex: 1; border: 0; background: transparent; resize: none;
  padding: .5rem 0; max-height: 200px; outline: none;
  font-size: 1.02rem; line-height: 1.5;
}
.composer textarea:focus { box-shadow: none; }
.composer-send {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  padding: 0; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) {
  .sidebar-toggle { display: inline-block; }
  .chat-sidebar {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
  }
  .chat-sidebar.open { transform: translateX(0); }
  .chat-shell { height: calc(100dvh - 3.4rem); }
}

/* ── Settings: sections with left nav ── */
.settings-layout { display: flex; gap: 1.4rem; align-items: flex-start; }
.settings-nav {
  flex: 0 0 176px; position: sticky; top: 4.5rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.settings-nav a {
  color: var(--body); text-decoration: none; padding: .45rem .7rem;
  border-radius: 8px; font-size: .95rem; font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.settings-nav a:hover { background: var(--card); color: var(--accent); }
/* №94: активный раздел-таб — та же механика подсветки, что hover/сессии */
.settings-nav a.active { background: var(--card); color: var(--accent); font-weight: 600; }
.settings-sections { flex: 1; min-width: 0; }
.product-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1.15rem; margin: .8rem 0; box-shadow: var(--shadow-sm);
}
.product-head { display: flex; align-items: baseline; gap: .7rem; }
.product-head h3, .product-head h4 { margin: 0; }
.prod-st {
  font-size: .78rem; color: var(--body); border: 1px solid var(--border);
  border-radius: 999px; padding: .08rem .55rem;
}
.prod-st.st-active { color: #1a7f37; border-color: color-mix(in srgb, #1a7f37 40%, transparent); }
.pay-pending { color: var(--warn); }
.pay-confirmed { color: #1a7f37; }
.pay-rejected, .pay-expired { color: #b02a37; }
/* №96: группы формы структурного профиля моряка — существующая палитра */
.sp-group {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: .6rem 1rem .8rem; margin: 0 0 1rem;
}
.sp-group legend {
  color: var(--accent-strong); font-size: .92rem; font-weight: 600;
  padding: 0 .35rem;
}
@media (max-width: 720px) {
  .settings-layout { flex-direction: column; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ── module page ── */
.module-page { max-width: 42rem; margin: 3rem auto; }
.module-page .crumbs { margin: 0 0 1.2rem; }
.module-page .crumbs a { color: var(--body); text-decoration: none; font-size: .92rem; }
.module-page .crumbs a:hover { color: var(--accent); }
.module-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.module-head h1 { margin: 0; }
.module-ver {
  font-size: .78rem; color: var(--body); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: .12rem .65rem;
}
.module-desc { margin: 1.2rem 0 .5rem; font-size: 1.05rem; }
.module-note { color: var(--body); font-size: .95rem; margin: 0 0 1.6rem; }

/* Plugins-таб: витрина живых модулей карточками (S7 веб-паритет 31.08) */
.module-plugins { max-width: 52rem; }
.plugins-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.plugin-card {
  display: flex; align-items: flex-start; gap: .8rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg, 12px);
  padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  background: var(--card); transition: border-color .15s, box-shadow .15s;
}
.plugin-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg, 0 6px 20px rgba(10, 31, 51, .12));
}
.plugin-card-icon { font-size: 1.6rem; line-height: 1; flex: none; }
.plugin-card-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.plugin-card-title { font-weight: 600; font-size: 1.02rem; }
.plugin-card-desc { color: var(--body); font-size: .9rem; line-height: 1.4; }
.plugin-card-badge {
  align-self: flex-start; margin-top: .1rem;
  font-size: .72rem; color: var(--body);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .08rem .55rem;
}
.plugin-card-arrow { margin-left: auto; color: var(--muted); font-size: 1.1rem; flex: none; }
.plugin-card:hover .plugin-card-arrow { color: var(--accent); }

/* ── №107 срез 2: обратная связь (форма отзыва Assistant, светлая тема) ── */
.feedback-link {
  /* деликатная ссылка-кнопка внизу сайдбара (сброс button-стилей) */
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--muted);
}
.feedback-link:hover { color: var(--accent); }
.feedback-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 31, 51, .28); padding: 1rem;
}
/* .hidden (display:none) has equal specificity but is defined earlier, so
   .feedback-modal's display:flex would win — this combined rule (higher
   specificity) lets `.hidden` actually close/hide the modal. */
.feedback-modal.hidden { display: none; }
.feedback-card {
  background: var(--card); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 24rem; padding: 1.4rem 1.5rem;
}
.feedback-card h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.feedback-rating-label,
.feedback-comment-label {
  display: block; font-size: .9rem; color: var(--body); margin: .2rem 0 .4rem;
}
.feedback-stars { display: flex; gap: .25rem; margin-bottom: 1rem; }
.feedback-star {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--muted);
}
.feedback-star.on { color: var(--accent); }
.feedback-star:hover { color: var(--accent-strong); }
#feedback-comment {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: .6rem .7rem; font: inherit; color: var(--fg);
  background: var(--paper);
}
#feedback-comment:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring); }
.feedback-msg { margin: .7rem 0 0; font-size: .9rem; }
.feedback-msg.ok  { color: var(--accent-dk); }
.feedback-msg.err { color: var(--warn); }
.feedback-actions {
  display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem;
}
.feedback-cancel {
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: .5rem 1rem; cursor: pointer; font: inherit; color: var(--body);
}
.feedback-cancel:hover { border-color: var(--border-strong); }
.feedback-submit {
  background: var(--btn-bg); color: #fff; border: 0; border-radius: var(--r);
  padding: .5rem 1.1rem; cursor: pointer; font: inherit;
}
.feedback-submit:hover { background: var(--btn-bg-hover); }
.feedback-submit:disabled { opacity: .6; cursor: default; }

/* ── SaaS conversion plumbing (BACKLOG №125): мобильный оффер + навбар ──
   Крупные тап-цели для страницы оплаты/PRO и навбар, не переполняющий строку
   на узком экране (эмуляция 375px). Светлая тема по канону, палитра без правок. */
@media (max-width: 720px) {
  /* оффер: крупнее и во всю ширину — удобно тапнуть с телефона */
  #buy-pro { width: 100%; padding: .8rem 1rem; font-size: 1.05rem; }
  .price { font-size: 1.5rem; }
  .refcode {
    display: block; width: 100%; box-sizing: border-box;
    text-align: center; word-break: break-all; font-size: 1.15rem;
  }
  .copy-code { width: 100%; margin-top: .5rem; padding: .7rem 1rem; font-size: 1rem; }
  .cta-btn { display: block; text-align: center; padding: .7rem 1rem; }
  /* Верхняя модульная навигация уезжает в нижний таб-бар (owner 2026-08-12):
     топбар мобильно = бренд слева + .auth (Настройки/Выйти) компактно справа. */
  .topbar { gap: .6rem; padding: .55rem .8rem; }
  .topbar nav { display: none; }
  .topbar .auth { margin-left: auto; gap: .6rem; font-size: .9rem; }

  /* ── нижний таб-бар модулей (мобильный) ── */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--chat-hairline);
    box-shadow: 0 -1px 8px rgba(10, 31, 51, .06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tabbar .tab {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; padding: .45rem .1rem .5rem; text-decoration: none;
    color: var(--body); font-size: .68rem; font-weight: 500; letter-spacing: -.01em;
  }
  .mobile-tabbar .tab svg { flex: none; }
  .mobile-tabbar .tab span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* активный таб: accent-цвет иконки+лейбла + тонкая верхняя accent-полоска */
  .mobile-tabbar .tab.active { color: var(--accent); font-weight: 600; }
  /* ролевой таб-бар Broker/Crewing (owner 14.08): модулей дома больше пяти —
     горизонтальный скролл, табы не сжимаются; Soon-табы некликабельны */
  .mobile-tabbar-roles {
    overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-tabbar-roles .tab {
    flex: 0 0 auto; min-width: 62px; padding: .5rem .55rem .55rem;
  }
  .mobile-tabbar .tab-soon { opacity: .5; cursor: default; }
  .mobile-tabbar .tab-soon .soon-badge {
    margin-left: 0; font-size: .52rem; padding: .04rem .3rem;
  }
  .mobile-tabbar .tab.active::before {
    content: ""; position: absolute; top: 0; left: 18%; right: 18%;
    height: 2px; border-radius: 0 0 2px 2px; background: var(--accent);
  }

  /* оставить контенту место под фиксированным таб-баром (высота таб-бара
     ~56px + safe-area); на странице чата отдельная механика ниже */
  main { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

  /* ── страница чата: композер над таб-баром, chat-log не прячет сообщения ──
     Оба у низа. chat-shell отдаёт высоту под таб-бар; композер прижат снизу с
     отступом на высоту таб-бара+safe-area; chat-log получает нижний padding =
     запас композера + таб-бар, чтобы последнее сообщение было видно. */
  body.page-chat main { padding-bottom: 0; }
  body.page-chat .chat-shell {
    height: calc(100dvh - 3.4rem - 56px - env(safe-area-inset-bottom));
  }
  /* owner: композер к нижнему рейлу (таб-бару). Высота .chat-shell уже резервирует
     таб-бар (−56px), поэтому 56px в margin был дублем → композер висел над рейлом.
     Проверено менеджером (live): без 56px зазор композер→таб-бар ≈19px, overlap нет. */
  body.page-chat .composer {
    margin-bottom: calc(env(safe-area-inset-bottom) + .4rem);
  }
  body.page-chat .chat-log {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + .4rem);
  }

  /* ══ Мобильный редизайн ассистента: app-like, композер-first (owner 2026-08-12)
     Только @media ≤720px; десктоп >720px не трогается. Цель — «приложение»
     уровня ChatGPT/Claude mobile: слим-топбар с ☰, компактный hero (1 строка
     greeting), чипы горизонтальной лентой, крупный композер виден без скролла. */

  /* ── 1. Слим-топбар: ☰ история слева от бренда (только на странице чата) ──
     Компактный один ряд, hairline снизу; модульная nav уже скрыта выше. */
  body.page-chat .topbar { padding: .45rem .8rem; gap: .5rem; flex-wrap: nowrap; }
  body.page-chat .topbar-history { display: inline-flex; align-items: center; }
  body.page-chat .topbar-history:active { background: var(--chat-hover); }
  /* ☰ теперь в топбаре → дублирующий квадрат в chat-main-top скрыть */
  body.page-chat .chat-main-top .sidebar-toggle { display: none; }
  /* chat-shell учитывает слим-топбар (0.9rem ниже дефолтных 3.4rem не критично,
     оставляем механику базовой ветки: 3.4rem — топбар+запас) */

  /* ── 2. Компактный пустой экран: hero без гигантских пустот ──
     desktop-подзаголовок и welcome-абзац скрыты; одна строка greeting видна.
     Refinement (owner на реальном iPhone 2026-08-12): убрана «пустота посередине»
     и дублирующий H1. Hero (лого+greeting+чипы) центрируется по вертикали в
     свободном пространстве между слим-топбаром и закреплённым композером.
     Приём margin:auto 0 НЕ сработал: пустой .chat-log (:empty, 0 детей) с flex:1
     всё равно растёт и съедает пространство под hero → hero прилипал к верху.
     Проверенный менеджером фикс (live browser, скриншот+замер topGap≈botGap):
     пустой .chat-log схлопываем (display:none), а сам hero делаем flex-ростком
     column-flex контейнера и центрируем содержимое (justify-content:center).
     :has() поддержан (CSS.supports=true). Работает ТОЛЬКО на пустом экране:
     когда .chat-log НЕ пуст, он показывается как раньше, hero скрыт JS-ом. */
  .chat-empty { padding: 1.1rem .9rem .6rem; }
  .chat-log:empty { display: none; }
  .chat-main:has(.chat-log:empty) .chat-empty {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    margin: 0;
  }
  /* flex min-width:auto распирал ленту чипов при align-items:center (первый чип
     уезжал за левый край, overflow-x не скроллил) — min-width:0 по цепочке
     .chat-empty→.chat-welcome + align-self:stretch на ленте возвращают скролл. */
  .chat-main:has(.chat-log:empty) .chat-empty,
  .chat-main:has(.chat-log:empty) .chat-empty .chat-welcome { min-width: 0; max-width: 100%; width: 100%; }
  .chat-empty-logo { width: 2.4rem; height: 2.4rem; margin: 0 auto .6rem; }
  /* H1 «Skipi — the seafarer's AI assistant» дублирует строку greeting
     «Hi! I'm Skipi — ask me about…» → на мобильном скрываем (в DOM остаётся,
     десктоп >720px его показывает — правило вне @media не изменено). */
  .chat-empty h1 { display: none; }
  .chat-empty .chat-empty-subtitle { display: none; }  /* desktop-подзаголовок */
  .chat-welcome .welcome-intro { display: none; }        /* 2-й дублирующий абзац */
  .chat-empty-greeting {
    display: block; color: var(--body); font-size: 1rem; line-height: 1.45;
    max-width: 22rem; margin: 0 auto; padding: 0 .2rem;
  }
  .chat-welcome { margin-top: 1rem; }

  /* ── 3. Чипы — горизонтальная лента (свайп вбок), лёгкие/компактные ── */
  .chat-suggests {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden; max-width: none;
    gap: .5rem; padding: .1rem .2rem .3rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox: скрыть скроллбар */
  }
  .chat-suggests::-webkit-scrollbar { display: none; }  /* WebKit: скрыть */
  /* owner: suggestion-чипы не должны обрезаться → wrap вместо overflow-ленты.
     На пустом центрированном экране чипы переносятся и центрируются, каждый —
     целиком, без горизонтального скролла и обрезки (проверено менеджером live).
     Базовая лента .chat-suggests (не-пустое состояние) не тронута. */
  .chat-main:has(.chat-log:empty) .chat-empty .chat-suggests {
    align-self: stretch; min-width: 0; width: 100%; max-width: 100%;
    flex-wrap: wrap; justify-content: center; overflow-x: visible;
  }
  .suggest-q {
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
    font-size: .88rem; padding: .4rem .85rem;
    border: 1px solid var(--border); box-shadow: none;
  }

  /* ── 4. Крупный композер виден без скролла, приглашающий ──
     Увеличенный tap-target, мягкая тень; safe-area уже учтена margin-bottom. */
  body.page-chat .composer {
    padding: .35rem .4rem .35rem 1.1rem; border-radius: 22px;
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--chat-hairline));
  }
  body.page-chat .composer textarea { font-size: 1.05rem; padding: .55rem 0; }
  body.page-chat .composer-send { width: 2.7rem; height: 2.7rem; }
}

/* ── Wow-onboarding слайс 1 (owner GO 12.08-f): пре-чат гейт (2 зависимых
   дропдауна Department→Rank + Skip) и role-aware панель deliverable-действий.
   Аддитивные классы; существующие правила чата/чипов/композера не тронуты.
   Светлая тема по умолчанию — только переменные палитры. ── */
.wow-gate { margin-top: 1.2rem; }
.wow-gate-title { color: var(--body); font-size: .98rem; margin: 0 0 .8rem; }
.wow-gate-row {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}
.wow-field {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
}
.wow-label { font-size: .78rem; color: var(--muted); }
.wow-select {
  min-width: 13rem; padding: .55rem .8rem; font-size: .95rem;
  background: var(--chat-surface); color: var(--fg);
  border: 1px solid var(--chat-hairline); border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.wow-select:disabled { opacity: .55; }
.wow-free {
  display: block; margin: .6rem auto 0; width: min(100%, 27rem);
  padding: .55rem .8rem; font-size: .95rem;
  background: var(--chat-surface); color: var(--fg);
  border: 1px solid var(--chat-hairline); border-radius: 12px;
}
.wow-free.hidden { display: none; }
.wow-gate-actions {
  margin-top: .9rem; display: flex; gap: .6rem; justify-content: center;
}
.wow-continue {
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: .55rem 1.3rem; font-weight: 600; cursor: pointer;
}
.wow-continue:disabled { opacity: .45; cursor: default; }
.wow-continue:not(:disabled):hover {
  background: var(--accent-strong, var(--accent));
}
.wow-skip {
  background: transparent; color: var(--muted);
  border: 1px solid var(--chat-hairline);
  border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer;
}
.wow-skip:hover { color: var(--fg); border-color: var(--border-strong); }
.wow-panel { margin-top: 1.2rem; }
.wow-panel-title {
  color: var(--fg); font-size: 1rem; font-weight: 600; margin: 0 0 .8rem;
}
.wow-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .6rem; max-width: 40rem; margin: 0 auto;
}
.wow-card {
  display: flex; flex-direction: column; gap: .3rem; text-align: left;
  background: var(--chat-surface); border: 1px solid var(--chat-hairline);
  border-radius: 14px; padding: .8rem .95rem; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease;
}
.wow-card:hover {
  background: var(--chat-hover); border-color: var(--border-strong);
}
.wow-card-title { font-weight: 600; color: var(--fg); font-size: .95rem; }
.wow-card-desc { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.wow-change-rank {
  margin-top: .8rem; background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: .82rem; text-decoration: underline;
}
.wow-change-rank:hover { color: var(--accent); }

@media (max-width: 720px) {
  /* Wow-onboarding на мобильном: гейт/панель во всю ширину центрированного
     пустого экрана, карточки одной колонкой. Паттерны 12.08-d (таб-бар,
     композер, лента/wrap чипов) не изменяются. */
  .chat-main:has(.chat-log:empty) .chat-empty .wow-gate,
  .chat-main:has(.chat-log:empty) .chat-empty .wow-panel {
    align-self: stretch; min-width: 0; width: 100%; max-width: 100%;
  }
  .wow-gate-row { flex-direction: column; gap: .5rem; }
  .wow-field { width: 100%; align-items: stretch; }
  .wow-select { min-width: 0; width: 100%; }
  .wow-cards { grid-template-columns: 1fr; gap: .5rem; }
  .wow-card { padding: .7rem .85rem; }
}

/* ── Слайс 2 (HANDOFF 2026-08-13): скрепка в композере + чип файла.
   Аддитивно: существующие правила композера/чата 12.08-d не тронуты;
   attach-кнопка — flex-ребёнок .composer (align-items:flex-end уже есть). */
.composer-attach {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  padding: 0; margin-left: -.75rem; font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
  box-shadow: none;
}
.composer-attach:hover,
.composer-attach:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.file-chip {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .4rem 0 0; padding: .35rem .8rem;
  border: 1px dashed var(--chat-hairline); border-radius: 14px;
  font-size: .85rem; background: var(--chat-surface);
}
.file-chip.hidden { display: none; }
.file-chip-name { font-weight: 600; overflow-wrap: anywhere; }
.file-chip-remove {
  border: 0; background: transparent; cursor: pointer;
  padding: 0 .25rem; font-size: .9rem; color: var(--muted); box-shadow: none;
}
.file-chip-remove:hover { color: var(--accent); }
.file-chip-note { color: var(--muted); font-size: .78rem; }
@media (max-width: 720px) {
  body.page-chat .composer-attach { width: 2.7rem; height: 2.7rem;
                                    margin-left: -.6rem; }
}

/* ── Broker SaaS-кабинет, слайс 1 (HANDOFF 2026-08-13) ─────────────────
   Светлая тема по умолчанию (переменные var(--*) как у остальных страниц);
   мобайл ≤720px — стек, без горизонтального скролла на 390px. */
.brk-cab { max-width: 680px; }
.brk-head { display: flex; align-items: flex-start; justify-content: space-between;
            gap: 1rem; flex-wrap: wrap; }
.brk-head h1 { margin: 0 0 .3rem; font-size: 1.35rem; }
.brk-head .hint { margin: 0; }
.brk-tabs { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .8rem;
            flex-wrap: wrap; }
.brk-tab { background: transparent; color: var(--body); border: 1px solid var(--border);
           border-radius: 999px; padding: .4rem 1.1rem; cursor: pointer; box-shadow: none; }
.brk-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.brk-closed-toggle { margin-left: auto; display: inline-flex; align-items: center;
                     gap: .35rem; cursor: pointer; }
.brk-row { margin: .6rem 0; }
.brk-row-head { display: flex; align-items: baseline; justify-content: space-between;
                gap: .6rem; flex-wrap: wrap; }
.brk-badge { font-size: .78rem; border-radius: 999px; padding: .1rem .6rem;
             border: 1px solid var(--border); color: var(--body); white-space: nowrap; }
.brk-badge-active { color: var(--accent); border-color: var(--accent); }
.brk-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.brk-field { display: block; margin: .55rem 0; }
.brk-field span { display: block; font-size: .85rem; color: var(--body);
                  margin-bottom: .2rem; }
.brk-field input { width: 100%; box-sizing: border-box; }
#brk-form button { margin-top: .6rem; margin-right: .5rem; }
/* Client Requirement Profiles (TASKCARD 2026-08-16): активный таб +
   вёрстка формы профиля (select/textarea на всю ширину; чекбоксы
   сертификатов — компактные строки, не растягиваются). */
.crw-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.brk-field select, .brk-field textarea { width: 100%; box-sizing: border-box; }
#crw-prof-certs .brk-field, #crw-prof-certs label.brk-field {
  display: flex; align-items: flex-start; gap: .45rem; margin: .3rem 0; }
#crw-prof-certs .brk-field input[type="checkbox"] { width: auto; margin-top: .15rem; }
#crw-prof-certs .brk-field span { margin-bottom: 0; font-size: .82rem; }
#crw-prof-certs summary { cursor: pointer; font-weight: 600; font-size: .82rem; }
#crw-prof-form button { margin-top: .6rem; margin-right: .5rem; }
/* Слайс 2: регистрация команды + one-time показ owner-токена —
   uuid не должен ронять вёрстку на 390px */
.brk-reg-token { word-break: break-all; }
#broker-reg-form input { width: 100%; box-sizing: border-box;
                         margin: .35rem 0; }
#broker-reg-done button { margin-right: .5rem; margin-top: .4rem; }
@media (max-width: 720px) {
  .brk-head { flex-direction: column; }
  .brk-closed-toggle { margin-left: 0; width: 100%; }
}

/* ── Публичные демо-кабинеты (owner 14.08): заметный баннер «Demo
   workspace — sample data» + CTA; светлая тема, акцентная рамка. */
.demo-banner { border-left: 4px solid var(--accent); }
.demo-banner p { margin: .25rem 0 .55rem; }
.demo-banner .cta-btn { margin-top: .2rem; }

/* Experience / sea service (TASKCARD-2026-08-17): светлая карточка,
   без чат-классов. */
.exp-page h1 { margin-bottom: .35rem; }
.exp-item h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.exp-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
#exp-form button { margin-right: .45rem; }

/* CV (TASKCARD-2026-08-17): светлая узкая карточка, печать без хрома. */
.cv-toolbar { display: flex; align-items: center; justify-content: space-between;
              gap: .75rem; flex-wrap: wrap; }
.cv-toolbar h1 { margin: 0; }
.cv-exports { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cv-exports .button-like { text-decoration: none; }
.cv-lead { margin-top: .35rem; }
.cv-sheet h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.cv-sheet h3 { margin: 1rem 0 .4rem; font-size: 1.02rem; }
.cv-voyage, .cv-doc { margin: .55rem 0; }
.cv-voyage h4 { margin: 0 0 .15rem; font-size: 1.02rem; }
@media print {
  .topbar, .mobile-tabbar, .cv-toolbar .cv-print, .cv-exports, .cv-lead, #cv-status {
    display: none !important;
  }
  .cv-page { max-width: none; }
  .cv-sheet { box-shadow: none; border: none; }
}
.shipdb-review-host {
  margin: 1rem 0; padding: 1rem 1.15rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.shipdb-review-host h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.shipdb-review-host textarea { min-height: 6rem; }
.shipdb-review-host .shipdb-review-axes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem .8rem; margin: .6rem 0;
}
.shipdb-review-host .shipdb-review-axes label { margin: 0; }
.shipdb-review-host .err { color: var(--warn); }

/* Оперативный план — слайс 4 (TASKCARD 2026-08-20): компактный strip
   «сейчас/дальше» над лентой чата; только залогиненным (шаблон). */
.opplan-strip {
  display: flex; align-items: baseline; gap: .35rem .8rem; flex-wrap: wrap;
  margin: .35rem 1rem 0; padding: .45rem .8rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  font-size: .86rem;
}
.opplan-strip.hidden { display: none; }
.opplan-strip-title { font-weight: 600; white-space: nowrap; }
.opplan-now { color: var(--text); }
.opplan-next { color: var(--muted, #667); }
@media (max-width: 720px) {
  .opplan-strip { margin: .3rem .6rem 0; font-size: .8rem; }
}

/* ── Jobs-борд моряка (веб-паритет S1, TASKCARD-2026-08-31) ─────────────── */
.jobs-page h1 { margin-bottom: .35rem; }
.jobs-page { max-width: 680px; }
.jobs-item h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.jobs-tabs { display: flex; gap: .5rem; margin: .8rem 0 .6rem; }
.jobs-tabs button.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 600;
}
.jobs-actions { display: flex; gap: .5rem; flex-wrap: wrap;
                align-items: center; margin-top: .7rem; }
.jobs-filter-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.jobs-vessel-box { margin-top: .6rem; padding: .6rem .75rem;
                   background: color-mix(in srgb, var(--accent) 6%, transparent);
                   border-radius: var(--r-lg, 10px); }
.jobs-actions .button-like {
  display: inline-block; padding: .45rem .9rem; border: 1px solid var(--border);
  border-radius: var(--r-lg, 10px); text-decoration: none;
}
#jobs-apply-modal textarea { width: 100%; }
.jobs-apply-actions { display: flex; gap: .5rem; margin-top: .7rem; }

/* ── S5 UX-паритет: фото профиля / evidence-файлы рейса (light-канон) ── */
.profile-photo { margin: 0 0 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border); }
.profile-photo h3 { margin: 0 0 .5rem; }
.profile-photo .pp-preview { margin: .3rem 0; }
.profile-photo #pp-img {
  width: 96px; height: 128px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--r, 10px);
  background: var(--card); }
.profile-photo .pp-actions { display: flex; gap: .5rem; align-items: center;
  margin-top: .4rem; flex-wrap: wrap; }
.pp-upload-label { display: inline-block; padding: .45rem .9rem;
  border: 1px solid var(--border); border-radius: var(--r-lg, 10px);
  cursor: pointer; }
.exp-files { margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--border); }
.exp-files h3 { margin: 0 0 .4rem; font-size: .95rem; }
.exp-file-row { display: flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; margin: .25rem 0; }
.exp-file-label { display: inline-block; padding: .4rem .8rem;
  border: 1px solid var(--border); border-radius: var(--r-lg, 10px);
  cursor: pointer; margin-top: .3rem; }