/* ============================================================
   app.css — HRHIREBOT Design System v3
   Dark-first theme · Frosted glass · Typography scale · 8px grid
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Theme Variables (Dark — default) --- */
:root {
  --bg-primary: #111111;
  --bg-card: #1A1A1A;
  --bg-elevated: #2A2A2A;
  --comments-fade: rgba(42, 42, 42, 0);
  --bg-surface: #222222;
  --text-primary: #F5F5F5;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --accent: #10B981;
  --accent-rgb: 16, 185, 129;
  --danger: #EF4444;
  --danger-rgb: 239, 68, 68;
  --warning: #EAB308;
  --warning-rgb: 234, 179, 8;
  --info: #38BDF8;
  --info-rgb: 56, 189, 248;
  --border: #2A2A2A;
  --glass-bg: rgba(26, 26, 26, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --skeleton-base: #2A2A2A;
  --skeleton-shine: #333333;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Typography scale */
  --fs-title: 22px;
  --fs-body: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Spacing (8px-based) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* Font stacks — Space Grotesk + DM Sans */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Light Theme Override --- */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-elevated: #F1F5F9;
    --comments-fade: rgba(241, 245, 249, 0);
    --bg-surface: #E8ECF1;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --accent: #059669;
    --accent-rgb: 5, 150, 105;
    --danger: #DC2626;
    --danger-rgb: 220, 38, 38;
    --warning: #CA8A04;
    --warning-rgb: 202, 138, 4;
    --info: #0284C7;
    --info-rgb: 2, 132, 199;
    --border: #E2E8F0;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(0, 0, 0, 0.06);
    --skeleton-base: #E2E8F0;
    --skeleton-shine: #F1F5F9;
  }
}

/* Manual dark-theme override — beats prefers-color-scheme: light media query */
html.dark-theme {
  --bg-primary: #111111;
  --bg-card: #1A1A1A;
  --bg-elevated: #2A2A2A;
  --comments-fade: rgba(42, 42, 42, 0);
  --bg-surface: #222222;
  --text-primary: #F5F5F5;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --accent: #10B981;
  --accent-rgb: 16, 185, 129;
  --danger: #EF4444;
  --danger-rgb: 239, 68, 68;
  --warning: #EAB308;
  --warning-rgb: 234, 179, 8;
  --info: #38BDF8;
  --info-rgb: 56, 189, 248;
  --border: #2A2A2A;
  --glass-bg: rgba(26, 26, 26, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --skeleton-base: #2A2A2A;
  --skeleton-shine: #333333;
}
html.dark-theme .top-bar { background: #0A0A0A; border-bottom-color: var(--border); }
html.dark-theme .top-bar-version { background: rgba(255,255,255,0.08); }
html.dark-theme .top-bar-brand { color: var(--accent); }
html.dark-theme .stat-pending, html.dark-theme .stat-positive { color: var(--accent); }

/* Manual theme toggle via JS class */
html.light-theme {
  --bg-primary: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --comments-fade: rgba(241, 245, 249, 0);
  --bg-surface: #E8ECF1;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --accent: #059669;
  --accent-rgb: 5, 150, 105;
  --danger: #DC2626;
  --danger-rgb: 220, 38, 38;
  --warning: #CA8A04;
  --warning-rgb: 202, 138, 4;
  --info: #0284C7;
  --info-rgb: 2, 132, 199;
  --border: #E2E8F0;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.06);
  --skeleton-base: #E2E8F0;
  --skeleton-shine: #F1F5F9;
}
html.light-theme .top-bar { background: #FFFFFF; border-bottom-color: var(--border); }
html.light-theme .top-bar-version { background: rgba(0,0,0,0.05); }
/* BUG-LPR-03 fix: login-btn contrast ≥4.5:1 in light theme (white on #005C3A = 6.2:1) */
html.light-theme .login-btn { background: #005C3A; }
@media (prefers-color-scheme: light) { .login-btn { background: #005C3A; } }
/* BUG-LPR-10 fix: stat-pending/positive in light theme (#065F46 on #fff = 7.2:1) */
html.light-theme .stat-pending,
html.light-theme .stat-positive { color: #065F46; }
@media (prefers-color-scheme: light) {
  .stat-pending, .stat-positive { color: #065F46; }
}

/* --- Typography --- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.font-heading {
  font-family: var(--font-heading);
}

h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 24px;
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 18px;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Layout Utilities --- */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-4);
}

.text-center {
  text-align: center;
}

/* ============================================================
   Header (sticky glass, two rows)
   ============================================================ */
.header {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: var(--sp-3) var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 90;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.header-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.header-vacancy-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--accent);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  cursor: pointer;
  letter-spacing: -0.02em;
}
/* Title color now carries the status signal that the badge used to (badge
   removed from variant='header', see _vacancy_status_control.html) --
   open/unknown fall through to the base --accent green above. */
.header-vacancy-title--onHold { color: var(--warning); }
.header-vacancy-title--closed { color: var(--danger); }

.header-actions a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-body);
}

.header-actions a:hover {
  color: var(--text-primary);
}

.header-counter {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--accent);
  font-size: var(--fs-body);
}

/* Header stats row */
.header-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--glass-border);
}
.header-stats-progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  margin-top: var(--sp-2);
  overflow: hidden;
  display: flex;
}
.header-stats-progress-done {
  background: var(--accent);
  transition: width 0.3s;
}
.header-stats-progress-rejected {
  background: var(--danger);
  transition: width 0.3s;
}

