/* ═══════════════════ Этап 9B — Блок 1: Поиск ═══════════════════ */

/* Search mode: скрываем empty-chats при активном поиске */
.search-mode #empty-chats { display: none; }

/* Кнопка 🔍 в шапке чата */
#btn-chat-search { margin-left: auto; }

/* In-chat search bar */
.ics-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#ics-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: .88rem;
  outline: none;
}
#ics-input:focus { border-color: var(--accent); }
.ics-counter {
  font-size: .78rem;
  color: var(--text-muted);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* <mark> в сниппетах */
mark {
  background: rgba(255, 213, 79, 0.35);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}
.theme-light mark { background: rgba(255, 235, 59, 0.65); }

/* Недавние запросы */
.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.recent-clear {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: .72rem;
  cursor: pointer;
  padding: 2px 6px;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: auto;
}
.recent-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .1s;
  list-style: none;
}
.recent-item:hover { background: rgba(255,255,255,.05); }
.recent-q { flex: 1; color: var(--text-muted); font-size: .88rem; display: flex; align-items: center; gap: 8px; }
.recent-del {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 4px;
}
.recent-del:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* Результаты поиска сообщений */
.search-msg-item { cursor: pointer; }
.snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Вспышка сообщения на прыжок — усиливаем существующее */
.message.highlighted .msg-bubble {
  outline: 2px solid var(--accent);
  animation: msg-flash 1.2s ease-out;
}
@keyframes msg-flash {
  0%   { background: rgba(255, 213, 79, 0.45); }
  100% { background: transparent; }
}

/* Этап 10: контекстное меню с иконками */
.ctx-item { display: flex; align-items: center; gap: 8px; }

/* Кнопки с иконками в настройках/профиле */
.settings-choice, .settings-logout, .profile-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* About */
.about-box { text-align: center; padding: 24px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.about-muted { color: var(--text-muted); font-size: .85rem; }

/* Универсальная модалка подтверждения */
.confirm-text { padding: 0 16px 8px; color: var(--text-muted); font-size: .88rem; }

/* ═══════════ Единый рекордер ГС/кружков: центральный оверлей ═══════════ */

#btn-record.recording { color: #e06c75; }
#btn-record.rec-swap .icon { animation: rec-swap-pop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes rec-swap-pop { 0% { transform: scale(.4) rotate(-90deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.rec-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  animation: fade-in .18s ease;
}
.rec-overlay.hidden { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.rec-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 32px;
  background: var(--hdr-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-2);
  animation: rec-pop .22s cubic-bezier(.34,1.4,.64,1);
  max-width: min(90vw, 360px);
}
@keyframes rec-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.rec-video-wrap { position: relative; width: 208px; height: 208px; }
.rec-video {
  position: absolute; inset: 4px;
  width: 200px; height: 200px; border-radius: 50%;
  object-fit: cover;
  transform: scaleX(-1);
}
.rec-ring { position: absolute; inset: 0; width: 208px; height: 208px; transform: rotate(-90deg); }
.rec-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; }
.rec-ring-fg { fill: none; stroke: #e06c75; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }

.rec-wave { display: block; }

.rec-timer-row { display: flex; align-items: center; gap: 8px; }
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e06c75; flex-shrink: 0;
  animation: vp-pulse 1s ease-in-out infinite;
}
@keyframes vp-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.rec-timer { font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-limit { color: var(--text-muted); font-size: .85rem; }

.rec-hint { color: var(--text-muted); font-size: .82rem; text-align: center; }
.rec-overlay.rec-cancelling .rec-hint,
.rec-overlay.rec-cancelling .rec-timer { color: #e06c75; }

.rec-preview-box { display: flex; align-items: center; gap: 10px; }

.rec-controls { display: flex; align-items: center; gap: 20px; }
.rec-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--text);
  transition: transform .12s ease, background .15s ease;
}
.rec-btn:active { transform: scale(.92); }
.rec-btn-cancel { color: #e06c75; }
.rec-btn-send { background: var(--accent); color: #fff; }

/* Индикатор записи в шапке */
.hdr-rec { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-variant-numeric: tabular-nums; color: #e06c75; margin-right: 8px; }
.hdr-rec.hidden { display: none; }

/* ═══════════ Этап 13: группы и каналы ═══════════ */

.sys-pill {
  align-self: center; text-align: center;
  margin: 6px auto; padding: 3px 12px;
  background: rgba(0,0,0,.25); color: var(--text-muted);
  border-radius: 12px; font-size: .78rem; max-width: 80%;
}
.theme-light .sys-pill { background: rgba(0,0,0,.08); }

.channel-readonly {
  padding: 12px; text-align: center;
  color: var(--text-muted); font-size: .88rem;
  background: var(--input-bg); border-top: 1px solid var(--border);
}
.channel-readonly.hidden { display: none; }

.chan-badge { background: var(--green); }

.group-inp { width: 100%; margin-bottom: 8px; }
.group-pick-list { max-height: 220px; overflow-y: auto; margin-bottom: 10px; }
.group-pick-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 42px; padding: 4px 8px;
  background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left; font-size: .92rem;
  border-radius: var(--radius-sm);
}
.group-pick-row:hover { background: rgba(255,255,255,.05); }
.group-pick-check { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); }
.group-pick-row.picked .group-pick-check { background: var(--accent); border-color: var(--accent); }

.group-actions { flex-wrap: wrap; }
.group-members { text-align: left; margin-top: 4px; }
.group-member-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-sm); }
.group-member-row:hover { background: rgba(255,255,255,.04); }
.group-role { color: var(--accent); font-size: .78rem; flex-shrink: 0; }
.active-accent { color: var(--accent); }

