/*
 * ENHANCED TINODE — Theme Overrides
 * Подключается после base.css, переопределяет переменные и стили.
 * base.css — чистый upstream, не трогать.
 *
 * РЕДАКТИРУЙ ЭТОТ ФАЙЛ для кастомизации.
 * Перезагружай localhost:3333/index-dev.html чтобы видеть изменения.
 *
 * light-dark(СВЕТЛОЕ, ТЁМНОЕ) — меняй второй аргумент для тёмной темы,
 * первый — для светлой.
 *
 * ══════════════════════════════════════════
 * КАРТА ИНТЕРФЕЙСА → ПЕРЕМЕННЫЕ
 * ══════════════════════════════════════════
 *
 *  [body background]      — html, body { background-color }  →  ниже: жёсткое значение
 *  [полоса сверху]        — html, body { box-shadow }        →  ниже: жёсткое значение
 *  [левая шапка]          — #side-caption-panel bg           →  --clr-primary-accent (тёмное)
 *  [шапка чата]           — #topic-caption-panel bg          →  ниже: жёсткое значение
 *  [info-панель]          — #info-caption-panel bg           →  --clr-background-blue-gray-300 (тёмное)
 *  [список чатов фон]     — .scrollable-panel                →  --clr-bright (тёмное)
 *  [контакт hover]        — список                           →  --clr-background-blue-gray-50 (тёмное)
 *  [контакт pinned]       — список                           →  --clr-background-blue-gray-75 (тёмное)
 *  [контакт selected]     — список                           →  --clr-background-blue-gray-100 (тёмное)
 *  [фон сообщений]        — #messages-container::before      →  --clr-background-blue-gray-50 (тёмное)
 *  [панель ввода]         — #send-message-panel              →  --clr-background-blue-gray-50 (тёмное)
 *  [пузырь входящий]      — .bubble.left                     →  --clr-bubble-left-bg (тёмное)
 *  [пузырь исходящий]     — .bubble.right                    →  --clr-bubble-right-bg → --clr-background-off-white (тёмное)
 *  [кнопки/ссылки]        — accent                           →  --clr-primary-accent (тёмное)
 */

