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

:root {
  --side-w:      320px;
  --hdr-h:       56px;
  /* Шкала радиусов */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  /* Тени: панель / попап */
  --shadow-1:    0 1px 3px rgba(0,0,0,.3);
  --shadow-2:    0 4px 16px rgba(0,0,0,.35);
  --online:      #4dcd5e;
  --offline:     #67808f;
  --green:       #31b545;
  --red:         #e05a5a;
}

/* ── Темы ──────────────────────────────────────────────
   Каждая тема задаёт палитру интерфейса и отдельно палитру
   области чата (--c-*), чтобы лента могла быть контрастнее. */

:root, .theme-taiga {
  --bg:          #10160f;
  --side-bg:     #1a231d;
  --hdr-bg:      #1a231d;
  --input-bg:    #1a231d;
  --bubble-mine: #3f5b48;
  --bubble-other:#1e2a20;
  --accent:      #7a9483;
  --accent-rgb:  122,148,131;
  --text:        #f2f5f2;
  --text-muted:  #92a394;
  --border:      #2e392f;
  --chat-bg:     #10160f;

  --c-bg:        #10160f;
  --c-hdr:       #1a231d;
  --c-accent:    #7a9483;
  --c-accent-rgb:122,148,131;
  --c-mine:      #3f5b48;
  --c-other:     #1e2a20;
  --c-border:    #2e392f;
  --c-muted:     #92a394;
}

.theme-night {
  --bg:          #0e1621;
  --side-bg:     #17212b;
  --hdr-bg:      #17212b;
  --input-bg:    #17212b;
  --bubble-mine: #2b5278;
  --bubble-other:#182533;
  --accent:      #5288c1;
  --accent-rgb:  82,136,193;
  --text:        #f5f5f5;
  --text-muted:  #708499;
  --border:      #253040;
  --chat-bg:     #0e1621;

  --c-bg:        #0e1621;
  --c-hdr:       #17212b;
  --c-accent:    #5288c1;
  --c-accent-rgb:82,136,193;
  --c-mine:      #2b5278;
  --c-other:     #182533;
  --c-border:    #253040;
  --c-muted:     #708499;
}

.theme-ocean {
  --bg:          #0d1b26;
  --side-bg:     #12222e;
  --hdr-bg:      #12222e;
  --input-bg:    #12222e;
  --bubble-mine: #1d4f6e;
  --bubble-other:#162a38;
  --accent:      #2aabee;
  --accent-rgb:  42,171,238;
  --text:        #f0f6fa;
  --text-muted:  #7d97a8;
  --border:      #1f3543;
  --chat-bg:     #0d1b26;

  --c-bg:        #0d1b26;
  --c-hdr:       #12222e;
  --c-accent:    #2aabee;
  --c-accent-rgb:42,171,238;
  --c-mine:      #1d4f6e;
  --c-other:     #162a38;
  --c-border:    #1f3543;
  --c-muted:     #7d97a8;
}

.theme-plum {
  --bg:          #14101c;
  --side-bg:     #1b1626;
  --hdr-bg:      #1b1626;
  --input-bg:    #1b1626;
  --bubble-mine: #4a3468;
  --bubble-other:#241d33;
  --accent:      #a072d8;
  --accent-rgb:  160,114,216;
  --text:        #f4f0fa;
  --text-muted:  #9a90ad;
  --border:      #322a44;
  --chat-bg:     #14101c;

  --c-bg:        #14101c;
  --c-hdr:       #1b1626;
  --c-accent:    #a072d8;
  --c-accent-rgb:160,114,216;
  --c-mine:      #4a3468;
  --c-other:     #241d33;
  --c-border:    #322a44;
  --c-muted:     #9a90ad;
}

.theme-coffee {
  --bg:          #17120e;
  --side-bg:     #201a15;
  --hdr-bg:      #201a15;
  --input-bg:    #201a15;
  --bubble-mine: #4d3a28;
  --bubble-other:#261f18;
  --accent:      #c89b6a;
  --accent-rgb:  200,155,106;
  --text:        #f7f1e9;
  --text-muted:  #a89482;
  --border:      #382d23;
  --chat-bg:     #17120e;

  --c-bg:        #17120e;
  --c-hdr:       #201a15;
  --c-accent:    #c89b6a;
  --c-accent-rgb:200,155,106;
  --c-mine:      #4d3a28;
  --c-other:     #261f18;
  --c-border:    #382d23;
  --c-muted:     #a89482;
}

.theme-light {
  --bg:          #f0f2f5;
  --side-bg:     #fff;
  --hdr-bg:      #fff;
  --input-bg:    #fff;
  --bubble-mine: #effdde;
  --bubble-other:#fff;
  --accent:      #2aabee;
  --accent-rgb:  42,171,238;
  --text:        #000;
  --text-muted:  #7d8b99;
  --border:      #e6ebf0;
  --chat-bg:     #c9d7df;
  --offline:     #aaa;

  --c-bg:        #c9d7df;
  --c-hdr:       #fff;
  --c-accent:    #2aabee;
  --c-accent-rgb:42,171,238;
  --c-mine:      #effdde;
  --c-other:     #fff;
  --c-border:    #e6ebf0;
  --c-muted:     #7d8b99;
}

.theme-paper {
  --bg:          #f3f1ea;
  --side-bg:     #fffdf7;
  --hdr-bg:      #fffdf7;
  --input-bg:    #fffdf7;
  --bubble-mine: #dcecd7;
  --bubble-other:#fffdf7;
  --accent:      #3f7d58;
  --accent-rgb:  63,125,88;
  --text:        #1b1b1b;
  --text-muted:  #7a7568;
  --border:      #e2ddd0;
  --chat-bg:     #e8e4d8;
  --offline:     #aaa;

  --c-bg:        #e8e4d8;
  --c-hdr:       #fffdf7;
  --c-accent:    #3f7d58;
  --c-accent-rgb:63,125,88;
  --c-mine:      #dcecd7;
  --c-other:     #fffdf7;
  --c-border:    #e2ddd0;
  --c-muted:     #7a7568;
}

html, body { height: 100%; font-family: system-ui,-apple-system,sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
.hidden { display: none !important; }
.screen { width: 100%; height: 100dvh; }

/* ── Auth ──────────────────────────────────────────── */
/* Показываем auth только если нет токена (без моргания) */
.show-auth #screen-auth { display: flex !important; }
#screen-auth {
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  /* Палитра "тайга": туманный тёмный лес (только на экране входа) */
  --accent:     #7a9483;
  --accent-rgb: 122,148,131;
  --side-bg:    #1a231d;
  --border:     #2e392f;
  --text:       #f2f5f2;
  --text-muted: #92a394;
  --bg:         #10160f;
  background: #0c110f url('images/taiga-bg.png') center center / cover no-repeat;
}
#screen-auth::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,10,.55) 0%, rgba(8,12,10,.35) 45%, rgba(8,12,10,.65) 100%);
  z-index: 0;
}

.auth-layout { position: relative; z-index: 1; display: flex; align-items: center; gap: 56px; padding: 24px; width: 100%; max-width: 900px; box-sizing: border-box; justify-content: center; }

