/* ============================================
   TERZ1K MESSENGER — DARK UI v4.0
   Deep Space Dark · Violet Accent
   Mobile First · Полностью на русском
   ============================================ */

:root {
  /* === ЦВЕТА ФОНА === */
  --bg-app:     #0C0D1A;
  --bg-surface: #111325;
  --bg-card:    #171929;
  --bg-lift:    #1D1F33;
  --bg-input:   #1B1D30;
  --bg-hover:   rgba(255,255,255,0.05);
  --bg-active:  rgba(0,168,132,0.18);

  /* === АКЦЕНТ === */
  --accent:        #00A884;
  --accent-hover:  #00C49A;
  --accent-glow:   rgba(0,168,132,0.35);
  --accent-muted:  rgba(0,168,132,0.15);

  /* === ТЕКСТ === */
  --text-1: #E6E8F4;
  --text-2: #7A84A0;
  --text-3: #474E68;

  /* === СЛУЖЕБНЫЕ === */
  --divider:      rgba(255,255,255,0.07);
  --divider-hard: rgba(255,255,255,0.11);
  --online:   #2ECC71;
  --danger:   #FF4D5A;
  --success:  #2ECC71;
  --warning:  #FFA63D;
  --missed:   #FF4D5A;
  --received: #2ECC71;

  /* === ПУЗЫРИ === */
  --bubble-in:    #171A2E;
  --bubble-out:   #005C4B;
  --bubble-in-flash:  #1F2340;
  --bubble-out-flash: #007A60;

  /* === ТЕНИ === */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);

  /* === РАДИУС === */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;

  /* === Переопределение base.css === */
  --clr-body-background:    var(--bg-app);
  --clr-bright:             var(--bg-surface);
  --clr-text-primary:       var(--text-1);
  --clr-text-secondary:     var(--text-2);
  --clr-primary-accent:     var(--accent);
  --clr-primary-accent-hover: var(--accent-hover);
  --clr-bubble-left-bg:     var(--bubble-in);
  --clr-bubble-right-bg:    var(--bubble-out);
  --clr-bubble-left-bg-flash:  var(--bubble-in-flash);
  --clr-bubble-right-bg-flash: var(--bubble-out-flash);
  --clr-input-bg:           var(--bg-input);
  --clr-border-light:       var(--divider);
  --clr-border-muted:       var(--divider-hard);
  --caption-panel-height:   56px;
  --message-text-size:      15px;
  --clr-bubble-text:        var(--text-1);
  --clr-bubble-meta-text:   var(--text-2);
  --clr-bubble-meta-date-bg: rgba(0,0,0,0.35);
  --clr-online:             var(--online);
  --clr-scrollbar-thumb:    rgba(255,255,255,0.12);
  --clr-scrollbar-track:    transparent;
  --clr-shadow-dialog:      var(--shadow-md);

  /* === АУДИОПЛЕЕР === */
  --clr-audio-bg:               var(--bg-lift);
  --clr-audio-icon:             var(--accent-hover);
  --clr-audio-icon-disabled:    var(--text-3);
  --clr-audio-timer-text:       var(--text-2);
}

/* WhatsApp blue read ticks — перекрываем base.css .blue */
.material-icons.blue { color: #53BDEB !important; }

/* Панель поиска по сообщениям (Ctrl+F) */
.message-search-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  gap: 6px;
  flex-shrink: 0;
}
.message-search-bar input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--divider);
  border-radius: var(--r-sm);
  color: var(--text-1);
  padding: 6px 10px;
  font-size: 14px;
  outline: none;
}
.message-search-bar input:focus {
  border-color: var(--accent);
}
.message-search-bar .search-count {
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
  min-width: 32px;
  text-align: center;
}
.message-search-bar .search-nav-btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.message-search-bar .search-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.message-search-bar .search-nav-btn .material-icons {
  font-size: 20px;
}

/* Подсветка совпадений поиска */
#scroller mark {
  background: rgba(255, 200, 0, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
#scroller .search-current .bubble {
  box-shadow: 0 0 0 2px var(--accent);
}

/* Баннер потери соединения */
.connection-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--warning, #FFA63D);
  color: #000;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
.connection-banner .material-icons { font-size: 16px; }

/* ============================================
   1. БАЗОВАЯ КОМПОНОВКА
   ============================================ */

html, body {
  background-color: var(--bg-app);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}

#mountPoint {
  padding: 0;
}

#app-container {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-app);
}

/* ============================================
   1b. КНОПКИ НАВИГАЦИИ (УНИВЕРСАЛЬНЫЕ)
   ============================================ */

/* Контейнер кнопок в хедере */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Универсальная кнопка навбара */
.navbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-2);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.navbar-btn:hover {
  background: var(--bg-hover);
  color: var(--accent-hover);
}

.navbar-btn .material-icons {
  font-size: 20px;
  line-height: 1;
}

/* Кнопки в хедере чата (bare <a> без класса) */
#topic-caption-panel a,
#hide-message-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--text-2);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

#topic-caption-panel a:hover,
#hide-message-view:hover {
  background: var(--bg-hover);
  color: var(--accent-hover);
}

#topic-caption-panel a .material-icons,
#hide-message-view .material-icons {
  font-size: 20px;
  line-height: 1;
}

/* ============================================
   2. ЛЕВАЯ ПАНЕЛЬ (СПИСОК ЧАТОВ)
   ============================================ */

#sidepanel {
  width: 100%;
  background: var(--bg-surface);
  border-right: none;
}

#side-caption-panel {
  height: var(--caption-panel-height);
  padding: 0 8px 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

#sidepanel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Брендинг в шапке (чаты / звонки) ── */
#sidepanel-brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
#sidepanel-brand .brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}
#sidepanel-brand .brand-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-1);
  line-height: 1;
}
#sidepanel-brand .brand-accent {
  /* умляут выделяется акцентным цветом */
  color: var(--accent);
}

/* Когда нет аватара — заголовок занимает всё пространство */
#side-caption-panel > .navbar-btn:first-child ~ #sidepanel-title {
  margin-left: 2px;
}

#self-avatar {
  width: 34px;
  height: 34px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

#self-avatar:hover {
  opacity: 0.85;
}

/* === ПОИСК === */
.search-box {
  margin: 8px 12px 4px;
  padding: 0 12px;
  background: var(--bg-input);
  border-radius: 12px;
  height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.search-box:focus-within {
  border-color: var(--accent-muted);
}

.search-box .material-icons {
  color: var(--text-3);
  font-size: 17px;
  margin-right: 8px;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 15px;
  color: var(--text-1);
  height: 100%;
  padding: 0;
}

.search-box input::placeholder {
  color: var(--text-3);
}

/* === ФИЛЬТРЫ === */
.filter-pills-container {
  padding: 4px 12px 6px;
}

.filter-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-pills::-webkit-scrollbar { display: none; }

.filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-lift);
  border: 1px solid var(--divider);
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.1px;
}

.filter-pill:hover {
  border-color: var(--accent-muted);
  color: var(--text-1);
}

.filter-pill.active {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* === КАРТОЧКИ ЧАТОВ === */
.contact-box > li {
  padding: 10px 14px;
  min-height: 62px;
  background: transparent;
  border-radius: 0;
  margin: 0;
  transition: background-color 0.15s ease;
}

.contact-box > li:hover {
  background: var(--bg-hover);
}

.contact-box > li.selected {
  background: var(--bg-active);
  border-left: none;
}

.contact-box > li.tpinned {
  background: rgba(255,255,255,0.025);
}

/* Аватар */
.contact-box .avatar-box {
  width: 46px;
  min-width: 46px;
  height: 46px;
  margin-right: 12px;
}

.contact-box .avatar-box img,
.contact-box .avatar-box .lettertile {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

/* Онлайн индикатор */
.avatar-box .online {
  width: 11px;
  height: 11px;
  background: var(--online);
  right: 1px;
  bottom: 1px;
  border: 2px solid var(--bg-surface);
  border-radius: 50%;
}

.contact-box > li.selected .avatar-box .online {
  border-color: var(--bg-active);
}

.contact-box .contact-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-box .contact-comment {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Непрочитанные */
.unread {
  background: var(--accent);
  color: white;
  border-radius: 10px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
}

/* ============================================
   3. ХЕДЕР ЧАТА
   ============================================ */

#topic-caption-panel,
.caption-panel {
  height: var(--caption-panel-height);
  padding: 0 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  backdrop-filter: none;
  box-shadow: none;
  gap: 4px;
}

#topic-caption-panel .avatar-box,
.caption-panel .avatar-box {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin-right: 10px;
}

#topic-caption-panel .avatar-box img,
.caption-panel .avatar-box img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

#topic-title-group {
  overflow: hidden;
}

.panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.2px;
}

.topic-status,
#topic-title-group .contact-comment {
  font-size: 12.5px;
  color: var(--text-2);
}

