:root {
  color-scheme: dark;
  font-family:
    'SF Pro Display',
    'SF Pro Text',
    'Segoe UI',
    'PingFang SC',
    'Hiragino Sans GB',
    sans-serif;
  --bg-app: #17181b;
  --bg-sidebar: #2a2d31;
  --bg-panel: #1d1f23;
  --bg-elevated: #23262b;
  --line-soft: #32363d;
  --text-primary: #f3f4f6;
  --text-secondary: #a1a8b3;
  --text-muted: #7c8390;
  --accent: #6aa9ff;
  --accent-soft: rgba(106, 169, 255, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  margin: 0;
  height: 100%;
  background: var(--bg-app);
}

body {
  color: var(--text-primary);
}

button,
input,
select {
  font: inherit;
  /* color-scheme alone isn't enough for the native <option> popup on Windows
     (WebView2), especially when the <select> background is transparent — the
     popup renders white. Pin explicit dark colors on the options so the dropdown
     list is dark on every platform. */
  color-scheme: dark;
}

option {
  background-color: var(--bg-panel);
  color: var(--text-primary);
}

/* ───────────────────────────── Scrollbars ─────────────────────────────
   ONE app-wide scrollbar style — the single source of truth. Every scroll
   container (sidebar tree, chat list, reader, trending feed, popovers, modals)
   inherits this; components should NOT define their own ::-webkit-scrollbar
   rules. Slim transparent track + a floating thumb (transparent border +
   padding-box clip shrinks the visible bar) that stays hidden until the
   container is hovered or actively scrolling.

   The thumb is always faintly visible (so it's clear a region can scroll) and
   deepens on hover / while actively scrolling. `.is-scrolling` is a generic
   class toggled by JS during a scroll (PdfViewer / ChatPane / ReaderPane).

   NOTE: never set `scrollbar-width` / `scrollbar-color` — when those standard
   properties are present, WebKit (WKWebView, our runtime) ignores these
   ::-webkit-scrollbar rules entirely and falls back to a native scrollbar. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
  background-clip: padding-box;
}

:hover::-webkit-scrollbar-thumb,
.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.34);
  background-clip: padding-box;
}
