/* ===========================================================
   FunPay Bridge — Mini App
   Электрический лайм на чёрном. Unbounded для display, Onest для тела.
   =========================================================== */

:root {
  --bg:        #0a0a0a;
  --surface:   #14141a;
  --surface-2: #1c1c24;
  --surface-3: #24242c;
  --border:    #26262e;
  --border-soft: #1e1e26;

  --text:   #ededed;
  --muted:  #6e6e76;
  --soft:   #9d9da8;

  --accent:        #c0ff3e;
  --accent-strong: #d2ff5e;
  --accent-soft:   rgba(192, 255, 62, .08);
  --accent-glow:   rgba(192, 255, 62, .25);
  --accent-fg:     #0a0a0a;
  /* приглушённый акцент для "моих" сообщений и активных пилюль —
     чтобы не слепить ярким лаймом */
  --accent-mute-bg:     #232a13;
  --accent-mute-fg:     #c0ff3e;
  --accent-mute-border: rgba(192, 255, 62, .2);

  --success: #c0ff3e;
  --danger:  #ff5151;
  --warn:    #ffb547;

  /* Цвет уведомлений о непрочитанных — приглушённый янтарь.
     Намеренно отличается от основного лайма, чтобы "обрати внимание"
     не сливалось с фирменным акцентом. */
  --unread:        #f4c46c;
  --unread-soft:   rgba(244, 196, 108, .12);
  --unread-glow:   rgba(244, 196, 108, .35);
  --unread-border: rgba(244, 196, 108, .35);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Unbounded", "Onest", -apple-system, sans-serif;
  --body: "Onest", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  /* full-height чёрный фон без проблесков по краям. */
  min-height: 100vh;
  height: 100%;
  width: 100%;
  /* убираем bounce/overscroll — он давал пустой пробел снизу при свайпе */
  overscroll-behavior-y: none;
}
html { background: var(--bg); }

body::before {
  content: "";
  position: fixed;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(192,255,62,0.06) 0%, transparent 70%);
}

main {
  position: relative;
  z-index: 1;
  /* шире для лучшего обзора чата на десктопе. На мобильных всё равно
     ограничится шириной окна Telegram. */
  max-width: 720px;
  margin: 0 auto;
  /* нижний паддинг существенно меньше — лишний пробел убран */
  padding: 16px 18px 24px;
}

/* ====================== Loader ====================== */
.loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 100;
}
.loader-mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--surface-2);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====================== Brand ====================== */
.brand-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px; padding-top: 4px; gap: 10px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--accent);
  position: relative;
  box-shadow: 0 0 0 4px rgba(192,255,62,.12);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 5px;
  background: var(--bg); border-radius: 3px;
}
.brand-text {
  font-family: var(--display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
}
.brand-text-light { color: var(--muted); font-weight: 400; }

.brand-actions { display: flex; align-items: center; gap: 8px; }

/* Privacy eye */
.privacy-toggle {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.privacy-toggle:hover { color: var(--text); background: var(--surface-2); }
.privacy-toggle.on { color: var(--accent); border-color: var(--accent); }
.privacy-toggle svg { width: 16px; height: 16px; display: block; }

/* блюр на чувствительных данных — глобальный */
body.privacy [data-private] {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  transition: filter .2s;
}
/* Дополнительная категория — чаты (ники, сообщения, статусы) */
body.privacy-chats .list-item-title-left > span:not(.chat-star-icon):not(.chat-note-icon),
body.privacy-chats .list-item-preview,
body.privacy-chats .buyer-status-tag,
body.privacy-chats .chat-head-info .name {
  filter: blur(6px);
  user-select: none;
}

/* ====================== Screens ====================== */
.screen { animation: fadeIn .35s cubic-bezier(.2,.9,.3,1); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.display {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-transform: uppercase;
  word-break: break-word;
}
.display::after { content: "."; color: var(--accent); }

.lede {
  color: var(--soft);
  font-size: 14px; line-height: 1.5;
  margin: 0 0 24px; max-width: 460px;
}

.muted { color: var(--muted); }
.opt   { color: var(--muted); font-size: 11px; font-weight: 400; }
.hint  { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.error {
  color: var(--danger); font-size: 13px; margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(255,81,81,.08);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,81,81,.25);
}

/* ====================== Card ====================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ====================== Field ====================== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
input[type="text"], input[type="password"], textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 72px; font-family: var(--body); font-size: 14px; }

input[type="number"].compact {
  width: 80px; padding: 8px 10px;
  font-family: var(--mono); font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text); text-align: center;
}

/* ====================== Buttons ====================== */
button {
  font-family: var(--body);
  cursor: pointer;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  transition: transform .08s, background .15s, opacity .15s, box-shadow .2s, border-color .15s, color .15s;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

.pill { border-radius: var(--r-pill); padding: 14px 28px; }
.pill.compact { padding: 11px 20px; font-size: 13px; }

button.primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 24px -8px var(--accent-glow);
}
button.primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong), 0 8px 28px -8px var(--accent-glow);
}

button.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 20px;
}
button.secondary:hover { background: var(--border); }

button.ghost { background: transparent; color: var(--muted); padding: 8px; }
button.ghost:hover { color: var(--text); }

button.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(255,81,81,.35);
}
button.danger:hover { background: rgba(255,81,81,.08); }

button.icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 0;
}
button.icon-btn svg { width: 18px; height: 18px; display: block; }
button.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* "Открыть на FunPay" — узнаваемая ссылка с иконкой */
a.fp-link, .fp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-mute-bg);
  color: var(--accent-mute-fg);
  border: 1px solid var(--accent-mute-border);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
a.fp-link:hover {
  background: rgba(192,255,62,.12);
  border-color: var(--accent);
  color: var(--accent-strong);
}
a.fp-link::after { content: "↗"; font-size: 11px; opacity: .8; }

/* В чат-хедере, на узких экранах, чтобы кнопка FUNPAY гарантированно
   поместилась на одной строке с ником + back-кнопкой. */
.chat-head .fp-link {
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
@media (max-width: 380px) {
  .chat-head .fp-link {
    /* На совсем узких экранах текст "FUNPAY" заменяется только на стрелку */
    font-size: 0;  /* скрыть текст */
    padding: 7px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    justify-content: center;
  }
  .chat-head .fp-link::after {
    font-size: 13px;  /* стрелка остаётся видна */
    opacity: 1;
  }
}

/* ====================== Status pill ====================== */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--display);
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.status-pill.online {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}
.status-pill.online::before {
  background: var(--accent-fg);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(10,10,10,.5); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ====================== Metrics grid ====================== */
.metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}
.metric {
  padding: 18px 20px;
  gap: 6px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
}
.metric-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.metric-value {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
}
/* "Доступно к выводу X ₽" — мелкая строчка под значением */
.metric-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
}
.metric-sub.muted { color: var(--muted); }