:root {

  /* ── АКЦЕНТНЫЙ ЦВЕТ (кнопки, ссылки, левая шапка, бордюры) ─────── */
  --clr-primary-accent:                    light-dark(#5b7fa6, #4a6d92);
  --clr-primary-accent-hover:              light-dark(#3d6080, #3a5c7a);
  --clr-primary-accent-focus-shadow:       light-dark(rgba(91,127,166,.25), rgba(30,55,85,.25));
  --clr-primary-accent-transparent-medium: light-dark(rgba(91,127,166,.3),  rgba(40,70,100,.3));
  --clr-primary-action:                    light-dark(#5b7fa6, #4a6d92);
  --clr-primary-action-hover:              light-dark(#3d6080, #3a5c7a);
  --clr-secondary-accent:                  light-dark(#5b7fa6, #4a6d92);
  --clr-primary-light-blue:               light-dark(#dce8f5, #8aaac8);
  --clr-light-blue-accent:                 light-dark(#5b7fa6, #4a6d92);

  /* ── ФОНЫ ПАНЕЛЕЙ / КОНТАКТОВ / СООБЩЕНИЙ ──────────────────────── */
  --clr-background-blue-gray-50:  light-dark(#efefef, #1e1e1e); /* hover + фон сообщений + панель ввода */
  --clr-background-blue-gray-75:  light-dark(#e3e3e3, #1a1a1a); /* pinned контакт */
  --clr-background-blue-gray-100: light-dark(#d4d4d4, #252525); /* selected контакт */
  --clr-background-blue-gray-300: light-dark(#c8c8c8, #2e2e2e); /* info-caption-panel */

  /* ── ПУЗЫРИ СООБЩЕНИЙ ───────────────────────────────────────────── */
  --clr-bubble-left-bg:       light-dark(#d8e4f0, #1e2d3d); /* входящие */
  --clr-bubble-left-bg-flash: light-dark(#b8ccdf, #18232f);

  /* ── ПУСТОЙ ЭКРАН (нет выбранного чата) ────────────────────────── */
  --clr-cyan-50: light-dark(#f0f0f0, #1e1e1e);

  /* ── ТЕКСТ ПОДСВЕТКИ ПОИСКА ─────────────────────────────────────── */
  --clr-highlight-text:         var(--clr-primary-accent);
  --clr-highlight-preview-text: light-dark(#5b7fa6, #3d5c7a);

  /* ── УБИРАЕМ TEAL ───────────────────────────────────────────────── */
  --clr-std-teal: #6b7b8d;
  --clr-dk-bg-7:  #4a6d92;

  /* ── ПОЛОСА СВЕРХУ (через переменную — для светлой темы) ────────── */
  --clr-header-stripe-bg: light-dark(#3d5a73, #1a2632);

  --clr-shadow-gray-strong: light-dark(var(--clr-std-gray), #1c1c1c);

}

/* ══════════════════════════════════════════
   ЖЁСТКИЕ ЗНАЧЕНИЯ (body, topic-caption-panel)
   ══════════════════════════════════════════ */

html, body {
  background-color: #1c1c1c;
  box-shadow: inset 0 10rem #30465d;
}

#topic-caption-panel {
  background-color: #222222;
}

/* ══════════════════════════════════════════
   HOVER-ФИКС: убираем hover с некликабельных заголовков
   ══════════════════════════════════════════ */

/* Левая шапка — заголовок не кликабелен, текст обрезается с … */
#sidepanel-title {
  cursor: default;
  pointer-events: none;
  display: block !important;  /* flex не поддерживает text-overflow */
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-right: 0;
}

/* Контейнер кнопок (menu-contacts/menu-start) в side-caption не сжимается */
#side-caption-panel > div:last-child {
  flex-shrink: 0;
}

/* Контейнер кнопок — flex, но НЕ #sidepanel-title */
#side-caption-panel > div:not(#sidepanel-title) {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

/* Avatar-box в шапке чата — часть заголовка (toggle), не отдельная кнопка */
#topic-caption-panel .avatar-box {
  pointer-events: none;
  cursor: default;
}

/* Шапка чата — весь панел кликабелен (toggle), убираем hover-артефакты */
#topic-caption-panel {
  transition: background-color 0.15s ease;
}
#topic-caption-panel:hover {
  background-color: #282828;
}
#topic-caption-panel.info-panel-open {
  background-color: #2a2a2a;
}

/* Info-панель */
#info-title {
  cursor: default;
  pointer-events: none;
}

.flat-button {
  border-radius: 6px;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* ══════════════════════════════════════════
   LETTERTILE — убираем ядовитые цвета, добавляем градиенты
   ══════════════════════════════════════════ */
:root {
  /* dk-bg-8 (тёмно-зелёный) → приглушённый сине-зелёный */
  --clr-dk-bg-8: #1a5c52;
  /* dk-bg-9 (ядовитый зелёный #2f7f33) → градиентный slate */
  --clr-dk-bg-9: #2d5a3d;
  /* dk-bg-10 (оливковый) → нейтральный */
  --clr-dk-bg-10: #4a6741;
  /* dk-bg-11 (желто-зелёный) → тёплый серо-коричневый */
  --clr-dk-bg-11: #7a6a3a;
}

/* Градиент на все lettertile */
.lettertile {
  background: linear-gradient(135deg, var(--clr-dk-bg), color-mix(in srgb, var(--clr-dk-bg) 70%, black)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* dk-bg-9 конкретно — красивый тёмно-зелёный градиент */
.lettertile.dk-bg-9 {
  background: linear-gradient(135deg, #2d5a3d, #1a3d28) !important;
}

/* ══════════════════════════════════════════
   SELF AVATAR — div.lettertile.self-topic (Saved Messages)
   ══════════════════════════════════════════ */
.lettertile.self-topic {
  background: linear-gradient(135deg, #4a6d92, #2a3d52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.3) !important;
}
.lettertile.self-topic > div {
  color: rgba(255,255,255,0.9);
}
.lettertile.self-topic .material-icons {
  font-size: 1.4rem;
}
.avatar-upload .lettertile.self-topic .material-icons {
  font-size: 4rem;
}

/* ══════════════════════════════════════════
   КНОПКИ В CAPTION PANELS — close, back, more_vert
   ══════════════════════════════════════════ */

/* Сбрасываем upstream padding-left и underline со всех ссылок в шапках */
.caption-panel a,
#side-caption-panel a,
#topic-caption-panel a,
#info-caption-panel a {
  padding-left: 0;
  text-decoration: none;
}


/* Общий стиль для иконок-кнопок в шапках */
.caption-panel > div > a,
.caption-panel > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.caption-panel > div > a:hover,
.caption-panel > a:hover {
  background-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,1);
  text-decoration: none;
}
.caption-panel > div > a .material-icons,
.caption-panel > a .material-icons {
  font-size: 1.4rem;
}

.more-vert-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.more-vert-btn a:hover {
  background-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,1);
}
.more-vert-btn .material-icons {
  font-size: 1.5rem;
}

/* ══════════════════════════════════════════
   SETTINGS PAGE (acc_general) — нормальный дизайн
   ══════════════════════════════════════════ */
div#settings-form {
  padding: 0;
}

div#settings-form .panel-form-column {
  background: transparent;
}

div#settings-form label.small {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: light-dark(#888, #888);
  margin-bottom: 0.5rem;
  display: block;
}

div#settings-form .hr {
  margin: 0.75rem 0;
  border: none;
  border-top: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.07));
}

/* Radio кнопки — custom style */
div#settings-form ul.quoted {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

div#settings-form ul.quoted li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  transition: background-color 0.12s ease;
}

/* Подпись под radio-опцией — на новой строке */
div#settings-form ul.quoted li .panel-form-row {
  flex-basis: 100%;
  padding: 0 0 0 1.6rem;
  margin: 0;
}

div#settings-form ul.quoted li:hover {
  background-color: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
}

div#settings-form ul.quoted li label {
  cursor: pointer;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* Кастомные radio */
div#settings-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid light-dark(#aaa, #555);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

div#settings-form input[type="radio"]:checked {
  border-color: var(--clr-primary-accent);
  background: radial-gradient(circle, var(--clr-primary-accent) 45%, transparent 50%);
}

/* Range slider */
div#settings-form input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: light-dark(#ddd, #444);
  outline: none;
  margin: 0.5rem 0 0;
  display: block;
}