/* Секция с описанием возможностей рядом с окном входа */
.auth-features { max-width: 340px; color: #eef2ee; }
.auth-features-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-features-brand-logo { width: 36px; height: 36px; object-fit: contain; }
.auth-features-brand span { font-size: 1.3rem; font-weight: 700; }
.auth-features-lead { font-size: 1.05rem; line-height: 1.4; color: #dfe6e0; margin-bottom: 28px; }
.feature-item { display: flex; gap: 14px; margin-bottom: 20px; }
.feature-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(var(--accent-rgb),.16); border: 1px solid rgba(var(--accent-rgb),.3);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon .icon { width: 20px; height: 20px; color: var(--accent); stroke-width: 1.6; }
.feature-item h3 { font-size: .95rem; font-weight: 600; margin-bottom: 3px; }
.feature-item p { font-size: .8rem; line-height: 1.4; color: #a9b6ac; }
@media (max-width: 980px) { .auth-features { display: none; } .auth-layout { gap: 0; padding: 0; } }

.auth-box {
  position: relative; z-index: 1; width: 340px; max-width: 100%; box-sizing: border-box; flex-shrink: 0;
  padding: 36px 26px 28px;
  background: linear-gradient(180deg, rgba(26,35,29,.72) 0%, rgba(16,22,15,.72) 100%);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 20px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
@media (max-width: 480px) {
  #screen-auth { padding: 0; }
  .auth-layout { padding: 16px; }
  .auth-box { padding: 28px 20px 22px; border-radius: 16px; }
  .auth-logo img { width: 56px; height: 56px; }
  .auth-box h1 { font-size: 1.2rem; }
  .auth-subtitle { font-size: .78rem; margin-bottom: 18px; }
  .tabs { margin-bottom: 18px; }
  .tab { font-size: .88rem; padding: 8px 4px; }
  .input-group input { font-size: 16px; padding-top: 9px; padding-bottom: 9px; }
  .auth-form button[type="submit"] { padding: 12px; font-size: .95rem; }
}
.auth-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.auth-logo { display: flex; justify-content: center; margin: 0 auto 14px; }
.auth-logo img { width: 72px; height: 72px; object-fit: contain; }
.auth-box h1 { text-align: center; margin-bottom: 6px; font-size: 1.35rem; letter-spacing: .2px; }
.auth-subtitle { text-align: center; color: var(--text-muted); font-size: .8rem; line-height: 1.4; margin-bottom: 24px; }

.tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid rgba(var(--accent-rgb),.2); position: relative; }
.tab {
  flex: 1; padding: 10px 4px; background: transparent; border: none; border-radius: 0;
  color: var(--text-muted); cursor: pointer; transition: color .15s; font-size: .92rem;
  position: relative;
}
.tab::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transition: transform .2s ease;
}
.tab.active { color: #fff; font-weight: 600; }
.tab.active::after { transform: scaleX(1); }
.auth-form { display: flex; flex-direction: column; gap: 6px; }

.input-group { position: relative; display: flex; align-items: center; margin-bottom: 6px; }
.input-group .input-icon { position: absolute; left: 2px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; transition: color .15s; }
.input-group input {
  width: 100%; padding: 10px 30px 10px 26px; background: transparent;
  border: none; border-bottom: 1px solid rgba(var(--accent-rgb),.28);
  border-radius: 0; color: var(--text); font-size: .95rem; outline: none; transition: border-color .15s;
}
.input-group input:focus { border-bottom-color: var(--accent); }
.input-group input:focus ~ .input-icon,
.input-group:focus-within .input-icon { color: var(--accent); }
.input-eye-toggle { position: absolute; right: 2px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; }
.input-eye-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }
.input-eye-toggle .icon { width: 17px; height: 17px; }
.input-group input[name="password"] { padding-right: 30px; }

.auth-options { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; font-size: .8rem; }
.auth-remember { display: flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; user-select: none; }
.auth-remember input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.auth-forgot { color: var(--accent); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }

.auth-form button[type="submit"] {
  padding: 11px; margin-top: 6px; background: linear-gradient(135deg, var(--accent), #5d7a67);
  border: none; border-radius: 12px; color: #fff; font-size: 1rem; cursor: pointer;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb),.28); transition: transform .15s, box-shadow .15s, filter .15s;
}
.auth-form button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--accent-rgb),.38); }
.auth-form button[type="submit"]:active { transform: translateY(0); }
.auth-error { color: #e06c75; font-size: .85rem; min-height: 1.2em; }

/* ── App layout ────────────────────────────────────── */
#screen-app { display: flex; height: 100dvh; }

/* Sidebar */
#sidebar {
  width: var(--side-w); min-width: var(--side-w); background: var(--side-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}

/* Ручка изменения ширины сайдбара (drag) */
#sidebar-resize-handle {
  position: absolute; top: 0; right: 0; width: 5px; height: 100%;
  cursor: col-resize; z-index: 20; background: transparent; transition: background .15s;
}
#sidebar-resize-handle:hover, #sidebar-resize-handle.dragging { background: rgba(var(--accent-rgb),.35); }

/* Свёрнутый режим: только аватарки, без текста, всё центрируется пропорционально */
#sidebar.collapsed #sidebar-header { padding: 0 8px; gap: 4px; }
#sidebar.collapsed #search-wrap { display: none; }
#sidebar.collapsed .folder-tabs { display: none; }
#sidebar.collapsed .chat-item { justify-content: center; padding: 8px 4px; gap: 0; }
#sidebar.collapsed .chat-item-info { display: none; }

#sidebar-header { height: var(--hdr-h); display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }

#chat-list-wrap { overflow-y: auto; flex: 1; }

/* Chat items */
.chat-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 68px; cursor: pointer; transition: background .12s; }
.chat-item:hover { background: rgba(255,255,255,.05); }
.chat-item.active { background: rgba(var(--accent-rgb),.18); }

.chat-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
/* Бейдж сразу после имени, время прижато вправо (без space-between —
   иначе бейдж висит по центру строки) */
.chat-item-top { display: flex; align-items: center; gap: 6px; }
.chat-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; min-width: 0; flex: 0 1 auto; }
.chat-item-time { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; margin-left: auto; }
.chat-item-bottom { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.chat-item-preview { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.unread-badge {
  flex-shrink: 0; box-sizing: border-box; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 19px; text-align: center;
}
.unread-badge.mention-badge { background: #cf8a3f; }

/* Contacts */
.sidebar-section-label { padding: 12px 16px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }

/* Chat main */
#chat-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative;
  /* Палитра области чата берётся из активной темы */
  --accent:      var(--c-accent);
  --accent-rgb:  var(--c-accent-rgb);
  --hdr-bg:      var(--c-hdr);
  --input-bg:    var(--c-hdr);
  --chat-bg:     var(--c-bg);
  --bubble-mine: var(--c-mine);
  --bubble-other:var(--c-other);
  --border:      var(--c-border);
  --text-muted:  var(--c-muted);
  --bg:          var(--c-bg);
}
#no-chat-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 12px; }
.no-chat-icon { font-size: 4rem; opacity: .4; }

/* Единая система SVG-иконок */
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-logo { width: 48px; height: 48px; color: var(--accent); }
.icon-empty { width: 56px; height: 56px; opacity: .35; margin-bottom: 12px; }

/* Единый фокус и disabled */
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: .5; cursor: default; }
#chat-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--chat-bg); }

/* Chat header */
#chat-header { position: relative; height: var(--hdr-h); background: var(--hdr-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 14px; flex-shrink: 0; }
/* Остров с аватаркой/именем — по центру шапки, как заголовок в iOS-навбаре */
#chat-hdr-island {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 150px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--accent-rgb),.14); border-radius: 999px;
  padding: 5px 18px 5px 5px;
}
#chat-hdr-avatar .avatar { width: 40px; height: 40px; font-size: 1rem; }
#chat-hdr-info { min-width: 0; }
#chat-hdr-name { font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
#chat-hdr-status { font-size: .85rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Группа кнопок-«островков» справа в шапке (звонок/поиск/ещё) */
#chat-hdr-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-dots { fill: currentColor; stroke: none; }