/* ====================== Tabs ====================== */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  /* Иконка сверху, текст снизу мелким — всегда. Раньше я делал row на
     широких экранах, но юзеру неудобно потому что текст обрезается
     и тогда вкладки выглядят как "значок аналитика настройки" подряд. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 0 auto;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-pill);
  transition: color .15s, background .15s, box-shadow .2s;
  white-space: nowrap;
  position: relative;
}
.tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  stroke-width: 2;
}
.tab:hover { color: var(--soft); }
.tab.active {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 4px 16px -4px var(--accent-glow);
}

@media (max-width: 480px) {
  .tabs {
    padding: 4px;
    gap: 2px;
  }
  .tab {
    padding: 7px 4px;
    font-size: 9px;
    letter-spacing: 0.04em;
    min-width: 0;
  }
}

/* Бейдж на табе "чаты" со счётчиком новых сообщений */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--unread);
  color: #1c1408;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 0 12px var(--unread-glow);
  animation: badgePop .25s cubic-bezier(.2, .9, .3, 1);
}
/* На мобильном бейдж позиционирован абсолютно, чтобы не съедать ширину таба */
@media (max-width: 480px) {
  .tab-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    padding: 0 4px;
  }
}
.tab.active .tab-badge {
  background: var(--accent-fg);
  color: var(--unread);
  box-shadow: none;
}
@keyframes badgePop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Баннер-плашка над списком чатов: "↓ 3 новых сообщения" */
.unread-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
  background: var(--unread-soft);
  border: 1px solid var(--unread-border);
  border-radius: var(--r-md);
  color: var(--unread);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background .15s, border-color .15s;
}
.unread-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.unread-banner-read {
  background: var(--unread);
  color: #1a1a1a;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.unread-banner-read:hover { opacity: 0.85; }
.unread-banner:hover {
  background: rgba(244, 196, 108, .18);
  border-color: var(--unread);
}
.unread-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ====================== Filter pills ====================== */
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all .15s;
}
.filter-pill:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface-2);
}
.filter-pill.active {
  background: var(--accent-mute-bg);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ====================== List items ====================== */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.9,.3,1);
  position: relative;
  overflow: hidden;
}
.list-item:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* Чат непрочитан — приглушённо-жёлтая подсветка.
   Намеренно ярко, но не лаймом, чтобы не путать с активной вкладкой/кнопкой. */
.list-item.unread {
  background: linear-gradient(90deg, var(--unread-soft) 0%, var(--surface) 65%);
  border-color: var(--unread-border);
}
.list-item.unread::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--unread);
}
.list-item.unread .list-item-title > span:first-child { color: var(--unread); }
.list-item.unread .list-item-preview { color: var(--text); font-weight: 500; }
.list-item.unread .list-item-icon {
  color: var(--unread);
  border-color: var(--unread-border);
  background: var(--surface-2);
}

.list-item-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--soft);
  border: 1px solid var(--border);
}
.list-item-icon svg { width: 18px; height: 18px; }
.list-item:hover .list-item-icon {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.list-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.list-item-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.list-item-title-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  min-width: 0;
}
.list-item-title-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.list-item-meta {
  font-size: 11px; color: var(--muted);
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.list-item-preview {
  font-size: 12px; color: var(--soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-item-preview-author {
  color: var(--accent);
  font-weight: 500;
  margin-right: 2px;
}
.list-item.unread .list-item-preview-author { color: var(--unread); }
.unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--unread);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--unread-glow);
  animation: unreadPulse 1.8s ease-out infinite;
}
@keyframes unreadPulse {
  0%   { box-shadow: 0 0 0 0 var(--unread-glow); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.empty {
  text-align: center; color: var(--muted);
  padding: 48px 16px;
  font-size: 13px; font-style: italic;
}

/* ====================== Big cards (settings) ====================== */
.big-card {
  display: flex; gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
}
.bc-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bc-icon svg { width: 22px; height: 22px; }
.bc-icon.danger {
  background: transparent; color: var(--danger);
  border: 1px solid rgba(255,81,81,.35);
}
.bc-body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bc-body h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
}
.bc-body p { margin: 0; font-size: 13px; color: var(--soft); line-height: 1.5; }
.danger-card .bc-body h3 { color: var(--danger); }

/* ====================== Row (settings switch) ====================== */
.row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; gap: 14px;
}
.row.inline { padding: 4px 0; }
.row input[type="checkbox"] {
  width: 40px; height: 22px;
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.row input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--soft);
  border-radius: 50%;
  transition: left .2s, background .2s;
}
.row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.row input[type="checkbox"]:checked::after {
  left: 20px; background: var(--accent-fg);
}

/* ====================== Chat screen ====================== */

/* Старый screen-head оставляем для обратной совместимости */
.screen-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  margin-bottom: 12px;
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border-soft);
}
.screen-head h2 {
  font-family: var(--display);
  font-size: 18px; font-weight: 700; letter-spacing: 0.02em;
  margin: 0; text-transform: uppercase;
}

/* Расширенный chat-head: ник, время + ссылка на FunPay.
   Возвращён сплошной тёмный фон, чтобы планка читалась и не было
   проблесков. Раньше я делал прозрачным, чтобы не было "чёрного хвоста"
   справа от FUNPAY-пилюли — но без плашки она терялась визуально. */
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Фиксируем шапку у верха viewport — иначе при коротких чатах sticky
     "пролетает" и шапка съезжает вниз. fixed гарантирует постоянное место. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px max(18px, calc((100vw - 720px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  min-width: 0;
}
#screen-chat {
  display: flex;
  flex-direction: column;
  /* При увеличенном масштабе (zoom 1.5) — 100vh всё равно равен 100% реального
     viewport, не уменьшенного зумом. Компенсируем через множитель --vh-scale
     который JS ставит в (1 / scale). При scale=1 → 100vh. При scale=1.5 →
     66.67vh — что после zoom 1.5 даст ровно высоту экрана. */
  height: calc(100vh * var(--vh-scale, 1));
  height: calc(100dvh * var(--vh-scale, 1));
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
#screen-chat .chat-head {
  position: static;
  flex-shrink: 0;
}
#screen-chat .messages {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 16px;
  padding-bottom: 12px;
  /* убираю фиксированный padding-bottom — теперь dock в потоке flex */
}
#screen-chat[hidden] { display: none; }
#screen-chat .bottom-dock {
  position: static;
  flex-shrink: 0;
  /* убираем fixed positioning — теперь dock естественно внизу flex */
}