div#settings-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--clr-primary-accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.1s ease;
}

div#settings-form input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Метки под слайдером */
div#settings-form .slider-labels {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0.75rem 0.1rem !important;
}
div#settings-form .slider-labels span {
  font-size: 0.7rem;
  color: light-dark(#999, #666);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* Обои ссылка — как нормальная кнопка */
.panel-form-row.clean-clickable {
  margin: 0;
}
.panel-form-row.clean-clickable .flat-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-primary-accent);
  background: light-dark(rgba(91,127,166,0.08), rgba(74,109,146,0.12));
  margin: 0;
  height: auto;
  line-height: 1.4;
  transition: background-color 0.15s ease;
}
.panel-form-row.clean-clickable .flat-button:hover {
  background: light-dark(rgba(91,127,166,0.15), rgba(74,109,146,0.2));
}
.panel-form-row.clean-clickable .flat-button .material-icons {
  font-size: 1.1rem;
  opacity: 0.8;
}

/* ══════════════════════════════════════════
   TOPIC-CAPTION-PANEL — весь кликабелен как toggle
   ══════════════════════════════════════════ */
#topic-title-group {
  pointer-events: none; /* клик обрабатывается на родителе */
}
#topic-title {
  pointer-events: none;
  cursor: default;
}

/* ══════════════════════════════════════════
   АНИМАЦИИ — мягкие переходы
   ══════════════════════════════════════════ */

/* Fade-in убран — ломал скролл в чатах */

