/* Темы оформления. Светлая — базовые styles.css; тёмная (по умолчанию) и серая
   переопределяют цвета ниже. Тема и фон выбираются в меню «Оформление» (prefs.js). */
:root:not([data-theme='light']) {
  --blue: #6a8bff;
  --blue-dark: #5675f0;
  --ink: #e4e7f2;
  --muted: #8b92a8;
  --line: #232838;
  --wall: #0c0e15;
  --out: #2c3a72;
  --bg: #12141d;
  --panel: #161925;
  --panel-2: #1c2030;
  --hover: #20253a;
  --soft: #9aa2bb;
  --faint: #6b7390;
  --overlay: #1c2030cc;
  --overlay-strong: #161925f0;
  --active: #3f5bd6;
  --compose-fade: #0c0e15cc;
  color-scheme: dark;
}
:root:not([data-theme='light']) body,
:root:not([data-theme='light']) .login-screen {
  background: var(--bg);
}
:root:not([data-theme='light']) ::selection {
  background: #6a8bff55;
}
:root:not([data-theme='light']) button:focus-visible,
:root:not([data-theme='light']) a:focus-visible,
:root:not([data-theme='light']) .message-photo:focus-visible {
  outline-color: #8ea6ff;
}

/* Общие элементы */
:root:not([data-theme='light']) .icon-button {
  color: var(--faint);
}
:root:not([data-theme='light']) .icon-button:hover {
  background: var(--hover);
  color: var(--blue);
}
:root:not([data-theme='light']) .secondary {
  background: var(--panel-2);
  color: #b8c3ea;
}
:root:not([data-theme='light']) .danger,
:root:not([data-theme='light']) .profile-remove {
  color: #ff7b84 !important;
}
:root:not([data-theme='light']) .form-error {
  color: #ff7b84;
}
:root:not([data-theme='light']) .check-label,
:root:not([data-theme='light']) label {
  color: var(--soft);
}
:root:not([data-theme='light']) label > input:not([type='checkbox']),
:root:not([data-theme='light']) .field-input {
  background: var(--panel-2);
  border-color: #2a3047;
  color: var(--ink);
}
:root:not([data-theme='light']) input::placeholder,
:root:not([data-theme='light']) textarea::placeholder {
  color: #5f6782;
}

/* Вход */
:root:not([data-theme='light']) .brand-mark {
  box-shadow: 0 12px 34px #6a8bff30;
}
:root:not([data-theme='light']) .login-note,
:root:not([data-theme='light']) .login-footer span {
  color: var(--faint);
}
:root:not([data-theme='light']) .login-footer {
  color: var(--soft);
}
:root:not([data-theme='light']) .login-art {
  background-color: var(--wall);
}
:root:not([data-theme='light']) .art-orbit {
  border-color: #6a8bff22;
}
:root:not([data-theme='light']) .art-bubble {
  background: var(--panel-2);
  box-shadow: 0 14px 40px #00000040;
}
:root:not([data-theme='light']) .art-bubble span {
  color: var(--faint);
}
:root:not([data-theme='light']) .art-bubble.second {
  background: var(--out);
}
:root:not([data-theme='light']) .art-caption {
  color: var(--faint);
}

