:root {
  --bg: #ffffff;
  --sidebar-bg: #ffffff;
  --panel-bg: #f4f4f5;
  --chat-bg: #cfd9e2;
  --header-bg: #ffffff;
  --text: #0f1419;
  --text-dim: #707579;
  --accent: #3390ec;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, white);
  --bubble-in: #ffffff;
  --bubble-out: #effdde;
  --bubble-out-tick: #4a5bd0;
  --bubble-out-text: var(--text);
  --bubble-out-meta: color-mix(in srgb, var(--bubble-out-text) 58%, var(--bubble-out));
  --border: #e7e8ea;
  --hover: #f1f2f3;
  --active: #ebf3fc;
  --unread-bg: #3390ec;
  --shadow: 0 1px 2px rgba(16,35,47,.07);
  --chat-pattern: rgba(0,0,0,.04);
}

[data-theme="dark"] {
  --bg: #17212b;
  --sidebar-bg: #17212b;
  --panel-bg: #0e1621;
  --chat-bg: #0e1621;
  --header-bg: #17212b;
  --text: #ffffff;
  --text-dim: #708499;
  --accent: #5ea5e8;
  --accent-soft: color-mix(in srgb, var(--accent) 50%, black);
  --bubble-in: #182533;
  --bubble-out: #2b5278;
  --bubble-out-tick: #6fb3ff;
  --bubble-out-text: #ffffff;
  --border: #101921;
  --hover: #202b36;
  --active: #2b5278;
  --unread-bg: #5288c1;
  --shadow: 0 1px 2px rgba(0,0,0,.25);
  --chat-pattern: rgba(255,255,255,.03);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--panel-bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: var(--bg);
  box-shadow: 0 0 24px rgba(0,0,0,.08);
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  min-width: 0;
  position: relative;
}

.sidebar__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  border-radius: 20px;
  padding: 8px 14px;
  min-width: 0;
}
.search__icon { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
.search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
}
.search input::placeholder { color: var(--text-dim); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: none;
  background: none;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* ---------- CHAT LIST ---------- */
.chat-list { flex: 1; overflow-y: auto; padding: 6px; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s;
}
.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--active); }
.chat-item.active .chat-item__name,
.chat-item.active .chat-item__time,
.chat-item.active .chat-item__msg { color: var(--text); }

.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 19px;
  user-select: none;
  overflow: hidden;
}
.avatar--sm { width: 42px; height: 42px; font-size: 16px; }
.avatar--img { background: transparent !important; }
.avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar--button {
  border: none;
  cursor: pointer;
  font: inherit;
}