#topic-caption-panel button,
#topic-caption-panel .header-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
  border: none;
  margin: 0;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#topic-caption-panel button:hover {
  background: var(--bg-hover);
  color: var(--accent-hover);
}

/* ============================================
   4. СООБЩЕНИЯ
   ============================================ */

#topic-view {
  background: var(--bg-app);
}

#messages-container {
  background: var(--bg-app);
}

#messages-container::before {
  background-color: var(--bg-app);
  background-image: none;
  filter: none;
}

#messages-panel {
  padding: 8px 10px;
}

.chat-box {
  padding: 0 4px 8px;
  margin: 0;
}

.chat-box li {
  margin: 0;
  padding: 1px 0;
}

/* Пузыри */
.bubble {
  max-width: 285px;
  min-width: 52px;
  padding: 7px 11px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  filter: none;
}

.left .bubble {
  background: var(--bubble-in);
  border-radius: 4px 16px 16px 16px;
}

.left .bubble.tip {
  border-radius: 16px 16px 16px 4px;
}

.left .bubble.tip::before {
  background: var(--bubble-in);
}

.right .bubble {
  background: var(--bubble-out);
  border-radius: 16px 4px 16px 16px;
}

.right .bubble.tip {
  border-radius: 16px 16px 4px 16px;
}

.right .bubble.tip::before {
  background: var(--bubble-out);
}

.left.flash .bubble { background: var(--bubble-in-flash); animation: bubbleIn 160ms ease-out; }
.right.flash .bubble { background: var(--bubble-out-flash); animation: bubbleIn 160ms ease-out; }

@keyframes bubbleIn {
  0%   { opacity: 0; transform: scale(0.91) translateY(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bubble:hover { filter: none; transform: none; }

.bubble div.message-content {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-1);
  padding: 0;
}

.bubble div.message-content.emoji-1 { font-size: 240%; line-height: 1.2; }
.bubble div.message-content.emoji-2 { font-size: 200%; line-height: 1.2; }
.bubble div.message-content.emoji-3 { font-size: 160%; line-height: 1.2; }
.bubble div.message-content.emoji-4 { font-size: 140%; line-height: 1.2; }
.bubble div.message-content.emoji-5 { font-size: 120%; line-height: 1.2; }

.chat-box .author {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-hover);
  margin-top: 2px;
  margin-left: 2px;
}

.chat-box .meta {
  margin: 10px 0;
}

.chat-box .meta .bubble {
  min-width: auto;
  max-width: none;
}

.meta .bubble.date {
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
  padding: 4px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  box-shadow: none;
}

.chat-box .avatar-box {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin-right: 6px;
  margin-bottom: 2px;
}

.reply-quote {
  border-left: 3px solid var(--accent);
  background: rgba(111,82,220,0.1);
  border-radius: 0 8px 8px 0;
  padding: 4px 8px;
  margin: 0 0 5px 0;
}

/* ============================================
   5. ПОЛЕ ВВОДА СООБЩЕНИЯ
   ============================================ */

#send-message-wrapper {
  background: var(--bg-surface);
  border-top: 1px solid var(--divider);
  padding: 8px 0;
}

#send-message-panel {
  background: var(--bg-input);
  border-radius: 18px;
  margin: 0 10px;
  padding: 4px 6px 4px 12px;
  min-height: 40px;
  border: 1px solid var(--divider);
  box-shadow: none;
  transition: border-color 0.2s ease;
}

#send-message-panel:focus-within {
  border-color: var(--accent-muted);
}

#send-message-panel .material-icons {
  font-size: 22px;
  min-width: 34px;
  padding: 6px;
  color: var(--text-3);
  transition: color 0.15s ease;
}

#send-message-panel .material-icons.secondary:hover {
  color: var(--accent-hover);
}

#send-message-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 4px;
  min-height: 28px;
  max-height: 110px;
  margin: 0;
  resize: none;
}

#send-message-input::placeholder {
  color: var(--text-3);
}

#send-message-input:focus {
  box-shadow: none;
  outline: none;
}

#send-message-panel a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--text-3);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

#send-message-panel a:hover {
  background: var(--bg-hover);
  color: var(--accent-hover);
}

#send-message-panel a .material-icons {
  min-width: auto;
  padding: 0;
}

/* Кнопка отправки */
#send-message-panel button[type="submit"],
#send-message-panel .send-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

#send-message-panel button[type="submit"]:hover,
#send-message-panel .send-button:hover {
  background: var(--accent-hover);
  transform: scale(1.05);
}

/* ============================================
   6. КОНТЕКСТНОЕ МЕНЮ
   ============================================ */

ul.menu {
  background: var(--bg-card);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-lg);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid var(--divider);
}

ul.menu > li {
  padding: 13px 14px;
  font-size: 15px;
  color: var(--text-1);
  border-radius: var(--r-sm);
  margin: 1px 2px;
  transition: background 0.12s ease;
}

ul.menu > li:hover {
  background: var(--bg-hover);
}

ul.menu > li .material-icons {
  font-size: 20px;
  color: var(--accent-hover);
}

ul.menu > li.separator {
  height: 1px;
  padding: 0;
  margin: 5px 8px;
  background: var(--divider);
}

ul.menu > li.danger,
ul.menu > li.dangerous {
  color: var(--danger);
}

ul.menu > li.danger .material-icons,
ul.menu > li.dangerous .material-icons {
  color: var(--danger);
}

/* ============================================
   7. НАСТРОЙКИ
   ============================================ */

.panel-form-row {
  min-height: 50px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  transition: background 0.15s ease;
}

.panel-form-row:hover {
  background: var(--bg-hover);
}

.panel-form-row:last-child {
  border-bottom: none;
}

.panel-form-row .material-icons {
  font-size: 22px;
  color: var(--text-2);
  margin-right: 14px;
}

.panel-form-row label {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-1);
  text-transform: none;
}

/* Аватар в настройках */
.avatar-upload {
  width: 100%;
  height: auto;
  align-items: center;
  padding: 20px 0;
}

.avatar-upload .avatar-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
}

.avatar-upload .avatar-box img,
.avatar-upload .avatar-box .lettertile {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

/* Toggle свитчер */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 26px;
  background: var(--text-3);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

input[type="checkbox"]:checked {
  background: var(--accent);
}

input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

/* Кнопки */
button {
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  min-width: auto;
  transition: all 0.15s ease;
}

button.primary {
  background: var(--accent);
  color: white;
  border: none;
}

button.primary:hover {
  background: var(--accent-hover);
}

button.secondary {
  background: var(--accent-muted);
  color: var(--accent-hover);
  border: none;
}

button.danger,
button.outline.danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* Input поля */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--divider-hard);
  color: var(--text-1);
  font-size: 16px;
  padding: 10px 0;
  margin: 4px 0;
  box-shadow: none;
  border-radius: 0;
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-bottom: 2px solid var(--accent);
  box-shadow: none;
  outline: none;
}

/* ============================================
   8. ALERTS
   ============================================ */

div.alert-container {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
}

div.alert {
  background: var(--bg-card);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--divider);
  margin: 0;
}

div.alert-container .title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

/* ============================================
   9. INFO PANEL
   ============================================ */

#info-view {
  background: var(--bg-surface);
  border-left: 1px solid var(--divider);
}

#info-caption-panel {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
}

/* ============================================
   10. ПУСТОЕ СОСТОЯНИЕ
   ============================================ */

#dummy-view {
  background: var(--bg-app);
}

#dummy-view .empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-2);
}

#dummy-view .empty-subtitle {
  font-size: 14px;
  color: var(--text-3);
}

/* ============================================
   11. СКРОЛЛБАР
   ============================================ */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* ============================================
   12. ТАБЫ (ВЕРХНИЕ, ДЛЯ ДЕСКТОПА)
   ============================================ */

ul.tabbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  padding: 0;
}

ul.tabbar > li {
  height: 44px;
  box-shadow: none;
}

ul.tabbar > li > a {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: var(--text-2);
}

ul.tabbar li.active > a {
  color: var(--accent-hover);
}

ul.tabbar li:after {
  background: transparent;
}

ul.tabbar li.active:after {
  background: var(--accent);
  height: 2px;
  border-radius: 2px;
}

/* ============================================
   13. ДЕСКТОП АДАПТАЦИЯ
   ============================================ */

@media (min-width: 769px) {
  #app-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  #sidepanel {
    position: relative;
    width: 320px;
    min-width: 280px;
    border-right: 1px solid var(--divider);
  }

  #info-view {
    position: relative;
    width: 300px;
    border-left: 1px solid var(--divider);
  }

  .bubble {
    max-width: 440px;
  }

  ul.menu {
    position: absolute;
    width: auto;
    min-width: 190px;
    border-radius: var(--r-md);
    padding: 8px;
    animation: none;
  }

  div.alert {
    max-width: 360px;
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  #sidepanel {
    width: 280px;
  }

  #info-view {
    width: 280px;
  }

  .bubble {
    max-width: 360px;
  }
}

