/* Page header inside screen */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-5);
}
.page-header h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
}
.page-header .page-header__sub {
  color: var(--c-fg-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* Card: card bg, radius 24, padding 16. Вложенная карточка — card-2, radius 16. */
.card {
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-press) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.card .card,
.card--nested {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  box-shadow: none;
}
.card.is-interactive { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card.is-interactive:hover { background: var(--c-surface-2); }
.card .card.is-interactive:hover,
.card--nested.is-interactive:hover { background: var(--c-card-3); }
.card.is-interactive:active { transform: scale(0.985); }

/* List */
.list { display: flex; flex-direction: column; gap: var(--sp-2); }
.list--tight { gap: 6px; }

/* List item — row-style: auto 1fr auto, min-height 64, card-2, radius 16. */
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--c-surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-press) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.row:hover { background: var(--c-card-3); }
.row:active { transform: scale(0.98); }
/* Компактная карточка (лента чатов): тоньше по высоте, ширина прежняя —
   больше контактов на экран. */
.row--compact { min-height: 0; padding: var(--sp-2) 14px; }
/* Строка внутри .card — на тон светлее, чтобы читалась вложенность. */
.card .row { background: var(--c-surface-2); }
.card .row:hover { background: var(--c-card-3); }

.row__icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-card-3);
  color: var(--c-fg-muted);
  flex-shrink: 0;
}
.row__icon svg { width: 18px; height: 18px; stroke-width: 2; }
.row__icon.is-accent { background: var(--c-accent-soft); color: var(--c-red-text); }
.row__icon.is-info   { background: var(--c-info-soft); color: var(--c-blue); }
.row__icon.is-warn   { background: var(--c-warn-soft); color: var(--c-warn); }
.row__icon.is-danger { background: var(--c-danger-soft); color: var(--c-red-text); }
.row__icon.is-success { background: var(--c-green-soft); color: var(--c-green); }

.row__body { flex: 1; min-width: 0; }
.row__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__sub {
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__chevron {
  width: 20px; height: 20px;
  color: var(--c-fg-dim);
  flex-shrink: 0;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--c-card-3);
  color: var(--c-fg-muted);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* Счётчик: 16px акцентный кружок с обводкой в цвет фона, 9px/800. */
.badge--count {
  min-width: 16px; height: 16px;
  padding: 0 3px;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-on-accent);
  border: 2px solid var(--c-bg);
  font-size: 9px;
  font-weight: 800;
  line-height: 12px;
}

/* Status pill — иконка статуса аккаунта (без текста, аналог dot indicator) */
.status-pill {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-card-3);
  color: var(--c-fg-muted);
  flex-shrink: 0;
  position: relative;
}
.status-pill svg { width: 14px; height: 14px; stroke-width: 2.5; }
.status-pill.is-accent { background: var(--c-green-soft); color: var(--c-green); }
.status-pill.is-danger { background: var(--c-danger-soft); color: var(--c-red-text); }
.status-pill.is-warn   { background: var(--c-warn-soft); color: var(--c-warn); }
.status-pill.is-info   { background: var(--c-info-soft); color: var(--c-blue); }
/* Pulse for active "live" status */
.status-pill.is-accent::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: pulse-out 2.4s ease-out infinite;
}
@keyframes pulse-out {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.badge.is-accent { background: var(--c-accent-soft); color: var(--c-red-text); }
.badge.is-danger { background: var(--c-danger-soft); color: var(--c-red-text); }
.badge.is-info   { background: var(--c-info-soft); color: var(--c-blue); }
.badge.is-warn   { background: var(--c-warn-soft); color: var(--c-warn); }
.badge.is-success { background: var(--c-green-soft); color: var(--c-green); }
.badge.is-gold   { background: rgba(255, 201, 61, 0.14); color: var(--c-gold); }

/* Button — пилюля (radius 100). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 20px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-out),
              filter var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled {
  filter: grayscale(0.5);
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--grad-red);
  color: var(--c-on-accent);
  box-shadow: var(--glow-accent);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

/* Ghost: приглушённый текст на мягкой заливке — читается как неактивный чип
   рядом с градиентной кнопкой (фильтры переключают primary ↔ ghost). */
.btn--ghost {
  background: var(--c-surface-2);
  color: var(--c-fg-muted);
  border-color: transparent;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--c-card-3);
  color: var(--c-fg);
  filter: none;
}
.card .btn--ghost { background: var(--c-card-3); }
.card .btn--ghost:hover:not(:disabled) { background: var(--c-border); }

/* Outline: прозрачная с рамкой 1px line. Text: только текст. */
.btn--outline {
  background: transparent;
  color: var(--c-fg);
  border-color: var(--c-border);
}
.btn--outline:hover:not(:disabled) { background: var(--c-surface-2); filter: none; }
.btn--text { background: transparent; color: var(--c-fg-muted); }
.btn--text:hover:not(:disabled) { color: var(--c-fg); background: var(--c-surface-2); filter: none; }

.btn--danger {
  background: var(--c-danger-soft);
  color: var(--c-red-text);
  border-color: rgba(254, 0, 55, 0.35);
}
.btn--danger:hover:not(:disabled) { background: rgba(254, 0, 55, 0.24); filter: none; }

.btn--blue  { background: var(--grad-blue);  color: #fff; }
.btn--green { background: var(--grad-green); color: #06210F; }

.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn--icon { width: 44px; padding: 0; }
.btn--sm.btn--icon { width: 36px; }

/* Chips: 6px 11px, pill, 12px/600; активный — красный градиент. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--c-surface-2);
  color: var(--c-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-out),
              filter var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.chip:hover { background: var(--c-card-3); color: var(--c-fg); filter: brightness(1.08); }
.chip:active { transform: scale(0.97); }
.chip.is-active {
  background: var(--grad-red);
  color: var(--c-on-accent);
  box-shadow: var(--glow-accent);
}
.chip.is-active.chip--green { background: var(--grad-green); color: #06210F; box-shadow: 0 6px 24px rgba(78, 255, 126, 0.3); }
.chip.is-active.chip--blue  { background: var(--grad-blue);  color: #fff; box-shadow: 0 6px 24px rgba(55, 125, 255, 0.35); }
.chip.is-active.chip--gold  { background: linear-gradient(180deg, #FFC93D, #C48F00); color: #221700; box-shadow: 0 6px 24px rgba(255, 201, 61, 0.3); }
.chip:disabled { opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.chip-strip::-webkit-scrollbar { display: none; }
.chip-strip > * { flex-shrink: 0; }

/* Segmented tabs: контейнер card-2 radius 32 padding 4; активная вкладка —
   скользящая градиентная пилюля (.seg__indicator двигает UI.segTabs). */
.seg {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 4px;
  border-radius: var(--r-seg);
  background: var(--c-surface-2);
  isolation: isolate;
}
.seg__indicator {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-radius: var(--r-pill);
  background: var(--grad-red);
  box-shadow: var(--glow-accent);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--d-slow) var(--ease-spring),
              width var(--d-slow) var(--ease-spring),
              height var(--d-slow) var(--ease-spring),
              opacity var(--d-fast) var(--ease-out);
}
.seg__indicator.is-visible { opacity: 1; }
.seg.is-init .seg__indicator { transition: none; }
.seg__tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}
.seg__tab:hover { color: var(--c-fg); }
.seg__tab:active { transform: scale(0.97); }
.seg__tab.is-active { color: var(--c-on-accent); }
/* Fallback до первого замера индикатора: подсветка активной вкладки заливкой. */
.seg:not(.has-indicator) .seg__tab.is-active { background: var(--grad-red); }

