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

:root {
  --bg-base: #151517;
  --bg-sidebar: #151517;
  --bg-layer-2: #2c2c2e;
  --bg-layer-3: #353638;
  --bg-input: #1c1c1e;
  --bg-bubble: #1c1c1e;
  --bg-chat-active: #2c2c2e;
  --bg-card: #1c1c1e;
  --bg-modal: #2c2c2e;
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-mask: rgba(0, 0, 0, 0.6);

  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #86868b;
  --text-caption: #6e6e73;

  --border-l1: rgba(255, 255, 255, 0.08);
  --border-l2: rgba(255, 255, 255, 0.15);
  --border-l2-thin: rgba(255, 255, 255, 0.08);
  --border-l3: rgba(255, 255, 255, 0.2);
  --border-inverted: rgba(255, 255, 255, 0.08);

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-text: #0071e3;

  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --purple: #af52de;

  --scroll-color: rgba(255, 255, 255, 0.15);
  --scroll-color-hover: rgba(255, 255, 255, 0.24);

  --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: Menlo, Monaco, Consolas, "Cascadia Mono", "Ubuntu Mono", "DejaVu Sans Mono", "JetBrains Mono", "Fira Code", "Courier New", monospace;

  --sider-width: 261px;
  --message-max-width: 840px;
  --message-padding-horizontal: 44px;

  --control-height-l: 40px;
  --control-height-m: 36px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-round: 100px;

  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --transition-duration: .2s;
  --transition-duration-fast: .1s;
  --transition-duration-slow: .3s;

  --shadow-lv3: 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.08);
}

[data-theme="light"] {
  --bg-base: #f5f5f7;
  --bg-sidebar: rgba(245, 245, 247, 0.8);
  --bg-layer-2: #ffffff;
  --bg-layer-3: #ffffff;
  --bg-input: #ffffff;
  --bg-bubble: #ffffff;
  --bg-chat-active: rgba(0, 113, 227, 0.08);
  --bg-card: #ffffff;
  --bg-modal: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-mask: rgba(0, 0, 0, 0.2);

  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #6e6e73;
  --text-caption: #aeaeb2;

  --border-l1: rgba(0, 0, 0, 0.06);
  --border-l2: rgba(0, 0, 0, 0.1);
  --border-l2-thin: rgba(0, 0, 0, 0.06);
  --border-l3: rgba(0, 0, 0, 0.15);
  --border-inverted: transparent;

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-text: #0071e3;

  --scroll-color: rgba(0, 0, 0, 0.08);
  --scroll-color-hover: rgba(0, 0, 0, 0.15);
  --tooltip-bg: #636366;
}

/* ========== СЕРЕБРИСТАЯ ТЕМА (СЕРЫЙ ШЁЛК) ========== */
[data-theme="silver"] {
  --bg-base: #d4d4d8;
  --bg-sidebar: rgba(212, 212, 216, 0.8);
  --bg-layer-2: #dfdfe3;
  --bg-layer-3: #e8e8ed;
  --bg-input: #cacace;
  --bg-bubble: #c0c0c4;
  --bg-chat-active: rgba(0, 113, 227, 0.1);
  --bg-card: #dfdfe3;
  --bg-modal: #dfdfe3;
  --bg-hover: rgba(0, 0, 0, 0.08);
  --bg-mask: rgba(0, 0, 0, 0.3);

  --text-primary: #1c1c1e;
  --text-secondary: #3a3a3c;
  --text-tertiary: #636366;
  --text-caption: #8e8e93;

  --border-l1: rgba(0, 0, 0, 0.1);
  --border-l2: rgba(0, 0, 0, 0.15);
  --border-l2-thin: rgba(0, 0, 0, 0.1);
  --border-l3: rgba(0, 0, 0, 0.2);
  --border-inverted: transparent;

  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-text: #0071e3;

  --scroll-color: rgba(0, 0, 0, 0.12);
  --scroll-color-hover: rgba(0, 0, 0, 0.2);
  --tooltip-bg: #3a3a3c;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-base);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  font-variant-ligatures: normal;
  letter-spacing: -0.01em;
  word-break: break-word;
  margin: 0;
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

::-webkit-scrollbar { width: 0px; height: 0px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: transparent; }

.icon-xs { width: 14px; height: 14px; stroke-width: 2.5; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }
.icon-md { width: 20px; height: 20px; stroke-width: 1.8; }
[data-lucide] { vertical-align: middle; }

.modal.show,
.profile-menu-modal.show,
.lang-modal.show,
.chat-action-modal.show,
.admin-confirm-overlay,
.admin-modal-overlay.show {
  z-index: 200 !important;
}