/* Пузыри — pop-in */
.bubble {
  animation: bubblePop 0.14s ease;
}
@keyframes bubblePop {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Контакты в списке */
.contact-box {
  transition: background-color 0.12s ease;
}

/* Шапки */
#side-caption-panel,
#topic-caption-panel,
#info-caption-panel {
  transition: background-color 0.2s ease;
}
/* ══════════════════════════════════════════
   ACCOUNT SETTINGS — nav-меню и профиль
   ══════════════════════════════════════════ */

/* Nav-ссылки (Основные, Уведомления, Безопасность, Поддержка) */
.scrollable-panel > .panel-form-column > a.flat-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin: 0;
  height: auto;
  line-height: 1.4;
  border-radius: 8px;
  text-transform: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  color: light-dark(#ddd, #ccc);
  background: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: normal;
}
.scrollable-panel > .panel-form-column > a.flat-button:hover {
  background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.06));
  color: light-dark(#fff, #fff);
}
.scrollable-panel > .panel-form-column > a.flat-button .material-icons {
  font-size: 1.15rem;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Строки с label+CheckBox, label+span, icon+link вне panel-form-column */
#acc-notifications > .panel-form-row,
#acc-security > .panel-form-row {
  justify-content: space-between;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}
#acc-notifications > .panel-form-row > label,
#acc-security > .panel-form-row > label {
  font-size: 0.92rem;
  color: light-dark(#333, #ccc);
  cursor: default;
}
/* Подпись под чекбоксом (incognito description) */
#acc-security > .panel-form-row > span.small {
  font-size: 0.78rem;
  color: light-dark(#888, #777);
  line-height: 1.4;
}

/* credentials — quoted block */
.scrollable-panel .group.quoted {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: light-dark(rgba(0,0,0,0.04), rgba(255,255,255,0.04));
  margin-bottom: 0.25rem;
}
.scrollable-panel .group.quoted tt {
  flex: 1;
  font-size: 0.88rem;
}

/* ── Метки в профиле/настройках — нейтральный цвет (не акцент) */
label.small {
  color: light-dark(#888, #777) !important;
}
/* Но в settings-form оставляем их как есть (уже переопределено выше) */
div#settings-form label.small {
  color: light-dark(#888, #888) !important;
}
/* Моноширинные поля (ID, Псевдоним) */
.panel-form-column tt {
  color: light-dark(#555, #bbb);
  font-family: monospace;
  font-size: 0.88rem;
}

/* Описание в профиле — убираем лишний margin-left от .quoted */
.panel-form-column .group .quoted {
  margin-left: 0;
  font-size: 0.92rem;
  color: light-dark(#ccc, #aaa);
}

/* ID и Псевдоним — label + tt в одну строку без лишнего зазора */
.panel-form-column .group label.small + tt {
  margin-left: 0.3rem;
}

/* ══════════════════════════════════════════
   INFO-VIEW — Подробности
   ══════════════════════════════════════════ */

/* ── INFO-VIEW CONTENT ── */

/* panel-form-column — без подложки, просто отступы */
#info-view-content .panel-form-column {
  padding: 0.25rem 1rem;
}
#info-view-content .panel-form-column .panel-form-row {
  padding: 0.35rem 0 !important;
}

/* Разделитель */
#info-view-content .hr {
  border: none;
  border-top: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.07));
  margin: 0;
}

/* Иконки-кнопки (copy, qr, share) — только в div с marginLeft:auto */
#info-view-content .panel-form-row > div[style] {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
#info-view-content .panel-form-row > div[style] > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: light-dark(#777, rgba(255,255,255,0.5));
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#info-view-content .panel-form-row > div[style] > a:hover {
  background: light-dark(rgba(0,0,0,0.07), rgba(255,255,255,0.1));
  color: light-dark(#333, rgba(255,255,255,0.9));
}
#info-view-content .panel-form-row > div[style] > a .material-icons {
  font-size: 1.2rem;
}

/* Кнопка "Изменить" (edit, float-right) */
#info-view-content .flat-button.float-right {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  float: right;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--clr-primary-accent);
  background: transparent;
  padding: 0.2rem 0.4rem;
  height: auto;
  margin: 0;
}
#info-view-content .flat-button.float-right .material-icons {
  font-size: 1rem;
}