/* Боковая панель */
:root:not([data-theme='light']) .app-shell {
  box-shadow: none;
}
:root:not([data-theme='light']) .sidebar,
:root:not([data-theme='light']) .profile-bar {
  background: var(--panel);
}
:root:not([data-theme='light']) .sidebar {
  border-right-color: var(--line);
}
:root:not([data-theme='light']) .sidebar-header .new-chat {
  background: #6a8bff1f;
}
:root:not([data-theme='light']) .sidebar-header .new-chat:hover {
  background: #6a8bff33;
}
:root:not([data-theme='light']) .search-wrap {
  background: var(--panel-2);
  color: var(--faint);
}
:root:not([data-theme='light']) .search-wrap:focus-within {
  background: var(--panel-2);
  border-color: #6a8bff88;
}
:root:not([data-theme='light']) .tab {
  color: var(--faint);
}
:root:not([data-theme='light']) .tab span {
  background: var(--panel-2);
  color: var(--soft);
}
:root:not([data-theme='light']) .tab.active span {
  background: #6a8bff26;
}
:root:not([data-theme='light']) .chat-list {
  scrollbar-color: #2c3248 transparent;
}
:root:not([data-theme='light']) .chat-row:hover,
:root:not([data-theme='light']) .profile-bar:hover {
  background: var(--hover);
}
:root:not([data-theme='light']) .chat-row.active {
  background: var(--active);
}
:root:not([data-theme='light']) .chat-time {
  color: var(--faint);
}
:root:not([data-theme='light']) .chat-preview {
  color: #7d849c;
}
:root:not([data-theme='light']) .chat-preview .sender-prefix {
  color: #aab4dc;
}
:root:not([data-theme='light']) .chat-row.active .chat-time,
:root:not([data-theme='light']) .chat-row.active .chat-preview,
:root:not([data-theme='light']) .chat-row.active .sender-prefix,
:root:not([data-theme='light']) .chat-row.active .user-status {
  color: #dfe6ff;
}
:root:not([data-theme='light']) .chat-row.active .badge {
  background: #fff;
  color: var(--active);
}
:root:not([data-theme='light']) .profile-text > span,
:root:not([data-theme='light']) .profile-bar > span:last-child,
:root:not([data-theme='light']) .list-empty {
  color: var(--faint);
}
:root:not([data-theme='light']) .list-empty strong {
  color: var(--soft);
}
:root:not([data-theme='light']) .user-status {
  color: #8f9bc4;
}

/* Переписка */
:root:not([data-theme='light']) .welcome-emblem {
  background: #ffffff0d;
  color: #8ea6ff;
  box-shadow: none;
}
:root:not([data-theme='light']) .welcome h2 {
  color: #d5daf0;
}
:root:not([data-theme='light']) .welcome p,
:root:not([data-theme='light']) .welcome-bottom {
  color: var(--faint);
}
:root:not([data-theme='light']) .welcome-button {
  background: #ffffff10;
  color: #b8c6ff;
}
:root:not([data-theme='light']) .welcome-button:hover {
  background: #ffffff1c;
}
:root:not([data-theme='light']) .conversation-header,
:root:not([data-theme='light']) .message-search-bar {
  background: var(--panel);
  border-bottom-color: var(--line);
}
:root:not([data-theme='light']) .chat-heading span span {
  color: var(--faint);
}
:root:not([data-theme='light']) .connection {
  background: #4a5170;
}
:root:not([data-theme='light']) .connection.online {
  background: #4fd1a1;
}
:root:not([data-theme='light']) .connection.offline {
  background: #e3b25c;
}
:root:not([data-theme='light']) .pinned-bar {
  background: var(--overlay-strong);
  border-bottom-color: var(--line);
}
:root:not([data-theme='light']) .pinned-bar > span:last-child {
  border-left-color: var(--blue);
}
:root:not([data-theme='light']) .pinned-bar span span {
  color: var(--soft);
}
:root:not([data-theme='light']) .messages {
  scrollbar-color: #2c3248 transparent;
}
:root:not([data-theme='light']) .date-divider {
  background: var(--overlay);
  color: var(--soft);
}
:root:not([data-theme='light']) .message-bubble {
  background: var(--panel-2);
  box-shadow: 0 1px 2px #00000040;
}
:root:not([data-theme='light']) .message-author {
  color: #8ea6ff;
}
:root:not([data-theme='light']) .message-meta {
  color: #6f7792;
}
:root:not([data-theme='light']) .own .message-meta {
  color: #9fb0ea;
}
:root:not([data-theme='light']) .message-photo {
  background: #0f1119;
}
:root:not([data-theme='light']) .photo-error,
:root:not([data-theme='light']) .message-deleted {
  color: var(--faint);
}
:root:not([data-theme='light']) .message-actions {
  background: var(--overlay-strong);
  color: var(--soft);
}
:root:not([data-theme='light']) .message-row.highlight .message-bubble {
  box-shadow: 0 0 0 3px #6a8bff80;
}
:root:not([data-theme='light']) .load-older,
:root:not([data-theme='light']) .chat-empty {
  background: var(--overlay);
  color: var(--soft);
}
:root:not([data-theme='light']) .chat-empty svg {
  color: #8ea6ff;
}
:root:not([data-theme='light']) .chat-empty strong {
  color: var(--ink);
}
:root:not([data-theme='light']) .compose-area {
  background: linear-gradient(transparent, var(--compose-fade));
}
:root:not([data-theme='light']) .composer,
:root:not([data-theme='light']) .attachment-preview,
:root:not([data-theme='light']) .reply-preview {
  background: var(--panel-2);
  box-shadow: 0 2px 14px #00000040;
}
:root:not([data-theme='light']) .composer textarea {
  color: var(--ink);
}
:root:not([data-theme='light']) .composer .icon-button {
  color: var(--faint);
}
:root:not([data-theme='light']) .compose-hint {
  color: #555d78;
}
:root:not([data-theme='light']) .retry-bar {
  background: #3a2c17;
  color: #f0c07a;
}
:root:not([data-theme='light']) .message-search-bar input {
  background: var(--panel-2);
  color: var(--ink);
}