/* FAB (floating action button) — for "+ create" on list screens */
.fab {
  position: fixed;
  right: max(var(--sp-4), var(--safe-right));
  bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-3));
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--grad-red-radial);
  color: var(--c-on-accent);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--glow-accent), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform var(--d-press) var(--ease-out),
              filter var(--d-fast) var(--ease-out);
  z-index: 15;
  animation: fab-in var(--d-slow) var(--ease-spring) both;
}
.fab svg { width: 24px; height: 24px; stroke-width: 2.5; }
.fab:hover { filter: brightness(1.08); transform: scale(1.04); }
.fab:active { transform: scale(0.95); }
@keyframes fab-in {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Input */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-fg-muted);
}
.field__hint { font-size: var(--fs-xs); color: var(--c-fg-dim); margin-top: 2px; }
.field__error { font-size: var(--fs-sm); color: var(--c-red-text); margin-top: 4px; }

.input, .textarea, .select {
  width: 100%;
  background: var(--c-input);
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  min-height: 48px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--c-fg-dim); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23AEAEAF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.select option { background: var(--c-surface); color: var(--c-fg); }
.textarea { min-height: 96px; resize: vertical; font-family: inherit; }
.input--mono, .textarea--mono { font-family: var(--font-mono); }
.input--sm { min-height: 40px; padding: 8px 12px; font-size: var(--fs-sm); }

/* Modal / sheet */
.sheet-backdrop {
  position: fixed; inset: 0;
  /* Сплошной скрим без backdrop-filter: blur пересчитывался каждый кадр при
     fade-in и ехал рывками. */
  background: rgba(0, 0, 0, 0.6);
  z-index: 40;
  animation: fade-in var(--d-fast) var(--ease-out) both;
  will-change: opacity;
}
.sheet {
  position: fixed;
  left: var(--shell-left); right: 0; bottom: 0;
  max-width: 520px;
  margin: 0 auto;
  background: var(--c-surface);
  border-top-left-radius: var(--r-sheet);
  border-top-right-radius: var(--r-sheet);
  padding: 10px 16px calc(24px + var(--safe-bottom));
  z-index: 41;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Резервируем место под ползунок, чтобы он не налезал на кнопки справа
     (напр. корзины у сниппетов при длинном списке). */
  scrollbar-gutter: stable;
  animation: sheet-up 420ms var(--ease-sheet) both;
  box-shadow: var(--shadow-pop);
  /* Промоушен в отдельный слой до анимации — плавный первый кадр слайд-апа. */
  will-change: transform;
  touch-action: pan-y;
}
.sheet__handle {
  width: 40px; height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  margin: 0 auto 14px;
  cursor: grab;
  touch-action: none;
}
/* Ручка маленькая — расширяем зону захвата псевдоэлементом. */
.sheet__handle { position: relative; }
.sheet__handle::before {
  content: "";
  position: absolute;
  left: -40px; right: -40px; top: -12px; bottom: -14px;
}
.sheet__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  /* За заголовок шторку тоже можно утянуть вниз (см. UI.sheet). */
  touch-action: none;
}
.sheet__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.sheet__actions .btn { flex: 1 1 0; min-width: 0; }

/* Перетаскивание вниз (UI.sheet): пока тянут — без анимаций, transform ставит
   JS; при отпускании возвращаем пружиной. */
.sheet.is-dragging { animation: none; transition: none; }
.sheet.is-settling { animation: none; transition: transform var(--d-slow) var(--ease-sheet); }
.sheet-backdrop.is-dragging { animation: none; transition: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Появление центрированной модалки (десктоп): фейд + подъём + масштаб. */
@keyframes modal-pop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Закрытие — мобайл: шторка уезжает вниз, скрим гаснет (≈ 1/3 от входа). */
.sheet.is-closing { animation: sheet-down 143ms var(--ease-in) forwards; }
.sheet-backdrop.is-closing { animation: fade-out var(--d-fast) var(--ease-in) forwards; }

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-4);
  color: var(--c-fg-muted);
}
.empty__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.empty__icon svg { width: 28px; height: 28px; color: var(--c-fg-dim); }
.empty__title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  letter-spacing: -0.02em; color: var(--c-fg); margin: 0 0 var(--sp-2);
}
.empty__text { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); max-width: 280px; }

/* Stat tile */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.stat-tile {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.stat-tile__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-fg-muted);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-tile__value {
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: var(--c-fg);
}
.stat-tile.is-accent .stat-tile__value { color: var(--c-red-text); }
.stat-tile.is-success .stat-tile__value { color: var(--c-green); }
.stat-tile.is-gold .stat-tile__value { color: var(--c-gold); }

/* Section heading */
.section-heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-fg-dim);
  margin: var(--sp-6) 0 var(--sp-2);
  font-weight: var(--fw-semibold);
}

/* File chip — for media list */
.file-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.file-chip__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--c-card-3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.file-chip__icon svg { width: 16px; height: 16px; color: var(--c-fg-muted); }
.file-chip__meta { flex: 1; min-width: 0; }
.file-chip__name { font-weight: var(--fw-medium); color: var(--c-fg); }
.file-chip__caption { color: var(--c-fg-muted); font-size: var(--fs-xs); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  color: var(--c-fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}
.icon-btn:hover { background: var(--c-card-3); color: var(--c-fg); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.is-danger:hover { color: var(--c-red-text); background: var(--c-danger-soft); }
.icon-btn svg { width: 16px; height: 16px; stroke-width: 2; }

/* Trigger card (used on sphere media screen) */
.trigger-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-card);
}
.trigger-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  gap: var(--sp-3);
}
.trigger-card__title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-red-text);
  margin: 0;
  word-break: break-all;
}
.trigger-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-fg-muted);
  margin: 0 0 var(--sp-3);
}
.trigger-card__files { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Form footer (sticky CTA in sheet/screen) */
.form-footer {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.form-footer .btn { flex: 1; }

/* Chat composer — sticky at bottom of screen, above bottom nav */
.composer {
  position: fixed;
  left: var(--shell-left); right: 0;
  bottom: calc(var(--bottomnav-h) + var(--safe-bottom));
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-2) max(var(--sp-3), var(--safe-left));
  padding-right: max(var(--sp-3), var(--safe-right));
  background: linear-gradient(180deg, rgba(12, 12, 12, 0) 0%, var(--c-bg) 30%);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  z-index: 18;
  pointer-events: none;
}
.composer__inner {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  background: var(--c-input);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  pointer-events: auto;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.composer__inner:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.composer__input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-fg);
  font-size: var(--fs-base);
  line-height: 1.4;
  padding: 8px 0;
  outline: none;
  resize: none;
  max-height: 120px;
  font-family: inherit;
}
.composer__input::placeholder { color: var(--c-fg-dim); }
.composer__send {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--grad-red);
  color: var(--c-on-accent);
  box-shadow: var(--glow-accent);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-out);
}
.composer__send:hover:not(:disabled) { filter: brightness(1.08); }
.composer__send:active:not(:disabled) { transform: scale(0.94); }
.composer__send:disabled { opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed; box-shadow: none; }
.composer__send svg { width: 18px; height: 18px; stroke-width: 2.5; }

