/* ══════════════════════════════════════════════════
   base.css — Базовые переменные и layout для мессенджера Шепни
   Цвета тёмной темы = ЕЦП мессенджер, акцент = фиолетовый
   ══════════════════════════════════════════════════ */

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

/* Тёмная тема (как в ЕЦП мессенджере) */
:root, [data-theme="dark"] {
  --bg-dark: #2f2f2f;
  --bg-darker: #262626;
  --bg-sidebar: #2f2f2f;
  --bg-chat: #212121;
  --bg-hover: rgba(255,255,255,.05);
  --bg-active: #3d3d3d;
  --bg-bubble: rgba(255,255,255,.06);
  --bg-input: rgba(255,255,255,.07);
  --text: #ececec;
  --text-sec: #a0a0a0;
  --text-muted: #666;
  --accent: #667eea;
  --green: #5cc45c;
  --red: #f06060;
  --orange: #f0b050;
  --blue: #667eea;
  --border: rgba(255,255,255,.08);
  --radius: 16px;
  --shadow-msg: 0 1px 3px rgba(0,0,0,.3);
  --gradient-out: linear-gradient(135deg, #3a3a3a, #484848);
}

/* Светлая тема */
[data-theme="light"] {
  --bg-dark: #f0f0f0;
  --bg-darker: #e8e8e8;
  --bg-sidebar: #fafafa;
  --bg-chat: #f5f3f0;
  --bg-hover: rgba(0,0,0,.03);
  --bg-active: #667eea;
  --bg-bubble: #ffffff;
  --bg-input: rgba(0,0,0,.04);
  --text: #1a1a1a;
  --text-sec: #6b7580;
  --text-muted: #aab0b8;
  --accent: #667eea;
  --green: #45a645;
  --red: #e55050;
  --orange: #e5a040;
  --blue: #667eea;
  --border: rgba(0,0,0,.08);
  --radius: 16px;
  --shadow-msg: 0 1px 4px rgba(0,0,0,.06);
  --gradient-out: linear-gradient(135deg, #d8ecfc, #c4dff5);
}

[data-theme="light"] .msg-in { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme="light"] .msg b { color: #1a1a1a; }
[data-theme="light"] .day-avatar.past { background: #e0e0e0; color: #666; }
[data-theme="light"] .msg-system { background: rgba(0,0,0,.07); color: #6b7580; }
[data-theme="light"] .sidebar-header { border-bottom-color: #e0e0e0; }
[data-theme="light"] .contact-preview .preview-author { color: #1a1a1a; }
[data-theme="light"] .chat-header { border-bottom-color: #e0e0e0; }
[data-theme="light"] .chat-bottom { border-top-color: #e0e0e0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-darker);
  color: var(--text);
  font-size: 21px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
[data-theme="light"] body { scrollbar-color: rgba(0,0,0,.12) transparent; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.18); }

.app { display: flex; height: 100%; padding: 8px; gap: 8px; }

.sidebar {
  width: 370px; background: var(--bg-sidebar);
  display: flex; flex-direction: column; flex-shrink: 0;
  border-radius: 16px; overflow: hidden;
}

.sidebar-header {
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); min-height: 64px;
}
.sidebar-header .logo { display: flex; align-items: center; gap: 13px; flex: 1; }
.sidebar-header .logo-icon { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#667eea,#764ba2); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.sidebar-header .logo-text { font-weight: 600; font-size: 1rem; }
.sidebar-header .logo-sub  { font-size: .7rem; color: var(--text-sec); }

.sb-nav-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:1rem; transition:background .15s; text-decoration:none; }
.sb-nav-btn:hover { background: var(--bg-hover); }

.chat-panel { flex:1; display:flex; flex-direction:column; background:var(--bg-darker); min-width:0; }
.chat-panel-inner { flex:1; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; }

.chat-header { padding:12px 18px; display:flex; align-items:center; justify-content:space-between; min-height:64px; background:var(--bg-sidebar); }
.chat-header-left { display:flex; align-items:center; gap:16px; }
.ch-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#764ba2); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.ch-name { font-weight:600; font-size:1rem; }
.ch-sub { font-size:.7rem; color:var(--text-sec); margin-top:2px; }
.ch-sub .live { color:var(--green); }
.chat-header-right { display:flex; align-items:center; gap:4px; }
.ch-btn { width:46px; height:46px; 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; transition:background .15s; }
.ch-btn:hover { background:var(--bg-hover); }
a.ch-btn { text-decoration:none; color:var(--text-sec); }

.chat-messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; background-color:var(--bg-chat); }
.chat-inner { display:flex; flex-direction:column; gap:6px; padding:12px 8%; min-height:100%; }

.msg { max-width:540px; padding:9px 14px 6px; border-radius:var(--radius); font-size:1rem; line-height:1.5; position:relative; word-break:break-word; white-space:pre-line; margin-bottom:4px; }
.msg-in { background:var(--bg-bubble); align-self:flex-start; border-top-left-radius:4px; }
.msg-tail { position:absolute; left:-10px; top:0; width:12px; height:20px; fill:var(--bg-bubble); }
.msg-system { align-self:center; background:rgba(0,0,0,.35); color:var(--text-sec); font-size:.75rem; padding:6px 18px; border-radius:24px; max-width:90%; text-align:center; margin:10px 0; }
.msg-time { font-size:.6rem; color:var(--text-muted); float:right; margin:6px 0 0 16px; }
.msg b { color:#fff; }

.chat-bottom { background:var(--bg-sidebar); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:12px 18px; flex-shrink:0; }

.loading { display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column; gap:16px; color:var(--text-muted); }
.spinner { width:40px; height:40px; 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; }
.empty { text-align:center; padding:80px 20px; color:var(--text-muted); }
.empty-icon { font-size:3.5rem; margin-bottom:14px; opacity:.3; }

@media (max-width:1200px) { .chat-inner { padding:10px 4%; } }
@media (max-width:768px) {
  html,body { font-size:15px; }
  .sidebar { width:100%; position:absolute; inset:0; z-index:20; transition:transform .2s; border-radius:0; }
  .sidebar.slide-out { transform:translateX(-100%); }
  .app { padding:0; gap:0; }
  .chat-panel { position:absolute; inset:0; z-index:10; }
  .chat-panel-inner { border-radius:0; }
  .chat-panel.hidden-mobile { display:none; }
  .mobile-back { display:flex !important; }
  .chat-inner { padding:8px 4px; }
}
@media (min-width:769px) { .mobile-back { display:none !important; } }