/* ============================================
   14. МОБИЛЬНЫЙ НИЖНИЙ НАВИГАЦИОННЫЙ БАР
   ============================================ */

.m-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(17,19,37,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--divider);
  display: flex;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom);
}

.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px 0 4px;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 44px;
  min-width: 44px;
  border-radius: 0;
  transition: opacity 0.15s ease;
}

.m-tab:active {
  opacity: 0.7;
}

.m-tab__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  transition: background 0.2s ease;
}

.m-tab--active .m-tab__pill {
  background: var(--accent-muted);
}

.m-tab .material-icons {
  font-size: 22px;
  color: var(--text-3);
  transition: color 0.2s ease;
  line-height: 1;
}

.m-tab--active .material-icons {
  color: var(--accent-hover);
}

.m-tab__label {
  font-size: 10.5px;
  color: var(--text-3);
  transition: color 0.2s ease;
  font-weight: 400;
  letter-spacing: 0.1px;
}

.m-tab--active .m-tab__label {
  color: var(--accent-hover);
  font-weight: 600;
}

.m-tab__badge {
  position: absolute;
  top: 1px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: var(--danger);
  color: white;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-app);
  line-height: 1;
}

@media (max-width: 768px) {
  #sidepanel {
    padding-bottom: 60px;
  }

  #send-message-wrapper {
    position: relative;
    bottom: 0;
  }
}

/* ============================================
   15. АНИМАЦИИ И ПЕРЕХОДЫ
   ============================================ */

.contact-box > li {
  transition: background-color 0.12s ease;
}

.bubble {
  transition: opacity 0.1s ease;
}

button,
input[type="checkbox"],
.panel-form-row,
.m-tab {
  transition: all 0.18s ease;
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.alert-container {
  animation: fadeIn 0.15s ease;
}

ul.menu {
  animation: slideInUp 0.22s cubic-bezier(0.2,0,0,1);
}

@media (min-width: 769px) {
  ul.menu { animation: fadeIn 0.12s ease; }
}

/* ============================================
   16. LOADING STATES
   ============================================ */

.load-spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-input) 25%, rgba(255,255,255,0.07) 50%, var(--bg-input) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.6s infinite;
  border-radius: 6px;
}

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

/* ============================================
   17. TOUCH TARGETS (МОБИЛЬНЫЕ)
   ============================================ */

@media (max-width: 768px) {
  .contact-box > li {
    min-height: 66px;
    padding: 11px 14px;
  }

  button {
    min-height: 44px;
  }

  .panel-form-row {
    min-height: 54px;
  }

  #topic-caption-panel button,
  #side-caption-panel button {
    min-width: 44px;
    min-height: 44px;
  }

  ul.menu > li {
    min-height: 50px;
    padding: 14px 16px;
  }
}

/* ============================================
   18. СКРОЛЛ
   ============================================ */

.scrollable-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#messages-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   19. ПАНЕЛЬ ЗВОНКА (АКТИВНЫЙ ЗВОНОК)
   ============================================ */

.call-panel {
  background: linear-gradient(180deg, #141628 0%, #0C0D1A 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.call-panel .caller-info {
  animation: fadeIn 0.3s ease;
}

.call-panel .call-actions button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.call-panel .call-actions button:active {
  transform: scale(0.94);
}

.call-panel .call-actions button.accept {
  background: linear-gradient(135deg, #2ECC71, #17A853);
  color: white;
  box-shadow: 0 4px 20px rgba(46,204,113,0.45);
}

.call-panel .call-actions button.reject {
  background: linear-gradient(135deg, #FF4D5A, #CC2233);
  color: white;
  box-shadow: 0 4px 20px rgba(255,77,90,0.45);
}

/* ============================================
   20. ОВЕРЛЕЙ ВХОДЯЩЕГО ЗВОНКА
   ============================================ */

.call-incoming-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #141628 0%, #0C0D1A 100%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.call-incoming-overlay .avatar-box {
  width: 120px;
  height: 120px;
  margin-bottom: 28px;
  border-radius: 50%;
  animation: ringPulse 2s ease-in-out infinite;
}

.call-incoming-overlay .caller-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
  letter-spacing: -0.4px;
}

.call-incoming-overlay .call-type {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 48px;
}

@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,82,220,0.5); }
  50%       { box-shadow: 0 0 0 24px rgba(111,82,220,0); }
}

/* ============================================
   21. КОНТЕКСТНОЕ МЕНЮ (МОБИЛЬ — BOTTOM SHEET)
   ============================================ */

@media (max-width: 768px) {
  ul.menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0;
    padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
    max-height: 65vh;
    overflow-y: auto;
  }

  ul.menu::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
  }

  ul.menu > li:first-child {
    margin-top: 8px;
  }
}

/* ============================================
   22. УЛУЧШЕННЫЕ SCROLLBAR В БОКОВОЙ ПАНЕЛИ
   ============================================ */

#sidepanel .scrollable-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* ============================================
   23. ТИПИЗАЦИЯ (ИНДИКАТОР)
   ============================================ */

.typing-indicator-container {
  padding: 4px 14px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.typing-indicator-text {
  font-size: 12.5px;
  color: var(--text-2);
  font-style: italic;
}

.typing-indicator-dots {
  display: flex;
  gap: 3px;
}

.typing-indicator-dots span {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  animation: typingDot 1.4s infinite ease-in-out;
}

.typing-indicator-dots span:nth-child(1) { animation-delay: 0s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ============================================
   24. АДАПТИВНОСТЬ (СЛУЖЕБНОЕ)
   ============================================ */

@media (max-width: 768px) {
  #icon-nav-column {
    display: none;
  }

  #chats-column {
    width: 100%;
    min-width: unset;
  }

  .filter-pills-container {
    padding: 4px 12px 6px;
  }

  .incoming-call {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .incoming-call #controls {
    padding-bottom: env(safe-area-inset-bottom);
  }

  #video-container #controls {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

.info-card-label {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-card-value {
  font-size: 15px;
  color: var(--text-1);
}

/* ============================================
   25. УЛУЧШЕНИЯ ПРОФИЛЯ И НАСТРОЕК
   ============================================ */

/* Плоские кнопки в настройках */
.flat-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--divider);
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition: background 0.15s ease;
}

.flat-button:last-child {
  border-bottom: none;
}

.flat-button:hover {
  background: var(--bg-hover);
  color: var(--accent-hover);
  text-decoration: none;
}

.flat-button .material-icons {
  font-size: 20px;
  color: var(--text-2);
  flex-shrink: 0;
}

/* Блок настроек с делителями */
.panel-form-column {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  margin: 8px 12px;
  overflow: hidden;
}

#settings-form .panel-form-column {
  margin-bottom: 0;
  border-radius: 0;
}

/* Quoted list (radio groups) */
ul.quoted {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

ul.quoted > li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

ul.quoted > li:last-child {
  border-bottom: none;
}

ul.quoted > li > label {
  font-size: 15px;
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Разделитель в настройках */
.hr {
  height: 1px;
  background: var(--divider);
  margin: 6px 0;
  border: none;
}

/* Поиск — красивее */
.search-form {
  padding: 8px 12px;
}

/* Tabbar (верхний, для new-topic-view) улучшенный */
ul.tabbar {
  display: flex;
  list-style: none;
  padding: 0 8px;
  margin: 0;
  gap: 4px;
}

ul.tabbar > li {
  flex: 1;
  text-align: center;
}

ul.tabbar > li > a {
  display: block;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Пустое состояние списка */
.empty-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.6;
}

/* Ввод в поиске */
.search-box {
  margin: 6px 10px;
  border-radius: 20px;
  background: var(--bg-input);
}

.search-box input {
  border: none;
  background: transparent;
  font-size: 15px;
}

.search-box input:focus {
  border: none;
  box-shadow: none;
}

/* Кнопка "Назад" в заголовке */
.button-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--accent-hover);
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.button-back:hover {
  background: var(--bg-hover);
}

/* Profile section: крупная карточка */
.account-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  gap: 10px;
}

.account-info-card .avatar-box {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(111,82,220,0.3);
}

.account-info-card .account-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.3px;
}

.account-info-card .account-sub {
  font-size: 13px;
  color: var(--text-2);
}

/* ============================================
   26а. PROFILE — полный редизайн
   ============================================ */

/* Hero-карточка профиля */
.prof-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 24px;
  background: linear-gradient(160deg, var(--bg-lift) 0%, var(--bg-surface) 100%);
  border-bottom: 1px solid var(--divider);
  gap: 4px;
}