.chat-item__body { flex: 1; min-width: 0; }
.chat-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-item__name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-item__pin {
  width: 14px; height: 14px;
  color: var(--text-dim);
  vertical-align: -2px;
  margin-right: 2px;
}
.chat-item__time { font-size: 12px; color: var(--text-dim); flex: none; }
.chat-item__msg {
  font-size: 14px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-item__msg b { color: var(--text); font-weight: 500; }

.badge {
  background: var(--unread-bg);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-left: 8px;
  flex: none;
}
.badge--muted { background: var(--text-dim); }

/* ---------- CHAT PANEL ---------- */
.chat {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--chat-bg);
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: background-color .25s ease, filter .25s ease;
}
.chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--chat-pattern) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
}

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  position: relative;
  flex: none;
}
.chat__back { display: none; }
.chat__title { flex: 1; min-width: 0; }
.chat__title--button {
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.chat__name { font-weight: 600; font-size: 16px; }
.chat__status { font-size: 13px; color: var(--text-dim); }
.chat__status.online { color: var(--accent); }
.chat__actions { display: flex; gap: 2px; }
.chat-menu {
  position: absolute;
  top: 54px;
  right: 12px;
  width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 12;
}
.chat-menu[hidden] { display: none; }
.chat-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.chat-menu__item:hover { background: var(--hover); }
.chat-menu__item[hidden] { display: none; }
.chat-menu__item--mobile-search { display: none; }
.chat-menu__item--danger { color: #e5484d; }
.chat-menu__item--danger svg { color: #e5484d; }
.chat-menu__item svg {
  width: 19px;
  height: 19px;
  color: var(--text-dim);
  flex: none;
}

/* ---------- MESSAGES ---------- */
.messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px clamp(16px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.day {
  align-self: center;
  background: rgba(0,0,0,.12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 14px;
  margin: 10px 0;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .day { background: rgba(0,0,0,.4); }

.msg {
  max-width: min(70%, 480px);
  padding: 7px 10px 8px 12px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.35;
  position: relative;
  box-shadow: var(--shadow);
  word-wrap: break-word;
  margin-top: 2px;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: manipulation;
}
.msg__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg.in {
  align-self: flex-start;
  background: var(--bubble-in);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.msg.out {
  align-self: flex-end;
  background: var(--bubble-out);
  color: var(--bubble-out-text);
  border-bottom-right-radius: 5px;
}

/* группировка: первый в серии получает «хвост» */
.msg.in + .msg.in,
.msg.out + .msg.out { margin-top: 2px; }

/* ---------- Множественный выбор сообщений ---------- */
.messages.selecting .msg {
  margin-left: 34px;
  cursor: pointer;
}
.messages.selecting .msg .reaction,
.messages.selecting .msg .voice-msg__play,
.messages.selecting .msg .round-video__el,
.messages.selecting .msg .msg__image-link,
.messages.selecting .msg .msg__file,
.messages.selecting .msg .voice-msg__wave {
  pointer-events: none;
}
.msg__select {
  display: none;
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  background: var(--bg);
  flex: none;
}
.messages.selecting .msg__select { display: block; }
.msg__select--checked {
  border-color: var(--accent);
  background: var(--accent);
}
.msg__select--checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Анимация появления нового сообщения ---------- */
.msg--enter {
  animation: msg-pop .32s cubic-bezier(.22, 1.4, .36, 1) both;
}
.msg.in.msg--enter {
  transform-origin: bottom left;
  animation-name: msg-pop-in;
}
.msg.out.msg--enter {
  transform-origin: bottom right;
  animation-name: msg-pop-out;
}

@keyframes msg-pop-in {
  0%   { opacity: 0; transform: translateY(14px) translateX(-8px) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes msg-pop-out {
  0%   { opacity: 0; transform: translateY(14px) translateX(8px) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msg--enter { animation: none; }
}

/* ---------- Метки: изменено / закреплено ---------- */
.msg__edited {
  font-style: italic;
  margin-right: 5px;
  opacity: .8;
}
.msg__pin {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--text-dim);
  opacity: .7;
}
.msg.out .msg__pin { color: var(--bubble-out-tick); }
.msg__pin svg { width: 13px; height: 13px; }
.msg.pinned { box-shadow: var(--shadow), inset 2px 0 0 var(--accent); }

/* Подсветка при переходе к закреплённому */
.msg--highlight { animation: msg-flash 1.6s ease; }
@keyframes msg-flash {
  0%, 40% { background: var(--accent-soft); }
  100% {}
}

/* ---------- Пересланное сообщение ---------- */
.msg__forward {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  margin-bottom: 2px;
}
.msg__forward-label {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-dim);
}
.msg__forward-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}
.msg.out .msg__forward-name { color: var(--bubble-out-tick); }

/* Выбор при пересылке */
.forward-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 12px 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hover);
  cursor: pointer;
  user-select: none;
}
.forward-option input {
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: none;
}
.forward-option__title { display: block; font-size: 14.5px; font-weight: 500; }
.forward-option__hint { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Реакции ---------- */
.msg__reactions {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 7px;
}
.msg.out .msg__reactions {
  justify-content: flex-start;
}
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 31px;
  min-height: 27px;
  max-width: 126px;
  box-sizing: border-box;
  border: 1px solid rgba(80,96,120,.14);
  background: rgba(255,255,255,.48);
  border-radius: 999px;
  padding: 3px 7px;
  font: inherit;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px) saturate(135%);
  backdrop-filter: blur(8px) saturate(135%);
  box-shadow: 0 1px 2px rgba(25,40,68,.08);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  animation: reaction-in .14s ease-out;
}
@keyframes reaction-in {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}
[data-theme="dark"] .reaction {
  background: rgba(15,23,35,.48);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.msg.out .reaction:not(.reaction--mine) {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.2);
  color: var(--bubble-out-text);
}
.reaction:active { transform: scale(.94); }
.reaction:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (hover: hover) {
  .reaction:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.72);
    border-color: rgba(80,96,120,.24);
    box-shadow: 0 3px 8px rgba(25,40,68,.13);
  }
  [data-theme="dark"] .reaction:hover { background: rgba(255,255,255,.13); }
}
.reaction--mine {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 2px 6px rgba(25,40,68,.1);
}
.msg.out .reaction--mine {
  background: rgba(255,255,255,.3);
  border-color: var(--bubble-out-tick);
  color: var(--bubble-out-text);
}
.reaction__emoji {
  flex: none;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-.5px);
}
.reaction__avatars {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.reaction__avatars:empty { display: none; }
.reaction__avatars > * + * { margin-left: -6px; }
.reaction__avatar {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex: none;
  overflow: hidden;
}
[data-theme="dark"] .reaction__avatar { border-color: #29374b; }
.msg.out .reaction__avatar { border-color: rgba(255,255,255,.82); }
.reaction__avatar--img { background: transparent; }
.reaction__avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reaction__count {
  min-width: 1ch;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: center;
}
.reaction--single .reaction__count { display: none; }
.reaction--mine .reaction__count { color: currentColor; }
.msg.out .reaction__count { color: currentColor; opacity: .78; }
.reaction--many .reaction__avatars { display: none; }

@media (max-width: 520px) {
  .msg__reactions { gap: 3px; margin-top: 6px; }
  .reaction {
    min-width: 36px;
    min-height: 28px;
    max-width: 96px;
    justify-content: center;
    padding: 4px 6px;
  }
  .reaction__avatars,
  .reaction--many .reaction__avatars { display: inline-flex; }
  .reaction--single .reaction__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reaction { animation: none; transition: none; }
}

/* ---------- Контекстное меню сообщения ---------- */
.msg-menu {
  position: fixed;
  z-index: 50;
  width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  padding: 6px;
  animation: msg-menu-in .13s ease;
}
.msg-menu[hidden] { display: none; }
@keyframes msg-menu-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
.msg-menu__reactions {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  padding: 4px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.msg-menu__react {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: none;
  background: none;
  font-size: clamp(17px, 4.8vw, 21px);
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .1s, background .1s, box-shadow .1s;
}
.msg-menu__react:active { transform: scale(.9); }
.msg-menu__react:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
@media (hover: hover) {
  .msg-menu__react:hover { transform: scale(1.2); background: var(--hover); }
}
.msg-menu__react--active {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.msg-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.msg-menu__item:hover { background: var(--hover); }
.msg-menu__item[hidden] { display: none; }
.msg-menu__item svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
.msg-menu__item--danger { color: #e5484d; }
.msg-menu__item--danger svg { color: #e5484d; }

/* ---------- Закреплённая панель ---------- */
/* ---------- Поиск по сообщениям ---------- */
.chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  flex: none;
}
.chat-search[hidden] { display: none; }
.chat-search__icon { color: var(--text-dim); flex: none; display: flex; }
.chat-search__icon svg { width: 18px; height: 18px; }
.chat-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.chat-search input::placeholder { color: var(--text-dim); }
.chat-search__count {
  flex: none;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 0 4px;
}
.chat-search__nav svg { width: 20px; height: 20px; }

.selection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  flex: none;
}
.selection-bar[hidden] { display: none; }
.selection-bar__count {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}
.selection-bar__actions { display: flex; gap: 2px; }
.selection-bar__danger { color: #e5484d; }
.selection-bar__danger svg { color: #e5484d; }

.search-hit {
  background: #ffe08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
[data-theme="dark"] .search-hit { background: #b78a2e; color: #fff; }
.msg--search-current { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
.msg--search-current .search-hit { background: var(--accent); color: #fff; }

.pinned-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 16px;
  background: var(--header-bg);
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  z-index: 2;
  flex: none;
}
.pinned-bar[hidden] { display: none; }
.pinned-bar:hover { background: var(--hover); }
.pinned-bar__icon { color: var(--accent); flex: none; display: flex; }
.pinned-bar__icon svg { width: 18px; height: 18px; }
.pinned-bar__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.pinned-bar__title { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.pinned-bar__text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned-bar__unpin {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--text-dim);
}
.pinned-bar__unpin:hover { background: var(--hover); color: var(--text); }
.pinned-bar__unpin svg { width: 17px; height: 17px; }

/* ---------- Баннер редактирования ---------- */
.edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.edit-banner[hidden] { display: none; }
.edit-banner__icon { color: var(--accent); flex: none; display: flex; }
.edit-banner__icon svg { width: 18px; height: 18px; }
.edit-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.edit-banner__title { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.edit-banner__text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-banner__cancel { flex: none; }

/* ---------- Диалог удаления ---------- */
.delete-dialog {
  position: relative;
  max-width: 320px;
  max-height: none;
  background: var(--bg);
  animation: delete-dialog-in .18s cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes delete-dialog-in {
  0%   { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: none; }
}
.delete-dialog__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.delete-dialog__body {
  padding: 28px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.delete-dialog__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(229,72,77,.12);
  color: #e5484d;
  display: grid;
  place-items: center;
}
.delete-dialog__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.delete-dialog__title { font-size: 16px; font-weight: 600; }
.delete-dialog__check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--hover);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.delete-dialog__check[hidden] { display: none; }
.delete-dialog__check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); cursor: pointer; }
.delete-dialog__actions { display: flex; gap: 8px; width: 100%; }
.delete-dialog__actions .ghost-btn,
.delete-dialog__actions .danger-btn { flex: 1 1 0; }
.ghost-btn, .danger-btn {
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ghost-btn { background: var(--hover); color: var(--text); }
.ghost-btn:hover { background: var(--border); }
.danger-btn { background: #e5484d; color: #fff; }
.danger-btn:hover { background: #d13b40; }

.msg__meta {
  float: right;
  margin: 6px 0 -2px 10px;
  font-size: 11px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}
.msg.out .msg__meta { color: var(--bubble-out-meta); }
.msg__tick { width: 15px; height: 15px; stroke-width: 2.4; }
.msg__tick.read { color: var(--accent); }
.msg__image-link {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
  cursor: pointer;
}
.msg__image {
  display: block;
  max-width: min(340px, 58vw);
  max-height: 360px;
  object-fit: cover;
}
.msg__image-link--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 150px;
  background: var(--hover);
}
.msg__image-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.msg__image-reveal svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msg__image-reveal:hover { color: var(--accent); }
.image-viewer-modal { background: rgba(0,0,0,.9); }
/* ---------- CALLS ---------- */
.call-start-btn { color: var(--accent); }
.call-start-btn[hidden] { display: none; }
.call-overlay {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; color: #fff;
  display: grid; place-items: center; background: #101820;
}
.call-overlay[hidden] { display: none; }
.call-overlay__remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.call-overlay__remote[hidden] { display: none; }
.call-overlay__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, color-mix(in srgb,var(--accent) 42%,#253346),#0b1118 72%); z-index: 0; }
.call-overlay__local { position: absolute; right: 20px; top: 20px; width: min(25vw,220px); aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; z-index: 3; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.call-overlay__local[hidden] { display: none; }
.call-overlay__local.camera-off { opacity: .18; }
.call-overlay__info { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.call-overlay__avatar { width: 112px; height: 112px; font-size: 36px; box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.call-overlay__info h2 { font-size: 25px; }
.call-overlay__info p { color: rgba(255,255,255,.75); }
.call-overlay__controls { position: absolute; z-index: 4; bottom: max(28px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 14px; padding: 10px; border-radius: 22px; background: rgba(12,18,24,.58); backdrop-filter: blur(18px); }
.call-control { width: 54px; height: 54px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.16); }
.call-control[hidden] { display: none; }
.call-control:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }
.call-control.off { background: #fff; color: #202b36; }
.call-control--accept { background: #31b968; animation: call-pulse 1.4s infinite; }
.call-control--end { background: #e5484d; }
.call-control svg { width: 23px; height: 23px; }
@keyframes call-pulse { 50% { box-shadow: 0 0 0 9px rgba(49,185,104,0); } 0% { box-shadow: 0 0 0 0 rgba(49,185,104,.4); } }
.call-overlay.has-video .call-overlay__info { align-self: start; margin-top: 22px; padding: 8px 14px; border-radius: 14px; background: rgba(8,13,18,.42); backdrop-filter: blur(12px); }
.call-overlay.has-video .call-overlay__avatar { display: none; }
.call-overlay.has-video .call-overlay__info h2 { font-size: 16px; }
.call-event {
  align-self: center; display: flex; align-items: center; gap: 10px;
  max-width: min(92%,360px); margin: 7px 0; padding: 9px 13px;
  border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--glass-border));
  border-radius: 15px; color: var(--text);
  background: color-mix(in srgb,var(--glass-bg-strong) 88%,var(--accent));
  box-shadow: 0 5px 18px rgba(30,45,65,.1); backdrop-filter: blur(14px);
}
.call-event__icon {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent); background: var(--accent-soft);
}
.call-event__icon svg { width: 18px; height: 18px; }
.call-event__body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.call-event__body b { font-size: 13px; font-weight: 600; }
.call-event__body small { color: var(--text-dim); font-size: 11px; }
.call-event--success {
  border-color: rgba(34, 167, 93, .34);
  background: rgba(34, 167, 93, .13);
}
.call-event--success .call-event__icon {
  color: #fff;
  background: #22a75d;
}
.call-event--success .call-event__body b { color: #16824a; }
[data-theme="dark"] .call-event--success .call-event__body b { color: #55d58c; }
.call-event--failed .call-event__icon { color: #e5484d; background: rgba(229,72,77,.12); }
@media(max-width:520px){.call-overlay__local{width:110px;right:12px;top:12px}.call-overlay__avatar{width:92px;height:92px}.call-control{width:50px;height:50px}}
.image-viewer__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
}
.image-viewer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #fff;
  background: rgba(255,255,255,.12);
}
.image-viewer__close:hover { background: rgba(255,255,255,.22); color: #fff; }
.image-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(255,255,255,.12);
}
.image-viewer__nav:hover { background: rgba(255,255,255,.22); color: #fff; }
.image-viewer__nav--prev { left: 16px; }
.image-viewer__nav--next { right: 16px; }
.image-viewer__nav[hidden] { display: none; }
.image-viewer__meta {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  color: rgba(255,255,255,.82); background: rgba(20,20,24,.68); padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: 12px;
  white-space: nowrap; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.image-viewer__actions {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(20,20,24,.72); box-shadow: 0 10px 32px rgba(0,0,0,.32);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.image-viewer__actions[hidden] { display: none; }
.image-viewer__action {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.image-viewer__action:hover { transform: translateY(-1px); }
.image-viewer__action:active { transform: translateY(0); }
.image-viewer__action svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.image-viewer__action--primary { background: var(--accent); box-shadow: 0 4px 14px rgba(51,144,236,.3); }
.image-viewer__action--primary:hover { filter: brightness(1.08); }
.image-viewer__action--danger { background: rgba(232,72,72,.14); color: #ff8585; }
.image-viewer__action--danger:hover { background: rgba(232,72,72,.24); }
.image-viewer__meta[hidden], .image-viewer__delete[hidden], .image-viewer__activate[hidden] { display: none; }
@media (max-width: 520px) {
  .image-viewer__actions { bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 28px); }
  .image-viewer__action { flex: 1; padding: 0 10px; }
  .image-viewer__meta { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
}
.msg__file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(280px, 58vw);
  color: inherit;
  text-decoration: none;
}
.msg__file-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.msg__file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.msg__file-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg__file-size {
  color: var(--text-dim);
  font-size: 12px;
}

/* ---------- COMPOSER ---------- */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px clamp(12px, 6vw, 100px);
  background: var(--header-bg);
  border-top: 1px solid var(--border);
  z-index: 2;
  position: relative;
  flex: none;
}
.composer[hidden] { display: none; }
.composer__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer textarea {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: var(--panel-bg);
  border-radius: 18px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  max-height: 140px;
  line-height: 1.35;
  overflow-y: hidden;
}
.composer textarea::placeholder { color: var(--text-dim); }
.attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 8px;
}
.attachment-preview[hidden] { display: none; }
.attachment-preview img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.attachment-preview__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.attachment-preview__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.attachment-preview__meta b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.attachment-preview__meta span {
  color: var(--text-dim);
  font-size: 12px;
}
.attachment-preview__remove {
  width: 32px;
  height: 32px;
}
.emoji-panel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  width: min(300px, calc(100% - 16px));
  max-height: min(240px, 50vh);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.emoji-panel[hidden] { display: none; }
.emoji-btn {
  border: none;
  background: none;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 1;
  cursor: pointer;
  font-size: 19px;
}
.emoji-btn:hover { background: var(--hover); }

.send-btn {
  width: 48px; height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .1s, background .15s;
}
.send-btn:hover { filter: brightness(.9); }
.send-btn:active { transform: scale(.92); }
.send-btn svg { stroke: #fff; }

#voiceBtn[hidden], #circleBtn[hidden], .send-btn[hidden] { display: none; }

/* ---------- RECORD BAR (voice / round-video) ---------- */
.record-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(12px, 6vw, 100px);
  background: var(--header-bg);
  border-top: 1px solid var(--border);
  flex: none;
}
.record-bar[hidden] { display: none; }
.record-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  flex: none;
  animation: record-pulse 1.2s ease-in-out infinite;
}
@keyframes record-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.record-bar__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  flex: none;
}
.record-bar__preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #000;
  transform: scaleX(-1);
}
.record-bar__preview[hidden] { display: none; }
.record-bar__hint {
  flex: 1;
  color: var(--text-dim);
  font-size: 14px;
}
.record-bar__cancel { color: #e5484d; }
.record-bar__send { width: 40px; height: 40px; }

/* ---------- VOICE MESSAGE PLAYER ---------- */
.voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(190px, 42vw);
  max-width: 100%;
  padding: 3px 4px 3px 0;
}
.voice-msg__play {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.msg.out .voice-msg__play { background: var(--bubble-out-tick); }
.voice-msg__play svg { width: 16px; height: 16px; fill: #fff; }
.voice-msg__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.voice-msg__wave {
  position: relative;
  height: 24px;
  cursor: pointer;
}
.voice-msg__wave-bg,
.voice-msg__wave-fg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.voice-msg__wave-bg span,
.voice-msg__wave-fg span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: currentColor;
}
.voice-msg__wave-bg { color: rgba(0,0,0,.18); }
[data-theme="dark"] .voice-msg__wave-bg { color: rgba(255,255,255,.25); }
.voice-msg__wave-fg {
  color: var(--accent);
  clip-path: inset(0 100% 0 0);
}
.msg.out .voice-msg__wave-fg { color: var(--bubble-out-tick); }
.voice-msg__time {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.msg.out .voice-msg__time { color: var(--bubble-out-meta); }

/* ---------- ROUND VIDEO MESSAGE ---------- */
.msg--round {
  width: min(180px, 52vw);
  max-width: min(180px, 52vw);
  padding: 0;
  margin-bottom: 10px;
}
.msg.in.msg--round,
.msg.out.msg--round {
  background: transparent;
  box-shadow: none;
}
.msg--round .msg__meta {
  float: none;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 4px 0 0;
  padding-right: 4px;
  box-sizing: border-box;
}
.msg--round .msg__reactions {
  margin-top: 5px;
  padding: 0 4px;
  box-sizing: border-box;
}
.msg--round.in .msg__reactions { justify-content: flex-start; }
.msg--round.out .msg__reactions { justify-content: flex-start; }
.msg--round .reaction {
  background: var(--glass-bg-strong, rgba(255,255,255,.72));
  border-color: var(--glass-border, rgba(255,255,255,.6));
  box-shadow: var(--shadow);
}
.msg--round .msg__pin {
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  padding: 4px;
  top: 8px;
  right: 8px;
}
.round-video {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.3);
}
.round-video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.round-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.round-video__play svg { width: 22px; height: 22px; fill: #fff; }
.round-video__play[hidden] { display: none; }
.round-video__duration {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

/* ---------- EMPTY STATE ---------- */
.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  background: var(--chat-bg);
}
.empty__bubble {
  background: rgba(0,0,0,.12);
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .empty__bubble { background: rgba(0,0,0,.4); }
.chat.has-active .empty { display: none; }

.chat:not(.has-active) .chat__top,
.chat:not(.has-active) .messages,
.chat:not(.has-active) .chat__bottom { visibility: hidden; }

/* ---------- AUTH ---------- */
.auth {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--panel-bg);
  z-index: 50;
  padding: 20px;
}
.auth[hidden] { display: none; }
.auth__card {
  width: 100%;
  max-width: 360px;
  background: var(--bg);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth__logo {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}
.auth__tabs {
  display: flex;
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.auth__tab {
  flex: 1;
  border: none;
  background: none;
  padding: 9px;
  border-radius: 9px;
  font: inherit;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.auth__tab.active { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.auth__input {
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
.auth__input:focus { border-color: var(--accent); }
.auth.mode-login .auth__reg { display: none; }
.auth__error {
  color: #e0443e;
  font-size: 13.5px;
  min-height: 18px;
  text-align: center;
}
.auth__submit {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 13px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.auth__submit:hover { filter: brightness(.9); }
.auth__submit:disabled { opacity: .6; cursor: default; }
.auth__card[hidden], .auth__verify[hidden] { display: none; }
.auth__forgot {
  align-self: center;
  font-size: 13.5px;
  margin: -6px 0 0;
}
.auth:not(.mode-login) .auth__forgot { display: none; }

.auth__verify {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.auth__verify-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth__verify-icon svg { width: 28px; height: 28px; }
.auth__verify-title { font-size: 24px; font-weight: 700; margin: 0; }
.auth__verify-hint { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.auth__verify-code {
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  padding: 16px;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.auth__verify-code:focus { border-color: var(--accent); }
.auth__verify .auth__submit { width: 100%; }
.auth__verify-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.forgot-step { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.forgot-hint { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.auth__card .forgot-hint { text-align: center; }
.auth__card .forgot-step { padding: 0; }

/* ---------- POLISHED AUTH ---------- */
.auth {
  isolation: isolate;
  overflow: auto;
  background:
    radial-gradient(70% 65% at 12% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(60% 60% at 92% 94%, color-mix(in srgb, #8e85ee 18%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 94%, var(--accent)), var(--panel-bg));
}
.auth::before, .auth::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--bg) 16%, transparent);
  backdrop-filter: blur(3px); transform: rotate(18deg);
}
.auth::before { width: 220px; height: 220px; left: -85px; top: 12%; border-radius: 58px; }
.auth::after { width: 170px; height: 170px; right: -55px; bottom: 8%; border-radius: 50%; }
.auth__card, .auth__verify {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 68%, var(--accent));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 28px 80px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.2);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  animation: auth-card-in .42s cubic-bezier(.2,.8,.2,1) both;
}
.auth__card { max-width: 390px; padding: 30px; border-radius: 24px; gap: 13px; }
.auth__verify { max-width: 410px; padding: 34px 30px; border-radius: 24px; }
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.auth__brand { display: grid; justify-items: center; gap: 5px; margin-bottom: 8px; }
.auth__brand-mark {
  width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 5px;
  border-radius: 20px; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 78%, white), var(--accent));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 32%, transparent);
  transform: rotate(-3deg);
}
.auth__brand-mark svg { width: 31px; height: 31px; stroke-width: 1.8; transform: rotate(3deg); }
.auth__logo { margin: 0; font-size: 27px; letter-spacing: -.035em; color: var(--text); }
.auth__subtitle { color: var(--text-dim); font-size: 12.5px; }
.auth__tabs {
  padding: 4px; margin: 3px 0 4px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 13px; background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
}
.auth__tab { min-height: 39px; border-radius: 10px; font-size: 13.5px; }
.auth__tab.active {
  color: var(--accent); background: var(--bg);
  box-shadow: 0 3px 10px rgba(0,0,0,.08), inset 0 -2px var(--accent);
}
.auth__input, .auth__verify-code, .auth__card .field input {
  min-height: 48px; border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text-dim));
  border-radius: 13px; background: color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
}
.auth__input:hover, .auth__verify-code:hover, .auth__card .field input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.auth__input:focus, .auth__verify-code:focus, .auth__card .field input:focus {
  border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.auth__submit, .auth__card .primary-btn {
  min-height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 84%, white), var(--accent));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform .14s, filter .15s, box-shadow .15s;
}
.auth__submit:hover, .auth__card .primary-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.auth__submit:active, .auth__card .primary-btn:active { transform: translateY(0); }
.auth__forgot { margin-top: -3px; }
.auth__error:not(:empty), .auth__card .form-error:not(:empty) {
  min-height: auto; padding: 8px 10px; border-radius: 9px;
  background: rgba(224,68,62,.1); border: 1px solid rgba(224,68,62,.18);
}
.auth__verify-icon {
  width: 68px; height: 68px; border-radius: 22px;
  background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, var(--bg)));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.auth__verify-title { font-size: 23px; letter-spacing: -.025em; text-align: center; }
.auth__verify-code { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.forgot-step { width: 100%; }
html[data-theme="dark"] .auth {
  background:
    radial-gradient(70% 65% at 12% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(60% 60% at 92% 94%, rgba(103,76,190,.22), transparent 72%),
    linear-gradient(145deg, #111d29, #09111a);
}
@media (max-width: 520px) {
  .auth { padding: 14px; align-items: center; }
  .auth__card, .auth__verify { padding: 25px 20px; border-radius: 21px; }
  .auth__brand-mark { width: 56px; height: 56px; border-radius: 18px; }
  .auth__logo { font-size: 25px; }
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  place-items: center;
  z-index: 40;
  padding: 20px;
}
.modal.open { display: grid; }
#addMembersModal { z-index: 41; }
.modal__card {
  width: 100%;
  max-width: 380px;
  max-height: 70vh;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 14px 18px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
}
.modal__list { overflow-y: auto; padding: 6px; }
.modal__list .empty-hint { padding: 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
.modal__body {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.modal-search {
  margin: 12px 12px 4px;
  flex: none;
}

/* ---------- POLISHED DIALOGS ---------- */
.modal:not(.image-viewer-modal) {
  background: rgba(5, 10, 16, .52);
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
}
.modal:not(.image-viewer-modal).open { animation: modal-backdrop-in .18s ease-out both; }
.modal:not(.image-viewer-modal).open > .modal__card {
  animation: modal-card-in .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__card {
  max-width: 400px;
  max-height: min(76vh, 720px);
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--accent));
  border-radius: 20px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg) 97%, var(--accent)) 0%, var(--bg) 42%);
  box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.12);
}
.modal__head {
  min-height: 58px;
  padding: 10px 10px 10px 18px;
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--accent));
  font-size: 16px;
  letter-spacing: -.01em;
}
.modal__head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.modal__head > span:first-child::before {
  content: ""; width: 4px; height: 18px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}
.modal__head .icon-btn, .delete-dialog__close {
  width: 36px; height: 36px; background: color-mix(in srgb, var(--hover) 72%, transparent);
}
.modal__head .icon-btn:hover, .delete-dialog__close:hover {
  background: var(--accent-soft); color: var(--accent); transform: rotate(4deg);
}
.modal__body { min-height: 220px; }
.modal-search {
  min-height: 42px; margin: 12px 12px 6px;
  border: 1px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 82%, transparent);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.modal-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  background: var(--bg);
}
.modal__list { padding: 7px 8px 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.modal__list > button, .modal__list > .user-item, .modal__list > .member-option {
  border-radius: 12px; transition: background .14s, transform .14s;
}
.modal__list > button:hover, .modal__list > .user-item:hover, .modal__list > .member-option:hover {
  transform: translateX(2px);
}
.create-group__foot {
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--bg) 95%, var(--accent));
}
.modal .primary-btn, .modal .ghost-btn, .modal .danger-btn {
  min-height: 42px; border-radius: 11px; transition: transform .12s, filter .15s, background .15s, box-shadow .15s;
}
.modal .primary-btn { box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.modal .primary-btn:hover, .modal .ghost-btn:hover, .modal .danger-btn:hover { transform: translateY(-1px); }
.modal .primary-btn:active, .modal .ghost-btn:active, .modal .danger-btn:active { transform: translateY(0); }
.delete-dialog {
  max-width: 340px; border-color: color-mix(in srgb, #e5484d 22%, var(--border));
}
.delete-dialog__body { padding: 30px 24px 22px; gap: 17px; }
.delete-dialog__icon {
  width: 58px; height: 58px;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.2), transparent 42%), rgba(229,72,77,.14);
  box-shadow: 0 8px 24px rgba(229,72,77,.14);
}
.delete-dialog__title { font-size: 17px; letter-spacing: -.01em; }
.delete-dialog__check { border: 1px solid var(--border); }
html[data-theme="dark"][data-wallpaper] .modal__card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--sidebar-tint, var(--bg)) 88%, var(--sidebar-accent, var(--accent))) 0%,
    color-mix(in srgb, var(--bg) 94%, var(--sidebar-tint, var(--bg))) 34%);
  border-color: color-mix(in srgb, var(--sidebar-accent, var(--accent)) 28%, var(--border));
}
html[data-theme="dark"][data-wallpaper] .modal__head,
html[data-theme="dark"][data-wallpaper] .create-group__foot {
  background: color-mix(in srgb, var(--sidebar-tint, var(--bg)) 82%, var(--bg));
}
@media (max-width: 520px) {
  .modal:not(.image-viewer-modal) { padding: 10px; align-items: end; }
  .modal:not(.image-viewer-modal) > .modal__card {
    max-width: none; max-height: min(88dvh, 760px); border-radius: 22px 22px 14px 14px;
  }
  .modal:not(.image-viewer-modal).open > .modal__card { animation-name: modal-sheet-in; }
  @keyframes modal-sheet-in { from { opacity: .5; transform: translateY(45px); } to { opacity: 1; transform: none; } }
  .profile-card { max-height: 92dvh !important; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.open, .modal.open > .modal__card { animation-duration: .01ms !important; }
}

/* ---------- FAB ---------- */
.fab {
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 54px; height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(51,144,236,.5);
  transition: transform .12s, background .15s;
  z-index: 5;
}
.fab:hover { filter: brightness(.9); }
.fab:active { transform: scale(.92); }
.fab svg { stroke: #fff; width: 26px; height: 26px; }

.typing { color: var(--accent) !important; }

/* ---------- PROFILE MENU ---------- */
.profile-menu {
  position: absolute;
  top: 52px;
  left: 12px;
  width: 260px;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  border: 1px solid var(--border);
  padding: 8px;
  z-index: 20;
}
.profile-menu[hidden] { display: none; }
.profile-menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.profile-menu__head--button {
  width: 100%;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.profile-menu__head--button:hover { background: var(--hover); }
.profile-menu__info { min-width: 0; }
.profile-menu__name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu__sub { font-size: 13px; color: var(--text-dim); }
.profile-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.profile-menu__item:hover { background: var(--hover); color: #e0443e; }
.profile-menu__item svg { width: 20px; height: 20px; color: var(--text-dim); }
.profile-menu__item:hover svg { color: #e0443e; }

/* ---------- AUTHOR NAME IN GROUP ---------- */
.msg__author {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent);
  margin-bottom: 2px;
}

/* ---------- PENDING (отправляется) ---------- */
.msg.pending { opacity: .55; }

/* ---------- EMPTY CHAT-LIST HINT ---------- */
.chat-list__empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.chat-list__section-title {
  padding: 14px 14px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---------- EMPTY SIDEBAR SETTINGS ---------- */
.sidebar-settings {
  padding: 18px 12px 84px;
}
.sidebar-settings__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px 18px;
}
.sidebar-settings__name {
  font-size: 18px;
  font-weight: 700;
}
.sidebar-settings__user {
  color: var(--text-dim);
  font-size: 14px;
}
.sidebar-settings__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.settings-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  min-height: 88px;
}
.settings-tile:hover { background: var(--hover); }
.settings-tile svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.privacy-summary {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.privacy-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.privacy-summary div:last-child { border-bottom: none; }
.privacy-summary span { color: var(--text-dim); }
.privacy-summary b { font-weight: 600; }

/* ---------- PROFILE / SETTINGS ---------- */
.profile-card { max-width: 420px; }
.profile-content {
  overflow-y: auto;
  padding: 18px;
}
.profile-hero-panel {
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  margin: -18px -18px 0;
  padding: 22px 18px 18px;
  border-radius: 16px 16px 0 0;
}
.profile-hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 0 20px;
}
.profile-hero__avatar {
  width: 82px;
  height: 82px;
  font-size: 30px;
}
.profile-hero__name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
}
.profile-hero__user {
  color: var(--text-dim);
  font-size: 14px;
}
.profile-hero__avatar-btn {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}
.avatar-edit-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.avatar-hint { margin-top: 2px; }
.avatar-history { margin: 14px 0 18px; }
.avatar-history:empty { display: none; }
.avatar-history__title {
  display: flex; gap: 6px; align-items: baseline; margin: 0 2px 9px;
  font-size: 15px; font-weight: 600;
}
.avatar-history__title span { color: var(--text-dim); font-size: 13px; font-weight: 400; }
.avatar-history__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.avatar-history__item {
  position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 12px; background: var(--hover);
}
.avatar-history__item.current { border-color: var(--accent); }
.avatar-history__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-history__item span {
  position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px;
  border-radius: 6px; color: #fff; background: rgba(0,0,0,.55); font-size: 10px;
}
.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}
.link-btn:hover { text-decoration: underline; }

/* ---------- Кроппер аватара ---------- */
.avatar-crop-card { max-width: 360px; }
.avatar-crop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px;
}
.avatar-crop__stage {
  position: relative;
  width: 280px;
  height: 280px;
  max-width: 72vw;
  max-height: 72vw;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.avatar-crop__stage.dragging { cursor: grabbing; }
.avatar-crop__stage img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}
.avatar-crop__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, .45);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
}
.avatar-crop__zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.avatar-crop__zoom input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}
.zoom-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--hover);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.zoom-btn:hover { background: var(--border); }
.avatar-crop__actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.avatar-crop__actions .ghost-btn,
.avatar-crop__actions .primary-btn {
  flex: 1;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--panel-bg);
  color: var(--text-dim);
  font-size: 13px;
}
.status-pill.online {
  background: var(--accent-soft);
  color: var(--accent);
}
.email-section { display: flex; flex-direction: column; gap: 10px; }
.sessions-list { display: flex; flex-direction: column; gap: 8px; }
.session-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-bottom: 1px solid var(--border); }
.session-row:last-child { border-bottom: 0; }
.session-row.current { background: color-mix(in srgb,var(--accent) 6%,transparent); }
.session-row__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.session-row__icon svg { width: 18px; height: 18px; }
.session-row__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.session-row__body b { font-size: 13px; }
.session-row__body small { overflow: hidden; color: var(--text-dim); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.session-row__body em { align-self: flex-start; margin-top: 2px; padding: 2px 6px; border-radius: 999px; color: #c47b18; background: rgba(224,145,38,.12); font-size: 9px; font-style: normal; }
.session-row__end { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; color: #e5484d; background: rgba(229,72,77,.1); font-size: 20px; cursor: pointer; }
.session-row__end:hover { background: rgba(229,72,77,.18); }
.session-security-hint { padding: 0 3px; color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.email-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-card__row--wrap { flex-wrap: wrap; }
.email-verify-trail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-basis: 100%;
}
.email-actions { display: flex; gap: 8px; }
.email-actions .ghost-btn,
.email-actions .primary-btn { flex: 1; }
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.field input,
.field textarea {
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  outline: none;
}
.field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.field input:focus,
.field textarea:focus { border-color: var(--accent); }

/* ---------- Карточки настроек (сгруппированные строки с иконками) ---------- */
.settings-card {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.settings-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.settings-card .settings-card__row:last-child { border-bottom: none; }
.settings-card__swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  border-bottom: 1px solid var(--border);
}
.settings-section-title--split { display: flex; align-items: center; justify-content: space-between; }
.settings-section-title--split small { color: var(--text-dim); font-size: 11px; font-weight: 400; }
.appearance-preview {
  overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel-bg); box-shadow: 0 8px 24px rgba(20,35,55,.07);
}
.appearance-preview__top {
  height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 13px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--accent)); border-bottom: 1px solid var(--border);
}
.appearance-preview__top > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.appearance-preview__top b { font-size: 13px; }
.appearance-preview__top small { color: var(--text-dim); font-size: 10px; }
.appearance-preview__avatar {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--accent); font-size: 13px; font-weight: 700;
}
.appearance-preview__chat {
  min-height: 142px; padding: 18px 14px; display: flex; flex-direction: column; gap: 9px;
  background: var(--preview-wallpaper); background-size: cover;
}
.appearance-preview__bubble {
  max-width: 78%; padding: 8px 11px; font-size: 12px; line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.appearance-preview__bubble--in { align-self: flex-start; background: #fff; border-radius: 13px 13px 13px 4px; color: #17212b; }
.appearance-preview__bubble--out { align-self: flex-end; background: var(--preview-bubble); border-radius: 13px 13px 4px 13px; color: #17212b; }
.appearance-preview__bubble--out span { margin-left: 5px; color: var(--accent); font-size: 10px; }
html[data-bubble="sharp"] .appearance-preview__bubble { border-radius: 7px; }
.appearance-card { background: color-mix(in srgb, var(--hover) 72%, var(--panel-bg)); }
.appearance-card .settings-card__row { padding-bottom: 8px; border-bottom: 0; }
.appearance-card .settings-card__swatches { padding-top: 2px; gap: 9px; }
.settings-card > .settings-card__swatches:last-child { border-bottom: none; }
.settings-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  padding: 0;
}
.settings-swatch:hover { transform: translateY(-1px); }
.settings-swatch.active { border-color: var(--panel-bg); box-shadow: 0 0 0 2px var(--accent); }
.settings-swatch-custom {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.settings-wallpaper-swatch {
  position: relative; width: calc(25% - 7px); height: 58px;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  padding: 0;
}
.settings-wallpaper-swatch span {
  position: absolute; inset: auto 4px 4px; padding: 2px 3px; overflow: hidden;
  border-radius: 5px; background: rgba(255,255,255,.78); color: #25313d;
  font-size: 9px; white-space: nowrap; text-overflow: ellipsis; backdrop-filter: blur(4px);
}
.settings-wallpaper-swatch:hover { transform: translateY(-1px); }
.settings-wallpaper-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.settings-bubble-option {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  cursor: pointer;
  color: var(--text);
  font-size: 13px; display: inline-flex; align-items: center; gap: 8px;
}
.settings-bubble-option.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.settings-bubble-option__sample { width: 25px; height: 16px; background: var(--accent); border-radius: 8px 8px 3px 8px; opacity: .8; }
.settings-bubble-option__sample--sharp { border-radius: 4px 4px 1px 4px; }
.settings-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.settings-card__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-card__label {
  font-size: 11px;
  color: var(--text-dim);
}
.settings-card__row--switch .settings-card__body { gap: 3px; }
.settings-card__row--switch .settings-card__label { font-size: 14.5px; font-weight: 500; color: var(--text); }
.settings-card__row--switch small { color: var(--text-dim); font-size: 12px; line-height: 1.35; }
.settings-card__row input,
.settings-card__row textarea {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
  width: 100%;
}
.settings-card__row textarea { resize: vertical; min-height: 40px; font-family: inherit; }
.settings-card__text { font-size: 14.5px; color: var(--text); word-break: break-word; }
.settings-card__action {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.settings-card__action:hover { background: var(--bg); color: var(--accent); }
.settings-card__action svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Профиль собеседника: статус в сети ---------- */
.profile-hero__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 2px;
}
.profile-hero__status.online { color: var(--accent); }
.profile-hero__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Кастомный переключатель */
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 40px;
  height: 24px;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch__track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background .15s;
}
.switch__track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.switch input:checked ~ .switch__track { background: var(--accent); }
.switch input:checked ~ .switch__track::before { transform: translateX(16px); }
.switch input:focus-visible ~ .switch__track { box-shadow: 0 0 0 3px var(--accent-soft); }

.chat-description {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 12px 0 4px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s, background .15s;
}
.chat-description:hover { border-color: var(--accent-soft); }
.chat-description--empty {
  background: transparent;
  border: 1.5px dashed var(--border);
  padding: 0;
}
.chat-description--empty:hover { border-color: var(--accent); background: var(--accent-soft); }
.chat-description--editing {
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  border-color: transparent;
  padding: 0;
}
.chat-description--editing:hover { border-color: transparent; }

.chat-description__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.chat-description__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chat-description__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-description__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.chat-description__text {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-description__edit {
  flex: none;
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.chat-description__edit:hover { background: var(--bg); color: var(--accent); }
.chat-description__edit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chat-description__add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
}
.chat-description__add-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.chat-description__add-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chat-description__input {
  width: 100%;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  outline: none;
  resize: vertical;
  min-height: 80px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-description__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  width: 100%;
}
.settings-section-title {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin: 18px 2px 8px;
}
.settings-section-title--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.switch-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.switch-row b {
  font-size: 14px;
}
.switch-row small {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.35;
}
.switch-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex: none;
}
.form-error {
  min-height: 18px;
  color: #e0443e;
  font-size: 13px;
}
.primary-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { filter: brightness(.9); }
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.profile-actions .primary-btn,
.profile-actions .danger-btn,
.profile-actions .ghost-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.profile-actions .primary-btn svg,
.profile-actions .danger-btn svg,
.profile-actions .ghost-btn svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Создание группы / канала ---------- */
.new-chat-actions {
  display: flex;
  gap: 10px;
  padding: 12px 12px 4px;
}
.new-chat-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.new-chat-action:hover { background: var(--border); }
.new-chat-action__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}
.new-chat-action__icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.new-chat-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 2px;
  color: var(--text-dim);
  font-size: 12px;
}
.new-chat-divider::before,
.new-chat-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.create-group__name {
  padding: 14px 12px 6px;
}
.create-group__name input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hover);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.create-group__name input:focus {
  outline: none;
  border-color: var(--accent);
}
.create-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 8px;
}
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
}
.member-chip__x {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.member-option { position: relative; cursor: pointer; }
.member-check {
  margin-left: auto;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  color: transparent;
}
.member-check svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.member-option.selected .member-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.member-option.selected { background: var(--hover); }
.create-group__foot {
  margin-top: auto;
  padding: 10px 12px 4px;
}
.create-group__foot .primary-btn { width: 100%; }

/* Список участников в информации о чате */
.member-list { display: flex; flex-direction: column; gap: 2px; }
.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background .12s;
}
.member-row--clickable { cursor: pointer; }
.member-row--clickable:hover { background: var(--hover); }
.role-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Member action menu */
.member-menu {
  position: fixed;
  z-index: 50;
  width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  animation: msg-menu-in .13s ease;
}
.member-menu[hidden] { display: none; }
.member-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}
.member-menu__item:hover { background: var(--hover); }
.member-menu__item svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
.member-menu__item--danger { color: #e5484d; }
.member-menu__item--danger svg { color: #e5484d; }

/* Editable group name */
.profile-hero__name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.profile-hero__edit-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.profile-hero__edit-btn:hover { color: var(--accent); }
.profile-hero__edit-btn svg { width: 16px; height: 16px; }
.profile-hero__name-input {
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 4px 10px;
  outline: none;
  width: 100%;
  max-width: 260px;
}

/* Заблокированный композер (канал только для чтения) */
.composer-locked {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-dim);
  font-size: 14px;
  border-top: 1px solid var(--border);
}
.composer-locked svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.55); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .chat {
    position: fixed;
    inset: 0;
    height: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .app.show-chat .chat { transform: translateX(0); }
  .app.show-chat .fab { display: none; }
  .chat__back { display: grid; }
}

