/* The colours and shared sizes are the design tokens (web/design/tokens.cjs → public/tokens.css), loaded first. */
html, body { height: 100%; background: var(--bg); }
/* Accent text tuned for contrast on white */
:root.light .text-red-300 { color: #dc2626; }
:root.light .text-emerald-300 { color: #059669; }
:root.light .bg-black\/60 { background-color: rgba(24, 24, 27, 0.32); }
:root.light #hl-dark { display: none; }
:root.dark #hl-light { display: none; }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
::selection { background: rgb(var(--white) / 0.16); }

/* Scrollbars */
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--white) / .14) transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgb(var(--white) / .12); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Tactile press */
.press { transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.press:active { transform: scale(0.95); }

/* Dialogs: 95% → 100% scale with a blurred backdrop */
.dlg-backdrop { opacity: 0; transition: opacity 200ms var(--ease-out); }
.dlg-panel { opacity: 0; transform: scale(0.95); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.dlg-open .dlg-backdrop { opacity: 1; }
.dlg-open .dlg-panel { opacity: 1; transform: none; }
.dlg-closing .dlg-backdrop, .dlg-closing .dlg-panel { transition-duration: 140ms; }
/* Drawer (right on desktop, bottom sheet on mobile) */
.drawer-panel { transform: translateY(16px); opacity: 0; transition: transform 240ms var(--ease-out), opacity 200ms var(--ease-out); }
@media (min-width: 768px) { .drawer-panel { transform: translateX(24px); } }
.dlg-open .drawer-panel { transform: none; opacity: 1; }

/* Popovers */
.pop { transform-origin: var(--origin, bottom left); animation: pop-in 150ms var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* Toast */
.toast { animation: toast-in 240ms var(--ease-out) both; }
.toast.out { animation: toast-out 160ms ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(4px); } }

/* Message actions: revealed on hover (pointer devices) or tap (touch) */
/* The Reply/Copy bar floats on the top corner of the bubble you're pointing at (top right of an
   agent's, top left of yours), just above it, so it never covers the text or gets cut off. */
.feed-list { overflow-x: clip; }

/* Theme transitions: only colors, never layout */
body, header, footer, aside, .msg, button, input, textarea { transition-property: background-color, border-color, color; transition-duration: 160ms; }

/* Safe areas */
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.pt-safe { padding-top: env(safe-area-inset-top); }
/* Home-screen app: a little breathing room under the status bar / Dynamic Island. */
@media (display-mode: standalone) { .pt-safe { padding-top: calc(env(safe-area-inset-top) + 8px); } }
/* iPhone/iPad home-screen app: fill the screen with its plain height. iOS measures the dynamic height (100dvh) short
   when the app starts, so the bottom tabs sat raised until a pull-down; with no browser bars, 100vh is always right.
   (-webkit-touch-callout exists only in Safari on iOS.) Test: tests/home-screen-app.test.js. */
@media (display-mode: standalone) {
  @supports (-webkit-touch-callout: none) {
    #app { height: 100vh; }
  }
}


/* Phones and tablets zoom the page when a text box under 16px is focused (iOS Safari does this
   aggressively). Keep every field at 16px on touch screens so tapping to type never zooms. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: max(16px, calc(16px * var(--text-scale, 1))) !important; }
}

/* ───────── Feed: grey bubbles on the left for agents, blue on the right for you ───────── */
.feed-list { color: var(--text); }

/* Keyboard focus is always visible; mouse and touch clicks stay clean */
:where(button, a, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --tint-mix: 20%; }
}

/* ── Chats as separate rooms: list (home on phones, left column on bigger screens) + one open chat ── */
.chats-pane { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); min-height: 0; }
@media (max-width: 767px) {
  .chats-pane { width: 100%; border-right: 0; }
  #app[data-view="chat"] .chats-pane { display: none; }
  #app[data-view="list"] .chat-pane, #app[data-view="list"] #sidebar { display: none !important; }
}

.home-sub { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--text-3); }

.home-view { position: absolute; inset: 0; z-index: 25; background: var(--bg); display: flex; flex-direction: column; }
.home-view.hidden { display: none; }
.home-view-head { padding: 20px 24px 8px; border-bottom: 1px solid var(--line); }
.home-view-head h2 { font-size: calc(20px * var(--text-scale, 1)); font-weight: 650; color: var(--text); }
.home-view-head p { font-size: calc(13px * var(--text-scale, 1)); color: var(--text-3); margin: 2px 0 10px; }
.home-view-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }

/* ───── The frame: Inbox / Rooms / Team on the left (a tab bar at the bottom), a room on the right ───── */
.chats-pane { width: 360px; }
.pane-head { flex-shrink: 0; }
.pane-head-row { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px 20px; min-height: 64px; }
.pane-head h1 { flex: 1; min-width: 0; margin: 0; font-size: calc(30px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -0.8px; color: var(--text); }
.me-btn { width: 36px; height: 36px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; flex-shrink: 0; }
.me-btn img, .me-btn > * { border-radius: 999px !important; }
.pane-plus { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--card); color: var(--text); border: 1px solid var(--hair); flex-shrink: 0; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 16px; }
.pane-tab.hidden { display: none; }
.chats-pane.searching .pane-tab { display: none; }
.chats-pane[data-tab="team"] .search-bar, .chats-pane[data-tab="team"] #find-results { display: none; }
/* The tabs: a plain bar along the bottom (the phone patterns people know), the chosen tab's icon on a soft yellow pill. */
.tabbar { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--card, var(--bg)); padding-top: 6px; }
.tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--text-3); }
.tabbar button svg { box-sizing: content-box; padding: 4px 17px; border-radius: 999px; transition: background-color 150ms var(--ease-out); }
.tabbar button.on { color: var(--text); font-weight: 700; }
.tabbar button.on svg { background: var(--blue-soft); }
.tab-badge { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; min-height: 18px; padding: 0 5px; border-radius: 999px; background: var(--orange, #B4410B); color: var(--on-orange); font-size: calc(11px * var(--text-scale, 1)); font-weight: 600; line-height: calc(18px * var(--text-scale, 1)); text-align: center; }
.tab-badge.dot { min-width: 9px; width: 9px; min-height: 9px; height: 9px; padding: 0; top: 4px; left: calc(50% + 10px); background: var(--blue, var(--accent)); }
.search-bar { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.search-box { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--text-3); cursor: text; }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font-size: max(16px, calc(16px * var(--text-scale, 1))); outline: none; }
.search-box input::placeholder { color: var(--text-3); }
.search-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.search-cancel { flex: none; height: 44px; padding: 0 2px; font-size: max(16px, calc(16px * var(--text-scale, 1))); color: var(--blue, var(--accent)); }

/* Room header */
@media (max-width: 767px) {
  .chats-pane { width: 100%; }
}


/* Room info: who does what */
.jobs { display: grid; gap: 10px; }
/* Home as its own page (computers): one column per room, side by side */
.home-view-head { display: flex; align-items: baseline; gap: 12px; }
.home-view-head h2 { margin: 0; font-size: calc(26px * var(--text-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.home-view-head p { margin: 0; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-3); }
.home-view-head p.hot { color: var(--orange, #B4410B); font-weight: 600; }
.home-view-body { background: var(--feed-bg, var(--bg)); padding: 18px 20px 24px; }
/* Columns with no gaps (home.js packs each card into the shortest column, in order). */
.home-view-body { overflow-x: hidden; }
/* Home and Team are pages of their own on a computer: no room is open beside them, so no room panel. */
#app[data-page="1"] #sidebar { display: none !important; }

/* 1.6.2–1.6.4 finding your way: the search / person bar, "Back to where you were", bookmarks, hits */
mark.hit { background: #fde047; color: #111; border-radius: 3px; padding: 0 1px; }
#chat-sub .warn { color: #d97706; }

/* Sticky names (1.6.16): a long message keeps its sender's name pinned while it scrolls past. */
/* 1.6.18: the page itself never zooms; inputs are 16px so iPhones don't zoom in on focus; the photo viewer zooms its
   photo (web/src/zoom.js). */
html, body { touch-action: pan-x pan-y; }
input, textarea, select { font-size: max(16px, 1em); }

/* ── The shipped look ("ink and paper", chosen 2026-10): type, messages, composer, lists. Its colours are tokens. ── */
body, button, input, textarea, select { font-family: 'Open Runde', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body { letter-spacing: -0.003em; }
#feed-wrap, #feed { background: var(--feed-bg); }
/* What needs you is pinned over the top of the room: the first message starts below it. */
#feed[data-pinned-strip] { padding-top: 56px; }

/* Composer */
#input { border-radius: 22px !important; padding-left: 16px !important; font-size: max(16px, calc(16px * var(--text-scale, 1))) !important; }
footer .rounded-xl.border { border-radius: 22px !important; background: var(--paper) !important; }
#btn-send { border-radius: 999px !important; background: var(--ink) !important; color: var(--paper) !important; }
#btn-attach, #btn-mic { border-radius: 999px !important; }
#btn-mic { background: var(--ink) !important; color: var(--paper) !important; border-color: transparent !important; }

/* A setting found with Settings' search: marked for a moment once its screen opens (web/src/settings-search.js). */
[data-found] { background: var(--blue-soft); box-shadow: -8px 0 0 var(--blue-soft), 8px 0 0 var(--blue-soft); border-radius: var(--radius-sm); transition: background-color 300ms ease-out; }