/* Цитаты, реакции, поиск */
:root:not([data-theme='light']) .reply-preview > span {
  border-left-color: var(--blue);
}
:root:not([data-theme='light']) .reply-preview strong,
:root:not([data-theme='light']) .search-result strong,
:root:not([data-theme='light']) .typing {
  color: #8ea6ff !important;
}
:root:not([data-theme='light']) .reply-preview span span,
:root:not([data-theme='light']) .message-quote span,
:root:not([data-theme='light']) .search-result small {
  color: var(--soft);
}
:root:not([data-theme='light']) .message-quote {
  background: #6a8bff14;
  border-left-color: #8ea6ff;
}
:root:not([data-theme='light']) .message-quote strong {
  color: #a9bbff;
}
:root:not([data-theme='light']) .reaction {
  background: #ffffff10;
}
:root:not([data-theme='light']) .reaction.mine {
  background: #6a8bff33;
  box-shadow: inset 0 0 0 1px #6a8bff99;
}
:root:not([data-theme='light']) .search-result {
  border-bottom-color: var(--line);
}
:root:not([data-theme='light']) .search-result:hover {
  background: var(--hover);
}

/* Окна и меню */
:root:not([data-theme='light']) dialog,
:root:not([data-theme='light']) .modal-header,
:root:not([data-theme='light']) .context-menu {
  background: var(--panel);
  color: var(--ink);
}
:root:not([data-theme='light']) dialog {
  box-shadow: 0 24px 90px #000000a0;
  border: 1px solid var(--line);
}
:root:not([data-theme='light']) dialog::backdrop {
  background: #05060acc;
}
:root:not([data-theme='light']) .context-menu {
  border-color: var(--line);
  box-shadow: 0 8px 30px #00000080;
}
:root:not([data-theme='light']) .user-option:hover,
:root:not([data-theme='light']) .menu-action:hover,
:root:not([data-theme='light']) .context-menu button:hover,
:root:not([data-theme='light']) .emoji-grid button:hover {
  background: var(--hover);
}
:root:not([data-theme='light']) .modal-description,
:root:not([data-theme='light']) .user-option small,
:root:not([data-theme='light']) .section-label,
:root:not([data-theme='light']) .menu-action svg,
:root:not([data-theme='light']) .menu-action small,
:root:not([data-theme='light']) .profile-info p,
:root:not([data-theme='light']) .member-row small,
:root:not([data-theme='light']) .status-label,
:root:not([data-theme='light']) .modal-note,
:root:not([data-theme='light']) .empty-search,
:root:not([data-theme='light']) .context-menu svg {
  color: var(--faint);
}
:root:not([data-theme='light']) .toast {
  background: #252b40f2;
  box-shadow: 0 6px 25px #00000060;
}
:root:not([data-theme='light']) .photo-viewer {
  background: #07080cf5;
}