/* Кнопки-«островки» в шапке чата (звонок/поиск/ещё) — круглая подложка, как в iOS */
#chat-header #btn-call,
#chat-header #btn-chat-search,
#chat-header #btn-chat-menu {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.14);
  transition: background .15s, transform .1s;
}
#chat-header #btn-call:hover,
#chat-header #btn-chat-search:hover,
#chat-header #btn-chat-menu:hover { background: rgba(var(--accent-rgb),.26); color: var(--text); }
#chat-header #btn-call:active,
#chat-header #btn-chat-search:active,
#chat-header #btn-chat-menu:active { transform: scale(.92); }

/* Messages */
#messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; position: relative; background: var(--chat-bg); }

/* ── Помощник ИИ ───────────────────────────────────── */
.ai-chat-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--chat-bg); z-index: 5; }
.ai-chat-panel .chat-header {
  height: var(--hdr-h); background: var(--hdr-bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 14px; flex-shrink: 0;
}
.ai-avatar-bear {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--accent-rgb),.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-avatar-bear .icon { width: 24px; height: 24px; color: var(--accent); }
.ai-hdr-info { min-width: 0; flex: 1; }
.ai-hdr-name { font-weight: 600; font-size: 1rem; }
.ai-hdr-status { font-size: .8rem; color: var(--accent); }

.ai-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }
.ai-bubble {
  max-width: min(75vw, 480px); padding: 8px 12px; border-radius: var(--radius-md);
  font-size: .92rem; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
}
.ai-msg-user .ai-bubble { background: var(--bubble-mine); color: var(--text); border-bottom-right-radius: 4px; }
.ai-msg-bot  .ai-bubble { background: var(--bubble-other); border-bottom-left-radius: 4px; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ai-chip {
  background: rgba(var(--accent-rgb),.14); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: .85rem; cursor: pointer;
  transition: background .15s;
}
.ai-chip:hover { background: rgba(var(--accent-rgb),.26); }

.ai-thinking { display: flex; align-items: center; gap: 4px; padding: 12px; }
.ai-thinking span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: ai-thinking-bounce 1.2s infinite ease-in-out;
}
.ai-thinking span:nth-child(2) { animation-delay: .15s; }
.ai-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-thinking-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.ai-input-row {
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px;
  background: var(--input-bg); border-top: 1px solid var(--border); flex-shrink: 0;
}
.ai-input-row textarea {
  flex: 1; resize: none; max-height: 120px; border: none; outline: none;
  background: transparent; color: var(--text); font-size: .95rem; font-family: inherit;
  padding: 8px 10px; line-height: 1.4;
}

/* ── Аватары ───────────────────────────────────────── */
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; flex-shrink: 0; position: relative; overflow: hidden; }
.avatar-xs { width: 28px; height: 28px; font-size: .75rem; }
.avatar-sm { width: 36px; height: 36px; font-size: .9rem; }
.avatar-md { width: 46px; height: 46px; font-size: 1.1rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; }

.presence-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--side-bg); }
.online  { background: var(--online); }
.offline { background: var(--offline); }

/* ── Сообщения ─────────────────────────────────────── */
.date-sep { text-align: center; font-size: .75rem; color: var(--text-muted); margin: 8px 0; user-select: none; position: relative; }
.date-sep::before, .date-sep::after { content:''; position: absolute; top: 50%; width: calc(50% - 60px); height: 1px; background: var(--border); }
.date-sep::before { left: 0; } .date-sep::after { right: 0; }

.message { display: flex; gap: 8px; max-width: 100%; margin-top: 6px; }
.message.mine  { flex-direction: row-reverse; align-self: flex-end; }
.message.other { align-self: flex-start; }
.message.grouped { margin-top: 2px; }
.message.grouped .msg-avatar { visibility: hidden; }
/* Группировка: отступ у сгруппированных = ширина аватара (28px) + gap (8px) */
/* В группах (есть аватары) — отступ для групировки; в личках — нет */
.message.other.grouped { padding-left: 0; }
#messages:has(.msg-avatar) .message.other.grouped { padding-left: 36px; }
/* Соединённые углы как в Telegram */
.message.other.grouped .msg-bubble { border-top-left-radius: 4px; }
.message.mine.grouped  .msg-bubble { border-top-right-radius: 4px; }
.message.other:has(+ .message.other.grouped) .msg-bubble { border-bottom-left-radius: 4px; }
.message.mine:has(+  .message.mine.grouped)  .msg-bubble { border-bottom-right-radius: 4px; }
.message.highlighted .msg-bubble { outline: 2px solid var(--accent); }
.message.pending .msg-bubble { opacity: .7; }

.msg-avatar { align-self: flex-end; flex-shrink: 0; }
.msg-content { display: flex; flex-direction: column; max-width: min(68vw, 480px); }
.message.mine .msg-content { align-items: flex-end; }

.msg-sender { font-size: .78rem; font-weight: 600; padding: 0 2px 3px; }
.msg-fwd { font-size: .8rem; color: var(--accent); font-weight: 600; padding: 0 2px 2px; }

/* Reply quote */
.msg-reply-quote { border-left: 3px solid var(--accent); padding: 3px 8px; margin-bottom: 4px; cursor: pointer; border-radius: 0 4px 4px 0; background: rgba(255,255,255,.06); max-width: 100%; }
.reply-author { font-size: .75rem; font-weight: 600; color: var(--accent); }
.reply-text   { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-bubble { padding: 6px 10px 5px; border-radius: var(--radius-md); font-size: .92rem; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.mine  .msg-bubble { background: var(--bubble-mine); border-bottom-right-radius: 4px; color: var(--text); }
.other .msg-bubble { background: var(--bubble-other); border-bottom-left-radius: 4px; }
.msg-bubble-media { padding: 4px; min-width: 0; }
.mine .msg-bubble-media, .other .msg-bubble-media { background: transparent; }

/* Футер: в потоке, выровнян по правому краю */
.msg-footer { display: flex; align-items: center; gap: 2px; justify-content: flex-end; margin-top: 1px; }
.msg-bubble-media .msg-footer { margin-top: 3px; padding: 0 2px 2px; }
.msg-time  { font-size: .68rem; color: var(--text-muted); opacity: .85; white-space: nowrap; }
.msg-edited { font-size: .68rem; color: var(--text-muted); opacity: .75; }
.msg-status  { display: inline-flex; align-items: center; cursor: pointer; color: var(--text-muted); margin-left: 2px; }
.msg-status[data-status="read"] { color: var(--accent); }
/* Seen-by tooltip */
.seen-by-tip {
  background: var(--hdr-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 10px;
  font-size: .8rem; color: var(--text); box-shadow: var(--shadow-2);
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* Reactions */
.reactions-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-pill { padding: 2px 8px; border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--text); font-size: .8rem; cursor: pointer; transition: background .1s; }
.reaction-pill.my { background: rgba(82,136,193,.25); border-color: var(--accent); }
.reaction-pill:hover { background: rgba(255,255,255,.1); }

/* ── Load more / scroll btn ────────────────────────── */
.load-more { align-self: center; padding: 8px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer; font-size: .82rem; margin-bottom: 8px; transition: all .15s; }
.load-more:hover { border-color: var(--accent); color: var(--accent); }

.scroll-down-btn {
  position: absolute; right: 16px; bottom: 76px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--hdr-bg); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  transition: opacity .15s, transform .15s;
  z-index: 10;
}
.scroll-down-btn:hover { transform: scale(1.1); }
.scroll-down-btn .icon { width: 20px; height: 20px; }
#scroll-down-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--accent); color: #fff;
  border-radius: 9px; font-size: .68rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--hdr-bg);
}

