/* ═══════════════════════════════════════════
   BASE.CSS — переменные, темы, сброс, база
   ═══════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #0e1621;
  --sidebar: #17212b;
  --hover: #202b36;
  --active: #2b5278;
  --out: #2b5278;
  --in: #182533;
  --text: #ffffff;
  --muted: #708499;
  --accent: #64b5ef;
  --border: #101921;
  --online: #4dcd5e;
  --danger: #e74c3c;
  --app-font-size: 14px;
  --shadow: rgba(0, 0, 0, 0.5);
  --reply-bg: rgba(255, 255, 255, 0.1);
  --sidebar-width: 380px;
}

[data-theme="light"] {
  --bg: #f4f4f5;
  --sidebar: #ffffff;
  --hover: #f0f0f0;
  --active: #e3f2fd;
  --out: #e3f2fd;
  --in: #ffffff;
  --text: #000000;
  --muted: #707579;
  --accent: #3390ec;
  --border: #e0e0e0;
  --online: #4dcd5e;
  --danger: #e53935;
  --shadow: rgba(0, 0, 0, 0.1);
  --reply-bg: rgba(0, 0, 0, 0.05);
}

[data-theme="red"] {
  --bg: #1a0d0d;
  --sidebar: #261414;
  --hover: #361e1e;
  --active: #8b2828;
  --out: #8b2828;
  --in: #261414;
  --text: #ffffff;
  --muted: #b08888;
  --accent: #ff6b6b;
  --border: #1a0d0d;
  --online: #4dcd5e;
  --danger: #e74c3c;
  --shadow: rgba(0, 0, 0, 0.5);
  --reply-bg: rgba(255, 255, 255, 0.1);
}

[data-theme="blue"] {
  --bg: #0a1424;
  --sidebar: #102033;
  --hover: #1a2f4a;
  --active: #1e4d8f;
  --out: #1e4d8f;
  --in: #102033;
  --text: #ffffff;
  --muted: #7a92b5;
  --accent: #5ba3ff;
  --border: #0a1424;
  --online: #4dcd5e;
  --danger: #e74c3c;
  --shadow: rgba(0, 0, 0, 0.5);
  --reply-bg: rgba(255, 255, 255, 0.1);
}

[data-theme="purple"] {
  --bg: #120a24;
  --sidebar: #1c1233;
  --hover: #291a4a;
  --active: #4a2b8f;
  --out: #4a2b8f;
  --in: #1c1233;
  --text: #ffffff;
  --muted: #9888bb;
  --accent: #a56bff;
  --border: #120a24;
  --online: #4dcd5e;
  --danger: #e74c3c;
  --shadow: rgba(0, 0, 0, 0.5);
  --reply-bg: rgba(255, 255, 255, 0.1);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: var(--app-font-size);
}

body, .sidebar, .chat-area, .modal, .modal-body, .chat-header, .chat-input-wrap, .messages, .message {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Изоляция layout — уменьшает пересчёт при render (#3) */
.sidebar, .chat-area, .chat-header, .chat-input-wrap, .messages, .chat-list {
  contain: layout style;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  outline: none;
}

input, textarea, select {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
  color: inherit;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.hidden {
  display: none !important;
}