/* Waveform-плеер войсов */
.voice-wave { cursor: pointer; display: block; }
.voice-rate {
  background: rgba(128,128,128,.2);
  border: none; border-radius: var(--radius-sm);
  color: var(--text); font-size: .72rem; font-weight: 600;
  padding: 4px 8px; cursor: pointer; flex-shrink: 0;
  min-width: 34px;
}
.voice-rate:hover { background: rgba(128,128,128,.35); }

/* ═══════════ Этап 10 блок 4: отправка медиа ═══════════ */

/* Меню скрепки */
.clip-menu { position: fixed; background: var(--hdr-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; z-index: 250; box-shadow: var(--shadow-2); min-width: 180px; }
.clip-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: .9rem; border-radius: var(--radius-sm); transition: background .1s; }
.clip-item:hover { background: rgba(255,255,255,.08); }

/* Оверлей перетаскивания */
.drag-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 350; display: flex; align-items: center; justify-content: center; }
.drag-overlay-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px; border: 2px dashed var(--accent); border-radius: var(--radius-lg); color: var(--text); font-size: 1rem; pointer-events: none; }

/* Модалка предпросмотра */
.mp-list { overflow-y: auto; max-height: 45vh; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; }
.mp-item { display: flex; align-items: center; gap: 12px; }
.mp-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--bg); }
.mp-file-ico { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; }
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-size { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.mp-caption-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 16px 16px; border-top: 1px solid var(--border); }
#mp-caption { flex: 1; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); font-size: .9rem; outline: none; resize: none; max-height: 96px; font-family: inherit; }
#mp-caption:focus { border-color: var(--accent); }
.mp-caption-count { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; padding-bottom: 8px; }

