/* ── Telegram Web Theme Variables & Design Tokens ───────────────── */
:root {
  --tg-primary: #3390ec;
  --tg-primary-hover: #2b7ecf;
  --tg-primary-active: #246fb8;
  --tg-primary-glow: rgba(51, 144, 236, 0.25);

  --tg-sidebar: #ffffff;
  --tg-sidebar-border: #e6e9eb;
  --tg-header: #ffffff;
  --tg-header-border: #e6e9eb;

  --tg-chat: #e6ebee;
  --tg-chat-pattern-color: rgba(0, 0, 0, 0.04);

  --tg-bubble-in: #ffffff;
  --tg-bubble-in-text: #000000;
  --tg-bubble-in-meta: #707579;
  --tg-bubble-in-reply-border: #3390ec;
  --tg-bubble-in-reply-author: #3390ec;

  --tg-bubble-out: #eeffde;
  --tg-bubble-out-text: #000000;
  --tg-bubble-out-meta: #4fae4e;
  --tg-bubble-out-reply-border: #4fae4e;
  --tg-bubble-out-reply-author: #4fae4e;

  --tg-text: #000000;
  --tg-text-secondary: #707579;
  --tg-hint: #707579;
  --tg-muted: #8e959b;
  --tg-search: #f4f4f5;
  --tg-hover: #f4f4f5;
  --tg-active: #e4e4e5;
  --tg-divider: #e6e9eb;

  --tg-online: #0ac630;
  --tg-danger: #e53935;
  --tg-danger-hover: #d32f2f;
  --tg-warning: #f59e0b;
  --tg-success: #22c55e;

  --tg-badge: #3390ec;
  --tg-badge-text: #ffffff;
  --tg-badge-muted: #c4c9cc;

  --tg-set-bg: #f4f4f5;
  --tg-set-card: #ffffff;
  --tg-set-border: #e6e9eb;
  --tg-bg: #ffffff;

  --tg-ripple: rgba(0, 0, 0, 0.08);
  --tg-shadow-sm: 0 1px 2px rgba(16, 35, 47, 0.12);
  --tg-shadow-md: 0 4px 16px rgba(16, 35, 47, 0.16);
  --tg-shadow-lg: 0 12px 32px rgba(16, 35, 47, 0.24);

  --orange: #f26522;
  --accent: #3390ec;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --border: #e6e9eb;

  color-scheme: light;
}

[data-theme="dark"] {
  --tg-primary: #8774e1;
  --tg-primary-hover: #7b68d6;
  --tg-primary-active: #6e5cc9;
  --tg-primary-glow: rgba(135, 116, 225, 0.25);

  --tg-sidebar: #17212b;
  --tg-sidebar-border: #0e1621;
  --tg-header: #17212b;
  --tg-header-border: #0e1621;

  --tg-chat: #0e1621;
  --tg-chat-pattern-color: rgba(255, 255, 255, 0.03);

  --tg-bubble-in: #182533;
  --tg-bubble-in-text: #f5f5f5;
  --tg-bubble-in-meta: #708499;
  --tg-bubble-in-reply-border: #8774e1;
  --tg-bubble-in-reply-author: #8774e1;

  --tg-bubble-out: #2b5278;
  --tg-bubble-out-text: #f5f5f5;
  --tg-bubble-out-meta: #7da5d1;
  --tg-bubble-out-reply-border: #7da5d1;
  --tg-bubble-out-reply-author: #7da5d1;

  --tg-text: #f5f5f5;
  --tg-text-secondary: #708499;
  --tg-hint: #708499;
  --tg-muted: #536272;
  --tg-search: #242f3d;
  --tg-hover: #202b36;
  --tg-active: #2b3948;
  --tg-divider: #101921;

  --tg-online: #0ac630;
  --tg-danger: #ef5350;
  --tg-danger-hover: #e53935;
  --tg-warning: #fbbf24;
  --tg-success: #4ade80;

  --tg-badge: #8774e1;
  --tg-badge-text: #ffffff;
  --tg-badge-muted: #4e5b6e;

  --tg-set-bg: #0e1621;
  --tg-set-card: #17212b;
  --tg-set-border: #0e1621;
  --tg-bg: #17212b;

  --tg-ripple: rgba(255, 255, 255, 0.08);
  --tg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --tg-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --tg-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);

  --orange: #f26522;
  --accent: #8774e1;
  --surface: #17212b;
  --surface-2: #242f3d;
  --border: #0e1621;

  color-scheme: dark;
}

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

[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Apple Color Emoji", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  background: var(--tg-sidebar);
  color: var(--tg-text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  user-select: auto;
  -webkit-user-select: auto;
  pointer-events: auto;
}

button {
  cursor: pointer;
}

a {
  color: var(--tg-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ── Telegram Standard Scrollbars ────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}