/* Ported from app/globals.css (Tailwind + CSS vars) — plain CSS, no Tailwind. */
:root {
  --color-bg: #f5f6f9;
  --color-surface: #ffffff;
  --color-surface-alt: #ecedf3;
  --color-text: #1b2130;
  --color-muted: #5c6473;
  --color-border: #dee1e8;
  --color-accent: #7c6fd6;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #ece7fb;
  --color-success: #1f9d63;
  --color-warning: #b9791c;
  --color-danger: #c6403b;
  --color-bubble-in: #ffffff;
  --color-bubble-out: #ece4fd;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10131a;
    --color-surface: #171b24;
    --color-surface-alt: #1e2330;
    --color-text: #e7e9f0;
    --color-muted: #98a0b3;
    --color-border: #2a2f3d;
    --color-accent: #8774e1;
    --color-accent-contrast: #ffffff;
    --color-accent-soft: #2f2a4d;
    --color-success: #3fbe86;
    --color-warning: #e0a84a;
    --color-danger: #e0615c;
    --color-bubble-in: #1e2330;
    --color-bubble-out: #3d3466;
  }
}

:root[data-theme="dark"] {
  --color-bg: #10131a;
  --color-surface: #171b24;
  --color-surface-alt: #1e2330;
  --color-text: #e7e9f0;
  --color-muted: #98a0b3;
  --color-border: #2a2f3d;
  --color-accent: #8774e1;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #2f2a4d;
  --color-success: #3fbe86;
  --color-warning: #e0a84a;
  --color-danger: #e0615c;
  --color-bubble-in: #1e2330;
  --color-bubble-out: #3d3466;
}

:root[data-theme="light"] {
  --color-bg: #f5f6f9;
  --color-surface: #ffffff;
  --color-surface-alt: #ecedf3;
  --color-text: #1b2130;
  --color-muted: #5c6473;
  --color-border: #dee1e8;
  --color-accent: #7c6fd6;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #ece7fb;
  --color-success: #1f9d63;
  --color-warning: #b9791c;
  --color-danger: #c6403b;
  --color-bubble-in: #ffffff;
  --color-bubble-out: #ece4fd;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

::selection {
  background: var(--color-accent-soft);
}

/* Light global polish pass: consistent, subtle motion on every interactive
   surface (Telegram-style tactile feedback) without touching any layout. */
button,
a,
.rail-btn,
.chat-list-item,
.settings-chip,
.settings-nav-item,
.info-panel-row,
.login-input,
.settings-input {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
button:active:not(:disabled) {
  transform: scale(0.97);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

#view-root {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}