/* =====================================================================
   LIQUID GLASS — chat view. Frosted, translucent, floating forms over a
   soft aurora gradient. Applied to the conversation panel (.chat).
   ===================================================================== */
:root {
  --glass-bg: rgba(255,255,255,.5);
  --glass-bg-strong: rgba(255,255,255,.68);
  --glass-border: rgba(255,255,255,.65);
  --glass-hi: rgba(255,255,255,.9);       /* top specular edge */
  --glass-shadow: 0 10px 34px rgba(40,54,110,.16);
  --glass-blur: saturate(180%) blur(22px);
  --bubble-in-glass: rgba(255,255,255,.7);
  --bubble-out-glass: rgba(158,176,255,.5);
  --glass-hover: rgba(255,255,255,.55);
}
[data-theme="dark"] {
  --glass-bg: rgba(30,40,60,.46);
  --glass-bg-strong: rgba(30,40,60,.66);
  --glass-border: rgba(255,255,255,.14);
  --glass-hi: rgba(255,255,255,.22);
  --glass-shadow: 0 10px 34px rgba(0,0,0,.42);
  --glass-blur: saturate(180%) blur(22px);
  --bubble-in-glass: rgba(44,58,84,.55);
  --bubble-out-glass: rgba(78,130,224,.44);
  --glass-hover: rgba(255,255,255,.12);
}