/* Кастомный аватар профиля — простой, надёжный, без зависимости от AvatarUpload */
.prof-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 10px;
  box-shadow: 0 4px 24px rgba(111, 82, 220, 0.45);
  background: var(--accent-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prof-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prof-avatar-letter {
  font-size: 34px;
  font-weight: 700;
  color: var(--accent-hover);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.prof-card-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.4px;
  margin-top: 2px;
  text-align: center;
}

.prof-card-sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  text-align: center;
}

.prof-card-alias {
  color: var(--accent-hover);
}

.prof-card-desc {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin-top: 2px;
  max-width: 260px;
  line-height: 1.4;
}

.prof-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 20px;
  background: var(--accent-muted);
  color: var(--accent-hover);
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.prof-edit-btn:hover { background: rgba(111, 82, 220, 0.25); }
.prof-edit-btn:active { transform: scale(0.96); }
.prof-edit-btn .material-icons { font-size: 16px; }

/* Секция / карточка настроек */
.prof-section {
  margin: 12px 12px 0;
  background: var(--bg-lift);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--divider);
}
.prof-section-last {
  margin-bottom: 20px;
}

.prof-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  padding: 10px 16px 4px;
}

/* Строка настроек */
.prof-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  min-height: 52px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--divider);
}
.prof-row:last-child { border-bottom: none; }
.prof-row:hover { background: var(--bg-hover); text-decoration: none; }

/* Иконка-круг */
.prof-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prof-row-icon .material-icons { font-size: 20px; }

/* Цветовые варианты иконок */
.prof-icon-blue   { background: rgba(62, 158, 255, 0.15); }
.prof-icon-blue   .material-icons { color: #3E9EFF; }
.prof-icon-green  { background: rgba(46, 204, 113, 0.15); }
.prof-icon-green  .material-icons { color: #2ECC71; }
.prof-icon-orange { background: rgba(255, 166, 61,  0.15); }
.prof-icon-orange .material-icons { color: #FFA63D; }
.prof-icon-purple { background: var(--accent-muted); }
.prof-icon-purple .material-icons { color: var(--accent-hover); }
.prof-icon-teal   { background: rgba(32, 201, 190,  0.15); }
.prof-icon-teal   .material-icons { color: #20C9BE; }
.prof-icon-danger { background: rgba(255, 77, 90,   0.15); }
.prof-icon-danger .material-icons { color: var(--danger); }

/* Текст строки */
.prof-row-label {
  flex: 1;
  font-size: 15px;
  color: var(--text-1);
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.prof-row-label--danger { color: var(--danger); }

/* Шеврон */
.prof-row-chevron {
  font-size: 20px !important;
  color: var(--text-3);
  flex-shrink: 0;
}

/* Кнопка удаления credential */
.prof-row-del {
  color: var(--text-3);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.prof-row-del:hover { color: var(--danger); background: rgba(255,77,90,0.1); }
.prof-row-del .material-icons { font-size: 20px; }

/* Неподтверждённый credential */
.prof-cred-pending {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
}

/* ============================================
   26. HOLD-TO-RECORD (запись на удержание)
   ============================================ */

/* Кнопка микрофона — нет выделения при зажатии */
.mic-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

/* Компактная запись при удержании */
.audio--hold {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 0 6px;
  min-width: 0;
}

/* Пульсирующая красная точка */
.hold-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  animation: holdRecPulse 1s ease-in-out infinite;
}

@keyframes holdRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.hold-rec-wave {
  flex: 1;
  height: 28px;
  min-width: 0;
}

/* Подсказки при удержании */
.hold-rec-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 6px;
  background: var(--bg-surface);
  border-top: 1px solid var(--divider);
}

.hold-rec-cancel-hint {
  font-size: 13px;
  color: var(--text-3);
  animation: holdHintFade 0.3s ease;
}

.hold-rec-lock-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-muted);
  cursor: pointer;
  animation: holdHintFade 0.3s ease;
}

.hold-rec-lock-hint .material-icons {
  font-size: 18px;
  color: var(--accent-hover);
}

@keyframes holdHintFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   27. FAB — КНОПКА НОВОГО ЧАТА
   ============================================ */

.fab {
  position: absolute;
  bottom: 20px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  box-shadow: 0 4px 20px rgba(111,82,220,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fab:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 28px rgba(111,82,220,0.65);
  transform: scale(1.05);
}

.fab:active {
  transform: scale(0.95);
}

.fab .material-icons {
  font-size: 22px;
  color: white;
}

/* На мобиле FAB выше таббара */
@media (max-width: 768px) {
  .fab {
    bottom: 76px;
  }

  /* Карандаш в хедере скрываем на мобиле (есть FAB) */
  .navbar-actions--desktop {
    display: none;
  }
}

/* ============================================
   27. NEW TOPIC VIEW — СТИЛЬ WHATSAPP
   ============================================ */

/* Шапка суб-экрана (Новая группа / По ссылке) */
.ntv-subview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 4px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  min-height: 52px;
}

.ntv-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--accent-hover);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.ntv-back-btn:hover {
  background: var(--bg-hover);
}

.ntv-back-btn .material-icons {
  font-size: 22px;
}

.ntv-subview-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
}

/* Строки действий (Новая группа, По ссылке) */
.ntv-actions {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  padding: 6px 0;
}

.ntv-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.ntv-action-row:hover {
  background: var(--bg-hover);
}

.ntv-action-row:active {
  background: var(--bg-input);
}

.ntv-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ntv-action-icon .material-icons {
  font-size: 22px;
  color: white;
}

.ntv-action-label {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
}

.ntv-action-arrow {
  font-size: 20px;
  color: var(--text-3);
}

/* Заголовок секции "Контакты" */
.ntv-section-header {
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--bg-app);
}

/* ============================================
   27a. ПОИСК ПО НОМЕРУ ТЕЛЕФОНА
   ============================================ */

.phone-search-panel {
  padding: 16px 16px 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
}

.phone-search-row {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--divider-hard);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.phone-search-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-muted);
}

.phone-search-prefix {
  padding: 0 10px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}

.phone-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 12px 8px 12px 0;
  font-size: 16px;
  color: var(--text-1);
  min-width: 0;
}
.phone-search-input::placeholder {
  color: var(--text-3);
}

.phone-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--accent);
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  flex-shrink: 0;
  transition: background 0.15s;
}
.phone-search-btn:hover {
  background: var(--accent-hover);
}
.phone-search-btn:disabled {
  background: var(--bg-lift);
  color: var(--text-3);
  cursor: not-allowed;
}
.phone-search-btn .material-icons {
  font-size: 20px;
}

.phone-search-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-3);
}

/* ============================================
   27b. ПАНЕЛЬ "ПО ID / QR"
   ============================================ */

.byid-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

/* QR-секция */
.byid-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
}

.byid-qr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

.byid-qr {
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.byid-qr-hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-2);
  text-align: center;
}

/* Разделитель */
.byid-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  margin: 20px 0 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.byid-divider::before,
.byid-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider-hard);
}

/* Input секция */
.byid-input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 24px;
  background: var(--bg-surface);
}

.byid-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--divider-hard);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.byid-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-muted);
}
.byid-input::placeholder {
  color: var(--text-3);
}

.byid-hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
}
.byid-hint code {
  background: var(--bg-lift);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

.byid-btn {
  margin-top: 4px;
  padding: 12px;
  background: var(--accent);
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,168,132,0.30);
}
.byid-btn:hover {
  background: var(--accent-hover);
}
.byid-btn:disabled {
  background: var(--bg-lift);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================
   28. ФОРМА СОЗДАНИЯ ГРУППЫ
   ============================================ */

.grp-form {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}

/* Блок аватара — по центру, компактно */
.grp-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
}

/* Уменьшаем дефолтный avatar-upload внутри формы */
.grp-avatar-wrap .avatar-upload {
  width: 80px;
  height: 86px;
  font-size: 2.5rem;
  margin: 0;
}

.grp-avatar-wrap .avatar-upload .blank,
.grp-avatar-wrap .avatar-upload .avatar-box,
.grp-avatar-wrap .avatar-upload img.preview {
  width: 80px;
  height: 80px;
}

.grp-avatar-wrap .avatar-upload .inputfile + label.round {
  width: 28px;
  height: 28px;
  bottom: 2px;
  right: 2px;
}

.grp-avatar-wrap .avatar-upload .inputfile + label.round .material-icons {
  font-size: 16px;
  line-height: 28px;
}

.grp-avatar-hint {
  font-size: 12px;
  color: var(--text-3);
  margin: 8px 0 0;
}

/* Блок полей */
.grp-fields {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  padding: 4px 0;
}

.grp-field {
  display: flex;
  flex-direction: column;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--divider);
}

.grp-field:last-child {
  border-bottom: none;
}

.grp-field-label {
  font-size: 11px;
  color: var(--accent-hover);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.grp-field-input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--divider-hard);
  color: var(--text-1);
  font-size: 16px;
  padding: 6px 0;
  width: 100%;
  transition: border-color 0.2s ease;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.grp-field-input:focus {
  border-bottom: 2px solid var(--accent);
  outline: none;
  box-shadow: none;
}