.composer {
  display: flex; gap: 8px;
  padding: 10px max(18px, calc((100vw - 720px) / 2)) 6px;
  align-items: flex-end;
  background: var(--bg);
}
.messages {
  display: flex; flex-direction: column;
  gap: 4px; margin: 0;
}
.chat-head > button.icon-btn {
  flex-shrink: 0;  /* кнопка-стрелка "назад" не сжимается */
}
.chat-head > a.fp-link {
  flex-shrink: 0;  /* кнопка FUNPAY не сжимается и не вылезает за рамку */
}
.chat-head-info {
  /* Не растягиваем info на весь свободный flex — иначе между текстом
     и кнопкой FUNPAY получается визуальная "дыра". margin-right:auto
     вытолкнет последующие элементы (fp-link) к правому краю.   */
  flex: 0 1 auto;
  margin-right: auto;
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.chat-head-info .name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-head-info .sub {
  font-size: 11px; color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* screen-chat: flex column layout — chat-head, scrollable messages, dock */
#screen-chat[hidden] { display: none; }
.msg-wrap {
  display: flex; flex-direction: column;
  gap: 2px; margin-bottom: 8px;
}
.msg-wrap.me { align-items: flex-end; }
.msg-wrap.them { align-items: flex-start; }
.msg-wrap.system { align-items: center; }

.msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  word-break: break-word;
}
.msg.them {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 5px;
  color: var(--text);
}
/* Свои сообщения — тёмно-зелёный с акцент-каёмкой,
   без слепящего лайма */
.msg.me {
  background: var(--accent-mute-bg);
  color: var(--text);
  border: 1px solid var(--accent-mute-border);
  border-bottom-right-radius: 5px;
}
/* Системные — "тёмно-коричневые" уведомления заказа, как просил юзер */
.msg.system {
  background: rgba(180, 110, 40, .12);
  color: #d9b88a;
  border: 1px solid rgba(180, 110, 40, .3);
  font-size: 12.5px;
  border-radius: 12px;
  max-width: 90%;
  text-align: center;
}
/* Ярче — "Покупатель X подтвердил выполнение" */
.msg.system.order-success {
  background: rgba(180, 110, 40, .2);
  color: #f0c97a;
  border-color: rgba(180, 110, 40, .55);
  font-weight: 500;
  box-shadow: 0 0 0 3px rgba(180, 110, 40, .08);
}

.msg img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  margin-top: 4px;
}
.msg-time {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
  padding: 0 8px;
}