.composer__attach {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--c-fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              transform var(--d-press) var(--ease-spring);
}
.composer__attach:hover:not(:disabled) {
  background: var(--c-card-3);
  color: var(--c-fg);
}
.composer__attach:active:not(:disabled) { transform: scale(0.92) rotate(-12deg); }
.composer__attach:disabled { opacity: 0.4; cursor: not-allowed; }
.composer__attach svg { width: 18px; height: 18px; stroke-width: 2; }

/* QR brand wrapper — даёт Mini App-стилистику QR (рамка + accent-glow). */
.qr-brand {
  position: relative;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--c-fg);  /* белый фон для контраста чёрного QR */
  border: 1px solid var(--c-border);
  box-shadow: 0 0 0 4px var(--c-surface),
              var(--glow-accent);
}
.qr-brand::before, .qr-brand::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid var(--c-accent);
  pointer-events: none;
}
.qr-brand::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.qr-brand::after  { bottom: -6px; right: -6px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.qr-brand img { display: block; width: 100%; height: auto; }

/* Add padding to screen so composer doesn't overlap last bubble */
.screen.has-composer {
  padding-bottom: calc(var(--sp-6) + var(--bottomnav-h) + var(--safe-bottom) + 64px);
}
/* Sticky-шапка диалога должна прилипать вплотную под топбаром. Верхний
   padding .screen оставлял над ней зазор, в котором просвечивала лента — на
   мобильном это и был «отступ с куском чата». Отступ даёт сама шапка
   (.dialog-header padding-top), поэтому у контейнера его убираем. */
.screen.has-composer { padding-top: 0; }
/* Панель сниппетов делает composer выше — даём ленте больше места снизу,
   чтобы сниппеты не налезали на последнее сообщение. */
.screen.has-composer.has-snippets {
  padding-bottom: calc(var(--sp-6) + var(--bottomnav-h) + var(--safe-bottom) + 116px);
}

/* ---------- Десктоп: подгонка fixed-компонентов и плотных сеток ---------- */
@media (min-width: 1024px) {
  /* Нет нижней навигации — composer прижат к самому низу колонки контента. */
  .composer {
    bottom: 0;
    padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  }
  .screen.has-composer {
    padding-bottom: calc(var(--sp-8) + 72px);
  }
  .screen.has-composer.has-snippets {
    padding-bottom: calc(var(--sp-8) + 124px);
  }
  /* FAB больше не резервирует место под нижнюю навигацию. */
  .fab {
    bottom: calc(var(--sp-6) + var(--safe-bottom));
  }
  /* Больше ширины — плотнее сетка метрик. */
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Попапы на ПК — центрированные модальные окна, а не нижняя шторка. */
  .sheet {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 32px));
    max-width: 480px;
    margin: 0;
    padding: var(--sp-5);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--r-card);
    max-height: min(85vh, 720px);
    box-shadow: var(--shadow-pop);
    animation: modal-pop var(--d-slow) var(--ease-expo) both;
    touch-action: auto;
  }
  /* Закрытие центрированной модалки — реверс modal-pop: масштаб/фейд НА МЕСТЕ.
     Оба кадра держат translate(-50%,-50%), поэтому окно не «летает». */
  .sheet.is-closing {
    animation: modal-pop var(--d-exit-slow) var(--ease-in) reverse forwards;
  }
  /* Хэндл для свайпа не нужен у центрированной модалки. */
  .sheet__handle { display: none; }
}

/* ── Фото в переписке: компактное превью + лайтбокс ───────────────────────── */
.chat-photo {
  display: block;
  max-width: min(240px, 72%);
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-md);
  cursor: zoom-in;
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.92);
  animation: fade-in var(--d-base) var(--ease-out);
  cursor: zoom-out;
}
.lightbox-backdrop.is-closing { animation: fade-out var(--d-base) var(--ease-in) forwards; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* ── Медиагруппа (альбом) в переписке ────────────────────────────────────── */
.chat-album {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  max-width: min(260px, 74vw);
  border-radius: var(--r-md);
  overflow: hidden;
}
.chat-album[data-count="1"] { grid-template-columns: 1fr; }
.chat-album[data-count="3"] .chat-album__cell:first-child { grid-column: span 2; }
.chat-album__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--c-muted);
}
.chat-album[data-count="1"] .chat-album__cell { aspect-ratio: auto; max-height: 240px; }
.chat-album__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-album__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* Навигация галереи в лайтбоксе */
.lightbox-counter {
  position: absolute;
  top: max(16px, var(--tg-safe-top, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox-nav--prev { left: 12px; }
.lightbox-nav--next { right: 12px; }

/* ── Блокировка ИИ-функций (публичный режим «менеджер чатов») ─────────────── */
.lock-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; }
.lock-wrap__content {
  filter: blur(5px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.lock-wrap__badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--sp-3);
  color: var(--c-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: rgba(12, 12, 12, 0.35);
}
.lock-wrap__badge i, .lock-wrap__badge [data-lucide] { width: 18px; height: 18px; opacity: 0.9; }

.lock-screen__badge {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.lock-screen__badge i, .lock-screen__badge [data-lucide] {
  width: 30px; height: 30px; color: var(--c-fg-muted);
}

.bottomnav__item--locked { position: relative; opacity: 0.55; }
.bottomnav__item--locked::after {
  content: "🔒";
  position: absolute;
  top: 2px; right: 8px;
  font-size: 9px;
  opacity: 0.8;
}

/* ── Видео в переписке: превью с play + полноэкранный плеер ───────────────── */
.chat-video {
  position: relative;
  display: inline-block;
  max-width: min(240px, 72%);
  max-height: 240px;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  line-height: 0;
}
.chat-video video {
  display: block;
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: cover;
  pointer-events: none;
}
.chat-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-video__play i, .chat-video__play [data-lucide] {
  width: 26px; height: 26px; color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 12px;
  box-sizing: content-box;
}
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-sm);
  outline: none;
}

/* ── Тамагочи в шапке (телефон) ───────────────────────────────────────────────
   Справа от заголовка «Переписки» место всё равно пустует, а виджет в списке
   чатов уезжал вместе с прокруткой. Кнопка компактная: персонаж, уровень и
   серия дней. На ПК слот пуст — там питомец в боковом меню. */
.topbar__pet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: var(--sp-2);
}
.topbar__pet:empty { display: none; }
.topbar-pet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--c-border-soft);
  background: var(--c-surface);
  color: var(--c-fg);
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.topbar-pet:hover { border-color: var(--c-accent); }
.topbar-pet:active { transform: scale(0.96); }
.topbar-pet__face { position: relative; flex-shrink: 0; line-height: 0; }
.topbar-pet__mood {
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: flex;
  color: var(--c-fg-muted);
}
.topbar-pet__mood svg { width: 10px; height: 10px; }
.topbar-pet__lvl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-fg-muted);
}
.topbar-pet__streak {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--c-warn);
}
.topbar-pet__streak svg { width: 11px; height: 11px; }