/* ---- Aurora background behind the glass ---- */
.chat {
  background:
    radial-gradient(115% 80% at 0% 0%, #c8dbff 0%, rgba(200,219,255,0) 55%),
    radial-gradient(120% 90% at 100% 0%, #ecccff 0%, rgba(236,204,255,0) 52%),
    radial-gradient(130% 100% at 50% 108%, #ffd6ea 0%, rgba(255,214,234,0) 58%),
    linear-gradient(155deg, #e9f0ff 0%, #f2ecff 48%, #ffeef7 100%);
}
[data-theme="dark"] .chat {
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(94,165,232,.16) 0%, rgba(94,165,232,0) 55%),
    radial-gradient(130% 100% at 100% 100%, rgba(120,150,190,.10) 0%, rgba(120,150,190,0) 60%),
    linear-gradient(165deg, #141c27 0%, #121822 50%, #0d1319 100%);
}
.chat::before { display: none; }   /* drop the dotted pattern */

/* ---- Floating overlay layout: messages fill the whole panel, the top and
   bottom bar-stacks float ABOVE them as translucent glass, so scrolling
   messages slide visibly underneath. ---- */
.chat__top,
.chat__bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;   /* let clicks fall through the gaps to messages */
}
.chat__top { top: 0; }
.chat__bottom { bottom: 0; }
/* real bars re-enable interaction */
.chat__top > *,
.chat__bottom > * { pointer-events: auto; }

/* Messages become the full-height scroll surface behind the bars. The top and
   bottom padding is driven by the live measured bar heights (set from JS) so
   the first and last messages always clear the glass. */
.messages {
  position: absolute;
  inset: 0;
  padding-top: calc(var(--chat-top-h, 84px) + 6px);
  padding-bottom: calc(var(--chat-bottom-h, 84px) + 6px);
  padding-left: clamp(16px, 8vw, 120px);
  padding-right: clamp(16px, 8vw, 120px);
  scroll-padding-top: calc(var(--chat-top-h, 84px) + 6px);
}

/* Shared frosted-panel look for the floating bars */
.chat__header,
.chat-search,
.selection-bar,
.pinned-bar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

.chat__header {
  margin: 12px 12px 0;
  padding: 8px 12px;
}
.chat-search,
.selection-bar,
.pinned-bar {
  margin: 8px 12px 0;
  border-radius: 16px;
  width: auto;
}

/* ---- Glass message bubbles ---- */
/* No per-bubble backdrop-filter: a long chat would stack hundreds of blur
   layers and jank scrolling. Translucent tint + hairline + shadow already
   read as glass over the aurora. */
.msg {
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgba(40,54,110,.12), inset 0 1px 0 var(--glass-hi);
}
.msg.in { background: var(--bubble-in-glass); }
.msg.out { background: var(--bubble-out-glass); }
[data-theme="dark"] .msg { border-color: var(--glass-border); }
/* round video floats bare — no glass chrome */
.msg.in.msg--round,
.msg.out.msg--round {
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.day {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(40,54,110,.12);
}
[data-theme="dark"] .day { background: var(--glass-bg-strong); color: #fff; }

/* ---- Glass composer: one unified floating pill ---- */
.composer {
  margin: 4px 12px 12px;
  padding: 7px 8px;
  gap: 4px;
  align-items: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.composer textarea {
  background: transparent;
  border-radius: 18px;
  padding: 10px 8px;
}
.composer .attachment-preview,
.composer .edit-banner {
  background: transparent;
}
.record-bar,
.composer-locked {
  margin: 4px 12px 12px;
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* Icon buttons on glass: translucent hover, no muddy grey */
.chat .icon-btn:hover,
.composer .icon-btn:hover { background: var(--glass-hover); color: var(--text); }

/* Send button keeps a solid accent pop against the frosted pill */
.send-btn {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Dropdown menu → frosted too */
.chat-menu {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.chat-menu__item:hover { background: var(--glass-hover); }

.member-menu {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.member-menu__item:hover { background: var(--glass-hover); }

/* Empty state over the aurora */
.empty { background: transparent; }
.empty__bubble {
  background: var(--glass-bg-strong);
  color: var(--text);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
[data-theme="dark"] .empty__bubble { color: #fff; }

@media (max-width: 760px) {
  .chat__header { margin: 8px 8px 0; }
  .chat-search, .selection-bar, .pinned-bar { margin: 6px 8px 0; }
  .composer, .record-bar, .composer-locked { margin: 4px 8px 8px; }
}

/* Keep the call controls from consuming the contact title on phones. */
@media (max-width: 520px) {
  .chat__header {
    gap: 6px;
    padding: 6px 7px;
  }
  .chat__header > .icon-btn,
  .chat__actions > .icon-btn {
    width: 35px;
    height: 35px;
  }
  .chat__header > .avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .chat__title {
    overflow: hidden;
    flex: 1 1 80px;
  }
  .chat__name,
  .chat__status {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .chat__name { font-size: 14px; }
  .chat__status { font-size: 11px; }
  .chat__actions { flex: 0 0 auto; gap: 0; }
  .chat__actions svg { width: 19px; height: 19px; }
}
@media (max-width: 360px) {
  .chat__header { gap: 4px; }
  .chat__header > .icon-btn,
  .chat__actions > .icon-btn { width: 34px; height: 34px; }
  #chatSearchBtn { display: none; }
  .chat-menu__item--mobile-search { display: flex; }
}

/* ---------- APPEARANCE PRESETS (accent handled via --accent custom property;
   wallpaper/bubble overrides below must stay after LIQUID GLASS to win the
   cascade on .chat's background) ---------- */
html[data-wallpaper="dots"] .chat { background: var(--chat-bg); }
html[data-wallpaper="dots"] .chat::before {
  display: block;
  background-image: radial-gradient(var(--chat-pattern) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
html[data-theme="light"][data-wallpaper="default"] .chat {
  background: radial-gradient(90% 70% at 10% 0%, #dceaff 0%, transparent 70%),
              radial-gradient(80% 70% at 100% 100%, #f9ddf0 0%, transparent 72%), linear-gradient(155deg,#f4f7ff,#f8f1fa);
}
html[data-theme="light"][data-wallpaper="dots"] .chat {
  background: linear-gradient(155deg,#e7edf3,#dce5ed);
}
html[data-theme="light"][data-wallpaper="dots"] .chat::before {
  background-image: radial-gradient(rgba(67,88,108,.18) 1.5px, transparent 1.5px);
}

html[data-wallpaper="azure"] .chat {
  background: radial-gradient(105% 78% at 0% 0%, #a9d1ff 0%, transparent 65%),
              radial-gradient(80% 65% at 100% 100%, #d8ecff 0%, transparent 70%), linear-gradient(155deg,#e6f2ff,#f4f9ff);
}
html[data-wallpaper="blush"] .chat {
  background: radial-gradient(105% 78% at 100% 0%, #ffc2dc 0%, transparent 65%),
              radial-gradient(80% 65% at 0% 100%, #ffe3d5 0%, transparent 70%), linear-gradient(155deg,#fff0f5,#fff8f2);
}
html[data-wallpaper="mint"] .chat {
  background: radial-gradient(105% 78% at 0% 100%, #aee8c9 0%, transparent 65%),
              radial-gradient(80% 65% at 100% 0%, #d9f5e8 0%, transparent 70%), linear-gradient(155deg,#e8fff3,#f5fffa);
}
html[data-wallpaper="dusk"] .chat {
  background: radial-gradient(105% 78% at 100% 100%, #c9b6ff 0%, transparent 65%),
              radial-gradient(80% 65% at 0% 0%, #cbdcff 0%, transparent 70%), linear-gradient(155deg,#f0ecff,#eef4ff);
}
html[data-wallpaper="sand"] .chat {
  background: radial-gradient(105% 78% at 50% 0%, #ffd99e 0%, transparent 65%),
              radial-gradient(80% 65% at 0% 100%, #f5e2c4 0%, transparent 70%), linear-gradient(155deg,#fff4df,#fffbf3);
}

html[data-theme="dark"][data-wallpaper="azure"] .chat {
  background: radial-gradient(110% 80% at -5% -5%, rgba(42,147,255,.48) 0%, rgba(42,147,255,0) 62%),
              radial-gradient(80% 70% at 100% 100%, rgba(30,82,130,.28), transparent 70%),
              linear-gradient(155deg, #10283d 0%, #09131d 100%);
}
html[data-theme="dark"][data-wallpaper="default"] .chat {
  background: radial-gradient(95% 72% at 50% -10%, rgba(61,101,145,.22), transparent 68%),
              linear-gradient(155deg, #142131 0%, #0b131d 100%);
}
html[data-theme="dark"][data-wallpaper="blush"] .chat {
  background: radial-gradient(110% 80% at 105% -5%, rgba(226,70,132,.42) 0%, rgba(226,70,132,0) 62%),
              radial-gradient(85% 65% at 0% 100%, rgba(112,35,78,.24), transparent 70%),
              linear-gradient(155deg, #271521 0%, #100d15 100%);
}
html[data-theme="dark"][data-wallpaper="mint"] .chat {
  background: radial-gradient(110% 85% at -5% 105%, rgba(37,196,132,.4) 0%, rgba(37,196,132,0) 62%),
              radial-gradient(80% 60% at 100% 0%, rgba(31,100,76,.22), transparent 70%),
              linear-gradient(155deg, #10251f 0%, #091512 100%);
}
html[data-theme="dark"][data-wallpaper="dusk"] .chat {
  background: radial-gradient(110% 85% at 105% 105%, rgba(124,83,238,.46) 0%, rgba(124,83,238,0) 62%),
              radial-gradient(75% 65% at 0% 0%, rgba(62,65,145,.27), transparent 70%),
              linear-gradient(155deg, #1b1934 0%, #0d0d1c 100%);
}
html[data-theme="dark"][data-wallpaper="sand"] .chat {
  background: radial-gradient(105% 78% at 50% -8%, rgba(220,145,51,.4) 0%, rgba(220,145,51,0) 62%),
              radial-gradient(80% 60% at 0% 100%, rgba(113,71,30,.22), transparent 70%),
              linear-gradient(155deg, #291f14 0%, #130f0a 100%);
}

html[data-theme="dark"][data-wallpaper="dots"] .chat::before {
  background-image: radial-gradient(rgba(255,255,255,.11) 1.5px, transparent 1.5px);
}

/* Dark thumbnails and preview use the same stronger palette as the real chat. */
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="default"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="default"] { --preview-wallpaper: linear-gradient(155deg,#172638,#0b131d) !important; background: linear-gradient(155deg,#172638,#0b131d) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="dots"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="dots"] { --preview-wallpaper: radial-gradient(rgba(255,255,255,.13) 1.3px,transparent 1.3px) 0 0/12px 12px,#0e1621 !important; background: var(--preview-wallpaper) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="azure"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="azure"] { --preview-wallpaper: radial-gradient(110% 80% at 0 0,rgba(42,147,255,.5),transparent 62%),linear-gradient(155deg,#10283d,#09131d) !important; background: var(--preview-wallpaper) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="blush"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="blush"] { --preview-wallpaper: radial-gradient(110% 80% at 100% 0,rgba(226,70,132,.44),transparent 62%),linear-gradient(155deg,#271521,#100d15) !important; background: var(--preview-wallpaper) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="mint"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="mint"] { --preview-wallpaper: radial-gradient(110% 85% at 0 100%,rgba(37,196,132,.42),transparent 62%),linear-gradient(155deg,#10251f,#091512) !important; background: var(--preview-wallpaper) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="dusk"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="dusk"] { --preview-wallpaper: radial-gradient(110% 85% at 100% 100%,rgba(124,83,238,.48),transparent 62%),linear-gradient(155deg,#1b1934,#0d0d1c) !important; background: var(--preview-wallpaper) !important; }
html[data-theme="dark"] .settings-wallpaper-swatch[data-wallpaper="sand"],
html[data-theme="dark"] .appearance-preview[data-preview-wallpaper="sand"] { --preview-wallpaper: radial-gradient(105% 78% at 50% 0,rgba(220,145,51,.42),transparent 62%),linear-gradient(155deg,#291f14,#130f0a) !important; background: var(--preview-wallpaper) !important; }

/* Carry the selected dark wallpaper into the conversation list. The tint is
   intentionally quieter than the chat background so navigation stays clear. */
html[data-theme="dark"][data-wallpaper] .sidebar {
  background:
    radial-gradient(90% 46% at 0% 0%, var(--sidebar-glow, transparent), transparent 72%),
    var(--sidebar-tint, var(--sidebar-bg));
  transition: background .28s ease;
}
html[data-theme="dark"][data-wallpaper] .sidebar__header {
  background: color-mix(in srgb, var(--sidebar-tint, var(--sidebar-bg)) 88%, var(--sidebar-accent, #17212b));
  border-color: color-mix(in srgb, var(--sidebar-accent, #17212b) 24%, var(--border));
}
html[data-theme="dark"][data-wallpaper] .sidebar .search {
  background: color-mix(in srgb, var(--sidebar-accent, #202b36) 24%, var(--sidebar-tint, var(--sidebar-bg)));
  border: 1px solid color-mix(in srgb, var(--sidebar-accent, #202b36) 24%, transparent);
}
html[data-theme="dark"][data-wallpaper] .sidebar .chat-item:hover {
  background: color-mix(in srgb, var(--sidebar-accent, #202b36) 20%, transparent);
}
html[data-theme="dark"][data-wallpaper] .sidebar .chat-item.active {
  background: color-mix(in srgb, var(--sidebar-accent, var(--accent)) 36%, transparent);
}
html[data-theme="dark"][data-wallpaper="default"] { --sidebar-tint:#14202c; --sidebar-accent:#35516d; --sidebar-glow:rgba(70,111,153,.14); }
html[data-theme="dark"][data-wallpaper="dots"]    { --sidebar-tint:#111c27; --sidebar-accent:#405267; --sidebar-glow:rgba(112,137,161,.1); }
html[data-theme="dark"][data-wallpaper="azure"]   { --sidebar-tint:#102235; --sidebar-accent:#287dc1; --sidebar-glow:rgba(42,147,255,.22); }
html[data-theme="dark"][data-wallpaper="blush"]  { --sidebar-tint:#241722; --sidebar-accent:#a63768; --sidebar-glow:rgba(226,70,132,.19); }
html[data-theme="dark"][data-wallpaper="mint"]    { --sidebar-tint:#11251f; --sidebar-accent:#248f6a; --sidebar-glow:rgba(37,196,132,.18); }
html[data-theme="dark"][data-wallpaper="dusk"]    { --sidebar-tint:#1b1930; --sidebar-accent:#6850b8; --sidebar-glow:rgba(124,83,238,.2); }
html[data-theme="dark"][data-wallpaper="sand"]    { --sidebar-tint:#261e15; --sidebar-accent:#a56b2c; --sidebar-glow:rgba(220,145,51,.18); }

/* Light themes tint the list more delicately, keeping the airy white UI. */
html[data-theme="light"][data-wallpaper] .sidebar {
  background: radial-gradient(90% 45% at 0% 0%, var(--sidebar-glow,transparent),transparent 74%), var(--sidebar-tint,#fff);
  transition: background .28s ease;
}
html[data-theme="light"][data-wallpaper] .sidebar__header {
  background: color-mix(in srgb,var(--sidebar-tint,#fff) 91%,var(--sidebar-accent,#fff));
  border-color: color-mix(in srgb,var(--sidebar-accent,#dbe6f0) 20%,var(--border));
}
html[data-theme="light"][data-wallpaper] .sidebar .search {
  background: color-mix(in srgb,var(--sidebar-accent,#eef3f7) 13%,white);
  border: 1px solid color-mix(in srgb,var(--sidebar-accent,#dbe6f0) 18%,transparent);
}
html[data-theme="light"][data-wallpaper] .sidebar .chat-item:hover { background: color-mix(in srgb,var(--sidebar-accent,#dbe6f0) 13%,transparent); }
html[data-theme="light"][data-wallpaper] .sidebar .chat-item.active { background: color-mix(in srgb,var(--sidebar-accent,var(--accent)) 24%,white); }
html[data-theme="light"][data-wallpaper="default"] { --sidebar-tint:#fbfcff; --sidebar-accent:#aac8ed; --sidebar-glow:rgba(166,200,239,.22); }
html[data-theme="light"][data-wallpaper="dots"]    { --sidebar-tint:#f4f7fa; --sidebar-accent:#a8b9c8; --sidebar-glow:rgba(142,164,184,.14); }
html[data-theme="light"][data-wallpaper="azure"]   { --sidebar-tint:#f5faff; --sidebar-accent:#83baf0; --sidebar-glow:rgba(92,164,235,.2); }
html[data-theme="light"][data-wallpaper="blush"]  { --sidebar-tint:#fff8fb; --sidebar-accent:#efa1c2; --sidebar-glow:rgba(237,132,177,.18); }
html[data-theme="light"][data-wallpaper="mint"]    { --sidebar-tint:#f5fff9; --sidebar-accent:#82cea8; --sidebar-glow:rgba(91,190,139,.17); }
html[data-theme="light"][data-wallpaper="dusk"]    { --sidebar-tint:#faf8ff; --sidebar-accent:#aa95e9; --sidebar-glow:rgba(141,113,222,.18); }
html[data-theme="light"][data-wallpaper="sand"]    { --sidebar-tint:#fffaf2; --sidebar-accent:#e3b36d; --sidebar-glow:rgba(217,157,70,.16); }

/* Floating menus and dialogs follow the selected light wallpaper too. */
html[data-theme="light"][data-wallpaper] :is(.profile-menu,.chat-menu,.msg-menu,.member-menu) {
  background: linear-gradient(145deg,
    color-mix(in srgb,var(--sidebar-tint,#fff) 82%,white),
    color-mix(in srgb,var(--sidebar-tint,#fff) 90%,var(--sidebar-accent,#fff)));
  border-color: color-mix(in srgb,var(--sidebar-accent,var(--accent)) 28%,var(--border));
  box-shadow: 0 16px 42px color-mix(in srgb,var(--sidebar-accent,#7c8b99) 16%,transparent), 0 3px 10px rgba(0,0,0,.08);
}
html[data-theme="light"][data-wallpaper] :is(.profile-menu__head--button,.chat-menu__item,.msg-menu__item,.member-menu__item):hover {
  background: color-mix(in srgb,var(--sidebar-accent,var(--accent)) 15%,white);
}
html[data-theme="light"][data-wallpaper] .modal__card {
  background: linear-gradient(145deg,
    color-mix(in srgb,var(--sidebar-tint,#fff) 76%,white) 0%,
    color-mix(in srgb,var(--sidebar-tint,#fff) 92%,var(--sidebar-accent,#fff)) 100%);
  border-color: color-mix(in srgb,var(--sidebar-accent,var(--accent)) 30%,var(--border));
  box-shadow: 0 25px 70px color-mix(in srgb,var(--sidebar-accent,#637587) 17%,transparent), 0 3px 12px rgba(0,0,0,.1);
}
html[data-theme="light"][data-wallpaper] :is(.modal__head,.create-group__foot) {
  background: color-mix(in srgb,var(--sidebar-tint,#fff) 78%,white);
  border-color: color-mix(in srgb,var(--sidebar-accent,var(--accent)) 20%,var(--border));
}
html[data-theme="light"][data-wallpaper] .modal-search {
  background: color-mix(in srgb,var(--sidebar-tint,#fff) 78%,white);
}

html[data-bubble="sharp"] .msg { border-radius: 6px; }
html[data-bubble="sharp"] .msg.in,
html[data-bubble="sharp"] .msg.out {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}