.grp-field-input::placeholder {
  color: var(--text-3);
}

/* Канал toggle */
.grp-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  margin-top: 8px;
}

.grp-toggle-icon {
  font-size: 22px;
  color: var(--accent-hover);
}

.grp-toggle-label {
  flex: 1;
  font-size: 16px;
  color: var(--text-1);
}

/* Кнопка Создать */
.grp-submit-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 20px 20px 32px;
}

.grp-submit-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(111,82,220,0.45);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.grp-submit-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 28px rgba(111,82,220,0.6);
  transform: scale(1.06);
}

.grp-submit-btn:active {
  transform: scale(0.94);
}

.grp-submit-btn--off {
  background: var(--bg-input);
  box-shadow: none;
  cursor: not-allowed;
}

.grp-submit-btn .material-icons {
  font-size: 24px;
  color: white;
}

/* ══════════════════════════════════════════════════
   Section 29: Bubble press state + Message Action Sheet
   ══════════════════════════════════════════════════ */

/* Press feedback on message bubble */
.bubble--pressing {
  opacity: 0.75;
  transform: scale(0.97);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Full-screen backdrop */
.msg-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Bottom sheet container */
.msg-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--bg-card);
  border-radius: 18px 18px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 8px);
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.55);
  animation: sheet-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Drag handle pill */
.msg-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--text-3);
  border-radius: 2px;
  margin: 10px auto 14px;
}

/* Quick action icon grid */
.msg-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 16px;
  justify-content: center;
}

.msg-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  background: var(--bg-lift);
  border: none;
  border-radius: 14px;
  color: var(--text-1);
  cursor: pointer;
  flex: 1;
  min-width: 58px;
  max-width: 84px;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.msg-quick-btn:hover  { background: var(--bg-hover); }
.msg-quick-btn:active { background: var(--bg-active); transform: scale(0.95); }
.msg-quick-btn.disabled { opacity: 0.4; pointer-events: none; }

.msg-quick-btn .material-icons { font-size: 22px; color: var(--accent-hover); }
.msg-quick-btn span            { font-size: 11px; color: var(--text-2); white-space: nowrap; }

/* Danger actions (Delete, Block, …) */
.msg-danger-actions {
  border-top: 1px solid var(--divider);
  padding: 6px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-danger-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--danger);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.msg-danger-btn:hover  { background: rgba(255, 77, 90, 0.10); }
.msg-danger-btn:active { background: rgba(255, 77, 90, 0.18); }
.msg-danger-btn .material-icons { font-size: 20px; }


/* ══════════════════════════════════════════════════
   Section 30: Video circles (кружки как в Telegram)
   ══════════════════════════════════════════════════ */

/* Round video in chat feed */
.inline-video.video-note {
  width: 200px !important;
  height: 200px !important;
  min-width: 200px !important;
  min-height: 200px !important;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.inline-video.video-note img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
}

.inline-video.video-note .play-control {
  border-radius: 50%;
}

.inline-video.video-note .duration {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Видео внутри кружка при inline-воспроизведении */
.inline-video.video-note video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SVG прогресс-кольцо при воспроизведении */
.vn-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.vn-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 5;
}
.vn-ring-progress {
  fill: none;
  stroke: var(--accent-hover);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.25s linear;
}

/* ── Video Note Recorder overlay ── */
.vnr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  animation: fade-in 0.18s ease;
}

.vnr-preview {
  position: relative;
  width: 180px;
  height: 180px;
}

.vnr-canvas {
  border-radius: 50%;
  display: block;
  width: 180px;
  height: 180px;
  box-shadow: 0 4px 24px rgba(111, 82, 220, 0.45);
}

.vnr-timer {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 10px;
  pointer-events: none;
}

.vnr-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}

.vnr-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.vnr-cancel {
  background: var(--bg-lift);
  color: var(--text-2);
}

.vnr-cancel:hover  { background: rgba(255, 77, 90, 0.15); color: var(--danger); }
.vnr-cancel:active { transform: scale(0.92); }

.vnr-send {
  background: var(--accent);
  color: #fff;
  width: 52px;
  height: 52px;
  box-shadow: 0 4px 16px rgba(111, 82, 220, 0.45);
}

.vnr-send:hover  { background: var(--accent-hover); }
.vnr-send:active { transform: scale(0.92); }

.vnr-btn .material-icons { font-size: 22px; }
.vnr-send .material-icons { font-size: 22px; color: #fff; }

.vnr-hint {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

/* SVG прогресс-кольцо рекордера */
.vnr-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.vnr-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 4;
}
.vnr-ring-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ══════════════════════════════════════════════════
   Section 31: Auth screen (login + register shared)
   ══════════════════════════════════════════════════ */

/* Wrapper for the whole auth area */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Logo + app name + tagline */
.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 16px 20px;
  gap: 6px;
  user-select: none;
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  margin-bottom: 4px;
}

.auth-brand {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.5px;
}

.auth-brand-accent {
  color: var(--accent);
}

.auth-tagline {
  font-size: 13.5px;
  color: var(--text-3);
  letter-spacing: 0.1px;
}

/* Tab switcher: [Войти] [Регистрация] */
.auth-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  border-bottom: 2px solid var(--divider);
  margin-bottom: 4px;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 8px 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-align: center;
  letter-spacing: 0.1px;
}

.auth-tab:hover {
  color: var(--text-1);
}

.auth-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Bottom "switch to other view" hint */
.auth-switch {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
  padding: 14px 16px 28px;
}

.auth-switch-link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-switch-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Minimal navbar strip for register view (back button only) */
.auth-navbar {
  min-height: 44px;
  height: auto !important;
}

/* --- Login form --- */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 12px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.login-input,
.login-form input[type="tel"],
.login-form input[type="password"],
.login-form input[type="text"] {
  background: var(--bg-input);
  border: 1.5px solid var(--divider-hard);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  outline: none;
}

.login-input:focus,
.login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,82,220,0.18);
}

.login-row-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}

.login-row-check label { cursor: pointer; flex: 1; }

.login-forgot {
  font-size: 13px;
  color: var(--accent-hover);
  text-decoration: none;
  white-space: nowrap;
}

.login-forgot:hover { text-decoration: underline; }

.login-submit {
  margin-top: 8px;
}

.login-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(111,82,220,0.3);
}

.login-btn:hover  { background: var(--accent-hover); }
.login-btn:active { transform: scale(0.98); }
.login-btn.disabled { opacity: 0.5; pointer-events: none; }


/* ══════════════════════════════════════════════════
   Section 32: Register form — phone-first
   ══════════════════════════════════════════════════ */

.reg-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px 32px;
}

.reg-avatar-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reg-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hover);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.reg-input,
.reg-form input[type="text"],
.reg-form input[type="tel"],
.reg-form input[type="password"] {
  background: var(--bg-input);
  border: 1.5px solid var(--divider-hard);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 16px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  outline: none;
}

.reg-input:focus,
.reg-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,82,220,0.18);
}

.reg-phone-row {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--divider-hard);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  gap: 8px;
  transition: border-color 0.2s ease;
  font-size: 16px;
  color: var(--text-1);
}

.reg-phone-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,82,220,0.18);
}

.reg-phone-row .dial-code {
  color: var(--accent-hover);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Фиксированный код страны (без кликабельности) */
.reg-phone-row .dial-code--fixed,
.login-field .dial-code--fixed {
  color: var(--text-1);
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
  user-select: none;
}

.reg-phone-row input[type="tel"] {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-1);
  font-size: 16px;
  width: 100%;
  outline: none;
  box-shadow: none;
}

.reg-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.reg-row-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}

.reg-row-check label { cursor: pointer; }

.reg-submit {
  margin-top: 8px;
}

.reg-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(111,82,220,0.3);
}

.reg-btn:hover  { background: var(--accent-hover); }
.reg-btn:active { transform: scale(0.98); }
.reg-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}


/* ══════════════════════════════════════════════════
   Section 33: Desktop improvements
   ══════════════════════════════════════════════════ */

@media (min-width: 641px) {
  /* Wider sidepanel on large screens */
  #sidepanel {
    min-width: 300px;
    max-width: 360px;
  }

  /* Better message bubble max-width on desktop */
  .bubble {
    max-width: 60% !important;
  }

  /* Smooth scrollbar in message list */
  #messages-container::-webkit-scrollbar {
    width: 5px;
  }
  #messages-container::-webkit-scrollbar-track {
    background: transparent;
  }
  #messages-container::-webkit-scrollbar-thumb {
    background: var(--divider-hard);
    border-radius: 3px;
  }
  #messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
  }

  /* Better send panel spacing */
  #send-message-panel {
    padding: 8px 16px;
  }

  /* Auth screen centered on desktop */
  .auth-screen {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Better topic caption */
  #topic-caption-panel {
    padding: 0 20px;
  }

  /* Slightly larger caption area */
  .caption-panel {
    height: var(--caption-panel-height, 4rem);
  }
}