.header-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.header-stat .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.header-stat .dot--pending { background: var(--accent); }
.header-stat .dot--liked { background: #10B981; }
.header-stat .dot--rejected { background: var(--danger); }
.header-stat .dot--skipped { background: var(--warning); }

.header-stat-value {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* Header avatar + user menu */
.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  min-width: 260px;
  max-width: 300px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
  overflow: hidden;
}

.user-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Profile block at top of menu */
.user-menu-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.user-menu-profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-menu-profile-info {
  flex: 1;
  min-width: 0;
}
.user-menu-profile-name {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-profile-role {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 1px;
}

.user-menu-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  color: var(--text-primary);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.user-menu-item:hover {
  background: var(--bg-elevated);
}

.user-menu-item--danger {
  color: var(--danger);
}

.user-menu-item--muted {
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.user-menu-icon {
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* --- Main Content --- */
.main-content {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--sp-5);
  padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
}

/* --- Login Page --- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.login-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.login-wordmark {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 28px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 2rem;
}

.login-input {
  width: 100%;
  padding: 14px var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 16px;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
  outline: none;
}

.login-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.login-btn {
  width: 100%;
  padding: 14px;
  /* BUG-LPR-03: #0A7A52 + #fff = ~4.6:1 WCAG AA (was #10B981 = 2.54:1 FAIL) */
  background: #0A7A52;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.1s, box-shadow 0.2s;
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:hover {
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.login-error {
  background: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 8px;
  font-size: var(--fs-body);
  margin-bottom: 1rem;
}

/* ============================================================
   Onboarding (ФЗ-152 consent)
   ============================================================ */
.onboarding-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
}
.onboarding-welcome {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.onboarding-summary {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
  text-align: center;
}
.onboarding-section {
  background: var(--bg-elevated);
  border-radius: 12px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.onboarding-section-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.onboarding-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.onboarding-section.expanded .onboarding-chevron {
  transform: rotate(180deg);
}
.onboarding-section-body {
  display: none;
  margin-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.onboarding-section.expanded .onboarding-section-body {
  display: block;
}
.onboarding-section-body ul {
  padding-left: 18px;
  margin: 8px 0;
}
.onboarding-section-body li {
  margin-bottom: 4px;
}
.onboarding-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-2) 0;
}
.onboarding-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.onboarding-checkbox label {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
}
.onboarding-link {
  color: var(--accent);
  text-decoration: underline;
}
.onboarding-link:hover {
  opacity: 0.8;
}

/* ============================================================
   Vacancy Cards
   ============================================================ */
.vacancy-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 48px;
  margin-bottom: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.vacancy-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* quick 260730-wts: левая скобка карточки кодирует ДВЕ независимые оси --
   цвет = fw_status вакансии, толщина = наличие ожидающих кандидатов.

   Скобка остаётся `border-left`, а НЕ псевдоэлементом: border -- часть
   border-box, поэтому он сам повторяет `border-radius: 12px` карточки и
   уходит дугой в угол. Псевдоэлемент этого не умеет: его собственный радиус
   не может превысить собственный габарит, браузер схлопывает заявленные 12px
   до ширины полосы (3-6px), и вместо скобки получается прямоугольник,
   торчащий за скруглённые углы (проверено рендером, откачено).

   Два следствия border-left, закрытые ниже явно:
   1. `.vacancy-card:hover` красит рамку целиком в var(--accent) -- на закрытой
      вакансии скобка под курсором позеленела бы. Правила статуса стоят ПОСЛЕ
      :hover при равной специфичности (0,2,0), поэтому побеждают и при
      наведении. Порядок здесь значим -- не переставлять выше :hover.
   2. Рост толщины 3px->6px сдвинул бы содержимое (border входит в отступ от
      края) -- компенсируется padding-left у --has-pending: 6+45 == 3+48. */
.vacancy-card[data-fw-status="open"] {
  border-left-color: var(--accent);
}

.vacancy-card[data-fw-status="onHold"] {
  border-left-color: var(--warning);
}

.vacancy-card[data-fw-status="closed"] {
  border-left-color: var(--text-muted);
}

/* Phase 84.1-16 (D-31): удалённая в FW вакансия красится ТЕМ ЖЕ приглушённым
   цветом, что и закрытая -- цвет их не различает намеренно, различает
   текстовый маркер .vacancy-deleted-marker ниже. */
.vacancy-card[data-fw-status="deleted"] {
  border-left-color: var(--text-muted);
}

.vacancy-card--has-pending {
  border-left-width: 6px;
  padding-left: 45px;
}

.vacancy-card--empty {
  opacity: 0.7;
}

.vacancy-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

/* Phase 84.1-16 (D-31): текстовый маркер "удалена в FriendWork" на карточке
   списка -- единственный отличитель удаления от обычного закрытия на этой
   поверхности (цвет скобки у обоих одинаковый, см. выше). */
.vacancy-deleted-marker {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.vacancy-stats {
  display: flex;
  gap: 1rem;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.stat-pending { color: var(--accent); font-weight: var(--fw-medium); }
.stat-positive { color: var(--accent); }
.stat-negative { color: var(--danger); }

.vacancy-progress-wrap {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 2px;
  margin-top: var(--sp-2);
  overflow: hidden;
}

.vacancy-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vacancy-arrow {
  color: var(--text-muted);
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Vacancy tooltip */
.vacancy-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: 100;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.vacancy-tooltip.active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Vacancy Status Control (Phase 84.1, D-06/D-09/D-18/D-26)
   Общий партиал _vacancy_status_control.html — карточка списка
   /vacancies и шапка дашборда /vacancy/{id}.
   ============================================================ */
.vac-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.vac-status--card {
  margin-top: var(--sp-2);
}

.vac-status--header {
  margin: var(--sp-2) 0;
}

.vac-status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.vac-status-badge--open { color: var(--accent); border-color: var(--accent); }
.vac-status-badge--onHold { color: var(--warning); border-color: var(--warning); }
.vac-status-badge--closed,
.vac-status-badge--unknown,
.vac-status-badge--deleted { color: var(--text-muted); }

.vac-status-select {
  height: 32px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.vac-status-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vac-status-unavailable-hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.vac-status-error {
  width: 100%;
  font-size: var(--fs-caption);
  color: var(--danger);
}

.vac-status-retry {
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: transparent;
  color: var(--danger);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  touch-action: manipulation;
}

.vac-status-retry:active { transform: scale(0.96); }

/* Приглушённый вид закрытой карточки (D-09) — счётчики и прогресс остаются
   на месте, меняется только визуальная насыщенность (opacity + мутный
   текст), НИКОГДА display:none. */
.vacancy-card--closed {
  opacity: 0.6;
}

.vacancy-card--closed .vacancy-title {
  color: var(--text-muted);
}

/* --- Page Title --- */
.page-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

/* --- State Message (empty states) --- */
.state-message {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.state-message h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.state-message-hint {
  margin-top: 0.5rem;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- Accent Button --- */
.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.625rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: var(--fs-body);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  border: none;
  cursor: pointer;
  min-height: 48px;
  transition: box-shadow 0.2s;
}

.btn-accent:active { transform: scale(0.96); }
.btn-accent:hover { box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); }

/* --- Error Banner --- */
.error-banner {
  background: rgba(var(--danger-rgb), 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: var(--fs-body);
}

/* ============================================================
   Candidate Card
   ============================================================ */
.candidate-card {
  max-width: 600px;
  margin: var(--sp-4) auto;
  padding: var(--sp-5);
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  /* 260523-f8d: will-change намеренно НЕ задаём в базе — оно ставится через JS
     только на время активного swipe (touchstart → touchend), чтобы избежать
     stale composite-layer hit-test bug в iOS Safari/Chromium после scroll. */
  touch-action: pan-y; /* 260523-f8d: vertical scroll → browser; horizontal swipe → JS */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, opacity 0.4s ease;
}

/* Card exit animations */
.candidate-card.exit-right {
  transform: translateX(120%) rotate(8deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.candidate-card.exit-left {
  transform: translateX(-120%) rotate(-8deg);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* Card enter — начальное состояние перед transition.
   260523-f8d: keyframe-animation заменена одноразовым CSS transition,
   чтобы НЕ оставлять `animation: forwards` навсегда (root cause swipe-after-scroll bug).
   JS добавляет `.entering` синхронно с load, затем через rAF удаляет — это триггерит
   transition base-правила (transform 0.4s + opacity 0.4s). */
.candidate-card.entering {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: none; /* применяется только в начальный фрейм; rAF снимает класс — transition base включается */
}

/* --- Candidate Header --- */
.candidate-header {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
  position: relative;
}

/* Rectangular photo */
.candidate-photo {
  width: 72px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-elevated);
  flex-shrink: 0;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: opacity 0.15s;
}

.candidate-photo:hover {
  opacity: 0.85;
}

.candidate-photo-placeholder {
  width: 72px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 12px;
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.candidate-name {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.02em;
}

.candidate-position {
  color: var(--text-muted);
  font-size: var(--fs-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* --- Candidate Tags --- */
.candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-3);
}

.candidate-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: var(--fs-small);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* --- Photo Lightbox --- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  cursor: zoom-out;
}

.photo-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.photo-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 16px;
  object-fit: contain;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.photo-lightbox.active img {
  transform: scale(1);
}

.photo-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
}

.photo-lightbox-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.photo-lightbox-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Score Bar (horizontal — replaces circular score ring)
   ============================================================ */
.score-bar-wrap {
  margin-bottom: var(--sp-4);
}

.score-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
}

.score-bar-label {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.score-bar-value {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
}

/* Score bar value color tiers */
.score-bar-value--green { color: #10B981; }
.score-bar-value--lime { color: #84CC16; }
.score-bar-value--yellow { color: #EAB308; }
.score-bar-value--orange { color: #F97316; }
.score-bar-value--red { color: #EF4444; }

.score-bar-track {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Score bar fill color tiers (direct on fill OR cascaded from wrap) */
.score-bar-fill--green,
.score-bar--green .score-bar-fill { background: #10B981; }
.score-bar-fill--lime,
.score-bar--lime .score-bar-fill { background: #84CC16; }
.score-bar-fill--yellow,
.score-bar--yellow .score-bar-fill { background: #EAB308; }
.score-bar-fill--orange,
.score-bar--orange .score-bar-fill { background: #F97316; }
.score-bar-fill--red,
.score-bar--red .score-bar-fill { background: #EF4444; }

/* Score bar label color (cascaded from wrap) */
.score-bar--green .score-bar-label { color: #10B981; }
.score-bar--lime .score-bar-label { color: #84CC16; }
.score-bar--yellow .score-bar-label { color: #EAB308; }
.score-bar--orange .score-bar-label { color: #F97316; }
.score-bar--red .score-bar-label { color: #EF4444; }

/* Score bar glow on track */
.score-bar--green .score-bar-track { box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.score-bar--lime .score-bar-track  { box-shadow: 0 0 8px rgba(132,204,22,0.3); }
.score-bar--yellow .score-bar-track { box-shadow: 0 0 8px rgba(234,179,8,0.3); }
.score-bar--orange .score-bar-track { box-shadow: 0 0 8px rgba(249,115,22,0.3); }
.score-bar--red .score-bar-track   { box-shadow: 0 0 8px rgba(239,68,68,0.3); }

/* ============================================================
   Donut Gauge — Phase 73 (vd-donut-*)
   ============================================================ */
.vd-donut-gauge {
  display: block;
  flex-shrink: 0;
}

/* Track адаптируется к теме через var(--bg-elevated) */

.vd-donut-arc {
  /* JS устанавливает --vd-donut-offset через style.setProperty */
  animation: vd-donut-appear 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  transition: stroke 0.3s;
}

@keyframes vd-donut-appear {
  from { stroke-dashoffset: 226; }
  to   { stroke-dashoffset: var(--vd-donut-offset, 226); }
}

.vd-donut-label {
  font-family: var(--font-heading);
  /* font-size и font-weight задаются inline в SVG атрибутах (22px/700) */
}

/* Reduced-motion: анимацию arc отключить, сразу показать конечное состояние */
@media (prefers-reduced-motion: reduce) {
  .vd-donut-arc {
    animation: none;
    transition: none;
    stroke-dashoffset: var(--vd-donut-offset, 226);
  }
}

/* Legacy score badge (static fallback) */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-title);
  padding: var(--sp-1) var(--sp-4);
  border-radius: 12px;
}

.score-badge--green { background: var(--accent); color: #fff; }
.score-badge--yellow { background: var(--warning); color: #fff; }
.score-badge--red { background: var(--danger); color: #fff; }

/* ============================================================
   Source Tags (replaces pill-badge / badges-row)
   ============================================================ */
.source-tags {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.source-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.source-tag--relocation { background: rgba(var(--info-rgb), 0.1); color: var(--info); }
.source-tag--remote { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }
.source-tag--office { background: rgba(var(--info-rgb), 0.1); color: var(--info); }
.source-tag--hh { background: rgba(96, 165, 250, 0.12); color: #60A5FA; }
.source-tag--fw { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

.source-tag-icon {
  font-size: var(--fs-body);
  line-height: 1;
}

/* ============================================================
   Metrics Row (chip-style — replaces bordered metrics)
   ============================================================ */
.metrics-row {
  display: flex;
  margin-bottom: var(--sp-4);
  background: var(--bg-elevated);
  border-radius: 12px;
  overflow: hidden;
}

.metric {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  position: relative;
}

/* Vertical separator between metrics */
.metric + .metric::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* border-radius handled by .metrics-row overflow:hidden */

.metric-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.2;
  min-height: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.metric-value--info { color: var(--info); }

/* City auto-shrink for long names */
.metric-value--city {
  color: var(--info);
  font-size: clamp(10px, 3vw, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.metric-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--fw-medium);
}

/* ============================================================
   FW Comments Accordion
   ============================================================ */
.comments-accordion {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.comments-header:hover { background: var(--bg-card); }
.comments-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.comments-icon { color: var(--text-muted); flex-shrink: 0; }
.comments-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.comments-count {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.comments-count:empty { display: none; }
.comments-chevron {
  color: var(--text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.comments-accordion.open .comments-chevron { transform: rotate(180deg); }

/* Preview — last comment shown when collapsed */
.comments-preview {
  padding: 0 var(--sp-4) 0;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.4;
  position: relative;
  max-height: calc(1.4em * 3);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}
.comments-preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(1.4em * 2);
  background: linear-gradient(to bottom, var(--comments-fade), var(--bg-elevated));
  pointer-events: none;
}
.comments-preview:empty { display: none; }
.comments-accordion.open .comments-preview { display: none; }

/* Expandable body */
.comments-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.comments-accordion.open .comments-body { max-height: 600px; overflow-y: auto; }
.comments-list {
  padding: 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.comments-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  padding: var(--sp-3) 0;
}

/* Single comment item */
.comment-item {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--fs-caption);
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.comment-author {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-size: 11px;
}
.comment-date {
  color: var(--text-muted);
  font-size: 11px;
}
.comment-text {
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

/* Show more button */
.comments-show-more {
  text-align: center;
  padding: var(--sp-2) 0;
}
.comments-show-more-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-caption);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-3);
}
.comments-show-more-btn:hover { text-decoration: underline; }

/* Input area */
.comments-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.comments-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  padding: var(--sp-2);
  resize: none;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.comments-input:focus { border-color: var(--accent); }
.comments-input::placeholder { color: var(--text-muted); }
.comments-send-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm, 6px);
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.comments-send-btn:disabled { opacity: 0.4; cursor: default; }
.comments-send-btn:not(:disabled):hover { opacity: 0.85; }

/* Textarea wrapper with mic inside */
.comments-input-inner {
  position: relative;
  flex: 1;
  min-width: 0;
}
.comments-input-inner .comments-input {
  width: 100%;
  padding-right: 48px;
}
.comments-mic-btn {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.comments-mic-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.comments-mic-btn.recording {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: mic-pulse 1s ease-in-out infinite;
}
.comments-mic-status {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--accent);
  padding: 0 var(--sp-4);
}
.comments-mic-status:empty { display: none; }

/* Empty state */
.comments-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  padding: var(--sp-3) 0;
}

/* ============================================================
   AI Conclusion Block (accent left bar)
   ============================================================ */
.ai-conclusion-block {
  background: var(--bg-elevated);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--sp-3) var(--sp-3) 0;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.ai-conclusion-block .ai-conclusion-label {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}

.ai-conclusion-block .ai-conclusion-text {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Legacy inline AI section */
.ai-conclusion-section {
  margin-bottom: var(--sp-4);
}

.ai-conclusion-text {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Rendered markdown inside AI text blocks */
.ai-conclusion-text p, .rv-ai-text p,
.criterion-popup-text p, .rv-criterion-desc p { margin: 0 0 0.4em; }
.ai-conclusion-text p:last-child, .rv-ai-text p:last-child,
.criterion-popup-text p:last-child, .rv-criterion-desc p:last-child { margin-bottom: 0; }
.ai-conclusion-text ul, .rv-ai-text ul,
.criterion-popup-text ul, .rv-criterion-desc ul { margin: 0.3em 0; padding-left: 1.2em; }
.ai-conclusion-text li, .rv-ai-text li,
.criterion-popup-text li, .rv-criterion-desc li { margin-bottom: 0.2em; }
.ai-conclusion-text strong, .rv-ai-text strong,
.criterion-popup-text strong, .rv-criterion-desc strong { color: var(--text-primary); font-weight: 500; }
.ai-conclusion-text code, .rv-ai-text code,
.criterion-popup-text code, .rv-criterion-desc code {
  background: var(--bg-elevated); padding: 1px 4px; border-radius: 3px; font-size: 0.9em;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--sp-4) 0 var(--sp-2);
  display: flex;
  align-items: center;
}

.section-heading::before {
  content: '';
  width: 3px;
  height: 100%;
  min-height: 14px;
  background: var(--accent);
  border-radius: 2px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ============================================================
   Pros / Cons Grid
   ============================================================ */
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.pros-list,
.cons-list {
  padding: var(--sp-3);
  border-radius: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.pros-list {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.cons-list {
  background: rgba(var(--danger-rgb), 0.08);
  border: 1px solid rgba(var(--danger-rgb), 0.15);
}

.pros-cons-title {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}

.pros-list .pros-cons-title { color: var(--accent); }
.cons-list .pros-cons-title { color: var(--danger); }

.pros-cons-item {
  color: var(--text-secondary);
  padding-left: var(--sp-4);
  position: relative;
  margin-bottom: var(--sp-1);
}

.pros-cons-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.pros-list .pros-cons-item::before { background: var(--accent); }
.cons-list .pros-cons-item::before { background: var(--danger); }

@media (max-width: 420px) {
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Criterion Cards (score circle + bar + arrow)
   ============================================================ */
.criteria-section { margin-top: var(--sp-2); }

.criteria-hint {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.criterion-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-elevated);
  border-radius: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: background 0.15s;
}

.criterion-card:hover {
  background: var(--bg-surface);
}

/* Score circle */
.criterion-score-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.2s;
}

/* Criterion score circle color tiers (rgba backgrounds) */
.criterion-score-circle--green { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.criterion-score-circle--lime { background: rgba(132, 204, 22, 0.15); color: #84CC16; }
.criterion-score-circle--yellow { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
.criterion-score-circle--orange { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.criterion-score-circle--red { background: rgba(239, 68, 68, 0.15); color: #EF4444; }

/* Score circle glow on tap/hover */
.criterion-card:active .criterion-score-circle--green { box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.criterion-card:active .criterion-score-circle--lime  { box-shadow: 0 0 8px rgba(132,204,22,0.3); }
.criterion-card:active .criterion-score-circle--yellow { box-shadow: 0 0 8px rgba(234,179,8,0.3); }
.criterion-card:active .criterion-score-circle--orange { box-shadow: 0 0 8px rgba(249,115,22,0.3); }
.criterion-card:active .criterion-score-circle--red    { box-shadow: 0 0 8px rgba(239,68,68,0.3); }

.criterion-body {
  flex: 1;
  min-width: 0;
}

.criterion-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.criterion-bar {
  height: 4px;
  background: var(--bg-primary);
  border-radius: 2px;
  overflow: hidden;
}

.criterion-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Criterion fill color tiers */
.criterion-fill--green { background: #10B981; }
.criterion-fill--lime { background: #84CC16; }
.criterion-fill--yellow { background: #EAB308; }
.criterion-fill--orange { background: #F97316; }
.criterion-fill--red { background: #EF4444; }

/* Score text color classes (for popup score number) */
.criterion-score--green { color: #10B981; }
.criterion-score--lime { color: #84CC16; }
.criterion-score--yellow { color: #EAB308; }
.criterion-score--orange { color: #F97316; }
.criterion-score--red { color: #EF4444; }

.criterion-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  transition: transform 0.2s;
}

.criterion-card[aria-expanded="true"] .criterion-arrow {
  transform: rotate(90deg);
}

.criterion-detail {
  padding: 0 var(--sp-4) var(--sp-3);
  display: none;
}

.criterion-detail.open {
  display: block;
}

.criterion-quote {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--sp-1);
  line-height: 1.4;
}

/* Legacy flat criterion styles (backward compat) */
.criterion {
  margin-bottom: 0.75rem;
}

.criterion-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

/* ============================================================
   Action Bar (rectangular gradient buttons)
   ============================================================ */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  z-index: 100;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.action-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Back button: glass, compact */
.action-btn--back {
  height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--sp-4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.action-btn--back:active {
  background: rgba(255, 255, 255, 0.1);
}

/* CARDX-03: read-only resume view (opened from vacancy card) — single back button full-width */
.action-bar--view-only .action-btn--back {
  flex: 1;
  max-width: 320px;
  color: var(--text-primary);
}

/* Reject button */
.action-btn--reject {
  height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--sp-4);
  font-size: var(--fs-body);
  background: linear-gradient(135deg, rgba(var(--danger-rgb), 0.18), rgba(var(--danger-rgb), 0.06));
  color: var(--danger);
  flex: 1;
  max-width: 150px;
}

.action-btn--reject:active {
  background: rgba(var(--danger-rgb), 0.25);
}

/* Like button */
.action-btn--like {
  height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--sp-4);
  font-size: var(--fs-body);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.06));
  color: var(--accent);
  flex: 1;
  max-width: 150px;
}

.action-btn--like:active {
  background: rgba(var(--accent-rgb), 0.25);
}

.action-btn-icon {
  line-height: 1;
  display: flex;
  align-items: center;
}

.action-btn-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
}

/* Small utility button */
.action-btn--small {
  height: 42px;
  padding: 0 var(--sp-3);
  border-radius: 10px;
  font-size: var(--fs-caption);
}

/* Neutral / skip button */
.action-btn--neutral {
  height: 48px;
  padding: 0 var(--sp-4);
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.18);
  color: #FBBF24;
  font-size: var(--fs-body);
}

.card-spacer {
  height: calc(100px + var(--safe-bottom));
}

/* ============================================================
   Candidate Tooltip
   ============================================================ */
.candidate-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: 50;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  max-width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.candidate-tooltip.active {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Reject Comment Modal
   ============================================================ */
.reject-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.reject-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.reject-modal {
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  padding: 1.25rem 1rem calc(1rem + var(--safe-bottom));
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reject-modal-overlay.active .reject-modal {
  transform: translateY(0);
}

.reject-modal-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  text-align: center;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.reject-modal-subtitle {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--sp-3);
}

/* Phase 84.1, D-24 — список последствий закрытия вакансии
   (_vacancy_status_confirm.html), реиспользует reject-modal-* chrome. */
.vac-status-confirm-list {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-4);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.5;
}

.vac-status-confirm-list li {
  margin-bottom: var(--sp-1);
}

.reject-modal-input {
  width: 100%;
  min-height: 80px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  padding: var(--sp-3);
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.reject-modal-input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.12);
  outline: none;
}

.reject-modal-input::placeholder { color: var(--text-muted); }

/* BUG-LPR1-02: missing CSS for temp-link name input in _decision_sheet.html */
.reject-modal-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
  display: block;
}

.reject-modal-name-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.reject-modal-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
  outline: none;
}

.reject-modal-name-input::placeholder { color: var(--text-muted); }

.reject-modal-char-count {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--sp-1);
  min-height: 16px;
}

.reject-modal-char-count--warn {
  color: var(--danger);
}

.reject-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--sp-3);
  align-items: center;
}

.reject-modal-btn {
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.25rem;
  font-size: 15px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  touch-action: manipulation;
  font-family: var(--font-heading);
  transition: transform 0.1s, opacity 0.15s;
}

.reject-modal-btn:active { transform: scale(0.96); }

.reject-modal-btn--mic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  font-size: 20px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reject-modal-btn--mic.recording {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: mic-pulse 1s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.reject-modal-btn--cancel {
  flex: 1;
  background: var(--bg-surface);
  color: var(--text-muted);
}

.reject-modal-btn--confirm {
  flex: 1;
  background: var(--danger);
  color: #fff;
}

.reject-modal-btn--confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   Vacancy Card Action Picker (Phase 64)
   ============================================================ */
.vacancy-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.vacancy-picker-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.vacancy-picker {
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vacancy-picker-overlay.active .vacancy-picker {
  transform: translateY(0);
}

.vacancy-picker-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  text-align: center;
}

.vacancy-picker-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: var(--font-heading);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, opacity 0.15s;
  margin-bottom: var(--sp-2);
}

.vacancy-picker-btn:active {
  transform: scale(0.96);
}

.vacancy-picker-btn--primary {
  background: var(--accent);
  color: #fff;
}

.vacancy-picker-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.vacancy-picker-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.vacancy-picker-btn--cancel {
  background: transparent;
  color: var(--text-muted);
  border: none;
  margin-bottom: 0;
}

.vacancy-picker-hint {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
  margin-top: calc(-1 * var(--sp-1));
  margin-bottom: var(--sp-2);
  display: none;
}

.reject-modal-mic-status {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  min-height: 18px;
}

/* --- Swipe Overlay Icons --- */
.swipe-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* removed 2026-05-23: heart icon retired (swipe-icon--like) */
.swipe-icon--reject { color: var(--danger); }

/* --- Toast (slide-in) --- */
.toast {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 12px;
  font-size: var(--fs-body);
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.toast.show {
  top: 4rem;
}

/* --- Spinner (loading overlay) --- */
.spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--bg-primary), 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 150;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.spinner-overlay.active {
  display: flex;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* --- Swipe Onboarding Hint --- */
.swipe-hint {
  position: fixed;
  bottom: calc(110px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 20px;
  font-size: var(--fs-caption);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  animation: hint-fade 4s ease-in-out forwards;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.swipe-hint-arrow {
  display: inline-block;
  animation: hint-swipe 1.5s ease-in-out infinite;
}

@keyframes hint-swipe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

@keyframes hint-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* --- Skeleton Loading --- */
.skeleton {
  max-width: 600px;
  margin: var(--sp-4) auto;
  padding: var(--sp-5);
  background: var(--bg-card);
  border-radius: 20px;
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-circle {
  border-radius: 50%;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-rect {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

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

/* --- Session Completion (redesigned) --- */
.completion-screen {
  padding: 2rem 0;
}

.completion-hero {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.completion-check {
  width: 72px;
  height: 72px;
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  font-size: 36px;
  color: var(--accent);
  animation: completion-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes completion-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.completion-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-1);
}

.completion-vacancy {
  font-size: var(--fs-body);
  color: var(--accent);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-1);
}

.completion-subtitle {
  font-size: var(--fs-body);
  color: var(--text-muted);
}

/* Stats card with ring */
.completion-stats-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.completion-ring-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  justify-content: center;
}

.completion-ring {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.completion-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.completion-ring-fill {
  transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.completion-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.completion-ring-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.completion-ring-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 2px;
}

.completion-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.completion-stat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.completion-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.completion-stat-dot--green { background: #10B981; }
.completion-stat-dot--red { background: var(--danger); }
.completion-stat-dot--yellow { background: var(--warning); }

.completion-stat-name {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  flex: 1;
}

.completion-stat-num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.completion-stat-num--green { color: #10B981; }
.completion-stat-num--red { color: var(--danger); }
.completion-stat-num--yellow { color: var(--warning); }

.completion-insight {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--glass-border);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.completion-insight-icon {
  font-size: 16px;
  line-height: 1;
}
.completion-insight strong {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

/* Candidate decisions list (SUM-01) */
.completion-decisions {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.completion-decisions-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.decision-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.decision-row:last-child { border-bottom: none; }

.decision-photo { flex-shrink: 0; }
.decision-photo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.decision-photo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.decision-info { flex: 1; min-width: 0; }
.decision-rating {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.decision-score {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.decision-score-max {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.decision-city {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}
.decision-meta {
  display: flex;
  gap: var(--sp-2);
  margin-top: 2px;
}
.decision-tag, .decision-source {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.decision-action { flex-shrink: 0; }
.decision-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}
.decision-badge--like {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}
.decision-badge--reject {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Action buttons */
.completion-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.completion-actions .resume-btn {
  margin-top: 0;
}

/* --- Card Action Links (inside scroll area) --- */
.card-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.card-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 10px;
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: var(--font-heading);
  transition: background 0.15s;
}

.card-link--hh {
  background: rgba(96, 165, 250, 0.1);
  color: #60A5FA;
}

.card-link--hh:active {
  background: rgba(96, 165, 250, 0.2);
}

.card-link-icon {
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  background: rgba(96, 165, 250, 0.2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 6px;
}

/* ============================================================
   Patch: classes used by candidate.html not in base CSS
   ============================================================ */

/* Header stat dots */
.header-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.header-stat-dot--pending  { background: var(--accent); }
.header-stat-dot--selected { background: var(--info); }
.header-stat-dot--rejected { background: var(--danger); }
.header-stat--pending  { color: var(--accent); }
.header-stat--selected { color: var(--info); }
.header-stat--rejected { color: var(--danger); }

/* AI Conclusion block — header row with score bar */
.ai-conclusion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.ai-conclusion-title {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Score bar inside ai-conclusion: inline track + colored number */
.ai-conclusion-header .score-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 0;
}
.ai-conclusion-header .score-bar-track {
  flex: 1;
  min-width: 60px;
}
.ai-conclusion-header .score-bar-label {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Candidate header info wrapper */
.candidate-header-info {
  flex: 1;
  min-width: 0;
}

/* Metric format value (emoji icon) */
.metric-value--format {
  font-size: var(--fs-title);
  line-height: 1;
}

/* Source tags */
.source-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 6px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}
.source-tag-icon {
  font-size: var(--fs-caption);
  line-height: 1;
}
.source-tag--channel {
  background: rgba(96, 165, 250, 0.12);
  color: #60A5FA;
}
.source-tag--source {
  background: rgba(251, 191, 36, 0.12);
  color: #FBBF24;
}

/* Photo lightbox image */
.photo-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--sp-4);
  box-shadow: 0 8px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.photo-lightbox.active .photo-lightbox-img {
  transform: scale(1);
}

/* Criterion info wrapper */
.criterion-info {
  flex: 1;
  min-width: 0;
}

/* Criterion popup */
.criterion-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.criterion-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.criterion-popup {
  background: var(--bg-card);
  border-radius: var(--sp-4);
  padding: var(--sp-5);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  transform: scale(0.9) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.criterion-popup-overlay.active .criterion-popup {
  transform: scale(1) translateY(0);
}
.criterion-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.criterion-popup-name {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  margin-right: 0.75rem;
  letter-spacing: -0.02em;
}
.criterion-popup-score {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.criterion-popup-score small {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
.criterion-popup-bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.criterion-popup-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.criterion-popup-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.criterion-popup-text {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.6;
}
.criterion-popup-close {
  display: block;
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: none;
  border-radius: var(--sp-3);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: var(--font-heading);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}
.criterion-popup-close:active {
  background: var(--bg-surface);
}

/* Reject modal mandatory comment additions */
.reject-modal-subtitle {
  font-size: var(--fs-caption);
  color: var(--danger);
  text-align: center;
  margin-bottom: var(--sp-3);
  font-weight: var(--fw-medium);
}
.reject-modal-char-counter {
  text-align: right;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}
.reject-modal-btn--confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.reject-modal-input.error {
  border-color: var(--danger);
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Vacancy tooltip (for truncated title) */
.vacancy-tooltip {
  position: fixed;
  top: 52px;
  left: var(--sp-4);
  right: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  white-space: normal;
  line-height: 1.4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.vacancy-tooltip.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Candidate name/position tooltip */
.candidate-tooltip {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  white-space: normal;
  line-height: 1.4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.candidate-tooltip.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.candidate-tooltip-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-1);
}

/* Back link (legacy, used in error states) */
.back-link {
  display: block;
  text-align: center;
  padding: var(--sp-3);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-body);
  transition: color 0.15s;
}
.back-link:hover { color: var(--text-primary); }

/* ============================================================
   Top Bar (brand + version + online status + avatar)
   ============================================================ */
.top-bar {
  background: #0A0A0A;
  padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-4) var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.top-bar-brand {
  font-family: 'Plus Jakarta Sans', var(--font-heading);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.5px;
  text-decoration: none;
}
/* BRAND-01 (Phase 55): light-theme brand override — #065F46 на #FFFFFF = 7.2:1 (AA PASS) */
html.light-theme .top-bar-brand { color: #065F46; }
@media (prefers-color-scheme: light) {
  .top-bar-brand { color: #065F46; }
}

.top-bar-version {
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}

.top-bar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.top-bar-actions {
  display: flex;
  align-items: center;
}

.top-bar-chat-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 20px;
  transition: background-color 0.15s;
}
.top-bar-chat-link:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* Global unread badge (data-chat-badge="global", chat.js). Scoped to this
   container -- .chat-msg-role-badge elsewhere is a role TAG (ЛПР/Админ next
   to a message author), not a count; overriding it globally would break
   that. Here it becomes a small notification dot at the icon's corner. */
.top-bar-chat-link .chat-msg-role-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  border: 2px solid #0A0A0A;
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: none;
  letter-spacing: normal;
}
html.light-theme .top-bar-chat-link .chat-msg-role-badge {
  border-color: #FFFFFF;
}
@media (prefers-color-scheme: light) {
  html:not(.dark-theme) .top-bar-chat-link .chat-msg-role-badge {
    border-color: #FFFFFF;
  }
}

.top-bar-avatar {
  /* BUG-LPR-04: increased from 34×34px to 44×44px (WCAG 2.5.5 min touch target) */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

/* Online status dot */
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.online-dot.online {
  background: var(--accent);
  animation: pulse-online 3s ease-in-out infinite;
}

.online-dot.offline {
  background: var(--danger);
  animation: none;
}

.online-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
}

.online-dot.online::after {
  border-color: var(--accent);
  animation: pulse-ring 3s ease-in-out infinite;
}

@keyframes pulse-online {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulse-ring {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* ============================================================
   Resume Button (full-width, bottom of card)
   ============================================================ */
.resume-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--sp-3);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.resume-btn:first-of-type { margin-top: var(--sp-4); }

.resume-btn:active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}

.resume-btn-icon {
  position: relative;
  font-size: 28px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  color: var(--accent);
}
.resume-btn--ai .resume-btn-icon { color: #A855F7; }
.resume-btn--secondary .resume-btn-icon { color: var(--info); }

.resume-btn-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.resume-btn-text {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: block;
  letter-spacing: -0.02em;
}

.resume-btn-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.resume-btn-arrow {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ============================================================
   Reject Modal — mic inside textarea
   ============================================================ */
.reject-modal-input-wrap {
  position: relative;
}

.reject-modal-input-wrap .reject-modal-input {
  padding-right: 52px;
}

.reject-modal-input-wrap .reject-modal-btn--mic {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  font-size: 18px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reject-modal-input-wrap .reject-modal-btn--mic.recording {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: mic-pulse 1s ease-in-out infinite;
}

/* ============================================================
   Pros / Cons (strengths & risks) block
   ============================================================ */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.pros-cons-col {
  background: var(--bg-elevated);
  border-radius: 12px;
  padding: var(--sp-3);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pros-cons-title {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.pros-cons-title--pro { color: #10B981; }
.pros-cons-title--con { color: #F97316; }

.pros-cons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros-cons-list li {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 2px 0;
  padding-left: var(--sp-4);
  position: relative;
}

.pros-cons-list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--fw-bold);
  font-size: 11px;
}

.pros-cons-list--pro li::before {
  content: '+';
  color: #10B981;
}

.pros-cons-list--con li::before {
  content: '\2013';
  color: #F97316;
}

.pros-cons-empty {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* ============================================================
   Resume page — expanded card, back-full button, criterion desc
   ============================================================ */
.resume-page-card {
  touch-action: auto;
}

.action-btn--back-full {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  min-height: 48px;
}

.action-btn--back-full:active {
  background: var(--bg-surface);
}

.resume-btn--hh {
  border-color: var(--info);
}

.resume-btn--hh:active {
  background: rgba(var(--info-rgb), 0.12);
  border-color: var(--info);
}

/* Criterion expanded view (resume page) */
.criterion--expanded {
  flex-direction: column;
  align-items: stretch;
}

.criterion--expanded .criterion-top-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.criterion-description {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--sp-2);
  padding-left: 40px;
}

.criteria-section--expanded .criterion {
  cursor: default;
}

.criteria-section--expanded .criterion-arrow {
  display: none;
}

/* ============================================================
   Mobile QA fixes
   ============================================================ */

/* Reject modal safe area bottom */
.reject-modal {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Share button — blue/info variant */
.resume-btn--secondary {
  background: linear-gradient(135deg, rgba(var(--info-rgb), 0.08), rgba(var(--info-rgb), 0.02));
  border-color: rgba(var(--info-rgb), 0.2);
}
.resume-btn--secondary:active {
  background: rgba(var(--info-rgb), 0.12);
  border-color: var(--info);
}
.resume-btn--secondary .resume-btn-arrow { color: var(--info); }

/* Interview invite button — warm amber variant */
.resume-btn--invite {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(234, 179, 8, 0.03));
  border-color: rgba(234, 179, 8, 0.25);
}
.resume-btn--invite:active {
  background: rgba(234, 179, 8, 0.15);
  border-color: var(--warning);
}
.resume-btn--invite .resume-btn-icon { color: var(--warning); }
.resume-btn--invite .resume-btn-arrow { color: var(--warning); }

/* Neutral button — muted gray variant */
.resume-btn--neutral {
  background: var(--bg-elevated);
  border-color: var(--border);
}
.resume-btn--neutral:active {
  background: var(--bg-surface);
  border-color: rgba(255, 255, 255, 0.12);
}
.resume-btn--neutral .resume-btn-icon { color: var(--text-muted); }
.resume-btn--neutral .resume-btn-arrow { color: var(--text-muted); }

/* AI chat button — purple variant */
.resume-btn--ai {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.03));
  border-color: rgba(168, 85, 247, 0.25);
}
.resume-btn--ai:active {
  background: rgba(168, 85, 247, 0.15);
  border-color: #A855F7;
}
.resume-btn--ai .resume-btn-arrow { color: #A855F7; }
.resume-btn-icon--ai {
  position: relative;
  color: #A855F7;
}
.resume-btn-ai-spark {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 12px;
  line-height: 1;
  animation: ai-spark-pulse 2s ease-in-out infinite;
}
@keyframes ai-spark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Discuss button — green/team-chat variant (Phase 12.2) */
.resume-btn--discuss {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.03));
  border-color: rgba(34, 197, 94, 0.25);
}
.resume-btn--discuss:active {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22C55E;
}
.resume-btn--discuss .resume-btn-icon { color: #22C55E; }
.resume-btn--discuss .resume-btn-arrow { color: #22C55E; }
.resume-btn-icon--discuss { color: #22C55E; }
.resume-btn--discuss:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   AI Chat Modal
   ============================================================ */
.ai-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.ai-chat-overlay.active {
  display: flex;
}

.ai-chat-modal {
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-chat-overlay.active .ai-chat-modal {
  transform: translateY(0);
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ai-chat-header-icon {
  font-size: 20px;
  line-height: 1;
}
.ai-chat-header-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #A855F7, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}
.ai-chat-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-chat-close:active { background: var(--bg-surface); }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 200px;
  max-height: 50vh;
}

.ai-chat-msg {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  animation: ai-msg-in 0.3s ease-out;
}
@keyframes ai-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-chat-msg--user {
  justify-content: flex-end;
}

.ai-chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(56, 189, 248, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.ai-chat-msg-bubble {
  padding: var(--sp-3);
  border-radius: 14px;
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 85%;
}

.ai-chat-msg--ai .ai-chat-msg-bubble {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}

.ai-chat-msg--user .ai-chat-msg-bubble {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(56, 189, 248, 0.15));
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

.ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.ai-chat-suggestion {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: #A855F7;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.ai-chat-suggestion:active {
  background: rgba(168, 85, 247, 0.2);
}

.ai-chat-input-wrap {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.ai-chat-input {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  padding: 0 var(--sp-4);
  outline: none;
  transition: border-color 0.2s;
}
.ai-chat-input:focus {
  border-color: #A855F7;
}
.ai-chat-input::placeholder {
  color: var(--text-muted);
}

.ai-chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #A855F7, #7C3AED);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ai-chat-send:active {
  transform: scale(0.92);
}
.ai-chat-send:hover {
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.ai-chat-mic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ai-chat-mic:active { transform: scale(0.92); }
.ai-chat-mic.recording {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: mic-pulse 1s ease-in-out infinite;
}

/* ============================================================
   Full Resume Page (rv- prefix = resume-view)
   ============================================================ */

/* --- Section container --- */
.rv-resume-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}

/* --- Section title --- */
.rv-resume-section-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.02em;
}

.rv-resume-section-icon {
  font-size: 18px;
  line-height: 1;
}

.rv-resume-section-badge {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: 8px;
}

/* --- Header section --- */
.rv-resume-header {
  padding: var(--sp-5) var(--sp-4);
}

.rv-resume-header-top {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.rv-resume-photo {
  width: 72px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--bg-elevated);
  transition: opacity 0.15s;
}
.rv-resume-photo:hover { opacity: 0.85; }

.rv-resume-photo-placeholder {
  width: 72px;
  height: 88px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  border: 2px solid var(--border);
}

.rv-resume-header-info {
  flex: 1;
  min-width: 0;
}

.rv-resume-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}

.rv-resume-position {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}

.rv-resume-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.rv-resume-meta-item {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.rv-resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: center;
}

.rv-resume-ai-badge {
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.rv-resume-ai-badge--green  { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.rv-resume-ai-badge--lime   { background: rgba(132, 204, 22, 0.15); color: #84CC16; }
.rv-resume-ai-badge--yellow { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
.rv-resume-ai-badge--orange { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.rv-resume-ai-badge--red    { background: rgba(239, 68, 68, 0.15); color: #EF4444; }

/* --- Experience items --- */
.rv-experience-item {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.rv-experience-item:last-child {
  margin-bottom: 0;
}

.rv-exp-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12px;
  flex-shrink: 0;
  padding-top: 4px;
}

.rv-exp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.rv-exp-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  margin-top: var(--sp-2);
}

.rv-exp-content {
  flex: 1;
  min-width: 0;
}

.rv-exp-dates {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-1);
  gap: var(--sp-2);
}

.rv-exp-period {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.rv-exp-duration {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rv-exp-position {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 2px;
}

.rv-exp-company {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.rv-exp-company--link {
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
}

.rv-exp-company--link:active {
  text-decoration: underline;
}

.rv-exp-desc {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.rv-exp-desc br {
  display: block;
  content: "";
  margin-top: var(--sp-1);
}

/* Sub-headings inside experience description (Обязанности, Результаты) */
.rv-exp-subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--glass-border);
  letter-spacing: -0.01em;
}
.rv-exp-subtitle:first-child {
  margin-top: 0;
}

/* --- Education / Courses items --- */
.rv-edu-item {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  align-items: flex-start;
}

.rv-edu-item:last-child {
  margin-bottom: 0;
}

.rv-edu-year {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--accent);
  min-width: 42px;
  flex-shrink: 0;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.rv-edu-content {
  flex: 1;
  min-width: 0;
}

.rv-edu-level {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.3;
}

.rv-edu-faculty {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.rv-edu-university {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Skills --- */
.rv-skills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rv-skill-tag {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--info);
  background: rgba(var(--info-rgb), 0.1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 8px;
  border: 1px solid rgba(var(--info-rgb), 0.15);
}

/* --- Languages --- */
.rv-lang-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.rv-lang-row:last-child {
  border-bottom: none;
}

.rv-lang-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.rv-lang-level {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Additional info rows --- */
.rv-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--sp-3);
}

.rv-info-row:last-child {
  border-bottom: none;
}

.rv-info-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  flex-shrink: 0;
}

.rv-info-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-align: right;
}

.rv-info-about {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.rv-info-about-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-2);
}

.rv-info-about-text {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.rv-info-about-text br {
  display: block;
  content: "";
  margin-top: var(--sp-1);
}

/* --- External link card --- */
.rv-ext-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  margin-bottom: var(--sp-3);
  transition: background 0.15s, border-color 0.15s;
}

.rv-ext-link:active {
  background: var(--bg-elevated);
  border-color: var(--info);
}

.rv-ext-link-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--info-rgb), 0.1);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rv-ext-link-text {
  flex: 1;
  min-width: 0;
}

.rv-ext-link-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: block;
  letter-spacing: -0.02em;
}

.rv-ext-link-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.rv-ext-link-arrow {
  color: var(--info);
  flex-shrink: 0;
}

/* ====== About modal ====== */
.about-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.about-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.about-modal {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 1.5rem;
  width: 90%;
  max-width: 380px;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-modal-overlay.active .about-modal {
  transform: scale(1);
}
.about-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.about-modal-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-align: center;
  letter-spacing: -0.02em;
}
.about-modal-version {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.about-modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1rem;
}
.about-modal-section {
  margin-bottom: 0.75rem;
}
.about-modal-label {
  font-size: 12px;
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.about-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.about-modal-list li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 3px 0;
  padding-left: 1rem;
  position: relative;
}
.about-modal-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}
.about-modal-tech {
  font-size: 13px;
  color: var(--text-secondary);
}
.about-modal-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}
.about-modal-footer {
  text-align: center;
}
.about-modal-company {
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}
.about-modal-email {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

/* ====== Settings modal ====== */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.settings-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.settings-modal {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 1.5rem;
  width: 90%;
  max-width: 380px;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-modal-overlay.active .settings-modal {
  transform: scale(1);
}
.settings-modal-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-row--disabled {
  opacity: 0.45;
  pointer-events: none;
}
.settings-row--unavailable {
  opacity: 0.6;
}
.settings-row-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.settings-row-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.settings-row-label {
  font-size: 14px;
  font-weight: var(--fw-semi);
  color: var(--text-primary);
}
.settings-row-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}
/* Toggle switch */
.settings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--accent);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(20px);
  background: #fff;
}
.settings-toggle input:disabled + .settings-toggle-slider {
  cursor: not-allowed;
  opacity: 0.55;
}
.settings-select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: var(--fw-semi);
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  min-width: 52px;
}
.settings-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- Phase 17-02: LPR-1 cascade share button + Web Share fallback modal -- */
.action-btn--share {
    color: var(--accent, #2563eb);
}
.share-fallback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 4vw, 24px);
    z-index: 10000;
}
.share-fallback-modal {
    background:
        linear-gradient(135deg, rgba(var(--info-rgb), 0.10), rgba(var(--accent-rgb), 0.05)),
        var(--bg-card);
    color: var(--text-primary);
    border: 1px solid rgba(var(--info-rgb), 0.26);
    border-left: 3px solid var(--info);
    border-radius: 8px;
    padding: clamp(16px, 4.8vw, 24px);
    width: clamp(288px, calc(100vw - 32px), 420px);
    max-width: calc(100vw - 16px);
    max-height: min(82dvh, 640px);
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.share-fallback-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 1.25;
}
.share-fallback-link input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
}
.share-fallback-link input:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.14);
}
.share-fallback-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.share-btn {
    min-height: 44px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
.share-btn:hover {
    background: rgba(var(--info-rgb), 0.12);
    border-color: rgba(var(--info-rgb), 0.34);
}
.share-btn:active {
    transform: scale(0.98);
}
.share-btn:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}
.share-btn--cancel {
    margin-top: var(--sp-1);
    background: var(--accent);
    color: #04110C;
    border-color: transparent;
    font-weight: var(--fw-bold);
}
.share-btn--cancel:hover {
    background: rgba(var(--accent-rgb), 0.86);
    border-color: transparent;
}
@media (max-width: 520px) {
    .share-fallback-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .share-fallback-modal {
        width: min(420px, calc(100vw - 16px));
        max-width: none;
        margin-bottom: max(8px, var(--safe-bottom));
        padding: clamp(16px, 5vw, 24px);
        border-right: 0;
        border-bottom: 0;
        border-left-width: 0;
        border-top: 3px solid var(--info);
        border-radius: 8px;
    }
}
@media (max-width: 360px) {
    .share-fallback-actions {
        grid-template-columns: 1fr;
    }
}
.share-toast {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%) translateY(16px);
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10001;
}
.share-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.share-confirm-open {
    overflow: hidden;
}

.share-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 4vw, 24px);
    background: rgba(0, 0, 0, 0.62);
}

.share-confirm-modal {
    width: clamp(288px, calc(100vw - 32px), 420px);
    max-width: calc(100vw - 16px);
    max-height: min(82dvh, 640px);
    overflow-y: auto;
    padding: clamp(16px, 4.8vw, 24px);
    color: var(--text-primary);
    background:
        linear-gradient(135deg, rgba(var(--info-rgb), 0.12), rgba(var(--accent-rgb), 0.05)),
        var(--bg-card);
    border: 1px solid rgba(var(--info-rgb), 0.32);
    border-left: 3px solid var(--info);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
}

.share-confirm-modal__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-3);
    color: var(--info);
    background: rgba(var(--info-rgb), 0.12);
    border: 1px solid rgba(var(--info-rgb), 0.28);
    border-radius: 50%;
}

.share-confirm-modal__eyebrow {
    margin-bottom: var(--sp-1);
    color: var(--info);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.share-confirm-modal__title {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.25;
    font-weight: var(--fw-bold);
}

.share-confirm-modal__text {
    margin: var(--sp-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: 1.45;
}

.share-confirm-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.share-confirm-modal__btn {
    min-height: 44px;
    padding: 0 var(--sp-4);
    border-radius: 7px;
    border: 1px solid transparent;
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}

.share-confirm-modal__btn:active {
    transform: scale(0.98);
}

.share-confirm-modal__btn:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
}

.share-confirm-modal__btn:disabled {
    cursor: wait;
    opacity: 0.6;
}

.share-confirm-modal__btn--cancel {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border);
}

.share-confirm-modal__btn--confirm {
    color: #04110C;
    background: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.7);
}

@media (max-width: 520px) {
    .share-confirm-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .share-confirm-modal {
        width: min(420px, calc(100vw - 16px));
        max-width: none;
        margin-bottom: max(8px, var(--safe-bottom));
        padding: clamp(16px, 5vw, 24px);
        border-right: 0;
        border-bottom: 0;
        border-left-width: 0;
        border-top: 3px solid var(--info);
        border-radius: 8px;
    }
}
@media (max-width: 360px) {
    .share-confirm-modal__actions {
        grid-template-columns: 1fr;
    }
}

/* Phase 21 D-03: degraded-state hint shown above action-bar when AI analysis is absent. */
.degraded-hint {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    text-align: center;
    padding: var(--sp-3) var(--sp-4);
    margin: 0;
}

/* ============================================================
   Phase 26: Summary screen
   ============================================================ */
.summary-screen { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-4); max-width: 720px; margin: 0 auto; }
.summary-header { padding: 0 var(--sp-2); }
.summary-title { font-family: var(--font-heading); font-size: 18px; font-weight: var(--fw-medium); color: var(--text-primary); margin: 0 0 var(--sp-2); line-height: 1.2; }
.summary-subtitle { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; line-height: 1.5; }

/* Toolbar (sticky top) */
.summary-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: var(--bg-card); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.summary-toolbar__counter { font-size: var(--fs-micro); color: var(--text-muted); font-weight: var(--fw-medium); }
.summary-toolbar__counter--active { color: var(--text-primary); font-weight: var(--fw-bold); }
.summary-toolbar__toggle { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: var(--fs-caption); cursor: pointer; }
.summary-toolbar__toggle:hover { background: var(--bg-elevated); }

.summary-ai-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(168, 85, 247, 0.08)); border: 1px solid rgba(16, 185, 129, 0.28); border-left: 3px solid var(--accent); border-radius: 8px; }
.summary-ai-panel__mark { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FCD34D; background: rgba(252, 211, 77, 0.12); box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.22); flex-shrink: 0; }
.summary-ai-panel__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.summary-ai-panel__eyebrow { color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0; }
.summary-ai-panel__title { margin: 0; color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.25; }
.summary-ai-panel__text { margin: 0; color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.35; }
.summary-ai-panel__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; min-height: 24px; }
.summary-ai-panel__avatars { display: flex; align-items: center; min-width: 0; }
.summary-ai-panel__avatar { position: relative; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: -7px; color: var(--text-secondary); background: var(--bg-elevated); border: 2px solid var(--bg-card); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.summary-ai-panel__avatar:first-child { margin-left: 0; }
.summary-ai-panel__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.summary-ai-panel__avatar-rank { position: absolute; right: -6px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #04110C; background: var(--accent); border: 1px solid var(--bg-card); font-size: 8px; font-weight: var(--fw-bold); line-height: 1; }
.summary-ai-panel__avatar--more { color: var(--text-primary); background: rgba(16, 185, 129, 0.18); }
.summary-ai-panel__hint { color: var(--text-muted); font-size: var(--fs-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-ai-panel__button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(16, 185, 129, 0.45); border-radius: 7px; background: rgba(16, 185, 129, 0.18); color: var(--text-primary); font-size: var(--fs-caption); font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; }
.summary-ai-panel__button:hover { background: rgba(16, 185, 129, 0.26); }
.summary-ai-panel__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* List + row */
.summary-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border-radius: 12px; overflow: hidden; }
.summary-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); transition: background 120ms ease; }
.summary-row:last-child { border-bottom: none; }
.summary-row:hover { background: var(--bg-elevated); }
.summary-row__label { display: flex; flex: 1; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: 44px; }
.summary-row__checkbox { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.summary-row__checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.summary-row__photo { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; }
.summary-row__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.summary-row__photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 50%; overflow: hidden; }
.summary-row__rank { position: absolute; right: -7px; bottom: -5px; min-width: 22px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #04110C; background: var(--accent); border: 2px solid var(--bg-card); font-size: 10px; font-weight: var(--fw-bold); line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24); }
.summary-row__info { flex: 1; min-width: 0; }
.summary-row__name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-row__meta { display: flex; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: var(--sp-1); }
.summary-row__rating { font-weight: var(--fw-bold); color: var(--text-primary); }
.summary-row__criteria { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.summary-row__chip { display: inline-block; padding: 2px 8px; border-radius: 10px; background: rgba(16, 185, 129, 0.12); color: var(--accent); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.summary-row__open { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-2); color: var(--text-muted); border-radius: 6px; flex-shrink: 0; }
.summary-row__open:hover { color: var(--text-primary); background: var(--bg-elevated); }
@media (max-width: 430px) {
  .summary-ai-panel { grid-template-columns: auto 1fr; align-items: start; }
  .summary-ai-panel__button { grid-column: 1 / -1; width: 100%; }
  .summary-ai-panel__hint { white-space: normal; }
  .summary-row__open { min-width: 40px; min-height: 40px; }
}

/* Submit bar (sticky bottom) */
.summary-submit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0)); background: var(--bg-card); border-top: 1px solid var(--border); }
.summary-submit-bar__cancel { background: transparent; color: var(--text-secondary); border: none; padding: 12px 16px; font-size: var(--fs-body); cursor: pointer; }
.summary-submit-bar__cta { flex: 1; background: var(--accent); color: #fff; border: none; padding: 12px 16px; font-size: var(--fs-body); font-weight: var(--fw-bold); border-radius: 8px; cursor: pointer; }
.summary-submit-bar__cta:disabled, .summary-submit-bar__cta[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
@media (min-width: 720px) { .summary-submit-bar__cta { max-width: 480px; margin-left: auto; } }

/* SUMM-02 (Phase 55-04): client-side pagination block between summary-list and summary-submit-bar */
.summary-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-4); background: var(--bg-card); border-top: 1px solid var(--border); }
.summary-pagination__prev, .summary-pagination__next { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: var(--sp-2) var(--sp-3); min-height: 44px; font-size: var(--fs-caption); cursor: pointer; }
.summary-pagination__prev:disabled, .summary-pagination__next:disabled { opacity: 0.35; cursor: not-allowed; }
.summary-pagination__prev:not(:disabled):hover, .summary-pagination__next:not(:disabled):hover { background: var(--bg-elevated); }
.summary-pagination__info { font-size: var(--fs-caption); color: var(--text-muted); font-weight: var(--fw-medium); }

/* Confirm modal */
.summary-confirm-modal[hidden] { display: none; }
.summary-confirm-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.summary-confirm-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.summary-confirm-modal__dialog { position: relative; background: var(--bg-card); border-radius: 12px; padding: var(--sp-5); max-width: 400px; width: calc(100% - 32px); }
.summary-confirm-modal__title { font-family: var(--font-heading); font-size: 18px; font-weight: var(--fw-bold); margin: 0 0 var(--sp-4); color: var(--text-primary); }
.summary-confirm-modal__line { font-size: var(--fs-body); color: var(--text-primary); margin: 0 0 var(--sp-2); }
.summary-confirm-modal__line--danger { color: var(--danger); }
.summary-delivery-options { margin: var(--sp-4) 0; padding: 0; border: 0; display: grid; gap: var(--sp-2); }
.summary-delivery-options[hidden] { display: none; }
.summary-delivery-options__title { margin: 0 0 var(--sp-2); padding: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-secondary); }
.summary-delivery-option { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); cursor: pointer; }
.summary-delivery-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.summary-delivery-option--disabled { opacity: 0.5; cursor: not-allowed; }
.summary-delivery-option input { flex: 0 0 auto; margin-top: 3px; }
.summary-delivery-option__body { display: grid; gap: 3px; min-width: 0; }
.summary-delivery-option__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-primary); }
.summary-delivery-option__text { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.35; }
.summary-confirm-modal__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); justify-content: flex-end; }
.summary-confirm-modal__cancel { background: var(--bg-elevated); color: var(--text-secondary); border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
.summary-confirm-modal__confirm { background: var(--accent); color: #fff; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: var(--fw-bold); }
.summary-confirm-modal__confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error state (invite stage not configured) */
.summary-error { text-align: center; padding: var(--sp-5); }
.summary-error__icon { color: var(--danger); margin-bottom: var(--sp-3); }
.summary-error__title { font-family: var(--font-heading); font-size: 18px; color: var(--text-primary); margin: 0 0 var(--sp-2); }
.summary-error__body { font-size: var(--fs-caption); color: var(--text-muted); margin: 0 0 var(--sp-4); }
.summary-error__back { display: inline-block; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Phase 26-09 (D-10 gap): temp-links modal (mixed C2 / Сценарий D) */
/* Phase 33-07: added per-candidate error section (partial failure UX, T-33-09) */
.summary-temp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.summary-temp-modal__box { background: var(--bg-card, #fff); color: var(--text-primary, #111); max-width: 560px; width: calc(100% - 32px); max-height: 86vh; overflow-y: auto; border-radius: 12px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.summary-temp-modal__hint { color: var(--text-muted, #666); font-size: 13px; margin: 6px 0 14px; }
.summary-temp-modal__list { list-style: none; padding: 0; margin: 0 0 16px; }
.summary-temp-modal__list li { padding: 10px 0; border-bottom: 1px solid var(--border, #eee); }
.summary-temp-modal__list li:last-child { border-bottom: 0; }
.summary-temp-modal__name { font-weight: 600; margin-bottom: 6px; }
.summary-temp-modal__row { display: flex; gap: 8px; align-items: center; }
.summary-temp-modal__row input { flex: 1; padding: 8px 10px; border: 1px solid var(--border, #ddd); border-radius: 6px; font-size: 12px; background: var(--bg-elevated, #fafafa); color: var(--text-primary, #111); }
.summary-temp-modal__copy, .summary-temp-modal__done { padding: 8px 14px; border: 0; border-radius: 6px; cursor: pointer; background: var(--accent, #0a66c2); color: #fff; font-weight: 600; }
.summary-temp-modal__done { width: 100%; padding: 12px; margin-top: 6px; }
/* Phase 33-07: per-candidate error section */
.summary-temp-modal__errors { margin: 4px 0 12px; padding: 12px 14px; background: var(--bg-elevated, #fff5f5); border-left: 3px solid var(--error, #d93025); border-radius: 0 6px 6px 0; }
.summary-temp-modal__errors-title { font-size: 13px; font-weight: 600; color: var(--error, #d93025); margin: 0 0 8px; }
.summary-temp-modal__errors-list { list-style: none; padding: 0; margin: 0; }
.summary-temp-modal__errors-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--border, #fcc); }
.summary-temp-modal__errors-item:last-child { border-bottom: 0; }
.summary-temp-modal__errors-name { font-weight: 600; font-size: 13px; }
.summary-temp-modal__errors-reason { font-size: 12px; color: var(--text-muted, #888); }
@media (max-width: 480px) {
  .summary-temp-modal__errors { padding: 10px 10px; }
  .summary-temp-modal__errors-item { padding: 8px 0; }
}

/* ====== PWA Install Banner (Phase 44 D-05/D-06) ====== */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  transform: translateY(100%);
  transition: transform 300ms ease-out;
}
.pwa-install-banner.is-visible {
  transform: translateY(0);
}
.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.pwa-install-icon {
  border-radius: 8px;
  flex-shrink: 0;
}
.pwa-install-text {
  flex: 1;
  min-width: 0;
}
.pwa-install-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.pwa-install-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
}
.pwa-install-cta {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pwa-install-cta:active { transform: scale(0.96); }
.pwa-install-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* --- Push onboarding banner (soft opt-in / iOS install hint) --- */
.push-onboard-banner {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 24px);
  max-width: 480px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  animation: push-onboard-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes push-onboard-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.push-onboard-banner__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.push-onboard-banner__text {
  flex: 1;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--text-secondary);
}

.push-onboard-banner__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.push-onboard-banner__btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.push-onboard-banner__btn:active {
  filter: brightness(0.92);
}

.push-onboard-banner__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

/* ── Phase 59 — Interview Scheduling ────────────────────────────────────── */

/* Interview panel container — OUTSIDE .vd-feed (Pitfall 7) */
.vd-interview-panel {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Active slot summary card */
.vd-interview-slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
}

.vd-interview-slot-card__info {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-bottom: var(--sp-1);
}

.vd-interview-slot-card__meta {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.vd-interview-slot-card__actions {
  display: flex;
  gap: var(--sp-2);
}

/* Collapsible form */
.vd-interview-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4);
  margin-top: var(--sp-2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.vd-interview-form.open {
  max-height: 520px;
  opacity: 1;
}

/* Form field label */
.vd-interview-label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
  margin-top: var(--sp-3);
}

.vd-interview-label:first-child {
  margin-top: 0;
}

/* Input / select — reuse .vd-search-input pattern */
.vd-interview-input,
.vd-interview-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  outline: none;
}

.vd-interview-input:focus,
.vd-interview-select:focus {
  border-color: var(--accent);
}

.vd-interview-input.error {
  border-color: var(--danger);
}

.vd-interview-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: 36px;
  cursor: pointer;
}

/* Radio group */
.vd-interview-radio-group {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.vd-interview-radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

/* Location conditional wrap */
.vd-interview-location-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

.vd-interview-location-wrap.visible {
  max-height: 80px;
}

/* Phase 81 (VDEF-02): channel conditional wrap — mirrors location-wrap collapse behavior */
.vd-interview-channel-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}

.vd-interview-channel-wrap.visible {
  max-height: 80px;
}

/* Inline validation error (IC-05) */
.vd-interview-field-error {
  color: var(--danger);
  font-size: var(--fs-caption);
  margin-top: var(--sp-1);
  display: none;
}

.vd-interview-field-error.visible {
  display: block;
}

/* Form action buttons */
.vd-interview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}

.vd-interview-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.vd-interview-btn--primary {
  background: var(--accent);
  color: #fff;
  margin-bottom: var(--sp-2);
}

.vd-interview-btn--primary:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.85);
}

.vd-interview-btn--secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.vd-interview-btn--secondary:hover:not(:disabled) {
  background: var(--bg-elevated);
}

.vd-interview-btn--danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.vd-interview-btn--danger:hover:not(:disabled) {
  background: rgba(var(--danger-rgb), 0.08);
}

.vd-interview-btn--outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.vd-interview-btn--outline:hover:not(:disabled) {
  background: var(--bg-elevated);
}

/* CTA: «Назначить собеседование» (no active slot) */
.vd-interview-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s;
}

.vd-interview-cta:hover {
  background: rgba(var(--accent-rgb), 0.85);
}

/* Feed item — interview event (eventType:3) */
.comment-item--interview {
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.comment-item--interview .interview-badge {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* ============================================================
   Phase 89: Team Chat (chat-room-* / chat-msg-*)
   Замена Rocket.Chat. Донор верстки -- .ai-chat-* (см. блок "AI Chat Modal"
   выше) -- те же токены темы, СВОИ классы (D-41: ИИ-ассистент остаётся
   нетронутым на тех же страницах, ai-chat-* правила выше НЕ изменялись).
   ============================================================ */
.chat-room-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chat-room-offline-banner {
  background: var(--warning);
  color: #1a1a1a;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
}

.chat-room-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 200px;
}

.chat-room-new-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-align: center;
  margin: var(--sp-2) 0;
}
.chat-room-new-divider::before,
.chat-room-new-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 85%;
}
.chat-msg--own {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-msg-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-caption);
}

.chat-msg-author {
  font-weight: 600;
  color: var(--text-primary);
}

.chat-msg-role-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px var(--sp-2);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Gap-closure 2026-08-14 (live UAT): the flat muted-gray default above read
   as almost invisible next to the author name. Per-role tint reuses the
   exact palette already proven in the admin panel's .admin-badge--* (see
   admin.css) so role coloring stays consistent across the app instead of
   inventing a second scheme. .chat-msg-role-badge is also repurposed as a
   plain notification-count dot under .top-bar-chat-link (scoped override
   above) -- these modifiers only apply where the template/JS adds them
   (message rows), so that context is unaffected. */
.chat-msg-role-badge--superadmin {
  background: rgba(251, 146, 60, 0.15);
  color: #FB923C;
  border-color: transparent;
}
.chat-msg-role-badge--admin {
  background: rgba(34, 197, 94, 0.15);
  color: #4ADE80;
  border-color: transparent;
}
.chat-msg-role-badge--lpr {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border-color: transparent;
}
.chat-msg-role-badge--lpr1 {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border-color: rgba(168, 85, 247, 0.3);
}

/* Gap-closure 2026-08-13: data-chat-badge-candidate/-tab count badges
   (_vd_candidate_panel.html, _vacancy_candidate_row.html, vacancy_detail.html's
   "Чат" tab label) had zero CSS too -- rendered as raw concatenated digits
   ("Чат1"). Small red pill, same accent color as the header's notification
   dot so every unread indicator in the app reads consistently. Inline pill
   by default (tab label / candidate row, both alongside other .vd-*-badge
   pills); .resume-btn-icon context overrides to an icon-corner dot instead
   (same "Обсудить" pattern the header icon already uses). */
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.resume-btn-icon .chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  margin-left: 0;
  border: 2px solid var(--bg-card);
}

.chat-msg-time {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: auto;
}
.chat-msg--own .chat-msg-time {
  margin-left: 0;
}

.chat-msg-body {
  padding: var(--sp-3);
  border-radius: 14px;
  font-size: var(--fs-body);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}
.chat-msg--own .chat-msg-body {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(56, 189, 248, 0.15));
  color: var(--text-primary);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}

/* Phase 89.1, Plan 15 (D-18/D-20): тумбстоун -- открытая вкладка отображает
   уже случившееся на сервере удаление сообщения без перезагрузки. Строка
   остаётся на месте истории/пагинации (не удаляется из DOM), тело
   заменяется затемнённым курсивом, отличным от обычного текста сообщения. */
.chat-msg--removed .chat-msg-body {
  font-style: italic;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Gap-closure 2026-08-14 (Plan 89-15 живой UAT, сценарий J-33): chat.js строит
   в теле сообщения <a> (_renderBody -> автолинк), но CSS под него не было
   ВООБЩЕ -- ссылка получала браузерный дефолт #0000EE. Замер пикселями на
   реальной разметке: тёмная тема давала 1.53:1 в чужом сообщении и 1.34:1 в
   своём (тёмно-синий по бирюзовому градиенту выше) при пороге WCAG AA 4.5:1.
   Светлая тема была в порядке (8.58/8.32) -- поэтому дефект и дожил досюда.
   Тот же класс, что и прочие 13 багов фазы: разметка отгружена, стилей нет. */
.chat-msg-body a {
  color: var(--info);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Наведение не трогает цвет намеренно: --accent на светлой теме даёт 3.40:1,
   то есть чинили бы одну проблему контраста, заводя вторую. Утолщение линии
   даёт отклик, не меняя читаемость. */
.chat-msg-body a:hover {
  text-decoration-thickness: 2px;
}
/* Светлая тема: --info там #0284C7 и даёт лишь 3.78:1 на #F1F5F9 -- ниже
   порога. Явный более тёмный #075985 даёт 6.75:1 (чужое) и 6.22:1 (своё);
   промежуточный #0369A1 давал 5.42/4.94 -- проходит, но без запаса, а телефон
   тут основная поверхность. По образцу прочих светлотемных переопределений в
   этом файле (#005C3A у .login-btn, #065F46 у .stat-*).
   ОБА правила ниже обязаны нести ОДИН цвет: html.light-theme -- ручной выбор
   темы, media-query -- системный. Правка одного из них в отрыве от второго
   разводит темы по разным цветам (чуть не наступили при этой самой правке). */
html.light-theme .chat-msg-body a {
  color: #075985;
}
@media (prefers-color-scheme: light) {
  html:not(.dark-theme) .chat-msg-body a {
    color: #075985;
  }
}

.chat-msg-edited {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Gap-closure 2026-08-14 (Plan 89.1-17, D-25 CSS-completeness guard):
   chat-msg--editing переключался chat.js::_beginEdit (двойной клик по
   своему сообщению) без единого CSS-правила -- тело скрывалось инлайн-
   стилем, но сама строка визуально ничем не отличалась от обычной, активный
   редактор было легко потерять взглядом в плотной ленте. Лёгкая подсветка
   всей строки (а не только textarea, у которой уже своя коробочная модель
   выше по каскаду) делает состояние заметным без сдвига раскладки. */
.chat-msg--editing {
  background: var(--bg-elevated);
  border-radius: 14px;
  padding: 2px var(--sp-2);
}

/* Gap-closure 2026-08-14 (Plan 89-15 live UAT, scenario D): edit-mode markup
   shipped with the SEND button's circular 44px class (.chat-room-send, meant
   for the icon-only composer button) -- "Сохранить" text wrapped inside a
   green circle. .chat-msg-edit-wrap/.chat-msg-edit-cancel had zero CSS at
   all. Own-only feature (dblclick on .chat-msg--own), so actions align right
   to match the bubble's own-message alignment. */
.chat-msg-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

/* WR-12 (Phase 89.1, Plan 12): базовая коробочная модель редактора живёт на
   .chat-room-input ниже по каскаду (комбинированный селектор -- редактор
   больше НЕ несёт класс .chat-room-input в className, см. chat.js
   `_beginEdit`); геометрия textarea переопределяется отдельным правилом
   сразу под ним. */

.chat-msg-edit-wrap .chat-msg-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.chat-msg-edit-save,
.chat-msg-edit-cancel {
  padding: 6px var(--sp-3);
  border-radius: 14px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.chat-msg-edit-save {
  border: none;
  background: linear-gradient(135deg, var(--accent), #059669);
  color: #fff;
}
.chat-msg-edit-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-msg-edit-cancel {
  border: 1px solid rgba(var(--danger-rgb), 0.35);
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--danger);
}
.chat-msg-edit-cancel:hover {
  background: rgba(var(--danger-rgb), 0.2);
}

.chat-room-readonly-note {
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: center;
  flex-shrink: 0;
}

.chat-room-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* WR-12 (Phase 89.1, Plan 12): .chat-msg-edit-input делит базовую коробочную
   модель с полем композера через общий селектор -- редактор сообщения
   получил собственный класс (chat.js `_beginEdit` больше не пишет
   'chat-room-input chat-msg-edit-input' в className), но заново заводить те
   же 12 объявлений было бы дублированием; ниже по каскаду переопределяется
   ровно то, что должно отличаться (радиус/высота/ширина textarea). */
.chat-room-input,
.chat-msg-edit-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  padding: var(--sp-2) var(--sp-4);
  outline: none;
  resize: none;
  transition: border-color 0.2s;
}
.chat-room-input:focus,
.chat-msg-edit-input:focus {
  border-color: var(--accent);
}
.chat-room-input::placeholder {
  color: var(--text-muted);
}
/* Переопределение геометрии textarea редактора -- та же специфичность, что
   у комбинированного правила выше; порядок объявления в файле решает победителя. */
.chat-msg-edit-input {
  border-radius: 14px;
  min-height: 60px;
  width: 100%;
}

.chat-room-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent), #059669);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.chat-room-send:active {
  transform: scale(0.92);
}
.chat-room-send:hover {
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

/* Gap-closure 2026-08-13 (Plan 89-10 shipped the markup, never the CSS --
   .chat-inbox-* classes rendered as unstyled default <a>/<ul>/<details>).
   Card visual language matches .vacancy-card (border-left accent stripe,
   border-radius 12px, hover lift) so the inbox list reads consistently
   with the rest of the app. */
.chat-inbox {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.chat-inbox-pinned {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
}

.chat-inbox-pinned-title {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-inbox-pinned .chat-room-panel {
  flex: 1;
  min-height: 0;
}

.chat-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Gap-closure 2026-08-14 (Plan 89.1-17, D-25 CSS-completeness guard):
   chat-inbox-room (базовый <li>, без модификатора) не имел ни одного
   собственного правила -- работал только потому, что list-style уже снят на
   родительском .chat-inbox-list (наследуемое свойство). Явное правило на
   самом элементе -- не косметика: страховка от контекстов, где наследование
   не отработает (печать, будущая переверстка без родителя-<ul>), и точка
   расширения для уже существующих модификаторов --unread/--readonly ниже. */
.chat-inbox-room {
  list-style: none;
}

.chat-inbox-room-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.chat-inbox-room-link:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* Gap-closure follow-up: rgba(255,255,255,...) reads fine on the dark card
   but would nearly vanish on the light theme's white card -- explicit dark
   border there instead. */
html.light-theme .chat-inbox-room-link {
  border-color: rgba(0, 0, 0, 0.14);
  border-left-color: rgba(0, 0, 0, 0.14);
}
@media (prefers-color-scheme: light) {
  html:not(.dark-theme) .chat-inbox-room-link {
    border-color: rgba(0, 0, 0, 0.14);
    border-left-color: rgba(0, 0, 0, 0.14);
  }
}

/* Непрочитанное -- акцентная полоса слева, тот же язык, что у .vacancy-card
   (цветная скобка = "требует внимания"). Класс на <li>, не :has() на самой
   ссылке -- gap-closure 2026-08-13: бейдж теперь всегда в DOM (скрыт через
   display:none, чтобы chat.js мог обновлять его вживую по WS без reload,
   см. _paintBadges в chat.js), поэтому :has(.chat-inbox-room-unread) ловил
   бы сам ЭЛЕМЕНТ независимо от его display -- полоса горела бы всегда. */
.chat-inbox-room--unread .chat-inbox-room-link {
  border-left-color: var(--accent);
}

.chat-inbox-room-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-inbox-room-scope {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px var(--sp-2);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.chat-inbox-room-time {
  flex-shrink: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.chat-inbox-room-unread {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #06231a;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-inbox-room--readonly .chat-inbox-room-link {
  opacity: 0.6;
}
.chat-inbox-room--readonly .chat-inbox-room-link:hover {
  opacity: 0.85;
}

.chat-inbox-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body);
  padding: var(--sp-5) var(--sp-4);
}

/* Phase 89.1 D-04 (план 89.1-09): admin/superadmin без выбранного account_list_id
   -- та же карточка-обёртка .chat-inbox-empty, но чуть менее приглушённый текст,
   потому что это призыв к действию (выбрать аккаунт), а не констатация "пусто". */
.chat-inbox-empty--no-account {
  color: var(--text-secondary);
}

.chat-inbox-archive {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}
.chat-inbox-archive summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: var(--sp-2) 0;
  list-style: none;
}
.chat-inbox-archive summary::-webkit-details-marker {
  display: none;
}
.chat-inbox-archive summary::before {
  content: "▸ ";
}
.chat-inbox-archive[open] summary::before {
  content: "▾ ";
}
.chat-inbox-archive .chat-inbox-list {
  margin-top: var(--sp-3);
}

/* Живой дефект фазы 89 (89.1-09 D-25): класс использовался в inbox.html:95 с
   момента вывода архива, но ни одного правила для него не было -- секция
   архива визуально ничем не отличалась от основного списка кроме бейджа
   read-only на отдельных ссылках. Компактнее и приглушённее целиком, поверх
   уже существующего .chat-inbox-room--readonly opacity на отдельной ссылке. */
.chat-inbox-list--archive {
  gap: var(--sp-1);
  opacity: 0.85;
}

@media (max-width: 480px) {
  .chat-inbox-pinned {
    height: min(70vh, 560px);
  }
  .chat-inbox-room-scope {
    display: none;
  }
}

/* Gap-closure 2026-08-13: .chat-room-overlay/.chat-room-modal had ZERO CSS
   rules -- vacancy_detail.html/candidate.html (planы 89-12/89-13) toggle
   `display`/`.active` on it, but without position/z-index/backdrop the
   element just became a normal in-flow block wherever it sits in the
   document (near the end of <body>), never visibly appearing as a modal.
   Same donor visual language as .ai-chat-overlay (D-41 requires separate
   classes, not shared ones) -- bottom-sheet slide-up on a dim backdrop. */
.chat-room-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.chat-room-overlay.active {
  display: flex;
}

.chat-room-modal {
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-room-overlay.active .chat-room-modal {
  transform: translateY(0);
}

.chat-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-room-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.chat-room-header-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.chat-room-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-room-close:active {
  background: var(--bg-surface);
}

.chat-room-modal .chat-room-panel {
  flex: 1;
  min-height: 0;
}

/* D-38: на телефоне модалка чата раскрывается на весь экран (оверлей строит
   вызывающий шаблон, план 89-13); dvh (НЕ vh) -- иначе на iOS клавиатура
   перекрывает поле ввода, потому что vh считает высоту БЕЗ учёта появившейся
   клавиатуры, а dvh пересчитывается динамически. PWA-обвязку (manifest,
   start_url, Service Worker) эта фаза не трогает.
   Gap-closure 2026-08-13: заскоуплено на класс .chat-room-overlay (НЕ id --
   у вакансии оверлей #chat-room-overlay, у кандидата #chat-candidate-overlay,
   общий класс `chat-room-overlay` у обоих) -- .chat-room-panel переиспользуется
   и в табе «Чат» страницы вакансии, и в закреплённой карточке общего чата на
   /chat (ни то, ни другое не модалка), незаскоупленное правило растягивало их
   на весь экран на мобильном и создавало гигантский пустой разрыв. */
@media (max-width: 480px) {
  .chat-room-overlay .chat-room-panel {
    height: 100dvh;
  }
  .chat-room-overlay .chat-room-messages {
    max-height: none;
  }
  /* .chat-room-modal defaults to the donor's 85vh bottom-sheet cap -- D-38
     wants full-screen on phone specifically for this modal, so override
     it here rather than changing the shared donor-derived base rule. */
  .chat-room-modal {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* ============================================================
   Guest circuit cards (2026-09-09)

   base_temp.html — базовый шаблон всего гостевого контура — грузит
   ТОЛЬКО app.css. Класс `.admin-card`, которым гостевые шаблоны
   помечены с Phase 90, описан в admin.css и сюда не доезжает, поэтому
   карточки всё это время рендерились вообще без фона, рамки и
   скругления: пока карточка была короткой (имя + пара строк), это
   читалось терпимо, но после переезда полного резюме внутрь карточки
   (2026-09-09) соседние кандидаты слились в одну ленту.

   Стили заводятся ОТДЕЛЬНЫМ классом `.guest-card`, а не определением
   `.admin-card` здесь: админские страницы грузят и app.css, и
   admin.css, и второе определение того же класса конкурировало бы с
   первым по каскаду. Гостевые шаблоны несут оба класса сразу
   (`class="admin-card guest-card"`) — `.admin-card` остаётся как есть
   для селекторов, которые на него уже опираются
   (tests/manual/phase96_live_gaps_check.py).
   ============================================================ */
.guest-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  /* В тёмной теме границу держит контраст --bg-card (#1A1A1A) к
     --bg-primary (#111) плюс рамка; в светлой (#FFF к #F8FAFC) контраст
     фонов почти нулевой, и именно тень отделяет карточку от страницы. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Зазор между карточками кандидатов: фон страницы, просвечивающий между
   приподнятыми панелями, и есть само визуальное разделение — поэтому он
   заметно больше межблочного (24px против прежних 14px). */
.guest-candidate-card {
  margin-bottom: var(--sp-5);
}

/* Ряд решения в гостевой карточке.

   `.action-btn--reject/--like` несут `max-width: 150px` — это верно для
   контура ЛПР-1, где они лежат в фиксированном `.action-bar` с
   `justify-content: center`. В карточке списка тот же max-width прижимал
   пару кнопок влево и оставлял половину ширины пустой. Снимается ЛОКАЛЬНО,
   только здесь: сами классы кнопок не трогаются, ЛПР-контур не меняется. */
.guest-decision-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.guest-decision-actions .action-btn {
  flex: 1;
  max-width: none;
}

/* Базовые стили вынесены из inline style в разметке -- inline border
   перебивал бы .is-invalid ниже (специфичность инлайна выше любого класса). */
.guest-comment {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Плейсхолдер отказа: браузерный дефолт (~55% opacity) не проходит WCAG AA
   на --bg-surface. Требование к минимальной длине комментария живёт не в
   плейсхолдере (исчезает при вводе), а в .guest-comment-req ниже -- она
   остаётся видимой. */
.guest-comment::placeholder {
  color: var(--text-secondary);
  opacity: 1;
  font-weight: var(--fw-medium);
}

.guest-comment-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.guest-comment-req-hint {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guest-comment-req-hint svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.guest-comment-req-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

.guest-comment-req-count.is-ok {
  color: var(--accent);
}

/* Подсветка по факту неудачной попытки "Отказать" (не постоянно -- иначе
   каждая карточка в списке читается как уже содержащая ошибку). Класс
   ставит/снимает decide() и input-listener в candidates.html. */
.guest-comment-field.is-invalid .guest-comment {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.14);
}

.guest-comment-field.is-invalid .guest-comment-req,
.guest-comment-field.is-invalid .guest-comment-req-hint svg,
.guest-comment-field.is-invalid .guest-comment-req-count {
  color: var(--danger);
}

@keyframes guest-comment-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.guest-comment-field.is-invalid .guest-comment {
  animation: guest-comment-shake 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .guest-comment-field.is-invalid .guest-comment {
    animation: none;
  }
}