/* Строки Без уведомлений / Архивировано — только прямые дети scrollable-panel */
#info-view-content.scrollable-panel > .panel-form-row:not(:has(a.flat-button)) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem !important;
}
#info-view-content.scrollable-panel > .panel-form-row:not(:has(a.flat-button)) label {
  font-size: 0.92rem;
  color: light-dark(#444, #ccc);
  margin: 0;
  flex: 1;
}

/* Строки с flat-button (Безопасность, Добавить участников) — прямые дети */
#info-view-content.scrollable-panel > .panel-form-row:has(a.flat-button:not(.float-right)) {
  padding: 0.1rem 0.5rem !important;
}
#info-view-content .panel-form-row a.flat-button:not(.float-right) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  height: auto;
  text-transform: none;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  color: light-dark(#444, #bbb);
  background: transparent;
  border-radius: 7px;
  text-decoration: none;
  transition: background-color 0.12s ease;
}
#info-view-content .panel-form-row a.flat-button:not(.float-right):hover {
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05));
}
#info-view-content .panel-form-row a.flat-button:not(.float-right) .material-icons {
  font-size: 1.2rem;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   QR-КОД
   ══════════════════════════════════════════ */
#info-view > .panel-form-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 1.5rem;
  gap: 0.75rem;
}
#info-view > .panel-form-column .qr-code {
  border-radius: 6px;
  overflow: hidden;
}
#info-view > .panel-form-column tt {
  font-size: 0.72rem;
  color: light-dark(#999, #777);
  word-break: break-all;
  text-align: center;
  max-width: 18rem;
  line-height: 1.5;
  margin-top: 0.25rem;
}
#info-view > .panel-form-column .dialog-buttons {
  justify-content: center;
  padding: 0;
  width: 100%;
  margin-top: 0.5rem;
}
#info-view > .panel-form-column .dialog-buttons button.outline {
  background: transparent;
  color: var(--clr-primary-accent);
  border: none;
  padding: 0.5rem 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
#info-view > .panel-form-column .dialog-buttons button.outline:hover {
  opacity: 0.75;
}

/* ══════════════════════════════════════════
   СОЗДАНИЕ НОВОГО ТОПИКА — tabbar + форма
   ══════════════════════════════════════════ */