/* Smooth sidebar scrollbar everywhere */
#sidepanel ::-webkit-scrollbar,
.scrollable-panel::-webkit-scrollbar {
  width: 4px;
}
#sidepanel ::-webkit-scrollbar-thumb,
.scrollable-panel::-webkit-scrollbar-thumb {
  background: var(--divider-hard);
  border-radius: 2px;
}

/* ============================================
   TERZ1K — LIGHT THEME
   Белый фон · Зелёные панели · WhatsApp #00A884
   Иерархия: белый=фон, #F3FAF8=панели, #E8F3F0=инпуты
   ============================================ */

[data-theme="light"] {
  /* === ФОНЫ ===
     Белый — ТОЛЬКО основной фон страницы.
     Всё остальное имеет зелёный оттенок. */
  --bg-app:     #FFFFFF;   /* фон всей страницы */
  --bg-surface: #F3FAF8;   /* сайдпанель, карточки */
  --bg-card:    #EDF7F4;   /* вложенные карточки */
  --bg-lift:    #E8F3F0;   /* поднятые элементы */
  --bg-input:   #E8F3F0;   /* поля ввода */
  --bg-hover:   rgba(0,168,132,0.10);
  --bg-active:  rgba(0,168,132,0.18);

  /* === АКЦЕНТ — WhatsApp зелёный === */
  --accent:        #00A884;
  --accent-hover:  #008F71;
  --accent-dark:   #007A60;
  --accent-glow:   rgba(0,168,132,0.25);
  --accent-muted:  rgba(0,168,132,0.12);

  /* === ТЕКСТ === */
  --text-1: #111B21;
  --text-2: #667781;
  --text-3: #A0ADB5;

  /* === СЛУЖЕБНЫЕ === */
  --divider:      rgba(0,168,132,0.15);
  --divider-hard: rgba(0,168,132,0.25);
  --online:   #00A884;
  --danger:   #E53935;
  --success:  #00A884;
  --warning:  #F57C00;
  --missed:   #E53935;
  --received: #00A884;

  /* === ПУЗЫРИ === */
  --bubble-in:          #FFFFFF;   /* входящие — белые (контраст на #EAE6DF) */
  --bubble-out:         #DCF8C6;   /* исходящие — WhatsApp зелёный */
  --bubble-in-flash:    #E8FFF6;
  --bubble-out-flash:   #B5F0A0;
  --bubble-out-text:    #111B21;

  /* === ТЕНИ === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  /* === Переопределение base.css === */
  --clr-body-background:       #FFFFFF;
  --clr-bright:                #F3FAF8;
  --clr-text-primary:          #111B21;
  --clr-text-secondary:        #667781;
  --clr-primary-accent:        #00A884;
  --clr-primary-accent-hover:  #008F71;
  --clr-bubble-left-bg:        #FFFFFF;
  --clr-bubble-right-bg:       #DCF8C6;
  --clr-bubble-left-bg-flash:  #E8FFF6;
  --clr-bubble-right-bg-flash: #B5F0A0;
  --clr-input-bg:              #E8F3F0;
  --clr-border-light:          rgba(0,168,132,0.15);
  --clr-border-muted:          rgba(0,168,132,0.25);
  --clr-bubble-text:           #111B21;
  --clr-bubble-meta-text:      #667781;
  --clr-bubble-meta-date-bg:   rgba(0,0,0,0.12);
  --clr-online:                #00A884;
  --clr-scrollbar-thumb:       rgba(0,168,132,0.30);
  --clr-scrollbar-track:       transparent;
  --clr-shadow-dialog:         0 4px 16px rgba(0,0,0,0.12);
}

/* ── Общий фон (только страница — белый) ── */
[data-theme="light"] body,
[data-theme="light"] #app-container,
[data-theme="light"] #application {
  background: var(--bg-app);
  color: var(--text-1);
}

/* ── Сайдпанель — светло-зелёная, не белая ── */
[data-theme="light"] #sidepanel {
  background: var(--bg-surface);
  border-right: 1px solid var(--divider-hard);
  box-shadow: none;
}

/* ── Шапки — зелёные ── */
[data-theme="light"] .caption-panel,
[data-theme="light"] #side-caption-panel {
  background: #00A884;
  border-bottom: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  color: #FFFFFF;
}
[data-theme="light"] .caption-panel .caption-title,
[data-theme="light"] .caption-panel .caption-username,
[data-theme="light"] #side-caption-panel .caption-title,
[data-theme="light"] #side-caption-panel .caption-username {
  color: #FFFFFF;
}
[data-theme="light"] #sidepanel-brand .brand-name {
  color: #FFFFFF;
}
[data-theme="light"] #sidepanel-brand .brand-accent {
  color: rgba(255,255,255,0.80);
}
[data-theme="light"] #sidepanel-title {
  color: #FFFFFF;
}
[data-theme="light"] .caption-panel .caption-status,
[data-theme="light"] #side-caption-panel .caption-status {
  color: rgba(255,255,255,0.80);
}

/* ── Кнопки в шапке (на зелёном фоне) ── */
[data-theme="light"] .navbar-btn {
  color: rgba(255,255,255,0.90);
}
[data-theme="light"] .navbar-btn:hover {
  color: #FFFFFF;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
}
/* Кнопки вне шапки — тёмные */
[data-theme="light"] .panel-form-row .navbar-btn,
[data-theme="light"] #sidepanel .panel-section .navbar-btn {
  color: var(--text-2);
}
[data-theme="light"] .panel-form-row .navbar-btn:hover {
  color: var(--accent);
  background: var(--bg-hover);
  border-radius: 50%;
}

/* ── Строка поиска ── */
[data-theme="light"] .search-panel,
[data-theme="light"] #search-panel {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
}
[data-theme="light"] .search-panel input,
[data-theme="light"] #search-panel input {
  background: var(--bg-lift);
  color: var(--text-1);
  border: 1px solid var(--divider-hard);
  border-radius: 20px;
}
[data-theme="light"] .search-panel input::placeholder,
[data-theme="light"] #search-panel input::placeholder {
  color: var(--text-3);
}

/* ── Список чатов ── */
[data-theme="light"] .contact-list-item {
  border-bottom: 1px solid var(--divider);
  background: var(--bg-surface);
}
[data-theme="light"] .contact-list-item:hover {
  background: var(--bg-hover);
}
[data-theme="light"] .contact-list-item.selected,
[data-theme="light"] .contact-list-item:active {
  background: var(--bg-active);
}
[data-theme="light"] .contact-list-item .contact-title {
  color: var(--text-1);
}
[data-theme="light"] .contact-list-item .contact-last-msg,
[data-theme="light"] .contact-list-item .contact-preview {
  color: var(--text-2);
}
[data-theme="light"] .contact-list-item .contact-time {
  color: var(--text-2);
}
[data-theme="light"] .contact-list-item .unread-count {
  background: var(--accent);
  color: #FFFFFF;
}

/* ── Область чата (бежевый фон как в WhatsApp) ── */
[data-theme="light"] #chat-panel,
[data-theme="light"] .messages-container,
[data-theme="light"] #messages-container {
  background: #EAE6DF;
}

/* ── Пузыри ── */
[data-theme="light"] .bubble-left-side .bubble-container {
  background: #FFFFFF;
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.13);
  border: none;
}
[data-theme="light"] .bubble-right-side .bubble-container {
  background: #DCF8C6;
  color: #111B21;
  box-shadow: 0 1px 2px rgba(0,0,0,0.13);
}
[data-theme="light"] .bubble-right-side .bubble-container .meta {
  color: #667781;
}
[data-theme="light"] .bubble-left-side .bubble-container .meta {
  color: var(--text-2);
}

/* ── Поле ввода сообщения ── */
[data-theme="light"] #send-message-panel {
  background: #EDF7F4;
  border-top: 1px solid var(--divider-hard);
  padding: 8px 12px;
}
[data-theme="light"] #message-text {
  background: #F3FAF8;
  color: var(--text-1);
  border: 1px solid var(--divider-hard);
  border-radius: 8px;
}
[data-theme="light"] #message-text::placeholder {
  color: var(--text-3);
}
[data-theme="light"] #send-message-panel .send-btn,
[data-theme="light"] .action-button {
  color: var(--accent);
}
[data-theme="light"] #send-message-panel .send-btn:hover,
[data-theme="light"] .action-button:hover {
  color: var(--accent-hover);
}
[data-theme="light"] .send-btn-active,
[data-theme="light"] .send-btn[data-ready="true"] {
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 50%;
}

