/* ══════════════════════════════════════════════════
   messenger.css — Мессенджер ИАС ВУС (Telegram-style)
   Базовые переменные из /RIBALKA/admin-monitor.css
   ══════════════════════════════════════════════════ */

/* ── Список контактов ── */
.contact-list { flex:1; overflow-y:auto; padding:6px 0; }
.contact-item {
  display:flex; align-items:center; padding:10px 14px; margin:2px 8px;
  border-radius:14px; cursor:pointer; transition:all .2s ease; gap:12px;
  position:relative;
}
.contact-item:hover { background:var(--bg-hover); }
.contact-item.active { background:var(--bg-active); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.contact-avatar {
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:700; flex-shrink:0; color:#fff;
  position:relative;
}
.contact-avatar .online-dot {
  position:absolute; bottom:1px; right:1px;
  width:13px; height:13px; border-radius:50%;
  background:#4fae4e; border:2px solid var(--bg-sidebar);
}
.contact-body { flex:1; min-width:0; }
.contact-name { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-item.active .contact-name { color:#fff; }
.contact-preview {
  font-size:.72rem; color:var(--text-sec); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; margin-top:2px; line-height:1.3;
}
.contact-preview .preview-author { color:var(--accent); font-weight:600; }
[data-theme="dark"] .contact-preview .preview-author { color:#fff; }
.contact-item.active .contact-preview { color:rgba(255,255,255,.7); }
.contact-item.active .contact-preview .preview-author { color:rgba(255,255,255,.85); }
.contact-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.contact-time { font-size:.6rem; color:var(--text-muted); white-space:nowrap; }
.contact-item.active .contact-time { color:rgba(255,255,255,.5); }
.contact-unread {
  background:var(--accent); color:#fff; font-size:.6rem; font-weight:700;
  min-width:20px; height:20px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 6px;
  box-shadow:0 1px 4px rgba(107,184,245,.3);
}
.contact-item.active .contact-unread { background:rgba(255,255,255,.25); }
.contact-typing { color:var(--green); font-style:italic; }
.contact-pin { font-size:.55rem; color:var(--text-muted); margin-left:4px; }

/* ── Поиск ── */
.search-box { margin:8px 12px; position:relative; display:flex; align-items:center; gap:6px; }
.search-hamburger {
  width:38px; height:38px; border-radius:50%; border:none;
  background:none; color:var(--text-sec); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; transition:all .2s;
}
.search-hamburger:hover { background:var(--bg-hover); color:var(--text); }
.search-hamburger.back i { transform:rotate(0deg); }
.search-box .search-wrap { position:relative; flex:1; }
.search-box input {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:22px; padding:10px 18px 10px 36px; color:var(--text);
  font-family:inherit; font-size:.8rem; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(102,126,234,.15); }
.search-box input::placeholder { color:var(--text-muted); }
.search-glass { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:.75rem; color:var(--text-muted); pointer-events:none; }

/* ── Панель результатов поиска (Telegram-style) ── */
.search-results-panel {
  display:none; flex-direction:column; flex:1; overflow:hidden;
}
.search-results-panel.visible { display:flex; }
.search-results-panel.visible ~ .contact-list { display:none; }
.search-tabs {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  padding:0 12px; flex-shrink:0;
}
.search-tab {
  flex:1; padding:10px 0; border:none; background:none;
  color:var(--text-muted); font-size:.78rem; font-weight:600;
  cursor:pointer; position:relative; transition:color .15s;
  font-family:inherit;
}
.search-tab:hover { color:var(--text-sec); }
.search-tab.active { color:var(--accent); }
.search-tab.active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%;
  height:2px; background:var(--accent); border-radius:1px;
}
#search-results-content { flex:1; overflow-y:auto; }
.srp-section-title {
  font-size:.65rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em;
  padding:12px 16px 4px; display:flex; align-items:center; justify-content:space-between;
}
.srp-section-title .srp-clear {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.8rem; padding:2px 6px; border-radius:50%; transition:all .15s;
}
.srp-section-title .srp-clear:hover { color:var(--text); background:var(--bg-hover); }
.srp-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; cursor:pointer; transition:background .12s;
}
.srp-item:hover { background:var(--bg-hover); }
.srp-ava {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.75rem; overflow:hidden; position:relative;
}
.srp-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.srp-online {
  position:absolute; bottom:0; right:0; width:10px; height:10px;
  border-radius:50%; background:var(--green); border:2px solid var(--bg-sidebar);
}
.srp-info { flex:1; min-width:0; }
.srp-name { font-size:.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srp-sub { font-size:.7rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srp-empty { text-align:center; padding:24px 16px; color:var(--text-muted); font-size:.8rem; }

/* ── Sidebar header buttons ── */
.sidebar-actions { display:flex; gap:8px; }
.sidebar-actions button {
  width:44px !important; height:44px !important; border-radius:50%; border:none;
  background:none; color:var(--text-sec); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem !important; transition:all .25s ease;
}
.sidebar-actions button:hover { background:var(--bg-hover); color:var(--accent); transform:scale(1.08); }
@media(max-width:1024px){
  .sidebar-actions button { width:44px !important; height:44px !important; font-size:1.4rem !important; }
  .ch-btn { width:44px !important; height:44px !important; font-size:1.35rem !important; }
}

/* ══════ CHAT MESSAGES ══════ */
.chat-messages {
  flex:1 1 0; overflow-y:scroll; overflow-x:hidden;
  position:relative; min-height:0;
  -webkit-overflow-scrolling:touch;
}
.chat-inner {
  display:flex; flex-direction:column; gap:2px;
  padding:16px 6%;
  min-height:100%;
}
.chat-inner > :first-child {
  margin-top:auto;
}
@media(max-width:900px){ .chat-inner { padding:8px 4px; } }

/* ── Дата-разделитель ── */
.date-sep {
  text-align:center; padding:8px 0; position:relative;
}
.date-sep span {
  display:inline-block; background:rgba(255,255,255,.06); color:var(--text-muted);
  font-size:.65rem; font-weight:500; padding:5px 16px; border-radius:20px;
  letter-spacing:.03em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .date-sep span {
  background:rgba(0,0,0,.08); color:var(--text-sec);
}

/* ── Pinned bar (плавный) ── */
.pinned-bar {
  display:flex; align-items:center; gap:10px;
  padding:0 16px; background:var(--bg-sidebar);
  border-bottom:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease, border-color .2s ease;
  cursor:pointer;
}
.pinned-bar.visible { max-height:50px; padding-top:8px; padding-bottom:8px; opacity:1; border-bottom-color:var(--border); }

/* ── Upload progress (плавный) ── */
.upload-progress {
  display:flex; align-items:center; gap:10px;
  padding:0 16px; background:var(--bg-sidebar);
  border-top:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease;
}
.upload-progress.visible { max-height:50px; padding-top:8px; padding-bottom:8px; opacity:1; border-top-color:var(--border); }

/* ── Search msg bar (плавный) ── */
.search-msg-bar {
  display:flex; align-items:center; gap:8px;
  padding:0 16px; background:var(--bg-sidebar);
  border-bottom:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease;
}
.search-msg-bar.visible { max-height:50px; padding-top:8px; padding-bottom:8px; opacity:1; border-bottom-color:var(--border); }

/* ── Msg-row: выравнивание лево/право ── */
.msg-row { display:flex; }
.msg-row.in { justify-content:flex-start; }
.msg-row.out { justify-content:flex-end; }

/* ── Сообщение (Minimal Premium) ── */
.msg {
  max-width:70%; padding:8px 12px 5px; border-radius:18px;
  font-size:.82rem; line-height:1.5; position:relative;
  word-wrap:break-word; overflow-wrap:break-word;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  box-shadow:var(--shadow-msg);
  transition:transform .15s ease, box-shadow .15s ease;
}
/* .msg:hover — без transform чтобы не скакал layout */
@keyframes msgAppear {
  0% { opacity:0; transform:translateY(16px) scale(.95); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.msg.sending {
  animation:msgAppear .4s cubic-bezier(.16,1,.3,1);
}
/* Группировка сообщений: сжатые отступы между сообщениями одного автора */
.msg.grouped { margin-top:1px; }
.msg-in.grouped { border-top-left-radius:4px; }
.msg-out.grouped { border-top-right-radius:4px; }
/* Скрываем аватарку под сгруппированной строкой */
.msg-row.grouped .msg-ava { visibility:hidden; }
/* Последнее в группе — обычное скругление */
.msg-in.group-last { border-bottom-left-radius:14px; }
.msg-out.group-last { border-bottom-right-radius:14px; }

/* Прочитано в групповых: кол-во */
.msg-read-count { font-size:.5rem; color:rgba(255,255,255,.4); margin-left:2px; }
.msg-read-count.read { color:#5eb5f7; }
.msg-out {
  background:var(--gradient-out);
  border-bottom-right-radius:4px; color:#fff;
}
[data-theme="light"] .msg-out {
  background:var(--gradient-out); color:#1a1a1a;
}
[data-theme="light"] .msg-out .msg-time { color:rgba(0,0,0,.4); }
[data-theme="light"] .msg-out .msg-edited { color:rgba(0,0,0,.35); }
[data-theme="light"] .msg-out .msg-check { color:rgba(0,0,0,.35); }
[data-theme="light"] .msg-out .msg-check.read { color:#2563eb; }
[data-theme="light"] .msg-out .msg-file-name a { color:#1a1a1a; }
[data-theme="light"] .msg-out .msg-file-size { color:rgba(0,0,0,.45); }
[data-theme="light"] .msg-out .msg-file-icon { background:rgba(0,0,0,.08); color:#2563eb; }
[data-theme="light"] .msg-out .voice-bar { background:rgba(0,0,0,.12); }
[data-theme="light"] .msg-out .voice-bar.played { background:#1a1a1a; }
[data-theme="light"] .msg-out .voice-dur { color:rgba(0,0,0,.45); }
[data-theme="light"] .msg-out .voice-speed { background:rgba(0,0,0,.08); color:rgba(0,0,0,.5); }
[data-theme="light"] .msg-out .msg-forward { color:#2563eb; }
[data-theme="light"] .msg-out .msg-phone, [data-theme="light"] .msg-out .msg-address { color:#2563eb; border-bottom-color:rgba(37,99,235,.4); }
[data-theme="light"] .msg-out .msg-read-count { color:rgba(0,0,0,.35); }
[data-theme="light"] .msg-out .msg-read-count.read { color:#2563eb; }
[data-theme="light"] .msg-out .reaction-chip { background:rgba(0,0,0,.06); }
[data-theme="light"] .msg-out .reaction-chip:hover { background:rgba(0,0,0,.1); }
[data-theme="light"] .msg-out .reaction-chip.mine { background:rgba(37,99,235,.12); }
.msg-in {
  background:var(--bg-bubble);
  border-bottom-left-radius:4px; color:var(--text);
}

.msg-author {
  font-size:.7rem; font-weight:700; margin-bottom:2px;
  color:var(--accent);
}
.msg-out .msg-author { color:rgba(255,255,255,.7); }

.msg-body { white-space:pre-wrap; }
.msg-body a { color:inherit; text-decoration:underline; }
/* Twemoji: фиксированный размер чтобы замена текст→img не меняла layout */
.msg-body img.emoji, .msg img.emoji { width:1.2em; height:1.2em; vertical-align:-.2em; display:inline; }

/* ── Reply preview ── */
.msg-reply {
  display:flex; gap:8px; background:rgba(255,255,255,.12);
  border-left:3px solid var(--accent); border-radius:6px;
  padding:4px 8px; margin-bottom:4px; cursor:pointer;
  font-size:.72rem; line-height:1.3;
}
.msg-in .msg-reply { background:rgba(0,0,0,.05); }
[data-theme="light"] .msg-in .msg-reply { background:rgba(0,0,0,.08); }
[data-theme="light"] .msg-out .msg-reply { background:rgba(0,0,0,.06); border-left-color:#2563eb; }
.msg-reply-author { font-weight:700; color:var(--accent); white-space:nowrap; }
.msg-out .msg-reply-author { color:rgba(255,255,255,.9); }
.msg-reply-body { color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-out .msg-reply-body { color:rgba(255,255,255,.7); }
[data-theme="light"] .msg-out .msg-reply-author { color:#2563eb; }
[data-theme="light"] .msg-out .msg-reply-body { color:rgba(0,0,0,.55); }

/* ── File attachment ── */
.msg-file {
  display:flex; align-items:center; gap:8px; padding:5px 0 2px;
}
.msg-file-icon {
  width:36px; height:36px; border-radius:8px;
  background:rgba(255,255,255,.12); display:flex;
  align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0; color:#fff;
}
.msg-in .msg-file-icon { background:rgba(0,0,0,.06); color:var(--accent); }
.msg-file-info { min-width:0; }
.msg-file-name {
  font-size:.75rem; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:200px;
}
.msg-file-name a { color:#fff; text-decoration:none; }
.msg-in .msg-file-name a { color:var(--text); }
.msg-file-name a:hover { text-decoration:underline; }
.msg-file-size { font-size:.6rem; color:rgba(255,255,255,.5); }
.msg-in .msg-file-size { color:var(--text-muted); }

/* ── Image preview (Telegram-style) ── */
.msg-image {
  margin:0; border-radius:0; overflow:hidden; cursor:pointer;
  position:relative; line-height:0;
}
.msg-image img {
  display:block; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .25s;
}
.msg-image img.loaded { opacity:1; }
/* Время на фото */
.msg-image-meta {
  position:absolute; bottom:4px; right:4px;
  display:flex; align-items:center; gap:3px;
  background:rgba(0,0,0,.6); border-radius:8px;
  padding:2px 6px; line-height:1;
  pointer-events:none;
}
.msg-image-meta .msg-time { color:#fff; font-size:.58rem; text-shadow:none; }
.msg-image-meta .msg-edited { color:rgba(255,255,255,.7); font-size:.52rem; }
.msg-image-meta .msg-check { color:rgba(255,255,255,.8); font-size:.52rem; }
.msg-image-meta .msg-check.read { color:#5eb5f7; }
/* Лоадер фото */
.msg-image-loader {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.03);
  border-radius:inherit;
}
.msg-image-loader .spinner { width:28px; height:28px; border-width:2px; }
/* Тонкая рамка: сообщение = только картинка */
.msg.msg-photo-only {
  padding:2px !important; max-width:fit-content; background:transparent !important;
  box-shadow:none !important;
}
.msg.msg-photo-only .msg-image { border-radius:14px; overflow:hidden; }
.msg.msg-photo-only .msg-image img { border-radius:0; }
/* Картинка + текст */
.msg:has(.msg-image):not(.msg-photo-only) .msg-body { padding:4px 0 0; }
.msg:has(.msg-image):not(.msg-photo-only) > .msg-meta { padding:0; }

/* ── Meta (время, галочки) ── */
.msg-meta {
  display:flex; align-items:center; justify-content:flex-end;
  gap:4px; margin-top:1px;
}
.msg-time { font-size:.58rem; color:rgba(255,255,255,.45); }
.msg-in .msg-time { color:var(--text-muted); }
.msg-edited { font-size:.55rem; color:rgba(255,255,255,.3); font-style:italic; }
.msg-in .msg-edited { color:var(--text-muted); }
.msg-check { font-size:.55rem; color:rgba(255,255,255,.45); }
.msg-check.read { color:#5eb5f7; }
.msg-check.sending { color:rgba(255,255,255,.3); }
.msg-check.failed { color:#e45e5e; }

/* ── Системное сообщение ── */
.msg-system {
  align-self:center; background:rgba(255,255,255,.06);
  color:var(--text-muted); font-size:.7rem; padding:4px 14px;
  border-radius:12px; text-align:center;
}
[data-theme="light"] .msg-system { background:rgba(0,0,0,.06); }

/* ── Скроллим к новым ── */
.scroll-down-btn {
  position:absolute; bottom:16px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-bubble); border:1px solid var(--border);
  color:var(--text-sec); cursor:pointer; font-size:.9rem;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); z-index:5; transition:all .15s;
}
.scroll-down-btn:hover { color:var(--accent); }
.scroll-down-btn.visible { display:flex; }
.scroll-down-btn .badge {
  position:absolute; top:-6px; right:-6px;
  background:var(--accent); color:#fff; font-size:.55rem; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ══════ INPUT AREA (Telegram-style) ══════ */
.chat-input-area {
  display:flex; align-items:flex-end; gap:6px;
  padding:8px 6%; background:var(--bg-sidebar);
  border-top:1px solid var(--border); position:relative;
  flex-shrink:0;
}
@media(max-width:900px){ .chat-input-area { padding:6px 8px calc(16px + env(safe-area-inset-bottom, 0px)); } }

.input-icon-btn {
  width:38px; height:38px; border:none; background:none;
  color:var(--text-muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:1.1rem;
  border-radius:50%; transition:color .15s; flex-shrink:0;
  margin-bottom:2px;
}
.input-icon-btn:hover { color:var(--text); }

.input-wrap {
  flex:1; position:relative; display:flex; align-items:flex-end;
}
.input-emoji-btn {
  position:absolute; left:10px; bottom:8px; z-index:2;
  width:26px; height:26px; border:none; background:none;
  color:var(--text-muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;
  border-radius:50%; transition:color .15s;
}
.input-emoji-btn:hover { color:var(--text); }
.input-emoji-btn svg { width:22px; height:22px; }

/* ── Reply bar (плавная анимация) ── */
.reply-bar {
  display:flex; align-items:center; gap:10px;
  padding:0 6%; background:var(--bg-sidebar);
  border-top:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease, border-color .2s ease;
}
@media(max-width:900px){ .reply-bar { padding:0 10px; } .reply-bar.visible { padding:8px 10px; } }
.reply-bar.visible { max-height:60px; padding-top:8px; padding-bottom:8px; opacity:1; border-top-color:var(--border); }
.reply-bar-line {
  width:3px; height:32px; background:var(--accent); border-radius:2px; flex-shrink:0;
}
.reply-bar-content { flex:1; min-width:0; }
.reply-bar-author { font-size:.7rem; font-weight:700; color:var(--accent); }
.reply-bar-text { font-size:.72rem; color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar-close {
  width:30px; height:30px; border-radius:50%; border:none;
  background:none; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.reply-bar-close:hover { color:var(--red); }

.chat-input {
  flex:1; width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:22px; padding:10px 16px 10px 42px; color:var(--text);
  font-family:inherit; font-size:.85rem; outline:none;
  resize:none; max-height:140px; min-height:40px; line-height:1.4;
  transition:border-color .15s, height .1s ease;
}
.chat-input:focus { border-color:var(--accent); }
.chat-input::placeholder { color:var(--text-muted); }

/* Кнопка микрофон/отправка */
.voice-send-btn {
  width:42px; height:42px; border-radius:50%; border:none;
  background:#7c3aed; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; transition:all .2s; flex-shrink:0;
}
.voice-send-btn:hover { opacity:.85; }
.voice-send-btn.is-send {
  background:#16a34a;
}

/* ══════ CONTEXT MENU (Telegram-style overlay) ══════ */
.ctx-menu {
  position:fixed; z-index:1000; background:var(--bg-sidebar);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.45); min-width:180px;
  padding:6px 0; display:none;
  animation:ctxIn .15s ease;
}
@keyframes ctxIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.ctx-menu.visible { display:block; }
.ctx-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; cursor:pointer; font-size:.82rem;
  color:var(--text); transition:background .1s;
}
.ctx-item:hover { background:var(--bg-hover); }
.ctx-item i { width:16px; text-align:center; color:var(--text-sec); font-size:.85rem; }
.ctx-item.danger { color:var(--red); }
.ctx-item.danger i { color:var(--red); }
.ctx-sep { height:1px; background:var(--border); margin:4px 0; }

/* ── Telegram-style overlay backdrop ── */
.msg-overlay-backdrop {
  position:fixed; inset:0; z-index:990;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fadeIn .15s ease;
}
/* Клон сообщения над backdrop */
.msg-overlay-clone {
  position:fixed; z-index:995;
  pointer-events:none;
  transition:transform .15s ease;
}
/* Быстрые реакции над сообщением */
.msg-overlay-reactions {
  position:fixed; z-index:996;
  display:flex; gap:2px;
  background:var(--bg-sidebar); border:1px solid var(--border);
  border-radius:22px; padding:4px 6px;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  animation:ctxIn .15s ease;
}
.msg-overlay-reactions .reaction-btn {
  width:38px; height:38px; border-radius:50%; border:none;
  background:none; cursor:pointer; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s, background .12s;
}
.msg-overlay-reactions .reaction-btn:hover { background:var(--bg-hover); transform:scale(1.2); }

/* ══════ MODAL ══════ */
.modal-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center;
  animation:fadeIn .15s;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-overlay.visible { display:flex; }
.modal {
  background:var(--bg-sidebar); border-radius:14px;
  width:420px; max-width:92vw; max-height:85vh;
  display:flex; flex-direction:column;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
  animation:modalIn .2s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:.95rem; font-weight:700; }
.modal-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:none; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.modal-close:hover { color:var(--red); background:var(--bg-hover); }
.modal-body { flex:1; overflow-y:auto; padding:16px 20px; }
.modal-footer {
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 20px; border-top:1px solid var(--border);
}

/* ── Modal inputs ── */
.m-input {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; color:var(--text);
  font-family:inherit; font-size:.82rem; outline:none; margin-bottom:12px;
}
.m-input:focus { border-color:var(--accent); }
.m-input::placeholder { color:var(--text-muted); }
.m-label { font-size:.72rem; color:var(--text-sec); font-weight:600; margin-bottom:6px; display:block; }
.m-btn {
  padding:9px 22px; border-radius:10px; border:none;
  font-family:inherit; font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.m-btn-primary { background:var(--accent); color:#fff; }
.m-btn-primary:hover { opacity:.85; }
.m-btn-secondary { background:var(--bg-hover); color:var(--text-sec); }
.m-btn-secondary:hover { background:var(--border); }

/* ── User picker (в модалке) ── */
.user-pick-list { max-height:300px; overflow-y:auto; }
.user-pick-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:8px; cursor:pointer; transition:background .1s;
}
.user-pick-item:hover { background:var(--bg-hover); }
.user-pick-item.selected { background:rgba(94,181,247,.15); }
.user-pick-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0;
}
.user-pick-info { flex:1; min-width:0; }
.user-pick-name { font-size:.82rem; font-weight:600; }
.user-pick-role { font-size:.65rem; color:var(--text-muted); }
.user-pick-check {
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--border); display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
  font-size:.65rem; color:transparent; transition:all .15s;
}
.user-pick-item.selected .user-pick-check {
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* ── Selected tags ── */
.selected-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:0; }
.selected-tag {
  display:flex; align-items:center; gap:4px;
  background:rgba(94,181,247,.15); color:var(--accent);
  padding:3px 10px 3px 10px; border-radius:14px;
  font-size:.7rem; font-weight:600;
}
.selected-tag button {
  background:none; border:none; color:var(--accent); cursor:pointer;
  font-size:.75rem; padding:0 2px; opacity:.6;
}
.selected-tag button:hover { opacity:1; }

/* ── Typing indicator (фиксированная высота, не прыгает) ── */
.typing-indicator {
  font-size:.7rem; color:var(--green); font-style:italic;
  padding:0 4px; height:0; line-height:18px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  transition:height .15s ease, padding .15s ease;
}
.typing-indicator:not(:empty) { height:18px; padding:2px 4px; }
.typing-dots { display:inline; }
.typing-dots::after {
  content:''; animation:dots 1.5s infinite;
}
@keyframes dots {
  0%,20% { content:''; }
  40% { content:'.'; }
  60% { content:'..'; }
  80%,100% { content:'...'; }
}

/* ── Empty state ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:16px; color:var(--text-muted); text-align:center; padding:40px;
}
.empty-state i { font-size:3.5rem; opacity:.12; }
.empty-state h2 { font-size:1.1rem; color:var(--text); font-weight:600; }
.empty-state p { font-size:.8rem; max-width:320px; line-height:1.5; }

/* ══ Аватарка в сообщении ══ */
.msg-ava {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700; color:#fff;
}
.msg-ava img { width:100%; height:100%; object-fit:cover; }
.msg-ava-placeholder {
  width:100%; height:100%; display:flex;
  align-items:center; justify-content:center;
}
.msg-row .msg { max-width:100%; }
@media(max-width:768px){ .msg-row { max-width:100%; } }

/* ══ Аватарка в контактах (картинка) ══ */
.contact-avatar img, .ch-avatar img, .user-pick-avatar img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}

/* ══ Профиль-панель (Telegram Settings style) ══ */
.profile-drawer {
  position:absolute; left:0; top:0; bottom:0; width:100%; z-index:20;
  background:var(--bg-sidebar); transform:translateX(-100%);
  transition:transform .25s ease; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px);
}
@media(max-width:768px){ .profile-drawer { padding-top:30px; } }
.profile-drawer.open { transform:translateX(0); }
.profile-header {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.profile-header button { flex-shrink:0; }
.profile-header h3 { font-size:.95rem; font-weight:700; }
.profile-body { flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; }
.profile-ava-wrap {
  width:110px; height:110px; border-radius:50%; overflow:hidden;
  cursor:pointer; position:relative; margin-top:24px; flex-shrink:0;
}
.profile-ava-wrap #profile-ava-content {
  width:100%; height:100%;
}
.profile-ava-wrap #profile-ava-content img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.profile-ava-wrap .ava-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; color:#fff; font-size:1.2rem;
}
.profile-ava-wrap:hover .ava-overlay { opacity:1; }
.profile-ava-placeholder {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:2.5rem; font-weight:700; color:#fff;
  border-radius:50%;
}
.profile-name { font-size:1.15rem; font-weight:700; text-align:center; margin-top:14px; }
.profile-online { font-size:.75rem; color:var(--green); text-align:center; margin-top:2px; }

/* Инфо-секция профиля (строки с иконками) */
.profile-info-section {
  width:100%; padding:0; margin-top:16px;
  border-top:1px solid var(--border);
}
.profile-info-row {
  display:flex; align-items:center; gap:14px;
  padding:12px 20px;
}
.profile-info-icon {
  width:24px; text-align:center; color:var(--text-muted); font-size:.95rem; flex-shrink:0;
}
.profile-info-content { flex:1; min-width:0; }
.profile-info-value { font-size:.88rem; word-break:break-word; }
.profile-info-label { font-size:.65rem; color:var(--text-muted); margin-top:1px; }

/* Меню настроек */
.profile-menu {
  width:100%; border-top:1px solid var(--border); margin-top:4px;
}
.profile-menu-item {
  display:flex; align-items:center; gap:14px;
  padding:13px 20px; cursor:pointer; transition:background .1s;
  font-size:.88rem;
}
.profile-menu-item:hover { background:var(--bg-hover); }
.profile-menu-icon {
  width:24px; text-align:center; font-size:.95rem; flex-shrink:0;
}

/* ══════ SCROLLBAR ══════ */
.contact-list::-webkit-scrollbar, .chat-messages::-webkit-scrollbar,
.modal-body::-webkit-scrollbar, .user-pick-list::-webkit-scrollbar,
.info-drawer-body::-webkit-scrollbar {
  width:5px;
}
.contact-list::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb, .user-pick-list::-webkit-scrollbar-thumb,
.info-drawer-body::-webkit-scrollbar-thumb {
  background:#333; border-radius:3px;
}
[data-theme="light"] .contact-list::-webkit-scrollbar-thumb,
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb,
[data-theme="light"] .info-drawer-body::-webkit-scrollbar-thumb {
  background:#c0c0c0;
}
.info-drawer-body {
  scrollbar-gutter:stable;
}

/* ══════ SIDEBAR RESIZE ══════ */
.sidebar {
  position:relative; min-width:280px; max-width:600px;
}
.sidebar-resize {
  position:absolute; top:0; right:-3px; bottom:0; width:6px;
  cursor:col-resize; z-index:30;
}
.sidebar-resize:hover, .sidebar-resize.active {
  background:var(--accent); opacity:.3; border-radius:3px;
}

/* ══════ MENTION POPUP ══════ */
.mention-popup {
  display:none; position:absolute; bottom:60px; left:10%; right:10%;
  background:var(--bg-sidebar); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.3);
  max-height:200px; overflow-y:auto; z-index:60;
  animation:ctxIn .12s ease;
}
.mention-popup.visible { display:block; }
.mention-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  cursor:pointer; transition:background .1s; font-size:.82rem;
}
.mention-item:hover,.mention-item.active { background:var(--bg-hover); }
.mention-item:first-child { border-radius:10px 10px 0 0; }
.mention-item:last-child { border-radius:0 0 10px 10px; }
.mention-ava {
  width:30px; height:30px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#fff;
  font-size:.6rem; font-weight:700; flex-shrink:0;
}
.mention-name { font-weight:600; }
.mention-role { font-size:.65rem; color:var(--text-muted); margin-left:auto; }

/* Упоминания в сообщениях */
.msg-mention { color:var(--accent); font-weight:600; cursor:pointer; }
.msg-mention:hover { text-decoration:underline; }
.msg-mention.me { background:rgba(94,181,247,.15); border-radius:3px; padding:0 2px; }

/* Телефоны и адреса в сообщениях */
.msg-phone, .msg-address {
  color:var(--accent); text-decoration:none; font-weight:500;
  border-bottom:1px dashed rgba(94,181,247,.4);
  transition:border-color .15s; cursor:pointer;
}
.msg-phone:hover, .msg-address:hover {
  border-bottom-color:var(--accent); text-decoration:none;
}
.msg-out .msg-phone, .msg-out .msg-address { color:#fff; border-bottom-color:rgba(255,255,255,.3); }
.msg-out .msg-phone:hover, .msg-out .msg-address:hover { border-bottom-color:#fff; }

/* ══════ INFO DRAWER (Telegram-style right panel) ══════ */
.info-drawer {
  position:fixed; top:8px; right:8px; bottom:8px; width:360px; z-index:800;
  background:var(--bg-sidebar); border:1px solid var(--border);
  transform:translateX(calc(100% + 16px)); transition:transform .25s ease;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:-4px 0 24px rgba(0,0,0,.25);
  border-radius:16px;
}
.info-drawer.open { transform:translateX(0); }
.info-drawer-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.info-drawer-header h3 { font-size:.9rem; font-weight:700; }
.info-drawer-header .ch-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:none; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:all .15s; flex-shrink:0;
}
.info-drawer-header .ch-btn:hover { background:var(--bg-active); color:var(--text); }
.info-drawer-body { flex:1; overflow-y:auto; }

/* Аватарка профиля */
.info-ava {
  width:100px; height:100px; border-radius:50%; margin:24px auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; font-weight:700; color:#fff; overflow:hidden;
}
.info-ava img { width:100%; height:100%; object-fit:cover; }
.info-name {
  text-align:center; font-size:1.1rem; font-weight:700; padding:0 14px;
}
.info-status {
  text-align:center; font-size:.75rem; color:var(--text-sec); margin-top:2px;
}
.info-status.online { color:var(--green); }

.info-section {
  padding:8px 6px; border-top:1px solid var(--border); margin-top:12px;
}
.info-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin:2px 8px; border-radius:14px;
  transition:background .15s;
}
.info-row:hover { background:var(--bg-hover); }
.info-row-icon {
  width:22px; text-align:center; color:var(--text-muted); font-size:.9rem; flex-shrink:0;
}
.info-row-content { flex:1; min-width:0; }
.info-row-value {
  font-size:.85rem; word-break:break-word;
}
.info-row-label {
  font-size:.65rem; color:var(--text-muted); margin-top:1px;
}
.info-write-btn {
  width:calc(100% - 32px); margin:16px 16px 24px; padding:10px;
  border-radius:14px; border:none; background:var(--accent); color:#fff;
  font-family:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:opacity .15s;
}
.info-write-btn:hover { opacity:.85; }

@media(max-width:768px){
  .info-drawer { width:calc(100% - 16px); left:8px; right:8px; }
  .info-drawer-header { padding-top:max(env(safe-area-inset-top, 0px), 28px); }
}

/* ══ FILE PREVIEW BAR (плавный) ══ */
.file-preview-bar {
  display:flex; align-items:center; gap:12px;
  padding:0 6%; background:var(--bg-sidebar);
  border-top:1px solid transparent;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease, border-color .2s ease;
}
@media(max-width:900px){ .file-preview-bar { padding:0 10px; } .file-preview-bar.visible { padding:10px 10px; } }
.file-preview-bar.visible { max-height:70px; padding-top:10px; padding-bottom:10px; opacity:1; border-top-color:var(--border); }
.file-preview-icon {
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; flex-shrink:0;
}
.file-preview-icon.pdf { background:linear-gradient(135deg,#e45e5e,#dc2626); }
.file-preview-icon.img { background:linear-gradient(135deg,#4fae4e,#16a34a); }
.file-preview-icon.doc { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.file-preview-icon.xls { background:linear-gradient(135deg,#16a34a,#15803d); }
.file-preview-info { flex:1; min-width:0; }
.file-preview-name {
  font-size:.82rem; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.file-preview-size { font-size:.65rem; color:var(--text-muted); margin-top:1px; }
.file-preview-close {
  width:32px; height:32px; border-radius:50%; border:none;
  background:none; color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0; transition:all .15s;
}
.file-preview-close:hover { color:var(--red); background:var(--bg-hover); }

/* ══ PUSH HIGHLIGHT ══ */
@keyframes pushHighlight {
  0%   { background:rgba(250,204,21,.35); }
  50%  { background:rgba(250,204,21,.08); }
  100% { background:rgba(250,204,21,.35); }
}
.msg.msg-highlight {
  animation:pushHighlight 1.2s ease-in-out 3;
  border-radius:14px;
}

/* ══ MULTI-SELECT (плавный) ══ */
.select-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--accent);
  color:#fff; z-index:15;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .2s ease, padding .2s ease, opacity .15s ease;
}
.select-bar.visible { max-height:60px; padding-top:8px; padding-bottom:8px; opacity:1; }
.select-bar-left { display:flex; align-items:center; gap:10px; }
.select-bar-left .ch-btn { color:#fff; }
.select-bar-left .ch-btn:hover { background:rgba(255,255,255,.15); }
.select-bar-right { display:flex; align-items:center; gap:4px; }
.select-bar-right .ch-btn { color:#fff; }
.select-bar-right .ch-btn:hover { background:rgba(255,255,255,.15); }
#select-count { font-size:.9rem; font-weight:600; }

/* Кружок-чекбокс напротив сообщения */
.msg-select-check {
  display:none; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--text-muted); flex-shrink:0;
  align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; align-self:center;
  font-size:.65rem; color:transparent;
}
.select-active { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.msg-select-check.checked {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
/* Обёртка сообщения */
.msg-row { display:flex; align-items:flex-end; gap:8px; }
.msg-row.out .msg { margin-left:auto; }
/* Select mode — столб чекбоксов слева */
.msg-row .msg-select-check {
  flex:0 0 24px; width:24px; display:none;
}
.select-active .msg-row .msg-select-check { display:flex; }
.msg.checked-row { background:rgba(94,181,247,.1) !important; }
[data-theme="light"] .msg.checked-row { background:rgba(94,181,247,.15) !important; }

/* ══════ MOBILE ══════ */
@media(max-width:768px){
  .sidebar { width:100%; padding-top:env(safe-area-inset-top, 0px); }
  .hidden-mobile { display:none !important; }
  .slide-out { display:none !important; }
  .msg { max-width:88%; }
  .chat-inner { padding:12px 8px; }

  /* ─── Кирпичный layout: dvh + --vh fallback (Telegram-подход) ─── */
  html, body {
    height:100vh; height:100dvh; height:calc(var(--vh,1vh) * 100);
    overflow:hidden; margin:0; padding:0;
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%;
  }
  .app {
    position:fixed; inset:0; overflow:hidden; display:flex;
    height:100vh; height:100dvh; height:calc(var(--vh,1vh) * 100);
  }

  .chat-panel {
    position:absolute; inset:0;
    z-index:10; display:flex; flex-direction:column;
  }
  .chat-panel-inner {
    display:flex; flex-direction:column;
    flex:1; min-height:0; overflow:hidden;
    /* Отступ сверху под статус-бар */
    padding-top:max(env(safe-area-inset-top, 0px), 28px);
    padding-bottom:0;
  }
  .chat-header { flex:0 0 auto; z-index:5; }
  .chat-messages {
    flex:1 1 0; min-height:0; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    contain:layout style;
    scroll-behavior:auto;
  }
  /* Картинки: размеры заданы inline, не переопределяем */
  .chat-input-area {
    flex:0 0 auto;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .keyboard-open .chat-input-area {
    padding-bottom:6px;
  }
  .reply-bar, .file-preview-bar, .pinned-bar,
  .search-msg-bar, .select-bar, .typing-indicator,
  .upload-progress { flex:0 0 auto; }

  /* Emoji/mention — мобильная позиция */
  .emoji-picker { left:4px; right:4px; width:auto; bottom:62px; max-height:50vh; }
  .mention-popup { left:8px; right:8px; }
}

/* ── Loading & hidden ── */
.loading {
  display:flex; align-items:center; justify-content:center;
  height:100vh; gap:12px; color:var(--text-muted); font-size:.85rem;
}
.spinner {
  width:24px; height:24px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.hidden { display:none !important; }

/* ── Sidebar header fix ── */
.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-pill {
  background:#667eea;
  color:#fff; font-weight:800; font-size:17px; letter-spacing:.03em;
  padding:10px 20px; border-radius:10px;
  box-shadow:0 2px 8px rgba(102,126,234,.35);
  white-space:nowrap;
}

/* ── Chat header ── */
.chat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border);
  background:var(--bg-sidebar);
}
.chat-header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.chat-header-right { display:flex; align-items:center; gap:4px; }
.ch-btn {
  width:44px !important; height:44px !important; border-radius:50%; border:none;
  background:none; color:var(--text-sec); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem !important; transition:all .15s; text-decoration:none;
}
.ch-btn:hover { background:var(--bg-hover); color:var(--accent); }
.ch-avatar {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.9rem; flex-shrink:0;
}
.ch-info { min-width:0; }
.ch-name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-sub { font-size:.65rem; color:var(--text-sec); }
.ch-sub.online { color:var(--green); }
.mobile-back { display:none; }
@media(max-width:768px){ .mobile-back { display:flex; } }

/* ── Chat panel layout ── */
.chat-panel {
  flex:1; display:flex; flex-direction:column; min-width:0;
  background:var(--bg-chat); border-radius:var(--radius);
  overflow:hidden; min-height:0; height:100%;
}
.chat-panel-inner {
  display:flex; flex-direction:column;
  height:100%; min-height:0; overflow:hidden;
  flex:1;
}

/* ── Upload progress ── */
.upload-progress {
  display:none; align-items:center; gap:8px;
  padding:6px 10%; font-size:.7rem; color:var(--text-sec);
}
.upload-progress.visible { display:flex; }
.upload-bar {
  flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden;
}
.upload-bar-fill {
  height:100%; background:var(--accent); border-radius:2px;
  transition:width .2s; width:0%;
}

/* ══ FORWARD ══ */
.msg-forward {
  font-size:.65rem; color:var(--accent); font-weight:600;
  margin-bottom:3px; display:flex; align-items:center; gap:4px;
}
.msg-forward i { font-size:.6rem; }

/* ══ REACTIONS ══ */
.reaction-chip {
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.08); border:1px solid transparent;
  border-radius:14px; padding:1px 5px; cursor:pointer;
  font-size:.7rem; transition:all .15s; height:22px;
}
.reaction-chip:hover { background:rgba(255,255,255,.15); }
.reaction-chip.mine { border-color:var(--accent); background:rgba(94,181,247,.12); }
.msg-in .reaction-chip { background:rgba(0,0,0,.05); }
.msg-in .reaction-chip:hover { background:rgba(0,0,0,.1); }
.msg-in .reaction-chip.mine { background:rgba(94,181,247,.12); }
.reaction-emoji { font-size:.75rem; line-height:1; }
.reaction-ava {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  object-fit:cover;
}
.reaction-ava-ph {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.35rem; font-weight:700; color:#fff;
}
.reaction-count { font-size:.55rem; color:var(--text-sec); font-weight:600; }

/* ══ EMOJI PICKER ══ */
.emoji-btn {
  width:42px; height:42px; border-radius:50%; border:none;
  background:none; color:var(--text-sec); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; transition:color .15s; flex-shrink:0;
}
.emoji-btn:hover { color:var(--accent); }
.emoji-picker {
  position:absolute; bottom:58px; left:10%; z-index:50;
  background:var(--bg-sidebar); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.3);
  padding:10px; width:370px; display:none;
  animation:ctxIn .12s ease;
}
.emoji-picker.visible { display:block; }
.emoji-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:2px; max-height:360px; overflow-y:auto; }
.emoji-cell {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer; font-size:1.2rem; transition:background .1s;
}
/* Twemoji в сообщениях и пикере */
img.emoji, .emoji-cell img.emoji, .msg-body img.emoji, .contact-preview img.emoji {
  height:1.2em; width:1.2em; margin:0 .05em; vertical-align:-.2em; display:inline;
}
.emoji-cell img.emoji { height:24px; width:24px; vertical-align:middle; margin:0; }
.reaction-emoji img.emoji { height:1em; width:1em; }
.emoji-cell:hover { background:var(--bg-hover); }
.emoji-search { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--text); font-size:.75rem; outline:none; margin-bottom:8px; }
.emoji-cats { display:flex; gap:2px; margin-bottom:6px; }
.emoji-cat-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; padding:4px; border-radius:6px; }
.emoji-cat-btn:hover, .emoji-cat-btn.active { background:var(--bg-hover); color:var(--text); }

/* ══ PINNED BAR ══ */
.pinned-bar {
  display:none; align-items:center; gap:10px;
  padding:8px 16px; background:var(--bg-sidebar);
  border-bottom:1px solid var(--border); cursor:pointer;
}
.pinned-bar.visible { display:flex; }
.pinned-bar-icon { color:var(--accent); font-size:.8rem; }
.pinned-bar-content { flex:1; min-width:0; }
.pinned-bar-label { font-size:.6rem; color:var(--accent); font-weight:700; text-transform:uppercase; }
.pinned-bar-text { font-size:.72rem; color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinned-bar-close { width:28px; height:28px; border-radius:50%; border:none; background:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.pinned-bar-close:hover { color:var(--red); }

/* ══ SEARCH MESSAGES ══ */
.search-msg-bar {
  display:none; align-items:center; gap:8px;
  padding:8px 16px; background:var(--bg-sidebar);
  border-bottom:1px solid var(--border);
}
.search-msg-bar.visible { display:flex; }
.search-msg-bar input {
  flex:1; background:var(--bg-input); border:1px solid var(--border);
  border-radius:18px; padding:7px 14px; color:var(--text);
  font-family:inherit; font-size:.78rem; outline:none;
}
.search-msg-bar input:focus { border-color:var(--accent); }
.search-msg-close { width:28px; height:28px; border-radius:50%; border:none; background:none; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.search-msg-close:hover { color:var(--red); }
.search-msg-results {
  max-height:200px; overflow-y:auto; padding:0 16px;
  background:var(--bg-sidebar); border-bottom:1px solid var(--border);
  display:none;
}
.search-msg-results.visible { display:block; }
.search-result-item {
  padding:8px; border-radius:8px; cursor:pointer; font-size:.75rem;
  border-bottom:1px solid var(--border); transition:background .1s;
}
.search-result-item:hover { background:var(--bg-hover); }
.search-result-author { font-weight:700; color:var(--accent); }
.search-result-body { color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.search-result-time { font-size:.6rem; color:var(--text-muted); }

/* ══ LIGHTBOX ══ */
.lightbox {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.88); display:none;
  align-items:center; justify-content:center;
  cursor:zoom-out;
}
.lightbox.visible { display:flex; }
.lightbox img { max-width:92vw; max-height:92vh; border-radius:8px; box-shadow:0 4px 30px rgba(0,0,0,.5); }
.lightbox-close {
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(255,255,255,.15); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.lightbox-close:hover { background:rgba(255,255,255,.25); }

/* ══ VOICE MESSAGE ══ */
.msg-voice {
  display:flex; align-items:center; gap:8px; padding:4px 0;
}
.voice-play-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.voice-wave { flex:1; height:28px; display:flex; align-items:center; gap:1px; }
.voice-bar { width:3px; border-radius:2px; background:#6b7280; transition:background .15s ease; }
.msg-in .voice-bar { background:#6b7280; }
[data-theme="light"] .voice-bar { background:rgba(0,0,0,.2); }
[data-theme="light"] .msg-in .voice-bar { background:rgba(0,0,0,.2); }
.msg-out .voice-bar.played { background:var(--accent); }
.msg-in .voice-bar.played { background:var(--accent); }
.voice-dur { font-size:.65rem; color:rgba(255,255,255,.7); white-space:nowrap; min-width:55px; text-align:right; }
.msg-in .voice-dur { color:var(--text-muted); }
.voice-speed {
  border:none; background:rgba(255,255,255,.2); color:rgba(255,255,255,.8);
  font-size:.55rem; font-weight:700; padding:2px 6px; border-radius:8px;
  cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0;
}
.voice-speed:hover { background:rgba(255,255,255,.25); }
.msg-in .voice-speed { background:rgba(0,0,0,.08); color:var(--text-muted); }
.msg-in .voice-speed:hover { background:rgba(0,0,0,.12); }

/* ══ POLL IN MESSAGE ══ */
.msg-poll { padding:6px 0 2px; }
.msg-poll-question { font-size:.85rem; font-weight:700; margin-bottom:8px; }
.msg-poll-option {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  margin-bottom:4px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.06); transition:background .15s; position:relative; overflow:hidden;
}
.msg-in .msg-poll-option { background:rgba(0,0,0,.04); }
.msg-poll-option:hover { background:rgba(255,255,255,.12); }
.msg-in .msg-poll-option:hover { background:rgba(0,0,0,.08); }
.msg-poll-option.voted { border:1px solid var(--accent); }
.msg-poll-bar {
  position:absolute; left:0; top:0; bottom:0; background:rgba(94,181,247,.15);
  border-radius:8px; transition:width .3s ease;
}
.msg-poll-option.voted .msg-poll-bar { background:rgba(94,181,247,.25); }
.msg-poll-text { flex:1; font-size:.78rem; z-index:1; position:relative; }
.msg-poll-pct { font-size:.7rem; font-weight:600; color:var(--accent); z-index:1; position:relative; min-width:30px; text-align:right; }
.msg-poll-total { font-size:.65rem; color:var(--text-muted); margin-top:4px; }

/* ══ VIDEO MESSAGE (circle) ══ */
.videomsg-preview-wrap {
  width:200px; height:200px; border-radius:50%; overflow:hidden;
  border:3px solid var(--accent); background:#000;
}
.videomsg-preview-wrap video { width:100%; height:100%; object-fit:cover; }
/* ── Видеокружок с круговым прогрессом ── */
.msg-videomsg-wrap {
  position:relative; width:210px; height:210px;
}
.msg-videomsg-progress {
  position:absolute; top:0; left:0; width:210px; height:210px; z-index:3;
  transform:rotate(-90deg);
  pointer-events:none;
}
.msg-videomsg-progress .vmp-bg {
  fill:none; stroke:rgba(255,255,255,.15); stroke-width:3;
}
.msg-videomsg-progress .vmp-bar {
  fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:628.32; stroke-dashoffset:628.32;
  transition:stroke-dashoffset .25s linear;
}
.msg-videomsg {
  position:absolute; top:5px; left:5px;
  width:200px; height:200px; border-radius:50%; overflow:hidden;
  cursor:pointer; border:none;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}
.msg-videomsg video {
  display:block; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  object-fit:cover; object-position:center center;
  border-radius:0;
}
.msg-videomsg .videomsg-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); border-radius:50%; transition:opacity .15s;
}
.msg-videomsg .videomsg-play i { color:#fff; font-size:1.8rem; }
.msg-videomsg.playing .videomsg-play { opacity:0; }
.msg-videomsg-time {
  position:absolute; bottom:-23px; left:50%; transform:translateX(-50%); z-index:5;
  font-size:.6rem; color:#fff; font-weight:600;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.5); padding:2px 8px; border-radius:8px;
  pointer-events:none;
}

/* ══ РАЗДЕЛИТЕЛЬ НЕПРОЧИТАННЫХ ══ */
.unread-sep {
  display:flex; align-items:center; gap:12px; padding:8px 0; margin:4px 0;
}
.unread-sep::before, .unread-sep::after {
  content:''; flex:1; height:1px; background:var(--accent);
}
.unread-sep span {
  font-size:.65rem; font-weight:700; color:var(--accent); text-transform:uppercase;
  letter-spacing:.04em; white-space:nowrap;
}

/* ══ СВАЙП REPLY ══ */
.swipe-reply-icon {
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--accent);
  display:none; align-items:center; justify-content:center;
  color:#fff; font-size:.7rem;
  pointer-events:none; z-index:2;
}
.swiping .swipe-reply-icon { display:flex; }

/* ══ OG-ПРЕВЬЮ ССЫЛОК ══ */
.msg-og {
  display:flex; gap:0; margin:6px 0 2px; border-radius:10px;
  overflow:hidden; cursor:pointer; max-width:320px;
  border-left:3px solid var(--accent); background:rgba(255,255,255,.06);
}
.msg-in .msg-og { background:rgba(0,0,0,.04); }
[data-theme="light"] .msg-in .msg-og { background:rgba(0,0,0,.06); }
[data-theme="light"] .msg-out .msg-og { background:rgba(0,0,0,.05); }
.msg-og-img {
  width:60px; min-height:60px; flex-shrink:0; background-size:cover;
  background-position:center;
}
.msg-og-body { padding:6px 10px; min-width:0; flex:1; }
.msg-og-site { font-size:.55rem; color:var(--accent); font-weight:600; text-transform:uppercase; margin-bottom:2px; }
.msg-og-title { font-size:.75rem; font-weight:700; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.msg-og-desc { font-size:.65rem; color:var(--text-sec); line-height:1.3; margin-top:2px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.msg-out .msg-og-title { color:#fff; }
.msg-out .msg-og-desc { color:rgba(255,255,255,.6); }
.msg-out .msg-og-site { color:rgba(255,255,255,.7); }
[data-theme="light"] .msg-out .msg-og-title { color:#1a1a1a; }
[data-theme="light"] .msg-out .msg-og-desc { color:rgba(0,0,0,.5); }
[data-theme="light"] .msg-out .msg-og-site { color:var(--accent); }

/* ══ DRAG & DROP ══ */
.drop-zone {
  position:absolute; inset:12px; z-index:100;
  background:rgba(94,181,247,.08); border:3px dashed var(--accent);
  border-radius:20px; display:none;
  align-items:center; justify-content:center;
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.drop-zone.visible { display:flex; }
.drop-zone-inner {
  text-align:center; color:var(--accent);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.drop-zone-inner i { font-size:3rem; opacity:.7; }
.drop-zone-inner span { font-size:1rem; font-weight:700; }
.drop-zone-inner small { font-size:.75rem; color:var(--text-muted); font-weight:400; }

/* ══ USER PROFILE MODAL ══ */
.profile-modal-ava {
  width:80px; height:80px; border-radius:50%; margin:0 auto 12px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.profile-modal-ava img { width:100%; height:100%; object-fit:cover; }
.profile-modal-name { text-align:center; font-size:1rem; font-weight:700; margin-bottom:4px; }
.profile-modal-sub { text-align:center; font-size:.75rem; color:var(--text-sec); margin-bottom:12px; }
.profile-modal-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:.8rem; }
.profile-modal-row .label { color:var(--text-muted); }
.profile-modal-btn {
  width:100%; margin-top:14px; padding:10px; border-radius:10px;
  border:none; background:var(--accent); color:#fff;
  font-family:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:opacity .15s;
}
.profile-modal-btn:hover { opacity:.85; }

/* ══ PHOTO MENU ══ */
#photo-menu {
  min-width:160px;
}

/* ══ FORWARD MODAL ══ */
.forward-ch-list { max-height:300px; overflow-y:auto; }
.forward-ch-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:8px; cursor:pointer; transition:background .1s;
}
.forward-ch-item:hover { background:var(--bg-hover); }
.forward-ch-ava {
  width:36px; height:36px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:#fff;
  font-size:.7rem; flex-shrink:0;
}
.forward-ch-name { font-size:.82rem; font-weight:600; }

/* ══ INFO DRAWER MOBILE ══ */
@media(max-width:768px){
  .info-drawer { width:100% !important; border-left:none; }
  /* Emoji picker на мобильном — привязать к низу */
  .emoji-picker { left:0 !important; right:0 !important; bottom:56px !important; max-width:100vw; border-radius:14px 14px 0 0; }
  /* Предотвращаем двойной тап зум */
  .chat-input-area, .chat-header, .sidebar-header { touch-action:manipulation; }
  /* Контекстное меню чата — шире на мобильном */
  .ctx-menu { min-width:200px; }
  /* Кнопки в реакциях крупнее для пальцев */
  .msg-overlay-reactions .reaction-btn { width:44px; height:44px; font-size:1.5rem; }
}

/* ══ MOBILE KEYBOARD FIX ══ */
@media(max-width:768px){
  /* Предотвращаем прыжки при клавиатуре */
  .chat-panel-inner {
    display:flex; flex-direction:column;
    height:100%; height:calc(var(--vh,1vh)*100);
    overflow:hidden;
  }
  /* Запрещаем overscroll body */
  body { overscroll-behavior:none; }
  html { overscroll-behavior:none; }
  /* Плавный переход для input-area */
  .chat-input-area { transition:padding .15s ease; }
  /* Модалки на весь экран */
  .modal { max-height:calc(var(--vh,1vh)*85); }
}

/* ══ MUTED CHANNEL ══ */
.contact-unread.muted { background:var(--text-muted)!important; color:var(--bg-sidebar); }
.contact-muted-icon { font-size:.55rem; color:var(--text-muted); margin-left:4px; }

/* ══ IMPERSONATE (админ: видеть глазами пользователя) ══ */
.logo { overflow:visible; }
.logo-pill.clickable { cursor:pointer; }
.logo-pill.clickable:hover { opacity:.8; }
.logo-pill.impersonating { background:var(--orange); color:#000; font-size:.7rem; }
.impersonate-reset {
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; padding:6px 10px; border-radius:20px; border:none;
  background:var(--red); color:#fff; font-size:.7rem; font-weight:700;
  cursor:pointer; transition:opacity .15s; vertical-align:middle;
}
.impersonate-reset:hover { opacity:.8; }
.impersonate-dropdown {
  position:absolute; top:calc(100% + 6px); left:0; width:280px;
  background:var(--bg-sidebar); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.3);
  z-index:100; overflow:hidden;
}
.impersonate-search {
  width:100%; padding:10px 14px; border:none; border-bottom:1px solid var(--border);
  background:var(--bg-input); color:var(--text); font-family:inherit; font-size:.8rem;
  outline:none;
}
.impersonate-search::placeholder { color:var(--text-muted); }
.impersonate-list { max-height:300px; overflow-y:auto; }
.impersonate-item {
  padding:8px 14px; cursor:pointer; font-size:.8rem;
  display:flex; align-items:center; gap:10px;
  transition:background .1s;
}
.impersonate-item:hover { background:var(--bg-hover); }
.impersonate-item .imp-name { font-weight:600; }
.impersonate-item .imp-role { font-size:.65rem; color:var(--text-muted); }
.impersonate-item .imp-ava {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.7rem; flex-shrink:0;
}

/* ═══ GROUP TOP TABS (Участники / Контент) ═══ */
.info-group-tabs {
  display:flex; gap:4px; padding:12px 14px 0; margin:0 8px;
  border-top:1px solid var(--border);
}
.info-group-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px; border:none; background:none; color:var(--text-muted);
  font-size:.8rem; font-weight:600; cursor:pointer; border-radius:14px;
  transition:all .15s;
}
.info-group-tab i { font-size:.85rem; }
.info-group-tab:hover { background:var(--bg-hover); color:var(--text); }
.info-group-tab.active { color:var(--accent); background:rgba(94,181,247,.1); }
.info-group-panel { padding:4px 0; }

/* ═══ MEDIA TABS IN INFO DRAWER ═══ */
.info-media-tabs {
  display:flex; gap:2px; padding:12px 14px 0; margin:0 8px;
  border-top:1px solid var(--border);
  position:sticky; top:0; z-index:2; background:var(--bg-sidebar);
}
.info-media-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border:none; background:none; color:var(--text-muted);
  font-size:.6rem; font-weight:600; cursor:pointer; border-radius:14px;
  transition:all .15s;
}
.info-media-tab i { font-size:.85rem; }
.info-media-tab:hover { background:var(--bg-hover); color:var(--text); }
.info-media-tab.active { color:var(--accent); background:rgba(94,181,247,.1); }

.info-media-content { padding:8px; display:block; }

/* Media grid (images) */
.info-media-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  border-radius:14px; overflow:hidden; margin:0 8px;
}
.info-media-thumb {
  aspect-ratio:1; cursor:pointer; overflow:hidden; background:var(--bg-input);
}
.info-media-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .15s;
}
.info-media-thumb:hover img { transform:scale(1.05); }

/* Files list */
.info-media-file {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  margin:2px 8px; border-radius:14px; text-decoration:none; color:var(--text);
  transition:background .15s;
}
.info-media-file:hover { background:var(--bg-hover); }
.imf-icon {
  width:36px; height:36px; border-radius:8px; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.8rem; flex-shrink:0;
}
.imf-name { font-size:.8rem; font-weight:600; word-break:break-all; }
.imf-meta { font-size:.65rem; color:var(--text-muted); }

/* Links list */
.info-media-link {
  display:block; padding:10px 14px; margin:2px 8px; border-radius:14px;
  text-decoration:none; color:var(--text); transition:background .15s;
}
.info-media-link:hover { background:var(--bg-hover); }
.iml-host { font-size:.65rem; color:var(--accent); font-weight:600; }
.iml-url { font-size:.75rem; color:var(--text-sec); word-break:break-all; margin:2px 0; }
.iml-meta { font-size:.6rem; color:var(--text-muted); }

/* Voice list */
.info-media-voice {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  margin:2px 8px; border-radius:14px; transition:background .15s;
}
.info-media-voice:hover { background:var(--bg-hover); }
.imv-play {
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  flex-shrink:0; transition:transform .1s;
}
.imv-play:active { transform:scale(.9); }
.imv-author { font-size:.8rem; font-weight:600; }
.imv-meta { font-size:.65rem; color:var(--text-muted); }

/* More button */
.info-media-more { padding:12px 8px; text-align:center; }
.info-media-more-btn {
  background:var(--bg-input); border:1px solid var(--border); color:var(--accent);
  padding:8px 20px; border-radius:14px; font-size:.75rem; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.info-media-more-btn:hover { background:var(--bg-hover); }

/* Media search */
.info-media-search {
  padding:8px 14px; margin:0 8px; position:relative;
}
.info-media-search.invisible {
  visibility:hidden; pointer-events:none;
}

.info-media-search-input {
  width:100%; box-sizing:border-box;
  padding:8px 12px 8px 32px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg-input); color:var(--tx);
  font-size:.8rem; outline:none;
  transition:border-color .15s;
}
.info-media-search-input:focus { border-color:var(--accent); }
.info-media-search-input::placeholder { color:var(--text-muted); }
.info-media-search-icon {
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:.7rem; pointer-events:none;
}
.info-media-search-clear {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.75rem; padding:4px 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.info-media-search-clear:hover { color:var(--tx); background:var(--bg-hover); }
.info-media-search-clear.hidden { display:none; }
.info-media-search-input { padding-right:32px; }

/* ═══ TEXT FORMATTING — Telegram-style ═══ */

/* Format toolbar */
.format-toolbar {
  position:fixed; z-index:9998;
  display:flex; align-items:center; gap:2px;
  background:var(--bg-sidebar); border:1px solid var(--border);
  border-radius:10px; padding:4px 6px;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transform:translateY(6px);
  transition:opacity .15s, transform .15s;
}
.format-toolbar.visible {
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.fmt-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  border:none; background:transparent; color:var(--text);
  cursor:pointer; font-size:.85rem; font-weight:700;
  transition:background .12s, color .12s;
  font-family:serif;
}
.fmt-btn:hover { background:var(--bg-hover); color:var(--accent); }
.fmt-btn:active { transform:scale(.92); }
.fmt-bold span { font-weight:900; font-size:.95rem; }
.fmt-italic span { font-style:italic; }
.fmt-under span { text-decoration:underline; }
.fmt-strike span { text-decoration:line-through; }
.fmt-mono span { font-family:'Courier New',Consolas,monospace; font-size:.8rem; font-weight:400; background:var(--bg-hover); border-radius:3px; padding:0 3px; }
.fmt-spoiler span { background:var(--text-muted); color:var(--text-muted); border-radius:3px; padding:0 3px; }
.fmt-quote span { font-size:.75rem; color:var(--accent); }
.fmt-link { font-size:.75rem; color:var(--text-sec); }

/* Rendered formatted text in messages */
.msg-body b { font-weight:700; }
.msg-body i { font-style:italic; }
.msg-body s { text-decoration:line-through; opacity:.75; }
.msg-body u { text-decoration:underline; }
.msg-body .msg-code {
  font-family:'Courier New',Consolas,'Liberation Mono',monospace;
  font-size:.82em; background:rgba(128,128,128,.15);
  padding:1px 5px; border-radius:4px;
}
.msg-body .msg-pre {
  font-family:'Courier New',Consolas,'Liberation Mono',monospace;
  font-size:.8em; background:rgba(0,0,0,.2);
  padding:8px 12px; border-radius:8px;
  margin:4px 0; white-space:pre-wrap; overflow-x:auto;
  display:block; line-height:1.45;
}
[data-theme="light"] .msg-body .msg-pre { background:rgba(0,0,0,.06); }
.msg-body .msg-spoiler {
  background:var(--text); color:transparent;
  border-radius:4px; padding:0 3px;
  cursor:pointer; transition:all .25s;
  user-select:none;
}
.msg-body .msg-spoiler.revealed {
  background:transparent; color:inherit;
}
.msg-body .msg-quote {
  display:block; border-left:3px solid var(--accent);
  padding:2px 0 2px 10px; margin:4px 0;
  color:var(--text-sec); font-style:italic;
}

/* ═══ GEOLOCATION CARD ═══ */
.msg-geo-card {
  display:block; text-decoration:none; color:inherit;
  border-radius:12px; overflow:hidden;
  margin:4px 0; max-width:320px;
  border:1px solid var(--border);
  transition:opacity .15s;
}
.msg-geo-card:hover { opacity:.88; }
.msg-geo-map {
  width:100%; height:140px; background:var(--bg-hover) center/cover no-repeat;
  position:relative; display:flex; align-items:center; justify-content:center;
  background-color:var(--bg-hover);
}
.msg-geo-pin {
  width:40px; height:40px; border-radius:50%;
  background:var(--red,#e45e5e); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 2px 10px rgba(0,0,0,.3);
  animation:geoPinBounce .6s ease;
}
@keyframes geoPinBounce {
  0%{transform:translateY(-20px);opacity:0}
  60%{transform:translateY(4px)}
  100%{transform:translateY(0);opacity:1}
}
.msg-geo-label {
  padding:8px 12px; font-size:.78rem;
  background:var(--bg-sidebar);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ═══ CONTACT CARD ═══ */
.msg-contact-card {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin:4px 0;
  border-radius:14px; border:1px solid var(--border);
  background:var(--bg-sidebar); max-width:320px;
}
.msg-contact-ava {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem;
}
.msg-contact-info { flex:1; min-width:0; }
.msg-contact-name {
  font-size:.88rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-contact-phone {
  font-size:.78rem; margin-top:1px;
}
.msg-contact-phone a {
  color:var(--accent); text-decoration:none;
}
.msg-contact-phone a:hover { text-decoration:underline; }
.msg-contact-org {
  font-size:.68rem; color:var(--text-muted); margin-top:1px;
}
.msg-contact-add {
  background:none; border:none; color:var(--text-muted);
  cursor:pointer; padding:6px; border-radius:50%;
  transition:background .15s, color .15s;
  font-size:.9rem; flex-shrink:0;
}
.msg-contact-add:hover { background:var(--bg-hover); color:var(--text); }

/* ═══ CONTACT PICKER (send contact from messenger list) ═══ */
.contact-pick-search {
  position:relative; margin-bottom:10px;
}
.contact-pick-search i {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); font-size:.75rem; pointer-events:none;
}
.contact-pick-search input {
  width:100%; padding:10px 12px 10px 34px;
  border-radius:12px; border:1px solid var(--border,rgba(128,128,128,.2));
  background:var(--bg-input,var(--bg-chat)); color:var(--text);
  font-size:.85rem; outline:none; transition:border-color .15s;
}
.contact-pick-search input:focus { border-color:var(--accent); }
.contact-phone-btn {
  width:100%; padding:10px; border-radius:12px;
  border:1px solid var(--accent); background:rgba(94,181,247,.08);
  color:var(--accent); font-size:.82rem; font-weight:600;
  cursor:pointer; margin-bottom:10px; transition:background .15s;
}
.contact-phone-btn:hover { background:rgba(94,181,247,.18); }
.contact-pick-list {
  max-height:50vh; overflow-y:auto;
}
.contact-pick-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 8px; border-radius:12px; cursor:pointer;
  transition:background .12s;
}
.contact-pick-item:hover { background:var(--bg-hover); }
.contact-pick-ava {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.75rem; overflow:hidden;
  position:relative;
}
.contact-pick-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.contact-pick-online {
  position:absolute; bottom:0; right:0; width:10px; height:10px;
  border-radius:50%; background:#4ade80; border:2px solid var(--bg-sidebar);
}
.contact-pick-info { flex:1; min-width:0; }
.contact-pick-name {
  font-size:.85rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contact-pick-sub {
  font-size:.68rem; color:var(--text-muted);
}
.contact-pick-send {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:.8rem;
  opacity:0; transition:opacity .15s;
}
.contact-pick-item:hover .contact-pick-send { opacity:1; }

/* ═══ CHANNEL STATS ═══ */
.stats-cards {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.stats-card {
  background:var(--bg-hover,rgba(255,255,255,.06));
  border-radius:12px; padding:14px 12px; text-align:center;
}
.stats-card-value {
  font-size:1.4rem; font-weight:800; color:var(--accent,#5eb5f7);
  font-variant-numeric:tabular-nums;
}
.stats-card-label {
  font-size:.65rem; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.03em; margin-top:2px;
}
.stats-row-small {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  font-size:.7rem; color:var(--text-sec); margin-bottom:18px;
}
.stats-row-small span { display:flex; align-items:center; gap:4px; }
.stats-section-title {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em;
  margin:16px 0 8px; display:flex; align-items:center; gap:6px;
}
.stats-chart-wrap {
  height:160px; margin-bottom:8px; position:relative;
}
.stats-top-authors { margin-top:4px; }
.stats-author-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 4px; border-radius:10px;
  transition:background .15s;
}
.stats-author-row:hover { background:var(--bg-hover); }
.stats-author-rank {
  width:20px; text-align:center;
  font-size:.75rem; font-weight:700; color:var(--text-muted);
}
.stats-author-ava {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.65rem; overflow:hidden;
}
.stats-author-ava img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.stats-author-info { flex:1; min-width:0; }
.stats-author-name {
  font-size:.8rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stats-author-bar-wrap {
  height:4px; background:var(--bg-hover,rgba(128,128,128,.15));
  border-radius:2px; margin-top:4px; overflow:hidden;
}
.stats-author-bar {
  height:100%; background:var(--accent,#5eb5f7);
  border-radius:2px; transition:width .4s ease;
}
.stats-author-count {
  font-size:.75rem; font-weight:700; color:var(--text-sec);
  min-width:32px; text-align:right; font-variant-numeric:tabular-nums;
}

/* ═══ ACTIVE SESSIONS ═══ */
.session-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  background:var(--bg-hover,rgba(255,255,255,.06));
  margin-bottom:8px; transition:background .15s;
}
.session-card:hover { background:var(--bg-input,rgba(255,255,255,.1)); }
.session-current { border:1px solid var(--accent); background:rgba(94,181,247,.08); }
.session-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--bg-sidebar); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--text-sec);
}
.session-current .session-icon { color:var(--accent); }
.session-info { flex:1; min-width:0; }
.session-device {
  font-size:.85rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.session-badge {
  font-size:.6rem; font-weight:700; color:var(--accent);
  background:rgba(94,181,247,.15); padding:2px 8px; border-radius:6px;
  margin-left:6px; vertical-align:middle;
}
.session-meta {
  display:flex; gap:10px; font-size:.7rem; color:var(--text-muted); margin-top:2px;
}
.session-created {
  font-size:.6rem; color:var(--text-muted); margin-top:1px; opacity:.7;
}
.session-terminate-btn {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:none; background:rgba(228,94,94,.12); color:var(--red,#e45e5e);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; transition:background .15s, transform .1s;
}
.session-terminate-btn:hover { background:rgba(228,94,94,.25); }
.session-terminate-btn:active { transform:scale(.9); }
.session-section-title {
  font-size:.68rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em;
  margin:8px 0 6px; padding:0 2px;
}
.sessions-terminate-all {
  width:100%; padding:10px; border-radius:12px;
  border:1px solid rgba(228,94,94,.3); background:rgba(228,94,94,.08);
  color:var(--red,#e45e5e); font-size:.8rem; font-weight:700;
  cursor:pointer; margin-bottom:14px; transition:background .15s;
}
.sessions-terminate-all:hover { background:rgba(228,94,94,.18); }

/* ── Attach Bottom Sheet (Claude-style) ── */
.attach-sheet-backdrop {
  display:none; position:fixed; inset:0; z-index:89; background:rgba(0,0,0,.4);
}
.attach-sheet-backdrop.visible { display:block; }
.attach-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--bg-dark); border-radius:16px 16px 0 0;
  padding:0 16px 20px; box-shadow:0 -4px 30px rgba(0,0,0,.4);
  transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  max-width:480px; margin:0 auto;
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}
.attach-sheet.visible { transform:translateY(0); }
.attach-sheet-handle {
  width:36px; height:4px; border-radius:2px; background:var(--text-muted);
  margin:10px auto 8px; opacity:.5;
}
.attach-sheet-title {
  font-size:.95rem; font-weight:700; text-align:center; padding:4px 0 14px;
  color:var(--text); position:relative;
}
.attach-sheet-close {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:var(--bg-hover); border:none; color:var(--text-sec);
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.attach-sheet-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;
}
.attach-sheet-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:18px 8px; border-radius:14px;
  background:var(--bg-hover); cursor:pointer;
  transition:background .15s, transform .1s;
  border:1px solid var(--border);
}
.attach-sheet-card:active { transform:scale(.96); }
.attach-sheet-card i { font-size:1.4rem; color:var(--text); }
.attach-sheet-card span { font-size:.75rem; font-weight:600; color:var(--text-sec); }
.attach-sheet-list {
  border-top:1px solid var(--border); padding-top:6px;
}
.attach-sheet-item {
  display:flex; align-items:center; gap:14px; padding:12px 8px;
  border-radius:10px; cursor:pointer; transition:background .15s;
  font-size:.85rem; font-weight:500; color:var(--text);
}
.attach-sheet-item:active { background:var(--bg-hover); }
.attach-sheet-item i { font-size:1.1rem; width:24px; text-align:center; }

/* + button (Claude-style) */
.attach-plus {
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border:none; background:none; color:var(--text-sec);
  cursor:pointer; font-size:1.3rem; display:flex; align-items:center;
  justify-content:center; transition:color .15s, background .15s;
}
.attach-plus:hover { color:var(--text); background:var(--bg-hover); }

/* ── Мобильный: увеличенный текст сообщений ── */
@media(max-width:768px){
  .msg { font-size:1rem; line-height:1.55; padding:10px 14px 6px; max-width:82%; }
  .msg-author { font-size:.8rem; }
  .msg-reply { font-size:.82rem; }
  .msg-reply-author { font-size:.82rem; }
  .msg-time { font-size:.6rem; }
  .msg-file-name { font-size:.85rem; }
  .msg-file-size { font-size:.7rem; }
  .chat-input { font-size:1rem; }
}