/* Tabbar */
ul.tabbar {
  background: light-dark(#1e1e1e, #1e1e1e);
  padding-left: 0;
  border-bottom: 1px solid light-dark(rgba(255,255,255,0.06), rgba(255,255,255,0.06));
}
ul.tabbar > li {
  box-shadow: none;
  flex: 1;
  text-align: center;
}
ul.tabbar li.active {
  background: transparent;
}
ul.tabbar > li > a {
  font-size: 0.85rem;
  font-variant: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: light-dark(rgba(255,255,255,0.4), rgba(255,255,255,0.4));
  line-height: 2.8rem;
  display: block;
}
ul.tabbar li.active > a {
  color: light-dark(#fff, #fff);
}
ul.tabbar li:after {
  background: transparent;
}
ul.tabbar li.active:after {
  background: var(--clr-primary-accent);
  height: 2px;
}

/* Форма нового топика (new-topic-group) — группы с инпутами */
.panel-form .panel-form-column .group label.small {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: light-dark(#888, #777) !important;
  display: block;
  margin-bottom: 0.25rem;
}
.panel-form .panel-form-column .group input[type="text"] {
  width: 100%;
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.06));
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
  border-radius: 7px;
  padding: 0.5rem 0.6rem;
  font-size: 0.92rem;
  color: light-dark(#222, #ddd);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.panel-form .panel-form-column .group input[type="text"]:focus {
  border-color: var(--clr-primary-accent);
  box-shadow: 0 0 0 3px var(--clr-primary-accent-focus-shadow);
}
/* panel-form-column с .group — без подложки, только отступы */
.panel-form .panel-form-column:has(.group) {
  background: transparent;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
}

/* Чекбокс "канал" строка */
.panel-form > .panel-form-row {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.92rem;
  color: light-dark(#555, #ccc);
  gap: 0.5rem;
}

/* ══════════════════════════════════════════
   РЕДАКТИРОВАНИЕ ТОПИКА (TopicDescEdit)
   ══════════════════════════════════════════ */

/* Убираем подложку с panel-form-column в редактировании топика */
.scrollable-panel .panel-form-column {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.scrollable-panel .panel-form-column .group input[type="text"],
.scrollable-panel .panel-form-column .group textarea {
  width: 100%;
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.06));
  border: 1px solid light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
  border-radius: 7px;
  padding: 0.5rem 0.6rem;
  font-size: 0.92rem;
  color: light-dark(#222, #ddd);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scrollable-panel .panel-form-column .group input[type="text"]:focus,
.scrollable-panel .panel-form-column .group textarea:focus {
  border-color: var(--clr-primary-accent);
  box-shadow: 0 0 0 3px var(--clr-primary-accent-focus-shadow);
}

/* ══════════════════════════════════════════
   NEW TOPIC BY ID — input, Subscribe, QR
   ══════════════════════════════════════════ */

/* Input поле ID (new-topic-by-id) */
.panel-form > .panel-form-row input[type="text"] {
  background: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.06));
  border: 1px solid light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.1));
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  color: light-dark(#222, #ddd);
  outline: none;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.panel-form > .panel-form-row input[type="text"]:focus {
  border-color: var(--clr-primary-accent);
  box-shadow: 0 0 0 3px var(--clr-primary-accent-focus-shadow);
}

/* Кнопка Subscribe/Create */
.panel-form .dialog-buttons {
  padding: 0.25rem 0.75rem 0.5rem;
  justify-content: flex-end;
}
.panel-form .dialog-buttons button.primary {
  background: var(--clr-primary-accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 1.4rem;
  height: auto;
  line-height: 1.4;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.panel-form .dialog-buttons button.primary:hover {
  background: var(--clr-primary-accent-hover);
}
.panel-form .dialog-buttons button.primary:disabled,
.panel-form .dialog-buttons button.primary.disabled {
  opacity: 0.45;
  cursor: default;
}

/* QR-блок (new-topic-by-id) — без подложки, просто отступы */
.panel-form > .panel-form-column:not(:has(.group)) {
  padding: 0.5rem 0.75rem 1rem;
  background: transparent;
}
.panel-form > .panel-form-column:not(:has(.group)) > label.small {
  font-size: 0.78rem;
  color: light-dark(#999, #777) !important;
  margin-bottom: 0.5rem;
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.panel-form > .panel-form-column:not(:has(.group)) > .qr-code {
  border-radius: 6px;
  overflow: hidden;
  display: inline-block;
}

/* ── КНОПКИ dialog-buttons: gap вместо margin, убираем upstream margin ── */
.dialog-buttons {
  gap: 0.5rem;
}
.dialog-buttons button {
  margin: 0;
}

/* ── IMAGE PREVIEW FOOTER ── */
#image-preview-footer {
  padding: 0.5rem 0;
}

/* ── ИКОНКА ПОИСКА: сдвигаем вправо ── */
i.search {
  left: 1.2rem;
}

/* ── DANGER КНОПКИ — красные ── */
a.flat-button.danger,
button.flat-button.danger,
button.danger {
  color: light-dark(#c0392b, #e74c3c) !important;
}
a.flat-button.danger:hover,
button.flat-button.danger:hover,
button.danger:hover {
  color: light-dark(#a93226, #c0392b) !important;
  background: light-dark(rgba(192,57,43,0.08), rgba(231,76,60,0.1)) !important;
}

/* ── SETTINGS-VIEW (form#settings-form): сброс лишних отступов ── */
/* panel-form-row в settings-view не должны получать padding от .panel-form > .panel-form-row */
form#settings-form > .panel-form-row {
  padding: 0.25rem 0.5rem !important;
}
/* panel-form-column внутри settings-view — без подложки */
form#settings-form .panel-form-column {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}