/* ── Кнопки Войти / Зарегистрироваться ── */
[data-theme="light"] .login-btn,
[data-theme="light"] .reg-btn {
  background: var(--accent);
  color: #FFFFFF;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,168,132,0.30);
}
[data-theme="light"] .login-btn:hover,
[data-theme="light"] .reg-btn:hover {
  background: var(--accent-hover);
}
[data-theme="light"] .login-btn:disabled,
[data-theme="light"] .reg-btn:disabled,
[data-theme="light"] .login-btn.disabled {
  background: #A8D5C8;
  color: rgba(255,255,255,0.75);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Flat-buttons (текстовые кнопки) ── */
[data-theme="light"] .flat-button {
  color: var(--accent);
  background: transparent;
  border-radius: 6px;
  transition: background 0.15s;
}
[data-theme="light"] .flat-button:hover {
  background: var(--bg-hover);
}
[data-theme="light"] .flat-button.danger {
  color: var(--danger);
}
[data-theme="light"] .flat-button.danger:hover {
  background: rgba(229,57,53,0.08);
}

/* ── Back / panel кнопки ── */
[data-theme="light"] .ntv-back-btn,
[data-theme="light"] .panel-btn {
  color: var(--accent);
  background: transparent;
}
[data-theme="light"] .ntv-back-btn:hover,
[data-theme="light"] .panel-btn:hover {
  background: var(--bg-hover);
  border-radius: 6px;
}

/* ── Кнопки звонка (vnr) ── */
[data-theme="light"] .vnr-btn {
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,168,132,0.35);
}
[data-theme="light"] .vnr-btn:hover {
  background: var(--accent-hover);
}
[data-theme="light"] .vnr-cancel {
  background: var(--danger);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(229,57,53,0.35);
}
[data-theme="light"] .vnr-send {
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 50%;
}

/* ── Danger в сообщениях ── */
[data-theme="light"] .msg-danger-btn {
  color: var(--danger);
}

/* ── Инпуты и textarea — светло-зелёные, не белые ── */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--divider-hard);
  border-radius: 8px;
}
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,168,132,0.20);
  background: #DFF5EE;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-3);
}

/* Форменные инпуты */
[data-theme="light"] .login-input,
[data-theme="light"] .reg-input {
  background: var(--bg-input);
  color: var(--text-1);
  border: 1px solid var(--divider-hard);
  border-radius: 8px;
}
[data-theme="light"] .login-input:focus,
[data-theme="light"] .reg-input:focus {
  border-color: var(--accent);
  background: #DFF5EE;
  box-shadow: 0 0 0 2px rgba(0,168,132,0.20);
}

/* ── Чипы ── */
[data-theme="light"] .chip-input {
  background: var(--bg-input);
  border: 1px solid var(--divider-hard);
  border-radius: 8px;
  color: var(--text-1);
}
[data-theme="light"] .chip-input:focus-within {
  border-color: var(--accent);
}
[data-theme="light"] .chip {
  background: rgba(0,168,132,0.14);
  color: var(--accent-dark);
  border-radius: 12px;
  border: 1px solid rgba(0,168,132,0.28);
}
[data-theme="light"] .chip:hover {
  background: rgba(0,168,132,0.22);
}

/* ── Контекстное меню ── */
[data-theme="light"] .context-menu {
  background: #F3FAF8;
  border: 1px solid var(--divider-hard);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.16);
}
[data-theme="light"] .context-menu-item {
  color: var(--text-1);
}
[data-theme="light"] .context-menu-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
[data-theme="light"] .context-menu-item.danger {
  color: var(--danger);
}
[data-theme="light"] .context-menu-item.danger:hover {
  background: rgba(229,57,53,0.08);
}
[data-theme="light"] .context-menu-separator,
[data-theme="light"] .context-menu hr {
  border-color: var(--divider-hard);
}

/* ── Таббар — светло-зелёный ── */
[data-theme="light"] .m-tabbar {
  background: var(--bg-surface);
  border-top: 1px solid var(--divider-hard);
  box-shadow: 0 -1px 6px rgba(0,168,132,0.10);
}
[data-theme="light"] .m-tab {
  color: var(--text-2);
}
[data-theme="light"] .m-tab .material-icons,
[data-theme="light"] .m-tab .m-tab__label {
  color: var(--text-2);
}
[data-theme="light"] .m-tab--active .material-icons,
[data-theme="light"] .m-tab--active .m-tab__label {
  color: var(--accent);
}
[data-theme="light"] .m-tab--active {
  background: rgba(0,168,132,0.10);
  border-radius: 12px;
}

/* ── Панели настроек ── */
[data-theme="light"] .panel-form-row,
[data-theme="light"] .settings-section {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--divider);
  color: var(--text-1);
}
[data-theme="light"] .panel-form-row label,
[data-theme="light"] .settings-label {
  color: var(--text-2);
}
[data-theme="light"] .settings-group-title {
  color: var(--accent);
  font-weight: 600;
}

/* ── Список в настройках ── */
[data-theme="light"] .settings-list-item {
  background: var(--bg-surface);
  color: var(--text-1);
  border-bottom: 1px solid var(--divider);
}
[data-theme="light"] .settings-list-item:hover {
  background: var(--bg-hover);
}
[data-theme="light"] .settings-list-item .settings-icon {
  color: var(--accent);
}
[data-theme="light"] .settings-list-item.danger-item,
[data-theme="light"] .settings-list-item .danger {
  color: var(--danger);
}

/* ── Toggle/Switch ── */
[data-theme="light"] .switch-track {
  background: #B8C8C2;
}
[data-theme="light"] .switch-track.active,
[data-theme="light"] input[type="checkbox"]:checked + .switch-track {
  background: var(--accent);
}
[data-theme="light"] input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ── Аватар-загрузка ── */
[data-theme="light"] .avatar-upload-btn {
  background: var(--bg-input);
  border: 2px dashed var(--divider-hard);
  color: var(--text-2);
  border-radius: 50%;
}
[data-theme="light"] .avatar-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Диалоги / модалки ── */
[data-theme="light"] .dialog,
[data-theme="light"] .modal-dialog {
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
  color: var(--text-1);
}
[data-theme="light"] .dialog-title,
[data-theme="light"] .modal-title {
  color: var(--text-1);
  border-bottom: 1px solid var(--divider);
}
[data-theme="light"] .dialog-btn,
[data-theme="light"] .modal-btn {
  color: var(--accent);
}
[data-theme="light"] .dialog-btn.danger,
[data-theme="light"] .modal-btn.danger {
  color: var(--danger);
}

/* ── Тосты / ошибки ── */
[data-theme="light"] .error-panel,
[data-theme="light"] .toast {
  background: var(--bg-surface);
  color: var(--text-1);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}
[data-theme="light"] .error-panel.error,
[data-theme="light"] .toast.error {
  border-left-color: var(--danger);
}

/* ── Лейблы форм ── */
[data-theme="light"] .login-label,
[data-theme="light"] .reg-label {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
[data-theme="light"] .reg-hint {
  color: var(--text-3);
  font-size: 12px;
}
[data-theme="light"] .login-forgot {
  color: var(--accent);
}
[data-theme="light"] .login-forgot:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
[data-theme="light"] .login-row-check label,
[data-theme="light"] .reg-row-check label {
  color: var(--text-1);
}

/* ── Скроллбар — зелёный ── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,168,132,0.30);
  border-radius: 4px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Форма логина / регистрации ── */
[data-theme="light"] .login-form,
[data-theme="light"] .reg-form {
  background: var(--bg-surface);
}

/* ── Тема авто через media (повторяем те же значения) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-app:     #FFFFFF;
    --bg-surface: #F3FAF8;
    --bg-card:    #EDF7F4;
    --bg-lift:    #E8F3F0;
    --bg-input:   #E8F3F0;
    --bg-hover:   rgba(0,168,132,0.10);
    --bg-active:  rgba(0,168,132,0.18);
    --accent:        #00A884;
    --accent-hover:  #008F71;
    --accent-dark:   #007A60;
    --accent-glow:   rgba(0,168,132,0.25);
    --accent-muted:  rgba(0,168,132,0.12);
    --text-1: #111B21;
    --text-2: #667781;
    --text-3: #A0ADB5;
    --divider:      rgba(0,168,132,0.15);
    --divider-hard: rgba(0,168,132,0.25);
    --online:   #00A884;
    --danger:   #E53935;
    --success:  #00A884;
    --bubble-in:          #FFFFFF;
    --bubble-out:         #DCF8C6;
    --bubble-in-flash:    #E8FFF6;
    --bubble-out-flash:   #B5F0A0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
    --clr-body-background:       #FFFFFF;
    --clr-bright:                #F3FAF8;
    --clr-text-primary:          #111B21;
    --clr-text-secondary:        #667781;
    --clr-primary-accent:        #00A884;
    --clr-primary-accent-hover:  #008F71;
    --clr-bubble-left-bg:        #FFFFFF;
    --clr-bubble-right-bg:       #DCF8C6;
    --clr-bubble-left-bg-flash:  #E8FFF6;
    --clr-bubble-right-bg-flash: #B5F0A0;
    --clr-input-bg:              #E8F3F0;
    --clr-border-light:          rgba(0,168,132,0.15);
    --clr-border-muted:          rgba(0,168,132,0.25);
    --clr-bubble-text:           #111B21;
    --clr-bubble-meta-text:      #667781;
    --clr-bubble-meta-date-bg:   rgba(0,0,0,0.12);
    --clr-scrollbar-thumb:       rgba(0,168,132,0.30);
    --clr-scrollbar-track:       transparent;
  }
}

/* ============================================================
   Group Call Panel
   ============================================================ */
#group-call-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #111827;
  display: flex;
  flex-direction: column;
  z-index: 2000;
}