/* ── Typing / compose bar ──────────────────────────── */
.typing-bar { padding: 4px 16px; font-size: .82rem; color: var(--accent); background: var(--input-bg); border-top: 1px solid var(--border); flex-shrink: 0; }

.compose-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--input-bg); border-top: 1px solid var(--border); flex-shrink: 0; }
.compose-bar-icon { width: 24px; text-align: center; color: var(--accent); font-size: 1rem; flex-shrink: 0; }
#compose-bar-content { flex: 1; min-width: 0; }
.compose-bar-author { font-size: .78rem; font-weight: 600; color: var(--accent); }
.compose-bar-text   { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Input area ────────────────────────────────────── */
#input-area { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px; background: var(--input-bg); border-top: 1px solid var(--border); flex-shrink: 0; min-height: 46px; position: relative; }

/* Скрывать стандартные элементы когда показан inline-бар */
#input-area:has(#rec-inline:not(.hidden)) #btn-emoji,
#input-area:has(#rec-inline:not(.hidden)) #btn-stickers,
#input-area:has(#rec-inline:not(.hidden)) #btn-cmd-menu,
#input-area:has(#rec-inline:not(.hidden)) #btn-clip,
#input-area:has(#rec-inline:not(.hidden)) #message-input,
#input-area:has(#rec-inline:not(.hidden)) #btn-send,
#input-area:has(#rec-inline:not(.hidden)) #btn-record { display: none !important; }

/* Inline recording bar */
.rec-inline {
  flex: 1; display: flex; align-items: center; gap: 10px; overflow: hidden;
}
/* Hold mode */
.rec-inline-hold { display: flex; flex: 1; align-items: center; gap: 10px; overflow: hidden; }
.rec-inline-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rec-inline-timer { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; }
.rec-inline-hint {
  display: flex; flex: 1; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: .88rem;
  transition: transform .1s ease, color .12s; pointer-events: none;
  white-space: nowrap;
}
.rec-inline-hint.cancelling { color: var(--red); }
/* Locked mode */
.rec-inline-locked {
  display: flex; flex: 1; align-items: center; gap: 8px; height: 40px; overflow: hidden;
}
.rec-inline-wave-wrap {
  display: flex; flex: 1; align-items: center; gap: 6px; overflow: hidden; min-width: 0;
}
.rec-inline-wave { display: block; height: 24px; flex: 1; min-width: 0; max-width: 200px; }
.rec-dot-sm { width: 7px; height: 7px; border-radius: 50%; background: #e06c75; flex-shrink: 0;
  animation: vp-pulse 1s ease-in-out infinite; }
.rec-il-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .1s, opacity .12s;
}
.rec-il-btn:active { transform: scale(.88); }
.rec-il-cancel { background: rgba(224,108,117,.12); color: var(--red, #e06c75); }
.rec-il-cancel:hover { background: rgba(224,108,117,.22); }
.rec-il-send { background: var(--accent); color: #fff; }
.rec-il-send:hover { opacity: .88; }

/* Mic button: pulse ring when recording */
#btn-record.recording {
  background: var(--red, #e06c75); color: #fff !important;
  border-radius: 50% !important;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,108,117,.5); }
  60%      { box-shadow: 0 0 0 10px rgba(224,108,117,0); }
}

/* Lock tip above mic button */
.rec-lock-tip {
  position: absolute; bottom: calc(100% + 6px); right: 10px;
  background: var(--hdr-bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 10px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text-muted); box-shadow: var(--shadow-2);
  animation: fadeUpIn .18s ease; pointer-events: none;
}
@keyframes fadeUpIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.input-btn { width: 38px; height: 38px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.15rem; border-radius: 50%; transition: color .15s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.input-btn:hover { color: var(--text); }
.input-btn:disabled { opacity: .4; }
.input-btn.recording { color: #e06c75; animation: pulse .7s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.send-btn { background: var(--accent); color: #fff; border-radius: 50%; }
.send-btn:hover { filter: brightness(1.1); }

#message-input { flex: 1; padding: 7px 14px; background: rgba(var(--accent-rgb),.09); border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 20px; color: var(--text); font-size: .93rem; outline: none; resize: none; max-height: 140px; line-height: 1.4; transition: border-color .15s; font-family: inherit; overflow-y: auto; scrollbar-width: none; }
#message-input::-webkit-scrollbar { display: none; }
#message-input:focus { border-color: var(--accent); }

/* ── Модалка «Отправить» (предпросмотр медиа) ── */
#media-preview-modal .modal-box {
  width: min(92vw, 420px);
}
.mp-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 0; overflow-y: auto; max-height: 46vh; }
.mp-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb),.08); border: 1px solid var(--border);
}
.mp-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: #000; }
.mp-file-ico {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.18); color: var(--accent);
}
.mp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-name { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-size { font-size: .76rem; color: var(--text-muted); }
.mp-caption-row {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px;
}
#mp-caption {
  flex: 1; padding: 9px 14px; background: rgba(var(--accent-rgb),.09); border: 1px solid rgba(var(--accent-rgb),.22);
  border-radius: 20px; color: var(--text); font-size: .92rem; outline: none; resize: none;
  max-height: 100px; line-height: 1.4; font-family: inherit; transition: border-color .15s;
}
#mp-caption:focus { border-color: var(--accent); }
.mp-caption-count { flex-shrink: 0; align-self: flex-end; margin-bottom: 9px; font-size: .68rem; color: var(--text-muted); }
/* ── Медиа в пузыре ────────────────────────────────── */
/* Медиа с клавиатурой — единый блок: у картинки скруглены только верхние углы */
.msg-media-kb .msg-bubble-media { padding: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--bubble-other); }
.mine.msg-media-kb .msg-bubble-media { background: var(--bubble-mine); }
.msg-media-kb .msg-img { border-radius: var(--radius-md) var(--radius-md) 0 0; max-width: 320px; width: 100%; }
.msg-media-kb .msg-caption { padding: 6px 10px; }
.msg-media-kb .msg-footer { padding: 0 10px 4px; }
.msg-media-kb .inline-btns { margin-top: 4px; max-width: 320px; }