/* ── Битый кошелёк ────────────────────────────────────────────────────────────
   «Битый» = адрес уже сдан логом в 777. Красная плашка первой строкой карточки
   и красный чип прямо в переписке: оператор не должен открывать карточку,
   чтобы понять, что этот адрес отработан. */
.wallet-pop__burned {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  white-space: normal;
}
.wallet-pop__burned [data-lucide] { flex-shrink: 0; width: 14px; height: 14px; }
/* Одним цветом «битый» не показать: акцент приложения — тот же малиновый
   (#FE0037), и красный чип читался как обычный. Поэтому меняем ФОРМУ (сплошная
   рамка вместо пунктира, заливка), зачёркиваем адрес и подписываем словом. */
.wallet-chip.is-burned {
  border-style: solid;
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.wallet-chip.is-burned::after {
  /* inline-block не наследует line-through родителя — подпись остаётся
     читаемой, зачёркнут только сам адрес. */
  display: inline-block;
  content: "битый";
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--c-danger);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82em;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  vertical-align: baseline;
}

/* ── Разделители дат в ленте диалога ──────────────────────────────────────────
   .dialog-day       — статичная плашка между сутками, живёт в потоке ленты;
   .dialog-day-float — та же плашка, но position: fixed поверх ленты: всплывает
   только пока чат листают (JS снимает is-visible через паузу после прокрутки).
   Координаты плавающей ставит JS — скроллером может быть и правая колонка
   сплита, и весь #screen. */
.dialog-day {
  align-self: center;
  margin: var(--sp-1) 0;
  pointer-events: none;
}
.dialog-day__pill,
.dialog-day-float {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border-soft);
  background: var(--c-muted);
  color: var(--c-fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}
/* Липкая обёртка нулевой высоты — первый ребёнок скроллера ленты. Плашка
   позиционируется внутри неё (left/top ставит JS) и уходит вместе с контентом
   при смене экрана, а не остаётся висеть на body. */
.dialog-day-float-wrap {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 12;
  pointer-events: none;
}
.dialog-day-float {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 12;
  background: var(--c-surface-2);
  box-shadow: var(--elev-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--d-fast) var(--ease-out), visibility var(--d-fast);
}
.dialog-day-float.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .dialog-day-float { transition: none; }
}

/* ── Цитата в пузыре (ответ на сообщение) ─────────────────────────────────── */
.dialog-quote {
  margin: 0 0 var(--sp-2);
  padding: 4px 10px;
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: rgba(127, 127, 127, 0.12);
  background: color-mix(in srgb, var(--c-fg) 6%, transparent);
  font-size: var(--fs-xs);
  line-height: 1.35;
  white-space: normal;
  max-width: 100%;
  overflow: hidden;
}
.dialog-quote[data-from-me="0"] { border-left-color: var(--c-fg-muted); }
.dialog-quote__who {
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  margin-bottom: 1px;
}
.dialog-quote[data-from-me="0"] .dialog-quote__who { color: var(--c-fg-muted); }
.dialog-quote__text {
  color: var(--c-fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* ── Закреплённая шапка диалога ───────────────────────────────────────────── */
.dialog-header {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--c-bg);
  padding: var(--sp-2) 0 var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border-soft);
}

/* Поднять закреплённую шапку диалога к самому верху панели — на уровень
   заголовков «Переписки»/«Все», без пустого пространства сверху. */
@media (min-width: 1024px) {
  .chats-split__convo .convo-scroll { padding-top: 0; }
}
.dialog-header { padding-top: var(--sp-3); }

/* Мобильная шапка чата: раньше 4 кнопки действий переполняли узкий экран
   (после добавления «Отрисовать»), а подпись «платформа · номер» сдавливала
   сам номер — часть шапки «съедалась». Здесь: сама шапка не режется по высоте,
   строка действий листается горизонтально (chip-strip), а дублирующая подпись
   на узком экране скрывается — номер и так в заголовке. */
@media (max-width: 767px) {
  .dialog-header {
    /* липкая шапка не должна прятать свой верх под топбаром при инерционном
       скролле iOS — небольшой отступ и явный фон уже заданы выше. */
    max-height: 45vh;
    overflow: visible;
  }
  .dialog-header__quick {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;   /* чтобы фокус-обводка кнопок не срезалась */
  }
  .dialog-header__quick::-webkit-scrollbar { display: none; }
  .dialog-header__quick > * { flex-shrink: 0; }
  /* Подпись «платформа · номер» дублирует заголовок-номер — на узком экране
     прячем, чтобы номер в заголовке был виден целиком. */
  .dialog-header__sub { display: none !important; }
}

/* Больше места под саму переписку (десктоп): у́же левые колонки, шире пузыри,
   меньше боковых полей в области диалога. */
@media (min-width: 1024px) {
  .chats-split {
    position: relative;
    grid-template-columns: var(--chats-list-w, 300px) 1fr;
  }
  .chats-split__convo .convo-scroll { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .chats-split__convo .dialog-bubble { max-width: 86% !important; }
  .dialog-header { padding-left: 0; padding-right: 0; }

  /* Перетаскиваемый разделитель между списком и чатом. */
  .chats-resize {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--chats-list-w, 300px) - 3px);
    width: 7px;
    cursor: col-resize;
    z-index: 15;
    background: transparent;
    transition: background var(--d-fast) var(--ease-out);
  }
  .chats-resize::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 3px;
    width: 1px; background: var(--c-border-soft);
  }
  .chats-resize:hover { background: var(--c-accent-soft); }
  body.is-col-resizing { cursor: col-resize; user-select: none; }
  body.is-col-resizing * { user-select: none !important; }
}
.chats-resize, .chats-resize2 { display: none; }
@media (min-width: 1024px) { .chats-resize { display: block; } }
@media (min-width: 1024px) { .chats-split.is-split2 .chats-resize2 { display: block; } }