/* Серая тема: та же раскладка, нейтральные графитовые тона. */
:root[data-theme='gray'] {
  --blue: #7b97ff;
  --blue-dark: #6684f2;
  --ink: #eceef2;
  --muted: #a0a5b2;
  --line: #3b3f49;
  --wall: #26282e;
  --out: #3d4f86;
  --bg: #2b2d33;
  --panel: #2f3138;
  --panel-2: #383b44;
  --hover: #40434d;
  --soft: #b2b7c4;
  --faint: #8a8f9d;
  --overlay: #383b44d9;
  --overlay-strong: #2f3138f0;
  --active: #4a63d0;
  --compose-fade: #26282ecc;
}

/* Фон переписки: случайно разбросанный узор, цвет задаёт тема.
   SVG служит маской, поэтому один файл подходит для всех тем. */
:root {
  --pattern: #5d8a6a24;
  --wall-img: url('/assets/wall-geo.svg');
  --wall-size: 720px;
}
:root:not([data-theme='light']) {
  --pattern: #b9c2ff10;
}
:root[data-theme='gray'] {
  --pattern: #ffffff0e;
}
:root[data-wallpaper='stars'] {
  --wall-img: url('/assets/wall-stars.svg');
  --wall-size: 600px;
  --pattern: #4a5a8a55;
}
:root:not([data-theme='light'])[data-wallpaper='stars'] {
  --pattern: #dfe5ff59;
}
.conversation,
.login-art {
  background-image: none;
  isolation: isolate;
}
.conversation::before,
.login-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pattern);
  -webkit-mask: var(--wall-img) 0 0 / var(--wall-size) repeat;
  mask: var(--wall-img) 0 0 / var(--wall-size) repeat;
}
:root[data-wallpaper='clean'] .conversation::before,
:root[data-wallpaper='clean'] .login-art::before {
  display: none;
}

