/* Shared day/night surfaces. Route colours are never filtered or replaced. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1b2b3d;
  --muted: #586b81;
  --night: #f8fafc;
  --accent: #2266b4;
  --line: #d5dee8;
  --bg: #edf2f6;
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --surface-soft: #edf2f7;
  --own-message: #e8f1fc;
  --own-border: #cbdcf1;
  --accent-ink: #ffffff;
  --accent-soft: #e7f0fa;
  --accent-text: #205c9e;
  --success: #277346;
  --success-soft: #e6f3ea;
  --warning: #875713;
  --warning-soft: #f7eedc;
  --danger: #b13e3e;
  --overlay: #13283e66;
  --shadow: 0 4px 18px #19324a18;
  --map-bg: #e3e9e6;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e2eaf4;
  --muted: #a0b0c5;
  --night: #131c27;
  --accent: #4e96e5;
  --line: #354458;
  --bg: #111924;
  --surface: #1b2736;
  --surface-raised: #202e3e;
  --surface-soft: #162231;
  --own-message: #243f5e;
  --own-border: #365879;
  --accent-ink: #091a2d;
  --accent-soft: #253c55;
  --accent-text: #9acbff;
  --success: #8cceaa;
  --success-soft: #213c31;
  --warning: #e1c086;
  --warning-soft: #3b3223;
  --danger: #ffaaa3;
  --overlay: #060c15b3;
  --shadow: 0 4px 18px #0000002b;
  --map-bg: #242f32;
}

body { color: var(--ink); background: var(--bg); }
button { min-height: 44px; border-radius: 7px; background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 600; box-shadow: none; }
button:hover { filter: none; background: var(--surface-raised); }
button:active { background: var(--surface-soft); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { filter: brightness(1.07); }
input, select, textarea { border-color: var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; }
input[readonly] { background: var(--surface-soft); }
a { color: var(--accent-text); }
.muted, .empty, .coords, .route-options { color: var(--muted); }
.error { color: var(--danger); }

.auth-screen { background: var(--bg); padding: 24px; }
.auth-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 28px; }
.auth-card h1 { margin-top: 18px; font-size: 28px; letter-spacing: -.5px; }
.auth-card > p { color: var(--muted); }
.brand-mark { width: 46px; height: 46px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 15px; letter-spacing: .6px; font-weight: 700; }
.auth-tabs { border-bottom: 1px solid var(--line); gap: 3px; padding-bottom: 8px; }
.auth-tabs button { padding: 9px 10px; background: transparent; border: 0; border-radius: 6px; }
.auth-tabs button.active { background: var(--accent-soft); color: var(--accent-text); }
.auth-card .auth-note, .telegram-state { padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-raised); color: var(--muted); font-size: 13px; line-height: 1.5; }
.telegram-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.telegram-actions > button, .telegram-actions > a { flex: 1; }

.topbar { height: 54px; min-height: 54px; background: var(--night); color: var(--ink); border-bottom: 1px solid var(--line); padding: 5px 12px; gap: 10px; }
.brand strong { font-size: 14px; letter-spacing: 1px; font-weight: 650; }
.brand span { font-size: 11px; color: var(--muted); }
.connection { color: var(--warning); }
.connection.live { color: var(--success); }
.profile-button { background: var(--surface); color: var(--ink); border: 1px solid var(--line); min-height: 44px; padding: 6px 9px; border-radius: 7px; }
.profile-button b { background: var(--surface-soft); color: var(--ink); border-radius: 4px; font-variant-numeric: tabular-nums; }

#map { background: var(--map-bg); }
html[data-theme="dark"] #map .leaflet-tile-pane { filter: brightness(.64) saturate(.55); }
html[data-theme="dark"] .route-line { filter: drop-shadow(0 0 1px #ffffffb8); }
.leaflet-control-zoom { border: 1px solid var(--line)!important; border-radius: 7px!important; box-shadow: var(--shadow)!important; overflow: hidden; }
.leaflet-control-zoom a { width: 44px!important; height: 44px!important; line-height: 44px!important; background: var(--surface)!important; color: var(--ink)!important; border-color: var(--line)!important; font-weight: 500!important; }
.leaflet-control-attribution { background: var(--surface)!important; color: var(--muted)!important; }
.leaflet-control-attribution a { color: var(--accent-text)!important; }
.map-toolbar > button, .map-actions > button { border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 7px; }
.map-toolbar b { background: var(--surface-soft); color: var(--ink); border-radius: 4px; }
.map-actions > button.primary { border-color: var(--accent); min-height: 48px; }
.map-menu > summary { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; box-shadow: var(--shadow); font-size: 19px; }
.map-menu-content { background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; }
.map-menu-content > button { min-height: 44px; background: transparent; font-size: 14px; padding: 10px 12px; }
.map-menu-content > button:hover { background: var(--surface-soft); }
.map-disclaimer { background: var(--surface); color: var(--muted); border-radius: 3px; opacity: .92; }
.map-hint { background: var(--surface); color: var(--muted); border-color: var(--line); box-shadow: var(--shadow); border-radius: 7px; }

.drawer { background: var(--surface); border-color: var(--line); border-radius: 10px; box-shadow: var(--shadow); backdrop-filter: none; }
.drawer-heading { background: var(--surface); border-bottom-color: var(--line); padding: 9px 12px; gap: 8px; }
.drawer-heading h2 { font-weight: 650; font-size: 16px; }
.drawer-heading > button, .dialog-heading > button { border: 0; background: transparent; color: var(--muted); border-radius: 7px; min-width: 44px; }
.drawer-content { background: var(--bg); padding: 12px; }
.drawer-content h3 { font-weight: 650; }
.card { background: var(--surface); border-color: var(--line); border-radius: 8px; }
.card-actions button { min-height: 44px; font-size: 13px; }
.tag { background: var(--surface-soft); color: var(--muted); border-radius: 4px; font-weight: 600; }
.tag.amber { background: var(--warning-soft); color: var(--warning); }
.tag.green { background: var(--success-soft); color: var(--success); }
.route-card { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; box-shadow: var(--shadow); }
.route-card p { color: var(--muted); }
.route-card .route-close { min-height: 44px; width: 44px; right: 2px; top: 2px; color: var(--muted); }
.route-card h3 { padding-right: 34px; }
.route-options summary, .history-card summary { min-height: 44px; padding: 12px 0; color: var(--muted); }
.drawing-bar { background: var(--surface); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow); }
.drawing-bar p { color: var(--muted); }
.drawing-bar > button, .drawing-bar #review-buttons > button { min-height: 44px; }
.notification-card { background: var(--surface); border-color: var(--accent); border-radius: 8px; box-shadow: var(--shadow); }
.help-alert { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 7px; box-shadow: var(--shadow); }
.help-alert button { min-height: 44px; background: var(--accent-soft); color: var(--accent-text); border: 0; }
.toast { background: var(--ink); color: var(--surface); border-radius: 7px; box-shadow: var(--shadow); }
dialog { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 10px; box-shadow: var(--shadow); }
dialog::backdrop { background: var(--overlay); }
.dialog-heading h2 { font-size: 20px; font-weight: 650; }
.check-row { min-height: 44px; }
.rank-row { border-color: var(--line); }
.swatch { border-color: var(--surface); border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.swatch.selected { box-shadow: 0 0 0 3px var(--ink); }
.online-dot { background: var(--muted); }
.online-dot.on { background: var(--success); }

.route-tip { background: var(--surface); box-shadow: var(--shadow); }
.tip-track { stroke: var(--line); }
.tip-seconds { color: var(--ink); }
.route-tip-label, .area-tooltip { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.route-tip::before { border-color: var(--line); }
.help-map-marker { background: var(--accent); color: var(--accent-ink); border-color: var(--surface); border-radius: 6px; box-shadow: var(--shadow); }
.map-origin { background: var(--accent); border-color: var(--surface); box-shadow: 0 0 0 5px #4088d45c; animation: none; }
.route-end { border-color: var(--surface); }

/* One common chat, with replies and a separate online list. */
.chat-drawer { width: 440px; }
.chat-drawer .drawer-content { padding: 12px 10px; background: var(--bg); }
.chat-drawer .drawer-heading { flex-wrap: wrap; }
.chat-tools { background: var(--surface); border-bottom-color: var(--line); }
.chat-tools > button { color: var(--accent-text); background: var(--surface-raised); font-size: 12px; }
.online-list { background: var(--surface); border-bottom-color: var(--line); max-height: min(260px, 35dvh); overflow-y: auto; overscroll-behavior: contain; flex-shrink: 0; }
.online-list > p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-header-tools { display: flex; align-items: center; gap: 4px; }
.chat-header-tools > button, .chat-online-button { min-height: 44px; font-size: 12px; padding: 7px 9px; background: transparent; color: var(--accent-text); border: 0; white-space: nowrap; }
.chat-search { width: 100%; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-search input { font-size: 14px; background: var(--surface-soft); }
.chat-search > input { width: 100%; }
.chat-date { display: table; max-width: 100%; margin: 12px auto; padding: 4px 9px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.chat-message { max-width: 94%; margin: 0 18px 9px 0; padding: 10px 12px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; overflow-wrap: anywhere; }
.chat-own { margin-left: 18px; margin-right: 0; background: var(--own-message); border-color: var(--own-border); }
.chat-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; font-size: 11px; color: var(--muted); min-width: 0; }
.chat-meta strong { color: var(--accent-text); font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.chat-score { font-size: 10px; color: var(--muted); background: transparent; padding: 0; }
.chat-message p, .chat-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0; line-height: 1.5; font-size: 14px; color: var(--ink); }
.chat-text a { text-decoration: underline; text-underline-offset: 2px; }
.chat-status { color: var(--muted); font-size: 10px; text-align: right; line-height: 1.5; margin-top: 4px; font-variant-numeric: tabular-nums; }
.chat-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.chat-message button { width: auto; min-height: 44px; background: transparent; border-color: transparent; color: var(--accent-text); border-radius: 5px; font-size: 12px; padding: 7px 9px; margin: 0; }
.chat-message .chat-actions button { min-height: 44px; margin-left: -7px; }
.chat-message button:hover { background: var(--accent-soft); }
.chat-reply-preview { margin: 7px 0 8px; border-left: 2px solid var(--accent); padding: 5px 8px; border-radius: 0 4px 4px 0; background: var(--accent-soft); color: var(--muted); font-size: 12px; max-width: 100%; overflow-wrap: anywhere; }
.chat-reply-preview strong { display: block; color: var(--accent-text); font-size: 11px; margin-bottom: 2px; }
.chat-reply-preview p { font-size: 12px; margin: 0; color: var(--muted); }
.chat-help { border-left: 3px solid var(--accent); }
.chat-help-title { font-weight: 650; }
.chat-help-closed { background: transparent; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 7px 0; }
.chat-help-closed summary { min-height: 44px; padding: 11px 0; color: var(--muted); font-size: 12px; }
#chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 7px; align-items: end; padding: 9px 10px; background: var(--surface); border-top-color: var(--line); border-radius: 0 0 9px 9px; }
#chat-text { min-height: 44px; max-height: 132px; padding: 11px 12px; background: var(--surface-soft); border-color: var(--line); border-radius: 7px; resize: none; font-size: 14px; }
#chat-form > button[type="submit"] { width: 44px; min-height: 44px; height: 44px; padding: 0; font-size: 21px; border-radius: 7px; }
.composer-tools { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#chat-form .composer-tools > button { width: auto; min-height: 44px; padding: 7px 10px; font-size: 12px; background: transparent; color: var(--accent-text); border: 0; }
.chat-reply-draft { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; border-left: 2px solid var(--accent); padding: 4px 6px 4px 9px; background: var(--accent-soft); border-radius: 0 5px 5px 0; }
.chat-reply-draft > span, .chat-reply-draft > div { flex: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); }
.chat-reply-draft strong { color: var(--accent-text); }
#chat-form .chat-reply-draft button { width: auto; min-width: 44px; min-height: 44px; padding: 7px 9px; font-size: 12px; color: var(--muted); background: transparent; border: 0; flex-shrink: 0; }
.new-messages-button { position: sticky; bottom: 8px; display: block; width: max-content; max-width: 100%; margin: 8px auto; padding: 9px 14px; min-height: 44px; border-radius: 7px; color: var(--accent-text); background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--shadow); z-index: 2; font-size: 12px; }
.online-person { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 54px; padding: 10px 8px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; background: transparent; }
.online-person > span, .online-person > div { min-width: 0; overflow-wrap: anywhere; }
.online-person strong { display: block; font-size: 14px; font-weight: 600; }
.online-person small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.online-person .online-dot { flex: 0 0 7px; }
.online-person:hover { background: var(--surface-soft); }
.chat-mention { color: var(--accent-text); font-weight: 600; }

#demo-toolbar { background: var(--surface-soft); color: var(--muted); border-radius: 7px; padding: 8px; }
#demo-toolbar strong { color: var(--muted); }
#demo-toolbar select, #demo-toolbar button { min-height: 44px; height: 44px; background: var(--surface); border-color: var(--line); color: var(--ink); }
#demo-guide-dialog .demo-close { background: var(--surface); }

@media (max-width: 450px) {
  .chat-drawer { width: calc(100% - 20px); }
  .chat-drawer .drawer-heading { gap: 4px; padding: 6px 8px; }
  .chat-drawer .drawer-heading h2 { font-size: 15px; }
  .chat-header-tools { gap: 0; }
  .chat-header-tools > button, .chat-online-button { font-size: 11px; padding: 7px; }
  .chat-message { margin-right: 12px; padding: 9px 10px 7px; }
  .chat-own { margin-left: 12px; margin-right: 0; }
  .auth-screen { padding: 14px; }
  .auth-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; transition-duration: 0s!important; }
}