/* Ещё больше высоты под сообщения: тоньше композер и низ ленты (десктоп). */
@media (min-width: 1024px) {
  .composer.composer--pane { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .chats-split__convo .convo-scroll { padding-bottom: var(--sp-2); }
}


/* Заполнить пустоту сверху на десктопе: топбар «Переписки» поднимаем к самому
   верху (нативные кнопки Telegram — справа, наши элементы слева, не пересекаются). */
@media (min-width: 1024px) {
  .topbar {
    height: var(--topbar-h);
    padding-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Два диалога одновременно (ПК). Кнопка «⧉» на карточке чата открывает его
   ВТОРЫМ окном: остаются видны и список, и обе переписки. Раскладка
   «фильтры | список | чат | чат»; вторая колонка появляется только когда
   .chats-split получает класс is-split2.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .chats-split.is-split2 {
    grid-template-columns:
      var(--chats-list-w, 300px) 1fr var(--chats-pane2-w, 1fr);
  }

  /* Ползунок между первым и вторым диалогами. Ширину второй панели держим в
     px (см. applyPane2Width), поэтому позицию считаем от правого края. */
  .chats-resize2 {
    position: absolute;
    top: 0; bottom: 0;
    right: calc(var(--chats-pane2-w, 50%) - 3px);
    width: 7px;
    cursor: col-resize;
    z-index: 15;
    background: transparent;
    transition: background var(--d-fast) var(--ease-out);
  }
  .chats-resize2::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 3px;
    width: 1px; background: var(--c-border-soft);
  }
  .chats-resize2:hover { background: var(--c-accent-soft); }
  /* Разделительная линия между двумя диалогами. */
  .chats-split.is-split2 > #chats-convo-pane {
    border-right: 1px solid var(--c-border-soft);
  }
  /* Кнопка «открыть вторым окном»: не мешает, проявляется на наведении и
     всегда видна у чата, уже открытого во второй панели. */
  .row__split {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--c-fg-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--d-fast) var(--ease-out),
                background var(--d-fast) var(--ease-out),
                color var(--d-fast) var(--ease-out);
  }
  .row__split svg { width: 16px; height: 16px; }
  .row:hover .row__split,
  .row__split:focus-visible { opacity: 1; }
  .row__split:hover { background: var(--c-muted); color: var(--c-fg); }
  .row.is-open2 .row__split { opacity: 1; color: var(--c-accent); }

  /* Чат, открытый во второй панели, подсвечен в списке иначе, чем основной —
     видно, какая карточка какому окну соответствует. */
  #chats-list-body .row.is-open2 {
    background: var(--c-surface-2);
    border-color: var(--c-accent);
    box-shadow: inset 3px 0 0 var(--c-accent);
  }
}
/* На узких экранах вторая панель не используется — кнопку прячем. */
.row__split { display: none; }
@media (min-width: 1024px) { .row__split { display: inline-flex; } }

/* ─────────────────────────────────────────────────────────────────────────
   Кошелёк в переписке. Адрес получает ободок прямо в тексте сообщения —
   ничего не сдвигается и не перекрывает ленту; вся информация в попапе по
   наведению (на телефоне — по тапу). См. static/js/wallets.js.
   ───────────────────────────────────────────────────────────────────────── */