/* Окно «Оформление» */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-size: 12px;
  text-align: center;
}
.choice:hover {
  background: var(--hover, #f3f7fa);
}
.choice[aria-pressed='true'] {
  border-color: var(--blue);
}
.choice-swatch {
  height: 58px;
  border-radius: 9px;
  border: 1px solid #8884;
  position: relative;
  overflow: hidden;
}
.choice-swatch::before,
.choice-swatch::after {
  content: '';
  position: absolute;
  left: 8px;
  height: 10px;
  border-radius: 5px;
}
.choice-swatch::before {
  top: 12px;
  width: 55%;
  background: var(--sw-in);
}
.choice-swatch::after {
  top: 30px;
  left: auto;
  right: 8px;
  width: 45%;
  background: var(--sw-out);
}
.swatch-dark {
  background: #0c0e15;
  --sw-in: #1c2030;
  --sw-out: #2c3a72;
}
.swatch-gray {
  background: #26282e;
  --sw-in: #383b44;
  --sw-out: #3d4f86;
}
.swatch-light {
  background: #e7eee7;
  --sw-in: #ffffff;
  --sw-out: #e3ffc9;
}
.wall-swatch {
  background-color: var(--wall);
}
.wall-swatch::before,
.wall-swatch::after {
  display: none;
}
.wall-swatch > i {
  position: absolute;
  inset: 0;
  background-color: var(--soft, #7d8b97);
  opacity: 0.45;
  -webkit-mask: var(--sw-img) 0 0 / 220px repeat;
  mask: var(--sw-img) 0 0 / 220px repeat;
}

/* Возвращаем акценты, которые общие правила тёмных тем перебивают по специфичности. */
:root:not([data-theme='light']) .own .message-bubble {
  background: var(--out);
}
:root:not([data-theme='light']) .tab.active,
:root:not([data-theme='light']) .sidebar-header .new-chat {
  color: var(--blue);
}
:root:not([data-theme='light']) .photo-viewer,
:root:not([data-theme='light']) .photo-viewer .modal-header {
  background: transparent;
}
:root:not([data-theme='light']) .photo-viewer {
  background: #07080cf5;
}

/* Бренд Void: живой тессеракт и надпись, где «O» — гиперкуб. */
.brand-mark {
  background: #0b0b12;
  color: #ffffff;
  border: 1px solid #ffffff1a;
  box-shadow: 0 14px 36px #6a8bff33;
}
.brand-mark svg {
  width: 60px;
  height: 60px;
}
.welcome-emblem svg {
  width: 78px;
  height: 78px;
}
.wordmark-svg {
  width: 90px;
  height: 28px;
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.wordmark-svg.big {
  width: 110px;
  height: 34px;
}
/* The Void mark inside the letter O (its own 100x100 coordinate box). */
.wordmark-svg .wm-mark {
  width: 14.8px;
  height: 14.8px;
  overflow: visible;
}
.wordmark-svg .wm-mark path {
  stroke: var(--blue);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-footer {
  letter-spacing: 6px;
}
.welcome-bottom {
  color: var(--soft, #7d8b97);
  opacity: 0.8;
}

/* Закреплённые чаты */
.chat-pin {
  display: inline-flex;
  color: var(--faint, #9aa6af);
}
.chat-pin svg {
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
}
.chat-row.active .chat-pin {
  color: #dfe6ff;
}

/* Размер шрифта: текст интерфейса и текст сообщений настраиваются отдельно.
   Масштабируется только текст — иконки, аватарки и отступы не меняются. */
:root .tab {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .tab span {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .search-wrap input {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .chat-name {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .chat-time {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .chat-preview {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .chat-row .badge {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .badge {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .profile-text strong {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .profile-text > span {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .list-empty {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .list-empty strong {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .chat-heading strong {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .chat-heading span span {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .pinned-bar strong {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .pinned-bar span span {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .composer textarea {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .message-search-bar input {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .date-divider {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .load-older {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .chat-empty {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .chat-empty strong {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .welcome h2 {
  font-size: calc(25px * var(--ui-scale, 1));
}
:root .welcome p {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .welcome-button {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .modal-header h2 {
  font-size: calc(19px * var(--ui-scale, 1));
}
:root .modal-description {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .modal-note {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root label {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root label > input:not([type='checkbox']) {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .field-input {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .check-label {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .primary {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .secondary {
  font-size: calc(15px * var(--ui-scale, 1));
}
:root .menu-action {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .menu-action small {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .user-option strong {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .user-option small {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .member-row strong {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .member-row small {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .section-label {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .status-label {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .profile-info strong {
  font-size: calc(17px * var(--ui-scale, 1));
}
:root .profile-info p {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .context-menu button {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .toast {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .empty-search {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .search-result strong {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .search-result small {
  font-size: calc(11px * var(--ui-scale, 1));
}
:root .search-result > span {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .resource-text strong {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .resource-text span {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .resource-status strong {
  font-size: calc(17px * var(--ui-scale, 1));
}
:root .resource-queue-item {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .choice {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .settings-reset {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .profile-names strong {
  font-size: calc(20px * var(--ui-scale, 1));
}
:root .profile-names > span {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .profile-names .profile-status {
  font-size: calc(13px * var(--ui-scale, 1));
}
:root .profile-presence {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .profile-about p {
  font-size: calc(14px * var(--ui-scale, 1));
}
:root .retry-bar {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .attachment-preview strong {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .reply-preview strong {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .reply-preview span span {
  font-size: calc(12px * var(--ui-scale, 1));
}
:root .login-card h1 {
  font-size: calc(35px * var(--ui-scale, 1));
}
:root .login-intro {
  font-size: calc(16px * var(--ui-scale, 1));
}
:root .chat-name .user-status {
  font-size: calc(10px * var(--ui-scale, 1));
}
:root .profile-text .user-status {
  font-size: calc(10px * var(--ui-scale, 1));
}
@media (min-width: 1450px) {
  :root .chat-name {
    font-size: calc(15px * var(--ui-scale, 1));
  }
  :root .chat-preview {
    font-size: calc(13px * var(--ui-scale, 1));
  }
}
@media (max-width: 1000px) {
  :root .chat-name {
    font-size: calc(13px * var(--ui-scale, 1));
  }
}
@media (max-width: 700px) {
  :root .chat-name {
    font-size: calc(15px * var(--ui-scale, 1));
  }
  :root .chat-preview {
    font-size: calc(13px * var(--ui-scale, 1));
  }
  :root .chat-time {
    font-size: calc(11px * var(--ui-scale, 1));
  }
  :root .chat-heading strong {
    font-size: calc(14px * var(--ui-scale, 1));
  }
  :root .chat-heading span span {
    font-size: calc(10px * var(--ui-scale, 1));
  }
  :root .toast {
    font-size: calc(12px * var(--ui-scale, 1));
  }
  :root .welcome h2 {
    font-size: calc(22px * var(--ui-scale, 1));
  }
  :root .login-card h1 {
    font-size: calc(32px * var(--ui-scale, 1));
  }
  :root .login-intro {
    font-size: calc(14px * var(--ui-scale, 1));
  }
}
.message-row .message-text,
.settings-preview .message-text {
  font-size: var(--chat-font, 14px);
}
.message-row .message-author,
.message-row .message-quote {
  font-size: calc(var(--chat-font, 14px) * 0.8);
}
.message-row .message-meta {
  font-size: calc(var(--chat-font, 14px) * 0.65);
}
.settings-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 14px;
  font-weight: 500;
}
.settings-slider-head {
  display: flex;
  justify-content: space-between;
}
.settings-slider-value {
  color: var(--blue);
}
.settings-slider input {
  width: 100%;
  accent-color: var(--blue);
}
.settings-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--wall);
  margin-bottom: 12px;
}
.settings-preview .message-bubble {
  align-self: flex-start;
  min-width: 0;
}
.settings-preview .own-preview {
  align-self: flex-end;
  background: var(--out);
}
.settings-reset {
  color: var(--blue);
  font-size: 13px;
  padding: 4px 0 8px;
}
@media (max-width: 700px) {
  /* iOS zooms into inputs under 16px; keep the composer at 16px whatever the scale. */
  :root .composer textarea {
    font-size: max(16px, calc(16px * var(--ui-scale, 1)));
  }
}

/* Очередь на ресурс (принтер): плашка над списком чатов и окно. */
:root {
  --res-free: #2fb57c;
  --res-busy: #e5484d;
}
.resource-bar {
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resource-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  background: var(--panel-2, #f1f5f8);
  border: 1px solid transparent;
}
.resource-row:hover {
  background: var(--hover, #e8eef3);
}
.resource-row.free {
  border-color: color-mix(in srgb, var(--res-free) 45%, transparent);
}
.resource-row.busy {
  border-color: color-mix(in srgb, var(--res-busy) 45%, transparent);
}
.resource-row > svg {
  width: 22px;
  height: 22px;
  color: var(--soft, #7d8b97);
}
.resource-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.resource-text strong {
  font-size: 13px;
  font-weight: 600;
}
.resource-text span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resource-mine {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
}
.resource-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--res-free);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--res-free) 22%, transparent);
}
.busy .resource-dot {
  background: var(--res-busy);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--res-busy) 22%, transparent);
}
.resource-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--panel-2, #f1f5f8);
  margin-bottom: 14px;
}
.resource-status .resource-dot {
  width: 14px;
  height: 14px;
}
.resource-status div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resource-status strong {
  font-size: 17px;
}
.resource-status span:not(.resource-dot) {
  font-size: 12px;
  color: var(--muted);
}
.resource-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.resource-actions button {
  width: 100%;
}
.resource-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.resource-queue-item span {
  flex: 1;
}
.resource-queue-item small {
  color: var(--res-free);
  font-size: 11px;
}
.resource-queue-item .icon-button {
  width: 30px;
  height: 30px;
}
.resource-queue-item .icon-button svg {
  width: 16px;
  height: 16px;
}

/* Профиль пользователя: фон, аватар поверх края фона, имя и действия. */
.profile-modal #modal-content {
  padding-top: 0;
}
.profile-cover {
  position: relative;
  aspect-ratio: 3 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #24306a, #4d2763 60%, #1d1f2c);
}
.profile-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-cover.small {
  margin: 4px 0 10px;
}
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 6px;
  margin-top: -42px;
  position: relative;
}
.avatar.profile-avatar {
  width: 92px;
  height: 92px;
  font-size: 32px;
  border: 4px solid var(--panel, #fff);
  flex-shrink: 0;
}
.profile-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Starts just below the cover; only the avatar overlaps its edge. */
  margin-top: 50px;
}
.profile-names strong {
  font-size: 20px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.profile-names > span {
  font-size: 12px;
  color: var(--muted);
}
.profile-names .profile-status {
  color: var(--soft, #61788b);
  font-size: 13px;
}
.profile-presence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 14px 6px 4px;
}
.profile-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint, #a0aab2);
}
.profile-presence.online .profile-presence-dot {
  background: #2fb57c;
}
.profile-about {
  margin: 6px 6px 0;
}
.profile-about p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.profile-actions button {
  width: 100%;
}
.profile-photo-actions.row {
  flex-direction: row;
  align-items: center;
}
.profile-bio {
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
  line-height: 1.5;
}
.member-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0;
}
.member-link > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.clickable {
  cursor: pointer;
}

/* Ссылки, упоминания и предпросмотр ссылок в сообщениях. */
.message-link {
  color: var(--blue);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.message-link:hover {
  text-decoration: underline;
}
.mention {
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
}
.mention.me {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 5px;
  padding: 0 3px;
}
.link-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: inherit;
  text-decoration: none;
  max-width: 420px;
}
.link-preview-image img {
  display: block;
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 6px;
}
.link-preview-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.link-preview-site {
  color: var(--blue);
  font-size: calc(var(--chat-font, 14px) * 0.8);
  font-weight: 600;
}
.link-preview-text strong {
  font-size: calc(var(--chat-font, 14px) * 0.95);
}
.link-preview-desc {
  font-size: calc(var(--chat-font, 14px) * 0.85);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Подсказка @имя над полем ввода. */
.mention-popup {
  max-width: 920px;
  margin: 0 auto 8px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px #00000033;
  display: flex;
  flex-direction: column;
}
.mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  text-align: left;
}
.mention-option.active,
.mention-option:hover {
  background: var(--hover, #f1f6fa);
}
.mention-option > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mention-option small {
  color: var(--muted);
  font-size: 11px;
}

/* Без звука, упоминания и каналы в списке чатов. */
.chat-muted {
  display: inline-flex;
  color: var(--faint, #9aa6af);
}
.chat-muted svg {
  width: 14px;
  height: 14px;
}
.badge.muted {
  background: var(--faint, #a0aab2);
}
.badge.mention-badge {
  margin-right: 4px;
}
.chat-row.active .badge.muted {
  background: #ffffffaa;
}
.compose-area.read-only .composer,
.compose-area.read-only .reply-preview,
.compose-area.read-only .attachment-preview {
  display: none !important;
}
.channel-note {
  max-width: 920px;
  margin: 0 auto 8px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel-2, #f1f5f8);
}