.msg-img { display: block; border-radius: var(--radius-sm); cursor: pointer; max-width: 280px; max-height: 280px; object-fit: cover; }
/* Голосовой плеер — Telegram-style grid */
.voice-player {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-width: 200px;
}
.voice-player .voice-btn {
  grid-column: 1; grid-row: 1 / 3;
  width: 48px; height: 48px;
}
.voice-wave-row {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: 8px;
}
.voice-meta-row {
  grid-column: 2; grid-row: 2;
  display: flex; align-items: center;
}
/* Время прямо в ряду с длительностью */
.msg-footer-voice { margin-left: auto; margin-top: 0; padding: 0; flex-shrink: 0; }
.voice-btn { background: var(--accent); border: none; border-radius: 50%; width: 32px; height: 32px; color: #fff; cursor: pointer; font-size: .8rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.voice-dur  { font-size: .72rem; color: var(--text-muted); min-width: 34px; font-variant-numeric: tabular-nums; }
.vidnote { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
/* Круг режем контейнером: Chromium не всегда применяет border-radius к самому <video> */
.vidnote-inner {
  position: relative; width: 200px; height: 200px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; isolation: isolate;
  background: #111;
}
.vidnote-vid {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; cursor: pointer; display: block; background: #111;
  transform: translateZ(0);
}
.vidnote-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .1s;
  pointer-events: none;
}
.vidnote-inner:hover .vidnote-play { pointer-events: auto; }
.vidnote-play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(0,0,0,.65); }
.vidnote-ring {
  position: absolute; top: 0; left: 0;
  width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none;
}
.vidnote-dur { font-size: .7rem; color: var(--text-muted); }

/* Кнопка быстрой реакции на hover */
.message { position: relative; }
.msg-react-btn {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--hdr-bg); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  z-index: 5; transition: transform .12s, background .1s;
  padding: 0;
}
.message.mine .msg-react-btn  { right: 100%; margin-right: 5px; }
.message.other .msg-react-btn { left: 100%; margin-left: 5px; }
.message:hover .msg-react-btn { display: flex; }
.msg-react-btn:hover { transform: translateY(-50%) scale(1.2); background: var(--bg); }

/* Quick reaction picker */
.quick-rpicker {
  display: flex; gap: 4px; padding: 6px 10px;
  background: var(--hdr-bg); border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-2);
}
.msg-file { display: flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: .88rem; }
.msg-file:hover { text-decoration: underline; }
.file-sz { color: var(--text-muted); font-size: .78rem; }
/* (vidnote-preview-area удалён — кружок пишется в центральном оверлее rec-overlay) */

/* ── Lightbox ──────────────────────────────────────── */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); align-items: center; justify-content: center; z-index: 100; cursor: pointer; }
.lightbox.open { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-sm); object-fit: contain; }

/* ── Bot badges & inline buttons ──────────────────── */
.bot-badge { display: inline-block; background: var(--accent); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; vertical-align: middle; margin-left: 4px; flex-shrink: 0; }
.bot-badge-sm { font-size: .55rem; padding: 1px 4px; }