.wallet-chip {
  display: inline;
  border: 1px dashed var(--c-accent);
  border-radius: var(--r-sm);
  padding: 0 3px;
  margin: 0 1px;
  cursor: pointer;
  color: var(--c-accent);
  font-family: var(--font-mono);
  word-break: break-all;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.wallet-chip:hover,
.wallet-chip:focus-visible {
  background: var(--c-accent-soft);
  border-style: solid;
  outline: none;
}

.wallet-pop {
  position: fixed;
  z-index: 200;
  width: min(340px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.wallet-pop__head {
  display: flex; align-items: center; gap: 6px;
  font-weight: var(--fw-semibold);
}
.wallet-pop__head svg { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; }
.wallet-pop__addr {
  font-family: var(--font-mono);
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wallet-pop__copy {
  border: none; background: transparent; cursor: pointer;
  color: var(--c-fg-dim); padding: 2px; border-radius: var(--r-sm);
  display: inline-flex; flex-shrink: 0;
}
.wallet-pop__copy:hover { color: var(--c-fg); background: var(--c-muted); }
.wallet-pop__copy svg { width: 15px; height: 15px; }

.wallet-pop__type { color: var(--c-fg-muted); font-size: var(--fs-xs); }
.wallet-pop__dim {
  color: var(--c-fg-dim);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.wallet-pop__err { color: var(--c-danger); font-size: var(--fs-xs); }

.wallet-pop__loading { display: flex; align-items: center; gap: 8px; color: var(--c-fg-muted); }
.wallet-pop__spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}

.wallet-pop__balances {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
}
.wallet-pop__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.wallet-pop__net { color: var(--c-fg-muted); font-size: var(--fs-xs); }
.wallet-pop__amount { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
/* Баланс выше порога чекера — то, ради чего всё и затевалось. */
.wallet-pop__amount.is-good { color: var(--c-accent); }

.wallet-pop__links,
.wallet-pop__track { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wallet-pop__btn { flex: 1 1 auto; justify-content: center; text-decoration: none; }
.wallet-pop__tracked {
  display: flex; align-items: center; gap: 6px;
  color: var(--c-accent); font-size: var(--fs-xs);
}
.wallet-pop__tracked svg { width: 14px; height: 14px; }


/* Плашка «Нулевой кошелёк» с кнопкой отрисовки. Закреплена у нижнего края
   ленты: раньше она рисовалась над историей и в длинном диалоге терялась —
   чтобы её увидеть, надо было листать в самый верх. */
.card.drawing-pinned {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: var(--sp-3);
  background: var(--c-surface);
  box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, 0.65);
}


/* ─────────────────────────────────────────────────────────────────────────
   Геймификация: питомец, маршрут дня, ачивки
   ───────────────────────────────────────────────────────────────────────── */

/* Компактный виджет питомца в списке чатов. Одна строка: эмоция, имя,
   уровень, полоса прогресса и подсказка «что делать дальше». */
.petbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.petbar:hover { border-color: var(--c-accent); }
.petbar:active { transform: scale(0.995); }

.petbar__face { position: relative; flex-shrink: 0; line-height: 0; }
/* Настроение — маленьким значком в углу, как статус в мессенджере. Кружок
   с фоном нужен, чтобы иконка читалась поверх корпуса персонажа. */
.petbar__mood {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  color: var(--c-accent);
}
.petbar__mood svg { width: 11px; height: 11px; }
.petbar__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px; }
.petbar__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.petbar__name {
  font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.petbar__lvl { font-size: var(--fs-xs); color: var(--c-fg-dim); }
.petbar__streak { font-size: var(--fs-xs); color: var(--c-warn); margin-left: auto; }
.petbar__line {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.petbar__chevron { color: var(--c-fg-dim); flex-shrink: 0; }

/* На ПК питомец закреплён у нижнего края колонки списка — ровно как в ТЗ
   («в нижней части основной колонки»). Иначе он уезжал бы вниз вместе с
   прокруткой длинного списка чатов и попадался на глаза раз в день. */
@media (min-width: 1024px) {
  .chats-split__list .petbar {
    position: sticky;
    bottom: calc(var(--sp-4) * -1);
    z-index: 6;
    margin: var(--sp-3) 0 calc(var(--sp-4) * -1);
    box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, 0.65);
  }
}

/* Крупная карточка питомца на экране маршрута. */
.petcard {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}
.petcard__face {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.petcard__mood {
  position: absolute; right: -2px; bottom: 4px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  color: var(--c-accent);
}
.petcard__mood svg { width: 17px; height: 17px; }
.petcard__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.petcard__namerow { display: flex; align-items: center; gap: var(--sp-2); }
.petcard__name { margin: 0; font-size: var(--fs-lg); }
.petcard__sub { margin: 0; font-size: var(--fs-xs); color: var(--c-fg-dim); }
.petcard__xp { margin: 0; font-size: var(--fs-xs); color: var(--c-fg-muted);
               white-space: normal; }
.petcard__line {
  margin: 4px 0 0; font-size: var(--fs-sm); color: var(--c-fg);
  white-space: normal; line-height: var(--lh-relaxed);
}

/* Текущий шаг маршрута — единственный подсвеченный: взгляд должен цепляться
   ровно за одну строку «делай это сейчас». */
.row.quest-step--current {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* Ачивки плиткой: полученные ярко, остальные приглушённо. */
.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.badge-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
}
.badge-card.is-locked { opacity: 0.4; }
.badge-card__icon { line-height: 0; color: var(--c-accent); }
.badge-card__icon svg { width: 22px; height: 22px; }
.badge-card.is-locked .badge-card__icon { color: var(--c-fg-dim); }
.badge-card__title {
  font-size: var(--fs-xs); color: var(--c-fg-muted); line-height: 1.25;
}


/* ─────────────────────────────────────────────────────────────────────────
   Питомец-агент (см. miniapp/static/js/pet.js)

   Персонаж один, а состояний много: 6 стадий эволюции (data-stage) и 7
   настроений (data-mood). Разметка неизменна, вся разница — в этих правилах.

   Каждое настроение меняет СРАЗУ несколько признаков: брови, форму глаз,
   рот, наклон корпуса, цвет свечения визора и собственный эффект рядом.
   Первая версия отличала настроения только скоростью покачивания и тонкой
   линией рта — на 38px в списке чатов они сливались в одно.

   Анимируются только transform и opacity: геометрию SVG (r, rx, d) из CSS
   понимают не все движки — Firefox не поддерживает её вовсе. Поэтому разные
   формы нарисованы отдельными фигурами и переключаются через display.
   transform-box: fill-box нужен, чтобы transform-origin считался от самой
   фигуры, а не от начала координат SVG.
   ───────────────────────────────────────────────────────────────────────── */
.pet {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  /* Цвет подсветки визора — задаётся настроением. */
  --pet-glow: var(--c-accent);
}
.pet g, .pet rect, .pet circle, .pet path, .pet ellipse, .pet text {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Материалы ── */
.pet-shadow { fill: rgba(0, 0, 0, 0.45); }
.pet-body, .pet-core {
  fill: var(--c-surface-2);
  stroke: var(--c-border);
  stroke-width: 2;
}
.pet-visor { fill: var(--c-bg); }
.pet-visor-glow { fill: var(--pet-glow); opacity: 0.14; }
.pet-pupil { fill: var(--pet-glow); }
.pet-shine { fill: var(--c-fg); opacity: 0.85; }
/* Веко — цвета визора: наезжая сверху, оно «закрывает» глаз. */
/* Веко: 42..60, зрачок 51.5..66.5. Группа глаз обрезана по визору (см.
   pet.js), поэтому уехавшее вверх веко просто не видно — можно двигать его
   свободно. Открытый глаз — веко выше зрачка, прищур и «тяжёлые веки» —
   насколько оно наезжает вниз. */
.pet-lid { fill: var(--c-bg); transform: translateY(-20px); }
.pet-brow { fill: var(--c-fg-muted); }
.pet-eye-happy, .pet-eye-shut {
  fill: none;
  stroke: var(--pet-glow);
  stroke-width: 4;
  stroke-linecap: round;
  display: none;
}
.pet-mouth { fill: var(--c-fg-muted); display: none; }
.pet-mouth--soft { display: block; }

.pet-antenna path { stroke: var(--c-border); stroke-width: 3; stroke-linecap: round; }
.pet-antenna__bulb { fill: var(--pet-glow); }
.pet-fin { fill: var(--c-surface-2); stroke: var(--c-border); stroke-width: 2; }
.pet-armor path { fill: var(--c-border); }
.pet-crown path { fill: var(--c-warn); }
.pet-ring ellipse { fill: none; stroke: var(--c-info); stroke-width: 2; opacity: 0.55; }
.pet-ring__moon { fill: var(--c-info); }

.pet-aura { fill: none; stroke: var(--pet-glow); stroke-width: 2.5; opacity: 0; }
.pet-spark { fill: var(--c-warn); opacity: 0; }
.pet-speed__l { fill: var(--c-fg-dim); opacity: 0; }
.pet-drop path { fill: var(--c-info); opacity: 0; }
.pet-steam__p { fill: var(--c-fg-dim); opacity: 0; }
.pet-dot { fill: var(--c-fg-dim); opacity: 0; }
.pet-z {
  fill: var(--c-fg-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  opacity: 0;
}

/* ── Стадии: чем выше уровень, тем больше навесного ── */
.pet-antenna, .pet-fins, .pet-armor, .pet-crown, .pet-ring, .pet-core {
  display: none;
}
.pet[data-stage="core"] .pet-core { display: block; }
.pet[data-stage="core"] .pet-body { display: none; }

.pet[data-stage="spark"] .pet-antenna,
.pet[data-stage="agent"] .pet-antenna,
.pet[data-stage="cyber"] .pet-antenna,
.pet[data-stage="net"] .pet-antenna { display: block; }

.pet[data-stage="agent"] .pet-fins,
.pet[data-stage="cyber"] .pet-fins,
.pet[data-stage="net"] .pet-fins,
.pet[data-stage="legend"] .pet-fins { display: block; }

.pet[data-stage="cyber"] .pet-armor,
.pet[data-stage="net"] .pet-armor,
.pet[data-stage="legend"] .pet-armor { display: block; }

.pet[data-stage="net"] .pet-ring,
.pet[data-stage="legend"] .pet-ring { display: block; }

.pet[data-stage="legend"] .pet-crown { display: block; }
.pet[data-stage="legend"] { --pet-glow: var(--c-warn); }

/* ── Базовая жизнь: дыхание, моргание, огонёк антенны ── */
.pet-bob { animation: pet-float 3.4s ease-in-out infinite; }
.pet-eyes { animation: pet-blink 5.2s infinite; }
.pet-antenna__bulb { animation: pet-pulse 2.6s ease-in-out infinite; }
.pet-shadow { animation: pet-shadow 3.4s ease-in-out infinite; }
.pet-ring { animation: pet-spin 14s linear infinite; }

@keyframes pet-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes pet-shadow {
  0%, 100% { transform: scaleX(1);    opacity: 0.45; }
  50%      { transform: scaleX(0.88); opacity: 0.3; }
}
@keyframes pet-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}
@keyframes pet-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}
@keyframes pet-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   НАСТРОЕНИЯ
   ═══════════════════════════════════════════════════════════════════════ */

/* ── В работе: спокойное лицо, взгляд неспешно сканирует ── */
.pet[data-mood="working"] .pet-eye { animation: pet-scan 6s ease-in-out infinite; }
@keyframes pet-scan {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(3px); }
  70%      { transform: translateX(-3px); }
}

/* ── Гордится: глаза «домиком», широкая улыбка, брови вверх, прыжки,
      звёзды и вспышки ауры. Самое яркое состояние — оно и означает деньги. ── */
.pet[data-mood="proud"] { --pet-glow: var(--c-green); }
.pet[data-mood="proud"] .pet-bob { animation: pet-hop 0.9s ease-in-out infinite; }
.pet[data-mood="proud"] .pet-eye { display: none; }
.pet[data-mood="proud"] .pet-eye-happy { display: block; }
.pet[data-mood="proud"] .pet-eyes { animation: none; }
.pet[data-mood="proud"] .pet-brow--l { transform: translateY(-3px) rotate(-14deg); }
.pet[data-mood="proud"] .pet-brow--r { transform: translateY(-3px) rotate(14deg); }
.pet[data-mood="proud"] .pet-mouth--soft { display: none; }
.pet[data-mood="proud"] .pet-mouth--smile { display: block; fill: var(--pet-glow); }
.pet[data-mood="proud"] .pet-visor-glow { opacity: 0.3; }
.pet[data-mood="proud"] .pet-aura { animation: pet-aura 1.3s ease-out infinite; }
.pet[data-mood="proud"] .pet-spark { animation: pet-spark 1.3s ease-in-out infinite; }
.pet[data-mood="proud"] .pet-spark--2 { animation-delay: 0.3s; }
.pet[data-mood="proud"] .pet-spark--3 { animation-delay: 0.6s; }

/* ── В ударе: решительный прищур, брови к переносице, ухмылка, наклон
      вперёд и линии скорости. ── */
.pet[data-mood="fired_up"] { --pet-glow: var(--c-warn); }
.pet[data-mood="fired_up"] .pet-bob { animation: pet-dash 0.9s ease-in-out infinite; }
.pet[data-mood="fired_up"] .pet-lid { transform: translateY(-4px); }
.pet[data-mood="fired_up"] .pet-brow--l { transform: translate(3px, 2px) rotate(20deg); }
.pet[data-mood="fired_up"] .pet-brow--r { transform: translate(-3px, 2px) rotate(-20deg); }
.pet[data-mood="fired_up"] .pet-mouth--soft { display: none; }
.pet[data-mood="fired_up"] .pet-mouth--smirk { display: block; fill: var(--pet-glow); }
.pet[data-mood="fired_up"] .pet-visor-glow { opacity: 0.26; }
.pet[data-mood="fired_up"] .pet-antenna__bulb { animation-duration: 0.7s; }
.pet[data-mood="fired_up"] .pet-speed__l { animation: pet-speed 0.6s linear infinite; }
.pet[data-mood="fired_up"] .pet-speed__l--2 { animation-delay: 0.18s; }
.pet[data-mood="fired_up"] .pet-speed__l--3 { animation-delay: 0.34s; }

/* ── Подустал: тяжёлые веки, брови вниз наружу, кривой рот, корпус осел
      набок, капля пота и пар. ── */
.pet[data-mood="tired"] { --pet-glow: var(--c-fg-dim); }
.pet[data-mood="tired"] .pet-bob { animation: pet-slump 4.6s ease-in-out infinite; }
.pet[data-mood="tired"] .pet-eyes { animation: pet-blink-slow 4s infinite; }
.pet[data-mood="tired"] .pet-lid { transform: translateY(1px); }
.pet[data-mood="tired"] .pet-brow--l { transform: translateY(-2px) rotate(12deg); }
.pet[data-mood="tired"] .pet-brow--r { transform: translateY(-2px) rotate(-12deg); }
.pet[data-mood="tired"] .pet-mouth--soft { display: none; }
.pet[data-mood="tired"] .pet-mouth--wave { display: block; }
.pet[data-mood="tired"] .pet-visor-glow { opacity: 0.08; }
.pet[data-mood="tired"] .pet-drop path { animation: pet-drop 2.4s ease-in infinite; }
.pet[data-mood="tired"] .pet-steam__p { animation: pet-steam 2.6s ease-out infinite; }
.pet[data-mood="tired"] .pet-steam__p--2 { animation-delay: 0.9s; }

/* ── Голодный: огромные глаза с бликами, брови «домиком» внутрь вверх,
      приоткрытый рот, дрожь. ── */
.pet[data-mood="hungry"] { --pet-glow: var(--c-blue); }
.pet[data-mood="hungry"] .pet-bob { animation: pet-shiver 0.9s ease-in-out infinite; }
.pet[data-mood="hungry"] .pet-pupil { transform: scale(1.3); }
.pet[data-mood="hungry"] .pet-shine { transform: scale(1.5); }
.pet[data-mood="hungry"] .pet-brow--l { transform: translate(4px, -3px) rotate(-22deg); }
.pet[data-mood="hungry"] .pet-brow--r { transform: translate(-4px, -3px) rotate(22deg); }
.pet[data-mood="hungry"] .pet-mouth--soft { display: none; }
.pet[data-mood="hungry"] .pet-mouth--o { display: block; animation: pet-chew 1.1s ease-in-out infinite; }

/* ── Скучает: взгляд уехал вбок, одна бровь поднята, рот в линию,
      корпус завалился набок, над головой «...». ── */
.pet[data-mood="bored"] { --pet-glow: var(--c-fg-muted); }
.pet[data-mood="bored"] .pet-bob { animation: pet-lean 5s ease-in-out infinite; }
.pet[data-mood="bored"] .pet-eyes { animation: pet-blink-slow 6s infinite; }
.pet[data-mood="bored"] .pet-eye { transform: translateX(4px); }
.pet[data-mood="bored"] .pet-lid { transform: translateY(-2px); }
.pet[data-mood="bored"] .pet-brow--l { transform: translateY(-4px) rotate(-6deg); }
.pet[data-mood="bored"] .pet-brow--r { transform: translateY(1px); }
.pet[data-mood="bored"] .pet-mouth--soft { display: none; }
.pet[data-mood="bored"] .pet-mouth--flat { display: block; }
.pet[data-mood="bored"] .pet-visor-glow { opacity: 0.07; }
.pet[data-mood="bored"] .pet-dot { animation: pet-dots 2.4s ease-in-out infinite; }
.pet[data-mood="bored"] .pet-dot--2 { animation-delay: 0.35s; }
.pet[data-mood="bored"] .pet-dot--3 { animation-delay: 0.7s; }

/* ── Спит: закрытые дуги вместо глаз, приоткрытый рот, глубокое дыхание,
      крупные «Z». ── */
.pet[data-mood="sleeping"] { --pet-glow: var(--c-fg-dim); --pet-glow: color-mix(in srgb, var(--c-fg-dim) 65%, var(--c-bg)); }
.pet[data-mood="sleeping"] .pet-bob { animation: pet-sleep 5.4s ease-in-out infinite; }
.pet[data-mood="sleeping"] .pet-eyes { animation: none; }
.pet[data-mood="sleeping"] .pet-eye { display: none; }
.pet[data-mood="sleeping"] .pet-eye-shut { display: block; stroke: var(--c-fg-dim); }
.pet[data-mood="sleeping"] .pet-brow--l { transform: translateY(-4px) rotate(4deg); }
.pet[data-mood="sleeping"] .pet-brow--r { transform: translateY(-4px) rotate(-4deg); }
.pet[data-mood="sleeping"] .pet-mouth--soft { display: none; }
.pet[data-mood="sleeping"] .pet-mouth--o { display: block; animation: pet-breathe 5.4s ease-in-out infinite; }
.pet[data-mood="sleeping"] .pet-visor-glow { opacity: 0.05; }
.pet[data-mood="sleeping"] .pet-antenna__bulb { animation-duration: 5s; }
.pet[data-mood="sleeping"] .pet-z { animation: pet-zzz 3.6s ease-out infinite; }
.pet[data-mood="sleeping"] .pet-z--2 { animation-delay: 1.2s; }
.pet[data-mood="sleeping"] .pet-z--3 { animation-delay: 2.4s; }

/* ── Движения ── */
@keyframes pet-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20%      { transform: translateY(2px) scale(1.06, 0.94); }
  50%      { transform: translateY(-13px) scale(0.96, 1.05); }
  75%      { transform: translateY(0) scale(1.03, 0.97); }
}
@keyframes pet-dash {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50%      { transform: translate(3px, -5px) rotate(-5deg); }
}
@keyframes pet-slump {
  0%, 100% { transform: translateY(5px) rotate(-6deg) scale(1, 0.97); }
  50%      { transform: translateY(7px) rotate(-6deg) scale(1, 0.95); }
}
@keyframes pet-shiver {
  0%, 100% { transform: translate(0, 0) scale(0.93); }
  25%      { transform: translate(-1.5px, 1px) scale(0.93); }
  75%      { transform: translate(1.5px, -1px) scale(0.93); }
}
@keyframes pet-lean {
  0%, 100% { transform: rotate(-9deg) translateY(2px); }
  50%      { transform: rotate(-4deg) translateY(0); }
}
@keyframes pet-sleep {
  0%, 100% { transform: translateY(5px) rotate(7deg) scale(1); }
  50%      { transform: translateY(8px) rotate(7deg) scale(1.04); }
}
@keyframes pet-blink-slow {
  0%, 84%, 100% { transform: scaleY(1); }
  90%           { transform: scaleY(0.1); }
}
@keyframes pet-chew {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.6); }
}
@keyframes pet-breathe {
  0%, 100% { transform: scale(0.85); }
  50%      { transform: scale(1.25); }
}

/* ── Эффекты ── */
@keyframes pet-aura {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.15); }
}
@keyframes pet-spark {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  45%      { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes pet-speed {
  0%   { opacity: 0;   transform: translateX(10px); }
  40%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translateX(-14px); }
}
@keyframes pet-drop {
  0%   { opacity: 0;   transform: translateY(0) scale(0.6); }
  25%  { opacity: 0.9; transform: translateY(0) scale(1); }
  100% { opacity: 0;   transform: translateY(26px) scale(0.9); }
}
@keyframes pet-steam {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  35%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(-8px, -18px) scale(1.4); }
}
@keyframes pet-dots {
  0%, 100% { opacity: 0;    transform: translateY(2px); }
  40%      { opacity: 0.85; transform: translateY(0); }
}
@keyframes pet-zzz {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.7); }
  25%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(12px, -22px) scale(1.15); }
}