/* Заголовок группового звонка */
.gcall-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 10px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.gcall-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gcall-header-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.gcall-header-count {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Сетка видеотайлов */
.gcall-grid {
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  min-height: 0;
}
.gcall-grid-1 { grid-template-columns: 1fr; }
.gcall-grid-2 { grid-template-columns: 1fr 1fr; }
.gcall-grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
/* 3 тайла: первый растягивается на всю ширину сверху */
.gcall-grid-4.gcall-grid-3 .gcall-tile:first-child { grid-column: 1 / -1; }
/* 5-6 тайлов: 3 колонки */
.gcall-grid-6 { grid-template-columns: repeat(3, 1fr); }
/* 7+ тайлов: авто-заполнение колонок */
.gcall-grid-many { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Тайл участника */
.gcall-tile {
  position: relative;
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.gcall-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gcall-video-hidden { display: none !important; }

/* Аватар когда видео выключено */
.gcall-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.gcall-avatar-placeholder .letter-tile {
  width: clamp(56px, 20cqmin, 96px);
  height: clamp(56px, 20cqmin, 96px);
  font-size: clamp(20px, 8cqmin, 38px);
}

/* Подпись участника внизу тайла */
.gcall-tile-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
}
.gcall-tile-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.gcall-muted-icon {
  font-size: 16px !important;
  color: #ff6b6b;
  flex-shrink: 0;
}

/* Состояние подключения */
.gcall-tile-connecting {
  background: #1a2540;
}
.gcall-connecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.7);
}
.gcall-connecting-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.gcall-connecting-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.gcall-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: gcall-spin 0.8s linear infinite;
}
@keyframes gcall-spin {
  to { transform: rotate(360deg); }
}

/* Панель управления */
.gcall-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 14px 0 20px;
  background: rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.gcall-btn {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.gcall-btn:hover { background: rgba(255,255,255,0.22); }
.gcall-btn:active { transform: scale(0.94); }
/* Кнопка в состоянии "выключено" — красноватый фон */
.gcall-btn.gcall-btn-muted {
  background: rgba(239,68,68,0.28);
  color: #fca5a5;
}
.gcall-btn.gcall-btn-muted:hover { background: rgba(239,68,68,0.4); }
/* Кнопка завершения */
.gcall-btn-hangup {
  background: #dc2626 !important;
  color: #fff !important;
  width: 64px; height: 64px;
}
.gcall-btn-hangup:hover { background: #b91c1c !important; }
.gcall-btn .material-icons { font-size: 24px; }

/* Ошибка */
.gcall-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fca5a5;
  background: rgba(220,38,38,0.15);
  border-bottom: 1px solid rgba(220,38,38,0.25);
  padding: 10px 16px;
  font-size: 14px;
  flex-shrink: 0;
}
.gcall-error .material-icons { font-size: 18px; }

/* Кнопка группового звонка в шапке */
.gcall-start-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  opacity: 0.9;
}
.gcall-start-btn:hover { opacity: 1; }
.gcall-start-btn .material-icons { font-size: 22px; }

/* Карточка группового звонка в чате */
.gcall-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,168,132,0.1);
  border: 1px solid rgba(0,168,132,0.3);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--clr-text-primary, #111B21);
}
.gcall-card .material-icons {
  color: #00A884;
  font-size: 22px;
}
.gcall-card-join-btn {
  margin-left: auto;
  background: #00A884;
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.gcall-card-join-btn:hover { background: #008F71; }
.gcall-card-active {
  margin-left: auto;
  color: #00A884;
  font-size: 13px;
  font-weight: 600;
}
.chat-message-wrapper.outgoing { justify-content: flex-end; }
.chat-message-wrapper.incoming { justify-content: flex-start; }
.chat-message-wrapper { display: flex; padding: 4px 12px; }

/* ============================================
   DESKTOP IMPROVEMENTS
   ============================================ */

/* --- Contact list: two-row layout with timestamp --- */

.contact-row-top {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.contact-row-top .contact-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-time {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
}

.contact-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
  gap: 6px;
  min-width: 0;
}

.contact-row-bottom .contact-comment {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

.contact-pin-icon {
  font-size: 13px !important;
  color: var(--text-3);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Unread badge: shown at bottom-right of contact */
.contact-row-bottom .unread {
  flex-shrink: 0;
  margin: 0;
}

/* When unread=0 the UnreadBadge renders null — no extra space */

/* Selected contact: time in accent color */
.contact-box > li.selected .contact-time {
  color: var(--accent-muted);
}

/* --- Reply quote preview in send panel --- */

#reply-quote-preview {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  margin: 0 10px 4px;
  background: var(--bg-lift);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  animation: fadeIn 0.15s ease;
}

#reply-quote-preview .cancel {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

#reply-quote-preview .cancel a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-3);
  transition: background 0.15s, color 0.15s;
}

#reply-quote-preview .cancel a:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}

/* --- Go-to-latest button --- */

#go-to-latest {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--divider);
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  opacity: 1;
  transform: translateY(0);
}

#go-to-latest:hover {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

#go-to-latest.hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

#go-to-latest .material-icons {
  font-size: 20px;
}

/* --- Better online indicator --- */

.avatar-box .online {
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--bg-surface);
  box-shadow: 0 0 0 0.5px var(--online);
}

.contact-box > li.selected .avatar-box .online {
  border-color: var(--bg-active);
}

/* --- Call buttons in chat header --- */

.header-call-btn {
  transition: background 0.15s ease, color 0.15s ease;
}

.header-call-btn:hover {
  background: rgba(0, 168, 132, 0.12) !important;
  color: var(--accent) !important;
}

/* --- Textarea auto-grow overflow scroll --- */

#send-message-input {
  overflow-y: auto;
}

/* --- Scrollbar in messages panel --- */

#messages-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#messages-panel::-webkit-scrollbar {
  width: 5px;
}

#messages-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

#messages-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}

/* --- Desktop: bigger bubble max-width for wide screens --- */

@media (min-width: 1100px) {
  .bubble {
    max-width: 560px;
  }
}

/* --- Desktop: sidepanel min-width tweak --- */

@media (min-width: 769px) {
  #app-container {
    border-radius: 0;
    box-shadow: none;
  }

  /* Sidebar fills full height cleanly */
  #sidepanel {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  /* Prevent over-scroll on sidebar list */
  #sidepanel .scrollable-panel {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Tighter padding for list items on desktop */
  .contact-box > li {
    padding: 8px 14px;
    min-height: 58px;
  }

  /* Show menuTrigger only on hover */
  .contact-box > li .menuTrigger {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .contact-box > li:hover .menuTrigger {
    opacity: 1;
  }

  /* Don't show menuTrigger when selected — unread badge is there */
  .contact-box > li.selected .menuTrigger {
    opacity: 0;
  }

  /* Drag-n-drop drop zone: smooth fade-in */
  .drag-n-drop {
    animation: fadeIn 0.2s ease;
  }

  /* Slightly bigger send button on desktop */
  #send-message-panel button[type="submit"],
  #send-message-panel .send-button {
    width: 38px;
    height: 38px;
  }
}

/* --- Light theme overrides for new elements --- */

[data-theme="light"] .contact-time {
  color: #8A9BA8;
}

[data-theme="light"] .contact-box > li.selected .contact-time {
  color: #00A884;
}

[data-theme="light"] .contact-pin-icon {
  color: #8A9BA8;
}

[data-theme="light"] #reply-quote-preview {
  background: #F0F2F5;
  border-left-color: #00A884;
}

[data-theme="light"] #go-to-latest {
  background: #fff;
  border-color: #E8E8E8;
  color: #667781;
}

[data-theme="light"] #go-to-latest:hover {
  background: #00A884;
  color: #fff;
}

[data-theme="light"] .header-call-btn:hover {
  background: rgba(0, 168, 132, 0.1) !important;
  color: #00A884 !important;
}

[data-theme="light"] #messages-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
}

[data-theme="light"] #messages-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.22);
}