.composer textarea {
  flex: 1;
  resize: none;
  /* Отключаем resize-handle во всех движках — на некоторых сборках Telegram
     WebApp / Chromium он рисуется поверх scrollbar'а в правом нижнем углу,
     даже несмотря на resize:none. -webkit-resizer гарантированно убирает
     handle в WebKit. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  max-height: 140px;
  overflow-y: auto;
  border-radius: 22px;
  padding: 12px 18px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.composer textarea::-webkit-resizer { display: none; }
textarea { resize: none !important; }
.composer button {
  flex-shrink: 0;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.composer button svg { width: 18px; height: 18px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 10px;
  border: 2px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) var(--surface); }

/* ====================== Analytics ====================== */
.kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 18px;
}
.kpi-grid .metric { padding: 16px 18px; }
.lot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  gap: 12px;
  margin-bottom: 6px;
}
.lot-row .lot-title {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  /* перенос длинных названий — было ellipsis, теперь нормальный wrap */
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.lot-row .lot-stats {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.lot-row .lot-stats b { color: var(--accent); }

/* ====================== Sales item ====================== */
.sale-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  margin-bottom: 6px;
}
.sale-item-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.sale-item-title {
  font-size: 14px; font-weight: 600;
  flex: 1; min-width: 0;
  word-break: break-word;
  line-height: 1.35;
}
.sale-item-buyer {
  font-size: 13px; color: var(--soft);
  font-family: var(--mono);
  word-break: break-word;
  margin-top: 6px;
  line-height: 1.5;
}
.sale-item-buyer b {
  font-size: 13.5px;
}
.sale-item-actions {
  display: flex; gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sale-item-actions button {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 99px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ====================== Toast ====================== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: toastIn .3s cubic-bezier(.2,.9,.3,1);
}
.toast.success { border-color: var(--accent); color: var(--accent); }
.toast.error { border-color: rgba(255,81,81,.4); color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ====================== Modal ====================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: fadeIn .2s ease-out;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 460px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: modalIn .25s cubic-bezier(.2, .9, .3, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  gap: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.modal-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color .15s, background .15s;
}
.modal-close:hover { color: var(--text); background: var(--surface-2); }
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.modal-body .row-pair {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.modal-body .row-pair:last-child { border-bottom: 0; }
.modal-body .row-pair .label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 2px;
}
.modal-body .row-pair .value {
  text-align: right;
  word-break: break-word;
  font-weight: 500;
}
.modal-body .row-pair .value.accent { color: var(--accent); }
.modal-body .description {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--soft);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ====================== Review-style сообщение в чате ======================
   FunPay в системных сообщениях шлёт текст вида "Username 30.04.26 текст"
   (например при отзывах). Парсим в JS и оборачиваем в .msg-review,
   чтобы ник/дата были отдельной строкой, а текст — основной частью. */
.msg-review .msg-author {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.msg-review .msg-author .msg-author-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
.msg-review .msg-author-body {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

/* Cooldown picker для автоответа */
.cooldown-block { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cooldown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cooldown-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cd-chip {
  background: var(--surface-2);
  color: var(--soft);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.cd-chip:hover { color: var(--text); border-color: var(--border); }
.cd-chip.active {
  background: var(--accent-mute-bg);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.cooldown-input {
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.cooldown-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Stock color indicators */
.value.stock-good     { color: var(--accent); font-weight: 600; }
.value.stock-warning  { color: var(--warn); font-weight: 600; }
.value.stock-critical { color: var(--danger); font-weight: 700; }

/* Buyer status badges в списке чатов */
.buyer-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 11px;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.buyer-badge.buyer-new {
  color: var(--soft);
  border-color: var(--border);
  background: var(--surface-2);
}
.buyer-badge.buyer-buyer {
  color: #a8d2ff;
  border-color: rgba(168, 210, 255, 0.4);
  background: rgba(168, 210, 255, 0.08);
}
.buyer-badge.buyer-regular {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-mute-bg);
}
.buyer-badge.buyer-vip {
  color: #1c1408;
  background: linear-gradient(135deg, #ffd84d, #ffae00);
  border-color: #ffae00;
  box-shadow: 0 0 8px rgba(255, 174, 0, 0.5);
}
.buyer-badge.buyer-vip-plus {
  color: #2a1c08;
  background: linear-gradient(135deg, #ffe082, #ff8c00);
  border-color: #ff8c00;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.6);
}
.buyer-badge.buyer-vip-pp {
  color: #1c0816;
  background: linear-gradient(135deg, #ffb6f9, #ff5cd1);
  border-color: #ff5cd1;
  box-shadow: 0 0 12px rgba(255, 92, 209, 0.6);
}
.buyer-badge.buyer-vip-ppp {
  color: #fff;
  background: linear-gradient(135deg, #ff5e62, #ff9966, #ffd84d, #4ecdc4, #5b9eff);
  background-size: 300% 100%;
  border-color: #ffd84d;
  box-shadow: 0 0 14px rgba(255, 140, 80, 0.7);
  animation: vipRainbow 4s ease infinite;
}
@keyframes vipRainbow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Дополнительные элементы карточки продажи */
.sale-item-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.sale-net {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}

.lot-subcategory {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono);
  margin-top: 3px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.sales-search {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  box-sizing: border-box;
  margin-bottom: 14px;
  transition: border-color .15s;
}
.sales-search::placeholder { color: var(--muted); }
.sales-search:focus { outline: none; border-color: var(--accent); }

.lot-payout-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.lot-row.clickable { cursor: pointer; transition: background .15s; }
.lot-row.clickable:hover { background: var(--surface-2); }
.lot-row.clickable:active { transform: scale(0.99); }

.custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.date-input {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  flex: 1 1 130px;
  min-width: 0;
}
.date-input:focus { outline: none; border-color: var(--accent); }
.date-sep { color: var(--muted); }

.sale-net-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

/* Lot list — pill-индикатор склада/авто-выдачи */
.lot-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lot-sub { color: var(--soft); }
.lot-stock-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.lot-stock-pill.stock-good {
  color: var(--accent);
  border-color: rgba(192, 255, 62, 0.35);
  background: var(--accent-mute-bg);
}
.lot-stock-pill.stock-warning {
  color: var(--warn);
  border-color: rgba(255, 181, 71, 0.35);
  background: rgba(255, 181, 71, 0.08);
}
.lot-stock-pill.stock-critical {
  color: var(--danger);
  border-color: rgba(255, 81, 81, 0.4);
  background: rgba(255, 81, 81, 0.08);
}
.lot-stock-pill.lot-no-auto {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-2);
}

/* Кликабельный статус авто-поднятия */
.clickable-status {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.clickable-status:hover { color: var(--accent); }

/* Лог авто-поднятия (модалка) */
.raise-log-item {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.raise-log-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.raise-log-result {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.raise-result-success {
  color: var(--accent);
  background: var(--accent-mute-bg);
  border-color: var(--accent);
}
.raise-result-wait {
  color: var(--soft);
  background: var(--surface-2);
  border-color: var(--border);
}
.raise-result-error {
  color: var(--danger);
  background: rgba(255, 81, 81, 0.08);
  border-color: rgba(255, 81, 81, 0.4);
}
.raise-log-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.raise-log-details {
  font-size: 12px;
  color: var(--soft);
  line-height: 1.4;
}

/* ====== Системные сообщения в чате (отзыв, автоответ, автовыдача) ====== */
.msg.msg-system {
  align-self: stretch;
  background: rgba(192, 255, 62, 0.04);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 95%;
  font-size: 12.5px;
}
.msg-system-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 4px;
}
.msg-system-icon { font-size: 14px; }
.msg-system-title b { font-weight: 700; }
.msg-system-date {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.msg-system-tag {
  font-size: 9px;
  background: var(--accent-mute-bg);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 600;
}
.msg-system-body {
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}
/* Отзыв — золотые звёзды */
.msg.msg-review-card { border-left-color: #ffd84d; background: rgba(255, 216, 77, 0.05); }
.msg.msg-review-card .msg-system-head { color: #ffd84d; }
.review-stars {
  font-size: 16px;
  color: #ffd84d;
  letter-spacing: 1px;
  margin: 4px 0 6px;
}
.review-stars-empty { color: rgba(255, 216, 77, 0.2); }
.msg-review-body {
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
  font-style: italic;
}
/* Автоответ */
.msg.msg-autoreply { border-left-color: #5b9eff; background: rgba(91, 158, 255, 0.05); }
.msg.msg-autoreply .msg-system-head { color: #5b9eff; }
.msg.msg-autoreply .msg-system-tag {
  background: rgba(91, 158, 255, 0.15);
  color: #5b9eff;
}
/* Автовыдача */
.msg.msg-autodelivery { border-left-color: #ff8c66; background: rgba(255, 140, 102, 0.05); }
.msg.msg-autodelivery .msg-system-head { color: #ff8c66; }

/* Карточки ботовых сообщений по типу (автовыдача/рассылка/новости/автоответ) */
.msg.msg-bot-kind {
  border-left: 3px solid var(--border-soft);
  padding-left: 10px;
}
.msg.msg-kind-delivery  { border-left-color: #ff8c66; background: rgba(255, 140, 102, 0.06); }
.msg.msg-kind-delivery  .msg-system-head { color: #ff8c66; }
.msg.msg-kind-broadcast { border-left-color: #c0ff3e; background: rgba(192, 255, 62, 0.06); }
.msg.msg-kind-broadcast .msg-system-head { color: #c0ff3e; }
.msg.msg-kind-news      { border-left-color: #5bc8ff; background: rgba(91, 200, 255, 0.06); }
.msg.msg-kind-news      .msg-system-head { color: #5bc8ff; }
.msg.msg-kind-autoreply { border-left-color: #5b9eff; background: rgba(91, 158, 255, 0.06); }
.msg.msg-kind-autoreply .msg-system-head { color: #5b9eff; }

/* Loading state для stock pill */
.lot-stock-pill.lot-loading {
  color: var(--muted);
  border-color: var(--border-soft);
  background: var(--surface-2);
  opacity: 0.6;
}

.review-stars-loading {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin: 4px 0;
}

/* Сообщения от тех. поддержки FunPay — кастомный визуал */
.msg.msg-from-staff {
  border-left: 3px solid #4ade80;
  background: rgba(74, 222, 128, 0.05);
}
.msg-staff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.msg-staff-name {
  font-weight: 700;
  color: var(--text);
}
.msg-staff-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #22c55e, #4ade80);
  color: #0a1f0d;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.msg-system-date {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  margin-left: 6px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}

/* ====== Skeleton-loaders ======
   Серые плейсхолдеры на месте контента пока грузится — лучше чем
   обычный текст "загрузка...", даёт ощущение скорости.
   Использование: <div class="skeleton skeleton-row"></div> */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2, #1a1a20) 0%,
    var(--border-soft, #1e1e26) 50%,
    var(--surface-2, #1a1a20) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.skeleton-row {
  height: 56px;
  border-radius: 14px;
}
.skeleton-row-tall {
  height: 84px;
  border-radius: 14px;
}
.skeleton-row-card {
  height: 72px;
  border-radius: 18px;
}
.skeleton-msg-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.skeleton-msg {
  height: 38px;
  width: 65%;
  border-radius: 14px;
}
.skeleton-msg.me { align-self: flex-end; background: linear-gradient(90deg, rgba(192,255,62,0.15), rgba(192,255,62,0.08), rgba(192,255,62,0.15)); }
.skeleton-msg.long { width: 80%; height: 60px; }
.skeleton-msg.short { width: 35%; height: 30px; }

/* UI scale: применяется через CSS zoom — настоящий браузерный масштаб
   (как Ctrl+= в Chrome). Меняет ВСЁ — шрифт, отступы, иконки, картинки.
   Раньше использовали font-size — но он не масштабировал картинки. */
:root { --ui-scale: 1; }
html { zoom: var(--ui-scale); }

.ui-scale-presets {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ui-scale-presets .cd-chip {
  flex: 1;
  text-align: center;
  font-weight: 700;
}

/* Профиль покупателя в шапке чата — компактная строка под именем */
.chat-buyer-profile {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
}
.chat-buyer-profile .bp-rating {
  color: #ffd84d;
  font-weight: 600;
}
.chat-buyer-profile .bp-reviews {
  color: var(--soft);
}
.chat-buyer-profile .bp-reg { font-style: italic; }
.chat-buyer-profile .bp-online {
  color: #4ade80;
  font-weight: 600;
}

/* ====== Sub-tabs (Свои / Конкуренты) ====== */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0;
}
.sub-tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border 0.15s;
}
.sub-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sub-tab:hover { color: var(--soft); }

/* ====== Конкуренты ====== */
.competitor-group {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.competitor-group-head {
  padding: 12px 14px;
  background: rgba(192, 255, 62, 0.05);
  border-bottom: 1px solid var(--border-soft);
}
.competitor-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.competitor-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}
.competitor-group-meta b { color: var(--text); }
.competitor-group-count { margin-left: auto; }
.competitor-diff.diff-bad { color: #ff8c66; font-weight: 600; }
.competitor-diff.diff-good { color: #4ade80; font-weight: 600; }
.competitor-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.competitor-row:last-child { border-bottom: none; }
.competitor-row-main { flex: 1; min-width: 0; }
.competitor-row-seller {
  display: flex; gap: 8px; align-items: center; margin-bottom: 4px;
}
.competitor-seller-name {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--soft);
}
.competitor-server {
  font-size: 10px;
  background: var(--surface-2, #1a1a20);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--muted);
}
.competitor-row-title {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
.competitor-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
}
.competitor-row-price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.competitor-row-diff {
  font-size: 10px;
  font-weight: 600;
}
.competitor-open-btn {
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  padding: 2px 0;
}
.competitor-open-btn:hover { text-decoration: underline; }

/* ====== Analyze частые слова ====== */
.analyze-results { margin-top: 12px; }
.analyze-results h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 12px 0 6px;
  font-weight: 700;
}
.analyze-meta {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}
.analyze-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.analyze-term {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 4px 4px 10px;
  font-size: 11px;
}
.analyze-term-text { color: var(--text); }
.analyze-term-count { color: var(--accent); font-weight: 700; }
.analyze-make-trigger {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 9.5px;
  cursor: pointer;
  padding: 2px 8px;
}
.analyze-make-trigger:hover { text-decoration: underline; }

/* ====== Коды активации ====== */
.activation-codes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.activation-code-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.activation-code-row.disabled { opacity: 0.5; }
.activation-code-row.ac-expired-row { opacity: 0.62; border-left: 3px solid #6b5a3a; }
.ac-main { flex: 1; min-width: 0; }
.ac-code {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.ac-desc { font-size: 11px; color: var(--text); margin-top: 2px; }
.ac-meta { font-size: 10px; color: var(--muted); margin-top: 3px; }
.ac-actions { display: flex; gap: 4px; }
.ac-toggle, .ac-delete, .ac-edit, .ac-keys {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
}
.ac-toggle:hover, .ac-delete:hover, .ac-edit:hover, .ac-keys:hover { color: var(--text); border-color: var(--accent); }
.ac-edit:hover { color: var(--accent); border-color: var(--accent); }
.ac-keys:hover { color: var(--accent); border-color: var(--accent); }
.ac-delete:hover { color: #ff8c66; border-color: #ff8c66; }

/* Refresh button spin animation — крутится непрерывно пока класс активен */
@keyframes refreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.privacy-toggle.refresh-spinning svg {
  animation: refreshSpin 0.8s linear infinite;
}

.competitor-category-block { margin-bottom: 20px; }
.competitor-category-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

/* Новые тиры покупателей: Bronze / Gold / Premium */
.buyer-badge.buyer-bronze {
  background: linear-gradient(135deg, #cd7f32, #b87333);
  color: #fff;
  box-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
}
.buyer-badge.buyer-gold {
  background: linear-gradient(135deg, #ffd700, #ffae00);
  color: #2a1a00;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.buyer-badge.buyer-premium {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  font-weight: 700;
}
/* Tooltip над badge — нативный via title работает,
   но добавим лёгкий курсор для подсказки UX */
.buyer-badge[title] { cursor: help; }

/* Модалка создания кода активации */
.ac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Универсальные модалки confirm/prompt (замена браузерных) */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
  animation: uiFadeIn 0.12s ease;
}
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ui-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 360px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ui-modal-msg {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 16px;
}
.ui-modal-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}
.ui-modal-input:focus { outline: none; border-color: var(--accent); }
.ui-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ui-modal-actions button {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-soft);
}
.ui-modal-cancel {
  background: transparent;
  color: var(--muted);
}
.ui-modal-cancel:hover { color: var(--text); border-color: var(--border); }
.ui-modal-ok {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}
.ui-modal-ok:hover { filter: brightness(1.1); }
.ui-modal-ok.danger {
  background: #ff6b6b;
  border-color: #ff6b6b;
  color: #fff;
}
.ac-modal-card,
.ac-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ac-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.ac-modal-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.ac-modal-close {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-modal-close:hover { color: var(--text); border-color: var(--accent); }
.ac-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Растёт чтобы заполнить пространство и скроллится если контент не влезает.
     Это критично для модалок где много полей (новый ключ с фильтрами, код
     активации с max_uses, ит.д.) — без этого actions внизу обрезаются. */
  flex: 1 1 auto;
  min-height: 0;
}
.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-field > span {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--soft);
  font-weight: 600;
}
.ac-field input {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
}
.ac-field input:focus { outline: none; border-color: var(--accent); }
.ac-field small {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  font-style: italic;
}
.ac-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  /* Кнопки не сжимаются — всегда видны внизу модалки */
  flex-shrink: 0;
}

/* Тег фильтра по покупателю в списке кодов */
.ac-buyer-tag {
  display: inline-block;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  margin-left: 6px;
  font-family: var(--mono);
}

.competitors-search-wrap {
  margin-bottom: 14px;
}
.competitors-search-wrap input {
  width: 100%;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
}
.competitors-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}
.competitors-price-range {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}
.competitors-price-range label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.competitors-price-range input {
  flex: 1;
  font-size: 13px;
  padding: 9px 12px;
  margin: 0;
}
.competitors-search-wrap small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
  font-style: italic;
}

.sale-rub-converted {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  margin-left: 4px;
}

.lots-search-input {
  width: 100%;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 10px;
}
.lots-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ====== Quick replies (заготовленные ответы) ====== */
.quick-replies-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.qr-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.qr-row.disabled { opacity: 0.5; }
.qr-main { flex: 1; min-width: 0; }
.qr-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
.qr-resp {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}
.qr-delete {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
}
.qr-delete:hover { color: #ff8c66; border-color: #ff8c66; }

/* Bar над composer-ом в чате — компактный, прямо над полем ввода */
.quick-replies-bar {
  padding: 6px max(18px, calc((100vw - 720px) / 2)) 6px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  max-height: 100px;
  overflow-y: auto;
}
.quick-replies-bar.collapsed .qr-btn { display: none; }
.qr-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.qr-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
.qr-btn {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border);
  color: var(--soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.qr-btn:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ====== Слежка за ценой ====== */
.price-watchers-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.pw-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.pw-row.disabled { opacity: 0.5; }
.pw-main { flex: 1; min-width: 0; }
.pw-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.pw-url {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
  text-decoration: none;
}
.pw-url:hover { color: var(--accent); }
.pw-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 10px;
}
.pw-price {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}
.pw-checked { color: var(--muted); }
.pw-delete {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
}
.pw-delete:hover { color: #ff8c66; border-color: #ff8c66; }

/* Textarea внутри модалки */
.ac-field textarea {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}
.ac-field textarea:focus { outline: none; border-color: var(--accent); }

/* Инфо-блок в модалке (фиолетовая подсказка) */
.ac-modal-info {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #c4b5fd;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}

/* Конкуренты — новый UI с категорией / ключевыми / макс. ценой */
.competitors-search-wrap {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cs-row:last-of-type { margin-bottom: 0; }
.cs-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.competitors-search-wrap input,
.competitors-search-wrap select {
  flex: 1;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
}
.competitors-search-wrap input:focus,
.competitors-search-wrap select:focus {
  outline: none; border-color: var(--accent);
}

/* История цен — модалка */
.pw-hist-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.pw-hist-stats > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pw-hist-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pw-hist-stats b {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}
.pw-hist-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
  padding: 4px;
  margin-bottom: 12px;
  background: var(--surface-2, #1a1a20);
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}
.pw-hist-bar {
  flex: 1;
  background: var(--accent);
  border-radius: 2px;
  min-width: 2px;
  opacity: 0.7;
  cursor: help;
}
.pw-hist-bar:hover { opacity: 1; }
.pw-hist-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pw-hist-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 10px;
  background: var(--surface-2, #1a1a20);
  border-radius: 6px;
}
.pw-hist-time { color: var(--muted); }
.pw-hist-price { font-family: var(--mono); color: var(--text); font-weight: 600; }

/* Слежка — строки кликабельные */
.pw-row { cursor: pointer; transition: border-color 0.15s; }
.pw-row:hover { border-color: var(--accent); }

.raise-log-eta {
  background: rgba(192, 255, 62, 0.08);
  border: 1px solid rgba(192, 255, 62, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.raise-log-eta-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.raise-log-eta-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

/* Авто-поднятие — список категорий */
.raise-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 6px;
}
.raise-cat-main { flex: 1; min-width: 0; }
.raise-cat-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.raise-cat-last {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.raise-cat-eta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.raise-cat-eta.ready {
  color: var(--accent);
  background: rgba(192, 255, 62, 0.15);
}

.ac-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.ac-presets button {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.ac-presets button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Анализатор — стоп-слова */
.analyze-stopwords {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.analyze-stopwords-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.analyze-stopwords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.analyze-stopword-pill {
  background: rgba(255, 140, 102, 0.15);
  border: 1px solid rgba(255, 140, 102, 0.3);
  color: #ff8c66;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  cursor: pointer;
}
.analyze-stopword-pill:hover { background: rgba(255, 140, 102, 0.3); }
.analyze-hide-term {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  opacity: 0.5;
}
.analyze-hide-term:hover { color: #ff8c66; opacity: 1; }

/* ===== Конкуренты — новые карточки ===== */
.cs-row-prices { display: flex; gap: 6px; align-items: center; }
.cs-row-prices input { flex: 1; min-width: 0; }
.cs-dash { color: var(--muted); font-weight: 600; padding: 0 4px; }
.competitors-stats {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.competitors-stats b {
  color: var(--text);
  font-family: var(--mono);
}
.competitor-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.competitor-card:hover {
  border-color: var(--accent);
  background: var(--surface-2, #1a1a20);
  transform: translateX(2px);
}
.cc-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--mono);
}
.cc-rank-0 { background: linear-gradient(135deg, #ffd700, #ffae00); color: #2a1a00; box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); }
.cc-rank-1 { background: linear-gradient(135deg, #c0c0c0, #a8a8a8); color: #1a1a1a; }
.cc-rank-2 { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff; }
.cc-main { flex: 1; min-width: 0; }
.cc-seller-row { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.cc-seller { font-weight: 700; font-size: 12.5px; color: var(--soft); }
.cc-server { font-size: 10px; background: var(--surface-2, #1a1a20); padding: 1px 5px; border-radius: 4px; color: var(--muted); }
.cc-title { font-size: 11px; color: var(--muted); line-height: 1.3; }
.cc-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== Buyer Stats Modal ===== */
.bs-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.bs-stat {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bs-stat b {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
}
.bs-top-cat {
  padding: 10px 12px;
  background: rgba(192, 255, 62, 0.08);
  border: 1px solid rgba(192, 255, 62, 0.2);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.bs-top-cat b { color: var(--accent); }
.bs-section-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-weight: 700;
}
.bs-lot-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: var(--surface-2, #1a1a20);
  border-radius: 6px;
  margin-bottom: 3px;
  font-size: 11.5px;
}
.bs-lot-rank { color: var(--accent); font-weight: 700; text-align: center; padding-top: 2px; }
.bs-lot-title {
  color: var(--text);
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
}
.bs-lot-count { color: var(--muted); font-family: var(--mono); padding-top: 2px; }
.bs-lot-sum { font-family: var(--mono); font-weight: 600; color: var(--accent); padding-top: 2px; }

/* Top buyer строка в аналитике */
.buyer-top-cat {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}

/* Лоты — баннер неактивных */
.lots-inactive-banner {
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: var(--soft);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 11.5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lots-inactive-banner b { color: var(--text); }
.lots-inactive-link {
  color: #a78bfa;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  font-size: 11px;
}
.lots-inactive-link:hover { text-decoration: underline; }

/* Ручной ввод стоп-слов в анализаторе */
.analyze-add-stopwords {
  display: flex;
  gap: 6px;
  margin: 10px 0 14px;
}
.analyze-add-stopwords input {
  flex: 1;
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
}
.analyze-add-stopwords input:focus { outline: none; border-color: var(--accent); }

/* Кнопка размера интерфейса + popover */
.scale-btn-wrap { position: relative; display: inline-block; }
.scale-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface, #15151a);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 80px;
}
.scale-popover .cd-chip {
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--soft);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.scale-popover .cd-chip:hover { border-color: var(--accent); color: var(--accent); }
.scale-popover .cd-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* Широкий попап темы (с пикерами + URL) — фиксируем к правому краю ЭКРАНА
   (не родителя), чтобы на узких экранах не уезжал влево за край. */
.theme-popover-wide {
  position: fixed;
  top: 58px;
  right: 12px;
  left: auto;
  bottom: auto;
  width: 260px;
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.theme-popover-wide .color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--soft);
  padding: 2px 0;
}
.theme-popover-wide .color-picker-row span { white-space: nowrap; }
.theme-popover-wide .color-picker-row input[type="color"] {
  width: 36px; height: 28px; padding: 0; border: 1px solid var(--border-soft);
  border-radius: 6px; cursor: pointer; background: transparent;
}

/* ===== Новый UI истории цен watcher'а ===== */
.pwh-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
}
.pwh-empty-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.6; }
.pwh-empty p { margin: 8px 0 4px; font-size: 13px; }
.pwh-empty small { font-size: 11px; opacity: 0.7; }

.pwh-summary {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pwh-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.pwh-summary-row:not(:last-child) {
  border-bottom: 1px solid var(--border-soft);
}
.pwh-summary-label {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pwh-summary-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}
.pwh-current { color: var(--accent); }
.pwh-up { color: #ff8c66 !important; }
.pwh-down { color: #4ade80 !important; }
.pwh-initial { color: var(--muted); font-weight: 500; font-style: italic; }
.pwh-summary-mini {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--muted);
}
.pwh-summary-mini b {
  color: var(--text);
  font-family: var(--mono);
  margin-left: 4px;
}

.pwh-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.pwh-timeline {
  position: relative;
  padding-left: 14px;
}
.pwh-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-soft);
  border-radius: 1px;
}
.pwh-event {
  position: relative;
  padding: 8px 0 8px 16px;
}
.pwh-event-dot {
  position: absolute;
  left: -3px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.pwh-event-content {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
}
.pwh-event-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pwh-event-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.pwh-diff {
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 600;
}
.pwh-event-time {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* Кнопка редактирования заготовки */
.qr-actions { display: flex; gap: 4px; }
.qr-edit, .qr-delete {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.qr-edit:hover { color: var(--accent); border-color: var(--accent); }
.qr-delete:hover { color: #ff8c66; border-color: #ff8c66; }

/* Settings — стандартный размер вернули как был раньше */

/* Drag-n-drop для заготовок */
.qr-row {
  position: relative;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qr-row.dragging { opacity: 0.4; }
.qr-row.drag-over {
  background: rgba(255, 255, 255, 0.05);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.qr-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  padding: 0 4px;
  user-select: none;
  letter-spacing: -2px;
}
.qr-handle:active { cursor: grabbing; }
.qr-trig-badge {
  display: inline-block;
  font-size: 9px;
  color: var(--accent);
  margin-left: 4px;
}

/* Watcher subtab pane */
#watchersSubPane { padding-top: 8px; }
.watcher-intro {
  text-align: center;
  padding: 14px 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.watcher-intro p {
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.45;
}

/* Подсказки с командами-плейсхолдерами */
.cmd-hint-mini {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.6;
}
.cmd-hint-mini code {
  background: rgba(255,255,255,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--accent);
  cursor: default;
  margin-right: 2px;
}
.cmd-hint-mini code.ph-insert {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.cmd-hint-mini code.ph-insert:hover {
  background: rgba(192,255,62,0.15);
  border-color: var(--accent);
}

/* Большой блок с плейсхолдерами в модалке заготовок */
.placeholders-hint {
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 6px 10px;
}
.placeholders-hint summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  user-select: none;
  padding: 2px 0;
}
.placeholders-hint[open] summary { color: var(--text); margin-bottom: 8px; }
.placeholders-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  font-size: 11px;
}
.ph-chip {
  background: rgba(255,255,255,0.07);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.ph-chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--accent);
}
.placeholders-grid span {
  color: var(--muted);
  font-size: 10.5px;
}

/* Collapsible cards */
.collapsible-card .bc-header-clickable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.collapsible-card[data-collapsed="true"] .bc-collapsible-content { display: none; }
.collapsible-card[data-collapsed="true"] .bc-collapse-toggle svg { transform: rotate(-90deg); }
.bc-collapse-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s;
}
.bc-collapse-toggle svg { transition: transform 0.2s; }
.qr-count-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg, #000);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
.qr-count-badge:empty { display: none; }

/* Срок жизни кода активации */
.ac-expires {
  display: inline-block;
  font-size: 10px;
  color: #f5a142;
  margin-left: 6px;
}

/* Триггеры как chips */
.trigger-chips-container {
  background: var(--surface-2, #1a1a20);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  cursor: text;
  min-height: 38px;
}
.trigger-chips-container:focus-within { border-color: var(--accent); }
.trigger-chips-list {
  display: contents;
}
.trig-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(99,102,241,0.15);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 6px;
  padding: 3px 4px 3px 8px;
  font-size: 12px;
  font-family: var(--mono, monospace);
}
.trig-chip-x {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.trig-chip-x:hover { opacity: 1; color: #ff8c66; }
#qrmTriggersInput {
  flex: 1;
  min-width: 120px;
  border: none !important;
  background: transparent !important;
  padding: 4px 2px !important;
  outline: none;
  font-size: 13px;
  color: var(--text);
}

/* === Док снизу (внутри flex screen-chat) === */
.bottom-dock {
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-dock .composer {
  border-top: none;
  padding-top: 8px;
}
.bottom-dock .quick-replies-bar {
  border-top: 1px solid var(--border-soft);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ============================================================
 * Темы оформления
 * Стандартная — dark electric lime
 * Light — белый фон, тёмный текст, лайм-акцент
 * Auto — смотрим prefers-color-scheme
 * ============================================================ */
/* Явный dark — гарантирует возврат к тёмной даже если светлая "залипла" */
[data-theme="dark"] {
  --bg:        #0a0a0a;
  --surface:   #15151a;
  --surface-2: #1c1c24;
  --surface-3: #24242e;
  --border:    #2a2a35;
  --border-soft: #20202a;
  --text:    #f0f0f3;
  --muted:   #7c8590;
  --soft:    #a0a8b3;
  --accent:        #c0ff3e;
  --accent-strong: #d0ff5e;
  --accent-soft:   rgba(192, 255, 62, .10);
  --accent-glow:   rgba(192, 255, 62, .20);
  --accent-fg:     #0a0a0a;
  --accent-mute-bg: #2a3510;
  --accent-mute-fg: #c0ff3e;
}
[data-theme="light"] {
  --bg:        #f8f9fb;
  --surface:   #ffffff;
  --surface-2: #f1f3f5;
  --surface-3: #e7eaef;
  --border:    #dde1e6;
  --border-soft: #ecf0f3;
  --text:    #0a0a0a;
  --muted:   #7c8590;
  --soft:    #4a5560;
  --accent:        #6b9a1f;
  --accent-strong: #7caa28;
  --accent-soft:   rgba(107, 154, 31, .10);
  --accent-glow:   rgba(107, 154, 31, .20);
  --accent-fg:     #ffffff;
  --accent-mute-bg: #e6f0d1;
  --accent-mute-fg: #2f4708;
}
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg:        #f8f9fb;
    --surface:   #ffffff;
    --surface-2: #f1f3f5;
    --surface-3: #e7eaef;
    --border:    #dde1e6;
    --border-soft: #ecf0f3;
    --text:    #0a0a0a;
    --muted:   #7c8590;
    --soft:    #4a5560;
    --accent:        #6b9a1f;
    --accent-strong: #7caa28;
    --accent-soft:   rgba(107, 154, 31, .10);
    --accent-glow:   rgba(107, 154, 31, .20);
    --accent-fg:     #ffffff;
    --accent-mute-bg: #e6f0d1;
    --accent-mute-fg: #2f4708;
  }
}

/* === Chat note panel — в потоке, под chat-head === */
.chat-note-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  flex-shrink: 0;
}
.chat-note-panel textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text);
  padding: 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.chat-note-actions {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 6px;
}
#chatNoteBtn { position: relative; }
#chatNoteBtn.has-note { color: var(--accent); }
#chatNoteBtn.has-note::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}

/* === Star button === */
.chat-star-btn.starred { color: #f5c842 !important; }
.chat-star-btn:hover { color: #f5c842; }
.chat-star-icon {
  color: #f5c842;
  margin-right: 4px;
  font-size: 12px;
}

/* === Color picker === */
.color-picker-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 4px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.color-picker-row input[type="color"] {
  width: 32px; height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* === Photo library === */
.photo-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.photo-lib-item {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.photo-lib-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.photo-lib-info {
  padding: 4px 6px;
  font-size: 10px;
}
.photo-lib-label {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-lib-tag {
  color: var(--accent);
  font-family: var(--mono);
  margin-top: 2px;
}
.photo-lib-actions {
  position: absolute;
  top: 4px; right: 4px;
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.photo-lib-item:hover .photo-lib-actions { opacity: 1; }
.photo-lib-copy, .photo-lib-del {
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.photo-lib-del:hover { background: rgba(255,80,80,0.8); }

/* === Search results === */
.chats-search-bar {
  display: flex; gap: 4px; padding: 8px 16px;
  position: relative;
}
#chatsSearchInput { flex: 1; }
.search-hit { cursor: pointer; }
.search-stats {
  padding: 6px 16px;
  font-size: 10px;
  color: var(--muted);
}

/* === Drag-n-drop для виджетов аналитики === */
.card.metric { position: relative; cursor: grab; }
.card.metric:active { cursor: grabbing; }
.card.metric.widget-dragging { opacity: 0.4; }
.card.metric.widget-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.widget-drag-handle {
  position: absolute;
  top: 4px; right: 6px;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.3;
  letter-spacing: -2px;
  pointer-events: none;
  transition: opacity 0.15s;
}
.card.metric:hover .widget-drag-handle { opacity: 0.7; }

/* Иконка заметки в списке чатов */
.chat-note-icon {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.85;
  cursor: help;
}

/* === Кастомный фон с картинкой ===
   Когда юзер задал URL изображения, оно идёт как background-image на body
   с лёгким overlay для читаемости текста. Карточки получают полупрозрачный
   фон чтобы изображение просвечивало. */
body.has-bg-image {
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
body.has-bg-image::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
}
body.has-bg-image .big-card,
body.has-bg-image .card,
body.has-bg-image .list-item {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
}

/* Статус рассылки */
.bc-broadcast-status {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 13px;
}

/* === Градиент-свечение фона (кастомный угловой цвет) ===
   Не сплошная заливка — цвет светится из угла, остальное тёмное. */
body.has-bg-glow::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-glow, none);
  z-index: -1;
  pointer-events: none;
}

/* Просмотр запарсенных новостей */
.news-preview-item {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.news-preview-active {
  border-color: var(--accent);
}
.news-preview-meta {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.news-preview-text {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.4;
  word-break: break-word;
}

/* Стоп-фразы и действия с новостями */
.news-stop-block {
  padding: 10px 12px;
  background: var(--surface-3);
  border-radius: 8px;
  margin-bottom: 10px;
}
.news-item-actions {
  float: right;
  display: inline-flex;
  gap: 4px;
}
.news-edit-btn, .news-del-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.7;
}
.news-edit-btn:hover, .news-del-btn:hover {
  opacity: 1;
  background: var(--surface-3);
}
.news-inline-edit {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}

/* Hover-preview заготовок ответов */
.qr-tooltip {
  position: fixed;
  display: none;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 3000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Кнопка "прочитано" в списке чатов */
.chat-mark-read {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  flex-shrink: 0;
}
.chat-mark-read:hover { background: var(--accent); color: var(--accent-fg); }