/* Реакция на тап — питомец должен отзываться, иначе он остаётся картинкой. */
.pet.is-poked .pet-bob { animation: pet-poke 0.65s var(--ease-spring); }
.pet.is-poked .pet-eye { transform: scaleY(0.5); }
@keyframes pet-poke {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-14px) rotate(-10deg) scale(1.08, 0.94); }
  55%  { transform: translateY(0) rotate(9deg) scale(0.95, 1.05); }
  80%  { transform: translateY(-3px) rotate(-4deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Уважение к системной настройке: без движения персонаж просто стоит,
   но мимика (брови, глаза, рот, цвет) остаётся — она статична. */
@media (prefers-reduced-motion: reduce) {
  .pet, .pet * { animation: none !important; }
}



/* Иконки на месте бывших эмодзи. Lucide рисует 24px по умолчанию — в мелких
   элементах это разваливает строку, поэтому размер задаём явно. */
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.petbar__streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.petbar__streak svg { width: 11px; height: 11px; }


/* Питомец в нижней части бокового меню (ПК). Место в списке чатов он занимал
   зря: список прокручивается, а виджет должен быть на глазах всегда.
   margin-top: auto прижимает его к низу колонки навигации. */
.nav-pet { display: none; }

@media (min-width: 1024px) {
  .nav-pet {
    display: block;
    margin-top: auto;
    padding-top: var(--sp-3);
  }

  /* Вертикальная раскладка: в сайдбаре ~172px, строкой виджет не помещается. */
  .petbar--nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
  }
  .petbar--nav .petbar__face { align-self: center; }
  .petbar--nav .petbar__mood { right: -2px; bottom: 0; }
  .petbar--nav .petbar__body { gap: 6px; }
  .petbar--nav .petbar__top {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .petbar--nav .petbar__name { max-width: 100%; }
  .petbar--nav .petbar__streak { margin-left: 0; }
  /* Подсказка переносится по словам: в узкой колонке одна строка с
     многоточием не сообщала бы ничего. */
  .petbar--nav .petbar__line {
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
  }
}


/* Плашка памяти: контакт заблокирован или его компания в чёрном списке.
   Живёт ВНУТРИ закреплённой шапки диалога, поэтому видна в любой точке чата,
   а не только в его начале. */
.memory-banner {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-danger);
  border-radius: var(--r-md);
  background: var(--c-danger-soft);
  color: var(--c-fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  white-space: normal;
}

/* Вариант «ИИ на паузе» (ai_hold): не блок, а внимание — янтарный, а не
   красный. Внутри может быть кнопка «Возобновить ИИ». */
.memory-banner--hold {
  border-color: var(--c-warn);
  background: var(--c-warn-soft);
}
.memory-banner--hold .btn {
  margin-top: var(--sp-2);
}
/* Этап диалога / запланированное действие (ТЗ 14.10): спокойная синяя. */
.memory-banner--stage {
  border-color: var(--c-blue);
  background: var(--c-info-soft);
}
.memory-banner--stage .btn {
  margin-top: var(--sp-2);
}

/* Настройки → «Действия ИИ и интервалы». */
.action-timings { display: flex; flex-direction: column; gap: var(--sp-3); }
.action-timing {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.action-timing__head { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 600; }
.action-timing__head input { margin-top: 3px; flex: none; }
.action-timing__range { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.action-timing__range .input { width: 80px; flex: none; }

/* Атрибут hidden сильнее любого display у компонентов (поля формы — flex). */
[hidden] { display: none !important; }

/* Настройки: плашки идут прямо в экран без .list — соседним нужен зазор
   (правка 27.09: «Номера и компании» слипались с «Группой результатов»). */
.settings-screen > .row + .row { margin-top: var(--sp-2); }

/* Правки 16.10: замороженное подключение (лимит аккаунтов) и карточка Премиума. */
.fab.is-frozen { background: var(--c-surface-2); color: var(--c-fg-muted); box-shadow: none; }
.premium-card { border: 1px solid var(--c-accent-soft); }
.premium-card.is-frozen { border-color: var(--c-danger); }