/* Инлайн-клавиатура ботов (этап 15): сетка 2×N, стили, URL-кнопки */
.inline-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; width: 100%; max-width: 320px; }
.inline-btns-row { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-btn {
  flex: 1 1 0; min-width: 0; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  background: rgba(82,136,193,.13); border: 1px solid rgba(82,136,193,.3);
  border-radius: var(--radius-sm); color: var(--accent);
  font-size: .84rem; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .12s, transform .1s;
  text-decoration: none; /* для URL-кнопок <a> */
}
.inline-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-btn:hover:not(:disabled) { background: rgba(82,136,193,.25); }
.inline-btn:active:not(:disabled) { transform: scale(.97); }
.inline-btn:disabled { opacity: .55; cursor: default; }

/* Стили кнопок — только токены темы */
.inline-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.inline-btn--primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.12); }
.inline-btn--success { background: var(--green); border-color: var(--green); color: #fff; }
.inline-btn--success:hover:not(:disabled) { background: var(--green); filter: brightness(1.12); }
.inline-btn--danger  { background: var(--red); border-color: var(--red); color: #fff; }
.inline-btn--danger:hover:not(:disabled)  { background: var(--red); filter: brightness(1.12); }

/* Мобила: ряд из 4+ кнопок автоматически становится 2 колонками */
@media (max-width: 480px) {
  .inline-btns-row:has(> :nth-child(4)) > .inline-btn { flex: 1 1 calc(50% - 3px); }
}
.inline-btn-loading::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ── Опросы ───────────────────────────────────────── */
.poll { min-width: 220px; max-width: 300px; }
.poll-q { font-weight: 600; margin-bottom: 2px; }
.poll-kind { font-size: .72rem; color: var(--text-secondary); margin-bottom: 8px; }
.poll-opt {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 36px; margin-bottom: 5px; padding: 6px 10px;
  background: rgba(82,136,193,.10); border: 1px solid rgba(82,136,193,.25);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: .85rem; cursor: pointer; overflow: hidden; text-align: left;
  transition: background .12s;
}
.poll-opt:hover { background: rgba(82,136,193,.2); }
.poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(82,136,193,.22); border-radius: var(--radius-sm);
  transition: width .25s ease; pointer-events: none;
}
.poll-opt-text { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.poll-pct { position: relative; font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.poll-opt-my { border-color: var(--accent); }
.poll-opt-my .poll-opt-text::after { content: ' ✓'; color: var(--accent); }
.poll-opt-correct { border-color: var(--green); }
.poll-opt-correct .poll-bar { background: color-mix(in srgb, var(--green) 25%, transparent); }
.poll-opt-wrong { border-color: var(--red); }
.poll-opt-wrong .poll-bar { background: color-mix(in srgb, var(--red) 22%, transparent); }
.poll-total { font-size: .72rem; color: var(--text-secondary); margin-top: 2px; }

/* ── Mini App (web_app) ───────────────────────────── */
.webapp-box { width: min(480px, 94vw); height: min(640px, 88vh); display: flex; flex-direction: column; }
.webapp-frame { flex: 1; width: 100%; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; }

/* ── Reply-клавиатура ботов ───────────────────────── */
.reply-kb-bar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}
.reply-kb-row { display: flex; gap: 6px; }
.reply-kb-btn {
  flex: 1 1 0; min-width: 0; min-height: 38px; padding: 6px 10px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: .85rem; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .12s, transform .1s;
}
.reply-kb-btn:hover { background: rgba(82,136,193,.14); }
.reply-kb-btn:active { transform: scale(.97); }

/* ── Волна 2 ──────────────────────────────────── */
/* (12) Темы */
.topic-bar {
  display: flex; gap: 6px; padding: 6px 12px; overflow-x: auto;
  border-bottom: 1px solid var(--border); background: var(--bg-secondary);
  scrollbar-width: none;
}
.topic-bar::-webkit-scrollbar { display: none; }
.topic-chip {
  flex: 0 0 auto; padding: 4px 12px; border-radius: 14px;
  background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--text-primary); font-size: .8rem; cursor: pointer;
  white-space: nowrap; transition: background .12s;
}
.topic-chip:hover { background: rgba(82,136,193,.14); }
.topic-chip-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.topic-chip-add { color: var(--accent); border-style: dashed; }
.topic-hidden { display: none !important; }

/* (2) Стикеры */
.sticker-panel {
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg-secondary); max-height: 200px; overflow-y: auto;
}
.sticker-hint { font-size: .72rem; color: var(--text-secondary); margin-bottom: 6px; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.sticker-btn {
  height: 48px; font-size: 1.8rem; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: transform .1s;
}
.sticker-btn:hover { transform: scale(1.08); }
.sticker-add { font-size: 1.4rem; color: var(--accent); border-style: dashed; }

/* (19) Звонки */
.call-box { max-width: 300px; text-align: center; padding: 28px 20px; }
.call-avatar {
  width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.call-avatar .icon { width: 32px; height: 32px; color: #fff; }
.call-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
.call-sub { color: var(--text-secondary); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.call-btns { display: flex; gap: 10px; justify-content: center; }
.call-btn {
  padding: 10px 20px; border-radius: var(--radius); border: none;
  font-size: .9rem; cursor: pointer; color: #fff; background: var(--accent);
}
.call-btn-accept { background: var(--green); }
.call-btn-end { background: var(--red); }
.call-btn-mute { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); }
.call-btn-muted { background: var(--red); color: #fff; border-color: var(--red); }
.call-stats { font-size: .7rem; color: var(--text-secondary); margin: -12px 0 14px; min-height: 1em; font-variant-numeric: tabular-nums; }

/* (5) Прочитать позже */
.rl-item {
  display: flex; flex-direction: column; gap: 2px; position: relative;
  padding: 10px 40px 10px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; border-radius: var(--radius-sm);
}
.rl-item:hover { background: rgba(82,136,193,.08); }
.rl-text { font-size: .88rem; }
.rl-meta { font-size: .72rem; color: var(--text-secondary); }
.rl-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* (6) Перевод */
.msg-translation {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: .85rem; color: var(--text-secondary);
}
.msg-translation-label { font-weight: 600; font-size: .72rem; }

/* (10) Просмотры */
.msg-views { font-size: .68rem; color: var(--text-secondary); margin-right: 4px; }

/* (1) Расшифровка ГС */
.voice-aa { font-weight: 700; }
.voice-transcript {
  margin-top: 6px; padding: 6px 10px; font-size: .85rem;
  background: rgba(82,136,193,.08); border-radius: var(--radius-sm);
  color: var(--text-secondary); max-width: 280px;
}

/* (7/11/8) Настройки чата */
.chat-setting-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 12px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer; color: var(--text-primary); font-size: .88rem;
}
.chat-setting-row:hover { background: rgba(82,136,193,.08); }
.chat-setting-val { color: var(--accent); font-weight: 600; font-size: .82rem; }

/* (20) Медиа секция */
.media-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.media-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.media-item {
  padding: 6px 10px; background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .8rem; color: var(--text-primary);
  cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-item-img { padding: 0; width: 72px; height: 72px; overflow: hidden; }
.media-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* (9) Права */
.perm-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: .9rem;
}
.perm-row input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Поле ввода в модалке-prompt */
.prompt-input {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: .95rem; outline: none;
}
.prompt-input:focus { border-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Context menu ──────────────────────────────────── */
.ctx-menu { position: fixed; background: var(--hdr-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; z-index: 200; box-shadow: var(--shadow-2); min-width: 160px; }
.ctx-item { display: block; width: 100%; text-align: left; padding: 8px 16px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: .9rem; border-radius: var(--radius-sm); transition: background .1s; }
.ctx-item:hover { background: rgba(255,255,255,.08); }
.ctx-danger { color: #e06c75; }
.reaction-palette { display: flex; gap: 8px; padding: 8px 10px; }
.reaction-palette-btn { background: transparent; border: none; font-size: 1.4rem; cursor: pointer; border-radius: var(--radius-sm); padding: 3px; transition: transform .1s; }
.reaction-palette-btn:hover { transform: scale(1.25); }

/* ── Emoji picker ──────────────────────────────────── */
.emoji-picker { position: fixed; bottom: 64px; left: 48px; width: 320px; height: 360px; background: var(--hdr-bg); border: 1px solid var(--border); border-radius: var(--radius-md); z-index: 150; box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; }
.emoji-picker.hidden { display: none; }
.ep-search { padding: 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ep-search input { width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .88rem; outline: none; }
.ep-search input:focus { border-color: var(--accent); }
.ep-tabs { display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.ep-tab { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ep-tab:hover, .ep-tab.active { color: var(--accent); background: rgba(82,136,193,.12); }
.ep-scroll { flex: 1; overflow-y: auto; padding: 8px; }
.ep-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 8px 4px 4px; }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ep-emoji { background: transparent; border: none; font-size: 1.35rem; cursor: pointer; border-radius: var(--radius-sm); padding: 4px; text-align: center; line-height: 1.3; transition: background .1s; }
.ep-emoji:hover { background: rgba(255,255,255,.1); }
.ep-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* ── Modals ────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 300; }
.modal-box { background: var(--hdr-bg); border: 1px solid var(--border); border-radius: var(--radius-md); width: min(90vw, 380px); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.modal-header-actions { display: flex; align-items: center; gap: 4px; }

.modal-body { padding: 16px; overflow-y: auto; }
.modal-title { padding: 16px; font-size: .95rem; }
.modal-btns { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.modal-btns button { padding: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; transition: background .1s; }
.modal-btns button:hover { background: rgba(255,255,255,.12); }
.modal-btns .btn-danger, .btn-danger { color: #e06c75; border-color: rgba(224,108,117,.3); }
.modal-list { list-style: none; overflow-y: auto; max-height: 50vh; }
.modal-list-item { padding: 12px 16px; cursor: pointer; font-size: .92rem; transition: background .1s; }
.modal-list-item:hover { background: rgba(255,255,255,.06); }

/* ── Settings ──────────────────────────────────────── */

.settings-logout { width: 100%; padding: 10px; background: rgba(224,108,117,.1); border: 1px solid rgba(224,108,117,.3); border-radius: var(--radius-sm); color: #e06c75; cursor: pointer; font-size: .95rem; margin-top: 12px; }

/* Установка на устройство */
.settings-install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.settings-install-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--accent-rgb),.22), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.settings-install-card-main {
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.settings-install-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.settings-install-subtitle {
  margin: 8px 0 14px;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.4;
}
.settings-install-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--accent-rgb),.5);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.32), rgba(var(--accent-rgb),.18));
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.settings-install-btn:hover:not(:disabled):not(.disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.settings-install-btn:disabled,
.settings-install-btn.disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
  transform: none;
  filter: none;
}
.settings-install-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.35;
}

/* ── Toast ─────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 18px; border-radius: var(--radius-sm); z-index: 400; font-size: .9rem; pointer-events: none; }
.toast-error { background: #c0392b; }

/* ── Icon buttons ──────────────────────────────────── */
.icon-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 6px; border-radius: var(--radius-sm); transition: color .15s; }
.icon-btn:hover { color: var(--text); }

/* ── Scrollbars ────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Mobile (<900px) ───────────────────────────────── */
@media (max-width: 900px) {
  #sidebar { width: 100%; min-width: unset; border-right: none; }
  #sidebar-resize-handle { display: none; }
  #chat-main { position: absolute; inset: 0; display: none; background: var(--chat-bg); }
  .mobile-chat-open #sidebar { display: none; }
  .mobile-chat-open #chat-main { display: flex; }
  #btn-back { display: flex; }
  #no-chat-placeholder { display: none; }
  #chat-container.hidden { display: flex; }
  .msg-content { max-width: min(80vw, 480px); }
  #messages { padding: 8px 12px; }

  /* Компактный бар ввода на мобильных */
  #input-area { padding: 4px 6px; gap: 2px; min-height: 42px; }
  .input-btn { width: 34px; height: 34px; font-size: 1.05rem; }
  #message-input { padding: 6px 12px; font-size: 16px; } /* 16px — чтобы iOS не зумил при фокусе */
}
@media (min-width: 901px) {
  #btn-back { display: none; }
  #no-chat-placeholder { display: flex; }
}

/* Safe area insets (Capacitor/notch) */
@supports (padding: max(0px)) {
  #input-area { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #sidebar { padding-bottom: env(safe-area-inset-bottom); }
}
/* ───────────────────── Этап 7B добавки ───────────────────── */

/* Sidebar header — поиск + бургер */
#sidebar-header { padding: 8px 12px; }
#search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
#search-input { width: 100%; padding: 7px 30px 7px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); font-size: .88rem; outline: none; }
#search-input:focus { border-color: var(--accent); }
#search-clear { position: absolute; right: 4px; font-size: .9rem; }

.search-group-label { padding: 12px 16px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); list-style: none; }
.search-empty { padding: 28px 14px; text-align: center; color: var(--text-muted); font-size: .85rem; list-style: none; }
.search-user-item { opacity: .95; }

/* Пустое состояние */
.empty-state { padding: 40px 20px; text-align: center; color: var(--text-muted); }
.empty-icon { font-size: 3rem; opacity: .4; margin-bottom: 8px; }

/* Бургер-меню */
/* Выезжающее меню (drawer), стиль iOS — без стекла */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
  animation: fade-in .2s ease;
}
.drawer-overlay.hidden { display: none; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 301;
  width: min(300px, 84vw);
  background: var(--hdr-bg);
  display: flex; flex-direction: column;
  transform: translateX(-102%);
  transition: transform .26s cubic-bezier(.32,.72,.28,1);
  box-shadow: 4px 0 24px rgba(0,0,0,.25);
  border-top-right-radius: 16px; border-bottom-right-radius: 16px;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 18px 16px;
  background: none; border: none; cursor: pointer;
  text-align: left; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.drawer-header:active { background: rgba(255,255,255,.04); }
.drawer-avatar-slot .avatar { width: 56px; height: 56px; font-size: 1.4rem; }
.drawer-user { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-name { font-weight: 600; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-username { color: var(--text-muted); font-size: .85rem; }

.drawer-items { padding: 8px; display: flex; flex-direction: column; flex: 1; }
.drawer-item {
  display: flex; align-items: center; gap: 16px;
  min-height: 44px; padding: 0 12px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: .96rem;
  border-radius: 10px;
  transition: background .12s ease;
  text-align: left; width: 100%;
}
.drawer-item:hover  { background: rgba(255,255,255,.05); }
.drawer-item:active { background: rgba(255,255,255,.09); }
.drawer-item .icon { color: var(--text-muted); flex-shrink: 0; }
.drawer-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.drawer-toggle-row { cursor: default; }
.drawer-toggle-row .ios-switch { margin-left: auto; }

.drawer-footer { padding: 12px 18px; color: var(--text-muted); font-size: .78rem; border-top: 1px solid var(--border); }

/* iOS-тумблер */
.ios-switch { position: relative; display: inline-block; width: 46px; height: 28px; flex-shrink: 0; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-knob {
  position: absolute; inset: 0; border-radius: 14px;
  background: rgba(120,120,128,.32);
  transition: background .2s ease; cursor: pointer;
}
.ios-knob::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.32,.72,.28,1);
}
.ios-switch input:checked + .ios-knob { background: #34c759; }
.ios-switch input:checked + .ios-knob::before { transform: translateX(18px); }

/* Профиль */
#profile-body { text-align: center; }
/* Профиль: iOS-ячейки */
.profile-avatar { margin: 0 auto 16px; }
#profile-body .profile-avatar { width: 96px; height: 96px; font-size: 2.2rem; }
/* Свой профиль — крупнее и с акцентным кольцом, как в хороших мессенджерах */
#profile-body .profile-avatar.profile-avatar-own {
  width: 120px; height: 120px; font-size: 2.8rem;
  box-shadow: 0 0 0 3px var(--accent), 0 6px 20px rgba(0,0,0,.35);
}
#profile-body { animation: rec-pop .2s cubic-bezier(.34,1.4,.64,1); }
.profile-cells { width: 100%; margin: 12px 0 4px; background: rgba(255,255,255,.04); border-radius: 12px; overflow: hidden; }
.profile-cell {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 6px 14px;
  background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left; font-size: .92rem;
  transition: background .12s ease;
}
.profile-cell:hover { background: rgba(255,255,255,.05); }
.profile-cell + .profile-cell { border-top: 1px solid var(--border); }
.profile-cell-label { color: var(--text-muted); font-size: .78rem; display: block; }
.profile-cell-value { display: block; }
.profile-cell .icon { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
.profile-name { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-nick { color: var(--text-muted); font-size: .85rem; margin-top: 2px; }
.profile-status { color: var(--accent); font-size: .82rem; margin-top: 4px; }
.profile-section-label { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-top: 16px; padding-bottom: 4px; }
.profile-bio { text-align: left; font-size: .9rem; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; background: rgba(255,255,255,.04); border-radius: var(--radius-sm); }
.profile-commands { display: flex; flex-direction: column; gap: 8px; }
.profile-cmd-row { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; background: rgba(255,255,255,.04); border-radius: var(--radius-sm); }
.profile-cmd { color: var(--accent); font-family: ui-monospace, monospace; font-size: .85rem; flex-shrink: 0; }
.profile-cmd-desc { color: var(--text-muted); font-size: .82rem; text-align: left; }
/* Ряд круглых кнопок-действий в профиле (Написать/Звонок), в стиле Telegram */
.profile-actions { display: flex; justify-content: center; gap: 22px; margin: 18px 0 4px; }
.profile-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; color: var(--accent);
  font-size: .76rem; min-width: 56px;
}
.profile-action-circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.16); color: var(--accent);
  transition: background .15s, transform .15s;
}
.profile-action-btn:hover .profile-action-circle { background: rgba(var(--accent-rgb),.28); transform: scale(1.05); }
.profile-action-btn:active .profile-action-circle { transform: scale(.96); }
.profile-action-label { color: var(--text); }
#btn-profile-edit { color: var(--accent); }

/* Настройки: строки разделов */
.settings-section-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: .95rem; border-radius: var(--radius-sm); text-align: left; transition: background .1s; }
.settings-section-row:hover { background: rgba(255,255,255,.05); }
.settings-row-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.settings-row-arrow { margin-left: auto; color: var(--text-muted); font-size: 1.2rem; }
.settings-subsection { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 14px 0 8px; }
.settings-subsection:first-child { padding-top: 0; }
.settings-btn-group { display: flex; gap: 8px; margin-bottom: 8px; }
.settings-choice { flex: 1; padding: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: .9rem; }
.settings-choice.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Строки настроек: один паттерн на все разделы */
.settings-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: rgba(255,255,255,.03);
}
.theme-light .settings-group { background: #fff; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row:hover { background: rgba(255,255,255,.05); }
.settings-row-label { flex: 1; min-width: 0; }
.settings-row-check { display: flex; align-items: center; color: var(--accent); flex-shrink: 0; }

/* Переключатель */
.settings-row-toggle { cursor: pointer; }
.settings-switch {
  appearance: none; -webkit-appearance: none;
  position: relative; flex-shrink: 0;
  width: 40px; height: 24px; border-radius: 12px;
  background: rgba(128,128,128,.4);
  cursor: pointer; transition: background .16s;
}
.settings-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .16s;
}
.settings-switch:checked { background: var(--accent); }
.settings-switch:checked::after { transform: translateX(16px); }
.settings-switch:disabled { opacity: .45; cursor: default; }

/* Выбор темы: плитки с мини-превью чата */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.theme-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--side-bg);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, transform .1s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.active { border-color: var(--accent); }
/* Превью рисуется цветами своей темы, а не активной */
.theme-preview {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  height: 58px; padding: 8px;
  border-radius: 8px;
  background: var(--c-bg);
}
.theme-bubble { display: block; height: 11px; border-radius: 6px; }
.theme-bubble-other { width: 62%; background: var(--c-other); }
.theme-bubble-mine  { width: 78%; margin-left: auto; background: var(--c-mine); }
.theme-card-name {
  font-size: .8rem; color: var(--text); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-avatar-row { display: flex; justify-content: center; padding: 16px 0; }
.settings-field { margin-bottom: 14px; }
.settings-field-label { font-size: .78rem; color: var(--text-muted); margin-bottom: 4px; }
.settings-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.settings-field-input { flex: 1; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; outline: none; font-family: inherit; resize: none; }
.settings-field-input:focus { border-color: var(--accent); }
.settings-field-counter { font-size: .72rem; color: var(--text-muted); min-width: 44px; text-align: right; }
.settings-field-save { padding: 6px 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: .82rem; cursor: pointer; }
.settings-field-save:disabled { opacity: .5; }
.settings-hint-block { padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: var(--radius-sm); color: var(--text-muted); font-size: .85rem; margin: 8px 0; }
.settings-uname-at { color: var(--text-muted); font-size: 1rem; padding: 0 2px 0 6px; align-self: center; }
.settings-uname-hint { font-size: .8rem; color: var(--text-muted); margin: 4px 0 6px; min-height: 1em; }
.settings-uname-hint.ok  { color: #4fae4e; }
.settings-uname-hint.err { color: #e05a5a; }

/* ── Settings > Profile redesign (Telegram-style) ──────────────────────────── */
.sp-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 20px;
  margin: -16px -16px 16px;
  background: linear-gradient(170deg, rgba(var(--accent-rgb),.22) 0%, transparent 72%);
  border-bottom: 1px solid var(--border);
}
.theme-light .sp-header {
  background: linear-gradient(170deg, rgba(42,171,238,.15) 0%, transparent 72%);
}
.sp-av-wrap {
  position: relative; width: 96px; height: 96px; margin-bottom: 12px;
}
.sp-av-wrap .avatar {
  width: 96px !important; height: 96px !important; font-size: 2.4rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.sp-cam-btn {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px;
  background: var(--accent); color: #fff;
  border: 2px solid var(--hdr-bg); border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .15s, opacity .15s;
}
.sp-cam-btn:hover { transform: scale(1.12); opacity: .9; }
.sp-name {
  font-size: 1.18rem; font-weight: 700; text-align: center; line-height: 1.3;
}
.sp-sub {
  font-size: .8rem; color: var(--accent); margin-top: 4px; text-align: center; opacity: .9;
}
.sp-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.theme-light .sp-card {
  background: #fff;
}
.sp-card-row {
  padding: 10px 16px 8px;
}
.sp-card-row + .sp-card-row {
  border-top: 1px solid var(--border);
}
.sp-card-label {
  font-size: .72rem; color: var(--accent); font-weight: 500; margin-bottom: 3px;
}
.sp-card-input-wrap {
  display: flex; align-items: flex-end; gap: 6px;
}
.sp-card-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .95rem; font-family: inherit;
  padding: 0; line-height: 1.5; resize: none; min-height: 22px;
}
.sp-card-input::placeholder { color: var(--text-muted); }
.sp-card-counter {
  font-size: .68rem; color: var(--text-muted); min-width: 40px;
  text-align: right; white-space: nowrap; padding-bottom: 2px;
}
.sp-card-uname-at {
  font-size: .95rem; color: var(--text-muted); padding-right: 1px;
}
.sp-uname-hint {
  font-size: .78rem; color: var(--text-muted);
  padding: 0 16px 10px; min-height: 1.1em; line-height: 1.4;
}
.sp-uname-hint.ok  { color: var(--green); }
.sp-uname-hint.err { color: var(--red); }
.sp-save-btn {
  display: block; width: calc(100% - 32px); margin: 6px 16px 14px;
  padding: 11px; background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-size: .95rem; font-weight: 500;
  cursor: pointer; transition: opacity .15s, transform .1s;
  letter-spacing: .01em;
}
.sp-save-btn:hover { opacity: .88; }
.sp-save-btn:active { transform: scale(.98); }
.sp-save-btn:disabled { opacity: .4; cursor: default; transform: none; }
.sp-hint {
  text-align: center; font-size: .74rem; color: var(--text-muted);
  padding: 2px 0 8px; line-height: 1.5;
}

/* Контакты */
.modal-list .contact-item { display: flex; align-items: center; gap: 12px; }
.contact-info { flex: 1; }
.contact-name { font-weight: 500; font-size: .93rem; display: flex; align-items: center; gap: 4px; }
.contact-status { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }

/* Inline-code в ботовых сообщениях */
.inline-code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .85rem; padding: 1px 6px; background: rgba(0,0,0,.35); border-radius: 4px; cursor: pointer; transition: background .1s; user-select: all; word-break: break-all; }
.inline-code:hover { background: rgba(0,0,0,.5); }
.theme-light .inline-code { background: rgba(0,0,0,.08); }
.theme-light .inline-code:hover { background: rgba(0,0,0,.15); }

/* Размер шрифта сообщений */
.msg-bubble { font-size: var(--msg-font, 15px); }

/* Cmd-hints (подсказки команд бота) */
.cmd-hints { max-height: 200px; overflow-y: auto; background: var(--hdr-bg); border-top: 1px solid var(--border); flex-shrink: 0; }
.cmd-hint { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 14px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: .88rem; text-align: left; }
.cmd-hint:hover { background: rgba(255,255,255,.06); }
.cmd-hint-name { color: var(--accent); font-family: ui-monospace, monospace; flex-shrink: 0; }
.cmd-hint-desc { color: var(--text-muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Модалка кнопка назад */
.modal-header { gap: 8px; }