/* Плейсхолдер загрузки */
.upload-ph { position: relative; min-width: 120px; min-height: 60px; }
.upload-ph-img { opacity: .55; }
.upload-ph-name { display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--text-muted); font-size: .88rem; }
.upload-ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.upload-ring-svg { width: 40px; height: 40px; transform: rotate(-90deg); position: absolute; }
.upload-ring-track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
.upload-ring-bar { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .15s; }
.upload-ring .icon { color: #fff; position: relative; }

/* Подпись и видео */
.msg-caption { padding: 6px 8px 2px; font-size: var(--msg-font, 15px); line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.msg-video { display: block; max-width: 320px; max-height: 280px; border-radius: var(--radius-sm); background: #000; transform: translateZ(0); }
.msg-link { color: var(--accent); text-decoration: none; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }

/* ═══════════ Этап 10 блок 5: упоминания и теги ═══════════ */

.msg-mention, .msg-tag { color: var(--accent); cursor: pointer; }
.msg-mention:hover, .msg-tag:hover { text-decoration: underline; }

/* Пузырь с упоминанием меня */
.message.mentioned .msg-bubble { background: rgba(82,136,193,.28); }
.theme-light .message.mentioned .msg-bubble { background: rgba(42,171,238,.14); }

/* Бейдж @ вместо числа */
.unread-badge.mention-badge { font-weight: 700; }

/* Поповер автокомплита упоминаний */
.mention-popover {
  position: fixed;
  bottom: 64px; left: 96px;
  min-width: 220px; max-width: 300px;
  background: var(--hdr-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 250;
  box-shadow: var(--shadow-2);
}
.mn-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px;
  background: transparent; border: none;
  color: var(--text); cursor: pointer;
  font-size: .88rem; border-radius: var(--radius-sm);
  text-align: left;
}
.mn-item:hover, .mn-item.active { background: rgba(82,136,193,.15); }
.mn-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-nick { color: var(--text-muted); font-size: .78rem; flex-shrink: 0; }

/* ═══════════ Этап 10 блок 6: мелочи ═══════════ */

/* Появление входящего сообщения */
.msg-appear { animation: msg-appear .2s ease-out; }
@keyframes msg-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Скелетоны загрузки истории */
.skeleton-msg {
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--bubble-other);
  opacity: .5;
  margin: 2px 0;
  align-self: flex-start;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-msg.mine { align-self: flex-end; background: var(--bubble-mine); }
@keyframes skeleton-pulse { 0%,100% { opacity: .5; } 50% { opacity: .25; } }

/* ═══════════ Этап 11: Избранное, папки, команды ═══════════ */

/* Аватар Избранного: закладка на акцентном фоне */
.saved-avatar { background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.saved-avatar .icon { stroke: #fff; }

/* Sticky-шапка поиска */
#sidebar-header { position: sticky; top: 0; z-index: 5; background: var(--side-bg); }

/* Вкладки папок */
.folder-tabs {
  display: flex; gap: 4px;
  padding: 4px 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 4;
  background: var(--side-bg);
  scrollbar-width: none;
}
.folder-tabs::-webkit-scrollbar { display: none; }
.folder-tab {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: .85rem; border-radius: var(--radius-sm);
  white-space: nowrap; flex-shrink: 0;
  transition: color .12s, background .12s;
}
.folder-tab:hover  { background: rgba(255,255,255,.05); }
.folder-tab.active { color: var(--accent); background: rgba(82,136,193,.12); }
.folder-badge {
  background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700;
  border-radius: var(--radius-md);
  padding: 1px 6px; min-width: 17px; text-align: center;
}

/* Редактор папок в настройках */
.folder-row { display: flex; align-items: center; gap: 4px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.folder-row-name { flex: 1; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-row-count { color: var(--text-muted); font-size: .78rem; margin-right: 8px; }
.folder-create-btn { width: 100%; margin-top: 12px; }
.folder-chat-search { margin-top: 8px; }
.folder-chat-list { max-height: 40vh; overflow-y: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.folder-chat-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; }
.folder-chat-item:hover { background: rgba(255,255,255,.05); }

/* Кликабельные /команды */
.msg-cmd { color: var(--accent); cursor: pointer; }
.msg-cmd:hover { text-decoration: underline; }

/* Поповер меню команд бота */
.cmd-menu-popover {
  position: fixed;
  min-width: 240px; max-width: 320px;
  max-height: 300px; overflow-y: auto;
  background: var(--hdr-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 250;
  box-shadow: var(--shadow-2);
}