/* blindvault — full stylesheet. Tokens come from
 * /dist/<hash>/design/tokens.css after the build step inlines them; for the
 * deployed shell we serve a flattened version below.                       */

@import url("/tokens.css");

/* ============================================================ Reset == */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;     /* suppress Android pull-to-refresh */
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }

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

/* ============================================================ Skip == */
.bv-skip { position: absolute; left: -9999px; }
.bv-skip:focus {
  left: var(--space-4); top: var(--space-4);
  background: var(--text-primary); color: var(--bg);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-1);
  z-index: var(--z-toast);
  font-family: var(--font-mono); font-size: var(--fz-tiny);
}

/* ============================================================ Type == */
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
h1 { font-size: var(--fz-h1); letter-spacing: -0.012em; }
h2 { font-size: var(--fz-h2); letter-spacing: -0.008em; }
h3 { font-size: var(--fz-h3); }
p  { margin: 0 0 var(--space-3); max-width: var(--measure); }

.bv-prose p { line-height: var(--lh-prose); }
.bv-text-secondary { color: var(--text-secondary); }
.bv-text-tertiary  { color: var(--text-tertiary); }
.bv-mono { font-family: var(--font-mono); }

.bv-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fz-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.bv-eyebrow strong { color: var(--text-primary); }

/* ============================================================ Shell — bottom nav + sidebar */
:root {
  --shell-side-w:  16rem;
  --shell-bot-h:   62px;
  --kbd-h:         0px;
}

.bv-bottomnav {
  position: fixed; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--kbd-h));
  background: var(--surface);
  border-top: 1px solid var(--hair);
  z-index: var(--z-nav);
  transition: transform var(--dur-2) var(--ease);
}
body[data-kbd="open"] .bv-bottomnav { transform: translateY(120%); }

.bv-bottomnav-items {
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; padding: 0; margin: 0;
  max-width: 36rem; margin-inline: auto;
}
.bv-bottomnav-items > li[hidden] + li, .bv-bottomnav-items > li[hidden] {
  display: none;
}
.bv-bottomnav-items a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  min-height: 56px; padding: var(--space-1) var(--space-2);
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--fz-tiny); font-weight: 600;
}
.bv-bottomnav-items a:hover { color: var(--text-primary); }
.bv-bottomnav-items a[aria-current="page"] { color: var(--accent); }
.bv-bottomnav-items svg { width: 22px; height: 22px; }
.bv-bottomnav-items a[aria-current="page"] svg { stroke-width: 1.9; }

.bv-sidebar {
  display: none;
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--shell-side-w);
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--hair);
  z-index: var(--z-nav);
}
.bv-sidebar-brand {
  display: flex; align-items: baseline; gap: var(--space-1);
  margin-bottom: var(--space-6);
  text-decoration: none; color: var(--text-primary);
  font-size: var(--fz-h3); font-weight: 700; letter-spacing: -0.012em;
}
.bv-sidebar-brand:hover { color: var(--accent); }
.bv-sidebar-glyph { color: var(--text-tertiary); font-weight: 400; }

.bv-sidebar-items { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.bv-sidebar-items a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-3);
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--fz-small); font-weight: 500;
}
.bv-sidebar-items a:hover { background: var(--surface-2); color: var(--text-primary); }
.bv-sidebar-items a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.bv-sidebar-items svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Auth-gated sidebar items — rendered for everyone so anonymous visitors
   know what an account unlocks, but visually marked with a lock badge.
   The route guard still redirects clicks to /login. */
.bv-sidebar-items li[data-gated="true"] > a,
.bv-bottomnav-items li[data-gated="true"] > a {
  color: var(--text-tertiary);
}
.bv-sidebar-items li[data-gated="true"] > a .bv-nav-icon,
.bv-bottomnav-items li[data-gated="true"] > a .bv-nav-icon {
  opacity: 0.55;
}
.bv-sidebar-items a .bv-nav-lock,
.bv-bottomnav-items a .bv-nav-lock {
  width: 12px;
  height: 12px;
  margin-left: auto;
  color: var(--text-tertiary);
  opacity: 0.7;
  flex-shrink: 0;
}
.bv-sidebar-items li[data-gated="true"] > a:hover,
.bv-bottomnav-items li[data-gated="true"] > a:hover {
  color: var(--text-primary);
}
.bv-sidebar-items li[data-gated="true"] > a:hover .bv-nav-icon,
.bv-bottomnav-items li[data-gated="true"] > a:hover .bv-nav-icon {
  opacity: 0.85;
}

/* Main content area — scoped to the app-shell <main> so views that nest
   their own <main> (e.g. the inbox message pane) don't inherit max-width
   or padding meant for the document root. */
main#bv-app {
  display: block;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
  padding-bottom: calc(var(--shell-bot-h) + env(safe-area-inset-bottom) + var(--space-7));
  min-height: 100dvh;
}

@media (min-width: 48rem) {
  .bv-bottomnav { display: none; }
  .bv-sidebar   { display: block; }
  main#bv-app {
    margin-left: var(--shell-side-w);
    max-width: 56rem;
    padding: var(--space-6) var(--space-5);
    padding-bottom: var(--space-7);
  }
}

/* ============================================================ Masthead (legacy; only for routes that don't use the shell, like print-recovery) */
.bv-masthead {
  display: flex; align-items: center; gap: var(--space-3);
  max-width: 48rem; margin: 0 auto; padding: var(--space-3) var(--space-4) 0;
}
.bv-wordmark {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 700;
  font-size: var(--fz-h3);
  color: var(--text-primary);
  text-decoration: none;
}
.bv-wordmark::before { content: "§ "; color: var(--text-tertiary); font-style: normal; font-weight: 400; }
.bv-wordmark:hover { color: var(--accent); }
.bv-quicklock {
  margin-left: auto;
  min-width: 44px; min-height: 44px; padding: 0 var(--space-2);
  border-radius: var(--radius-2);
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--hair-strong); cursor: pointer;
}
.bv-quicklock:hover { border-color: var(--text-primary); }

@media (min-width: 48rem) {
  .bv-masthead { display: none; }
}

/* ============================================================ Cards & forms */
.bv-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-1);
  max-width: var(--measure);
}
@media (max-width: 36rem) {
  .bv-card { padding: var(--space-4); border-radius: var(--radius-3); }
}

.bv-field { display: block; margin: var(--space-3) 0; max-width: var(--measure); }
.bv-field > span,
.bv-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fz-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.bv-help { display: block; font-size: var(--fz-small); color: var(--text-secondary); margin-top: var(--space-1); }

.bv-input,
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"],  input[type="number"], input[type="search"],
input[type="url"], textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-3);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
input:focus, textarea:focus, .bv-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 0.85; }

textarea { resize: vertical; line-height: var(--lh-body); padding-top: var(--space-3); }

.bv-field-error {
  display: block; margin-top: var(--space-1);
  font-size: var(--fz-small); color: var(--alert);
}
.bv-input[aria-invalid="true"],
input[aria-invalid="true"] { border-color: var(--alert); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 22%, transparent); }

/* Show/hide toggle inside a field */
.bv-field-with-toggle { position: relative; }
.bv-field-toggle {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  background: transparent; border: 0; color: var(--text-secondary);
  width: 36px; height: 36px; border-radius: var(--radius-1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bv-field-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
.bv-field-with-toggle input { padding-right: 52px; }

/* ============================================================ Buttons */
.bv-button,
button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2);
  font-weight: 600;
  font-size: var(--fz-body);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
  text-decoration: none;
}
button:hover, .bv-button:hover { border-color: var(--text-primary); }
button:active, .bv-button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  button:active, .bv-button:active { transform: none; }
}
button:disabled, .bv-button[disabled] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}
button svg, .bv-button svg { width: 18px; height: 18px; }

.bv-button-primary,
button.bv-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.bv-button-primary:hover, button.bv-primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, var(--text-primary) 14%);
}
.bv-button-ghost, button.bv-ghost {
  background: transparent; color: var(--text-primary);
  border-color: var(--hair-strong);
}
.bv-button-ghost:hover, button.bv-ghost:hover { background: var(--surface-2); }

.bv-button-danger, button.bv-danger {
  color: var(--alert);
  border-color: color-mix(in srgb, var(--alert) 50%, var(--hair-strong));
  background: transparent;
}
.bv-button-danger:hover, button.bv-danger:hover {
  background: color-mix(in srgb, var(--alert) 8%, transparent);
}

.bv-button-icon {
  width: 44px; height: 44px; padding: 0;
}

.bv-row {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-2);
}
.bv-nav {
  justify-content: flex-end;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hair);
}

/* ============================================================ Toasts */
.bv-toasts {
  position: fixed;
  bottom: calc(var(--shell-bot-h) + env(safe-area-inset-bottom) + var(--space-3) + var(--kbd-h));
  left: 0; right: 0;
  padding: 0 var(--space-3);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 48rem) {
  .bv-toasts { bottom: var(--space-5); left: var(--shell-side-w); }
}
.bv-toast {
  pointer-events: auto;
  background: var(--surface-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-3);
  padding: var(--space-3) var(--space-4);
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--space-3); align-items: center;
  box-shadow: var(--shadow-2);
  max-width: 30rem;
  margin-inline: auto;
  animation: bv-toast-in var(--dur-3) var(--ease);
}
.bv-toast[data-severity="success"] { border-left: 4px solid var(--success); }
.bv-toast[data-severity="warning"] { border-left: 4px solid var(--warning); }
.bv-toast[data-severity="error"]   { border-left: 4px solid var(--alert); }
.bv-toast-msg { color: var(--text-primary); font-size: var(--fz-small); line-height: 1.4; }
.bv-toast-action {
  min-height: 36px; padding: 0 var(--space-2);
  background: transparent; border: 0; color: var(--accent); font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.bv-toast-close {
  min-width: 32px; min-height: 32px; padding: 0;
  background: transparent; border: 0; color: var(--text-secondary); cursor: pointer;
}
.bv-toast-close:hover { color: var(--text-primary); }
.bv-toast-leave { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-2), transform var(--dur-2); }
@keyframes bv-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ Skeleton & empty state */
.bv-skel { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.bv-skel-line, .bv-skel-avatar {
  background: var(--surface-2);
  border-radius: var(--radius-1);
  position: relative; overflow: hidden;
}
.bv-skel-line::after, .bv-skel-avatar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent);
  animation: bv-shimmer 1.4s linear infinite;
}
@keyframes bv-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.bv-skel-thread {
  display: grid; grid-template-columns: 2.5rem 1fr;
  gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hair); border-radius: var(--radius-3);
  background: var(--surface);
}
.bv-skel-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.bv-skel-stack { display: grid; gap: var(--space-1); }
.bv-skel-line.bv-skel-l1 { height: 1.05em; width: 60%; }
.bv-skel-line.bv-skel-l2 { height: 0.85em; width: 80%; }
.bv-skel-line.bv-skel-l3 { height: 0.85em; width: 35%; }
.bv-skel-line.bv-skel-title { height: 2rem; width: 50%; margin-bottom: var(--space-3); }
.bv-skel-resource {
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: var(--radius-3);
  padding: var(--space-4); display: grid; gap: var(--space-2);
}

.bv-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  border: 1px dashed var(--hair-strong);
  border-radius: var(--radius-3);
  background: var(--surface);
}
.bv-empty-inner { display: grid; gap: var(--space-3); justify-items: center; }
.bv-empty-icon { width: 40px; height: 40px; color: var(--text-tertiary); stroke: currentColor; fill: none; stroke-width: 1.5; }
.bv-empty-title { font-weight: 700; color: var(--text-primary); margin: 0; }
.bv-empty-body  { color: var(--text-secondary); margin: 0; max-width: 36ch; }

/* ============================================================ Recovery phrase: word-input + display */
.bv-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
.bv-word-cell {
  position: relative;
  display: grid; grid-template-columns: 1.75rem 1fr;
  align-items: baseline; gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3) var(--space-2);
  transition: border-color var(--dur-2) var(--ease);
}
.bv-word-cell:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.bv-word-cell .bv-word-idx { font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bv-word-cell input { border: 0; background: transparent; padding: 0; height: auto; min-height: 0; font-family: var(--font-mono); font-size: var(--fz-body); }
.bv-word-cell input:focus { box-shadow: none; }
.bv-word-cell input.bv-good { color: var(--success); }
.bv-word-cell input.bv-bad  { color: var(--alert); }
.bv-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-2); border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2); padding: var(--space-1);
  margin: 0; list-style: none; max-height: 14rem; overflow-y: auto;
  box-shadow: var(--shadow-2);
  z-index: var(--z-sticky);
  font-family: var(--font-mono); font-size: var(--fz-small);
}
.bv-suggest li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); cursor: pointer; color: var(--text-secondary); }
.bv-suggest li:hover, .bv-suggest li[aria-selected="true"] {
  background: var(--accent-soft); color: var(--text-primary);
}

.bv-phrase-list {
  list-style: none; padding: 0; margin: var(--space-4) 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
}
.bv-phrase-list li {
  display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-3);
}
.bv-phrase-list .bv-word-idx { font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-tertiary); }
.bv-phrase-list code { font-family: var(--font-mono); font-size: var(--fz-body); color: var(--text-primary); background: none; }

/* ============================================================ Dashboards (user + worker) */
.bv-dash-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.bv-dash > section { margin-top: var(--space-6); }
.bv-dash section h2 { margin-top: 0; margin-bottom: var(--space-2); }

.bv-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.bv-doc {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  gap: var(--space-3); align-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
}
.bv-doc-name { font-weight: 600; word-break: break-word; }
.bv-doc-sub  { font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-secondary); margin-top: 2px; }
.bv-doc-actions { display: flex; gap: var(--space-2); }
.bv-doc-actions button { min-height: 36px; padding: 0 var(--space-2); font-size: var(--fz-small); }
.bv-doc svg { width: 26px; height: 26px; color: var(--text-secondary); }

.bv-upload { display: inline-flex; }
.bv-upload > span { /* styled like button */ padding: var(--space-2) var(--space-4); }

/* Worker dashboard grid */
.bv-worker-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 56rem) {
  .bv-worker-grid { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
}
.bv-grants { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.bv-grant {
  display: grid; gap: var(--space-1);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
  padding: var(--space-3) var(--space-4); min-height: 56px; cursor: pointer;
}
.bv-grant:hover { border-color: var(--hair-strong); }
.bv-grant-selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.bv-grant-id { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.bv-grant-id svg { width: 18px; height: 18px; color: var(--text-secondary); }
.bv-grant-handle { font-family: var(--font-mono); }
.bv-grant-scope { color: var(--text-secondary); font-size: var(--fz-small); }
.bv-grant-exp { font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-tertiary); }
.bv-grant-exp[data-exp="none"] { font-style: italic; }
.bv-detail {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
  padding: var(--space-4) var(--space-5);
}
.bv-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.bv-meta dt { font-family: var(--font-mono); font-size: var(--fz-tiny); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); }
.bv-meta dd { margin: 0; color: var(--text-primary); }
.bv-meta code { font-family: var(--font-mono); font-size: var(--fz-small); }

/* ============================================================ Chat */
.bv-chat-threads .bv-thread-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.bv-thread {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
  min-height: 64px; cursor: pointer;
}
.bv-thread[data-unread="true"] .bv-thread-title { font-weight: 700; }
.bv-thread[data-muted="true"] .bv-thread-title { color: var(--text-secondary); }
.bv-thread-slider { background: var(--surface); position: relative; z-index: 1; transition: transform var(--dur-2) var(--ease); }
.bv-thread-main {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); min-height: 64px;
}
.bv-thread-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.bv-thread-icon svg { width: 20px; height: 20px; }
.bv-thread-title-row { display: flex; gap: var(--space-2); align-items: baseline; }
.bv-thread-title { color: var(--text-primary); }
.bv-thread-time { margin-left: auto; font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-tertiary); }
.bv-thread-subtitle { font-size: var(--fz-small); color: var(--text-secondary); display: flex; gap: var(--space-2); }
.bv-thread-type-label { text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); font-size: var(--fz-tiny); }
.bv-unread-badge {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); padding: 2px var(--space-2);
  font-family: var(--font-mono); font-size: var(--fz-tiny); font-weight: 700;
  min-width: 1.4rem; text-align: center;
}
.bv-thread-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; background: var(--bg); z-index: 0;
}
.bv-thread-actions button {
  width: 60px; min-height: 44px; border-radius: 0; border: 0; border-left: 1px solid var(--hair);
  background: var(--bg); color: var(--text-secondary);
}
.bv-thread-actions button:hover { color: var(--text-primary); }

/* Conversation */
.bv-conv {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: calc(100dvh - var(--shell-bot-h) - var(--space-7) - env(safe-area-inset-bottom));
  gap: var(--space-1);
}
@media (min-width: 48rem) {
  .bv-conv { height: calc(100dvh - 2 * var(--space-6)); }
}
.bv-conv-header {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  gap: var(--space-2); align-items: center;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--hair);
}
.bv-conv-back {
  width: 44px; height: 44px; line-height: 44px; text-align: center;
  text-decoration: none; color: var(--text-primary); border-radius: var(--radius-2);
  font-size: 1.4rem;
}
.bv-conv-back:hover { background: var(--surface-2); }
.bv-conv-titleblock h1 { font-size: var(--fz-h3); margin: 0; }
.bv-conv-titleblock small { display: block; font-family: var(--font-mono); font-size: var(--fz-tiny); text-transform: uppercase; letter-spacing: 0.1em; }
.bv-messages { overflow-y: auto; padding: var(--space-3) var(--space-1); display: flex; flex-direction: column; gap: var(--space-1); }
.bv-msg { display: flex; }
.bv-msg[data-sender="self"]   { justify-content: flex-end; }
.bv-msg[data-sender="other"]  { justify-content: flex-start; }
.bv-msg[data-sender="system"] { justify-content: center; }
.bv-bubble {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-4);
  font-size: var(--fz-body);
  line-height: 1.45;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.bv-msg[data-sender="self"] .bv-bubble {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  border-bottom-right-radius: var(--radius-1);
}
.bv-msg[data-sender="other"] .bv-bubble { border-bottom-left-radius: var(--radius-1); }
.bv-msg[data-sender="system"] .bv-bubble {
  background: transparent; border-style: dashed; color: var(--text-secondary);
  font-style: italic; font-size: var(--fz-small);
}
.bv-msg[data-same="true"] .bv-bubble-meta { display: none; }
.bv-bubble-meta { display: flex; gap: var(--space-1); justify-content: flex-end; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--fz-tiny); opacity: 0.75; }
.bv-bubble-status[data-status="pending"] svg { animation: bv-spin 1.6s linear infinite; }
.bv-bubble-status[data-status="failed"] svg { color: var(--alert); }

@keyframes bv-spin { to { transform: rotate(360deg); } }

.bv-compose {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: var(--space-2); align-items: end;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--hair);
}
.bv-compose textarea { min-height: 44px; max-height: 200px; border-radius: var(--radius-3); }
.bv-compose .bv-button-icon { padding: 0; }
.bv-pending-att { min-height: 1.5rem; padding-top: var(--space-1); }
.bv-att-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-pill);
  font-size: var(--fz-small);
}

/* ============================================================ Resources */
.bv-res-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.bv-res {
  display: grid; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
  padding: var(--space-4);
}
.bv-res-name { font-weight: 700; }
.bv-res-meta { display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fz-tiny); color: var(--text-secondary); }
.bv-res-desc { color: var(--text-secondary); font-size: var(--fz-small); }
.bv-res-actions { display: flex; gap: var(--space-2); }

/* ============================================================ Settings */
.bv-setting {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hair);
}
.bv-setting-label { font-weight: 600; }
.bv-setting-sub   { color: var(--text-secondary); font-size: var(--fz-small); }
.bv-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.bv-theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius-3);
  min-height: 72px;
}
.bv-theme-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================ DEV banner */
.bv-dev-banner {
  position: sticky; top: 0; z-index: var(--z-toast);
  background: var(--alert); color: #fff;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--fz-tiny);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.bv-dev-banner code { background: rgba(0,0,0,0.28); padding: 2px var(--space-1); border-radius: var(--radius-1); }
.bv-dev-banner button {
  margin-left: auto; background: #fff; color: var(--alert);
  border: 0; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1); font-family: inherit; font-size: var(--fz-tiny);
  font-weight: 700; cursor: pointer; min-height: 32px;
}

/* ============================================================ Misc legacy mappings */
.bv-muted { color: var(--text-secondary); }
.bv-bad   { color: var(--alert); }
.bv-good  { color: var(--success); }
.bv-warn  {
  background: var(--warning-bg); color: var(--warning);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  border-left: 3px solid var(--warning);
  font-size: var(--fz-small);
}
.bv-err {
  color: var(--alert);
  padding: var(--space-2) var(--space-3);
  background: var(--alert-bg);
  border-radius: var(--radius-2);
  border-left: 2px solid var(--alert);
  font-size: var(--fz-small);
}

/* ---- Print recovery view ---- */
.bv-print {
  max-width: 38rem;
  margin: var(--space-6) auto;
  padding: var(--space-6) var(--space-5);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-3);
}
.bv-print h1 { font-style: italic; font-weight: 500; margin-bottom: var(--space-3); }
.bv-print dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-5); font-family: var(--font-mono); font-size: var(--fz-small); margin: 0 0 var(--space-4); }
.bv-print dt { text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); }
.bv-print-words {
  list-style: none; padding: var(--space-3) var(--space-2); margin: var(--space-4) 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5);
  border-top: 2px solid var(--text-primary); border-bottom: 2px solid var(--text-primary);
}
.bv-print-words li { font-family: var(--font-mono); font-size: var(--fz-h3); padding: var(--space-1) 0;
  border-bottom: 1px dotted var(--hair-strong); display: flex; align-items: baseline; gap: var(--space-3); }
.bv-print-words li:last-child, .bv-print-words li:nth-last-child(2) { border-bottom: none; }
.bv-print-words li span { display: inline-block; width: 2rem; color: var(--text-secondary); font-size: var(--fz-small); font-variant-numeric: tabular-nums; }

@media print {
  body { background: #fff; color: #000; }
  .bv-bottomnav, .bv-sidebar, .bv-skip, .bv-toasts { display: none !important; }
  main#bv-app { margin: 0; padding: 0; max-width: 100%; }
}

/* ============================================================ Two-tier additions == */

/* Contextual sign-in modal + report-issue modal */
.bv-modal-wrap {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
}
.bv-modal-wrap[open] { display: flex; }
.bv-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}
.bv-modal-card {
  position: relative;
  width: min(34rem, calc(100% - var(--space-5)));
  max-height: calc(100dvh - var(--space-6));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
}
.bv-modal-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bv-modal-header h2 { font-size: var(--fz-h2); margin: 0; }
.bv-modal-body { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.bv-auth-modal-explainer { margin: 0; }
.bv-modal-mode-tabs { display: flex; gap: var(--space-2); }
.bv-modal-mode-tabs button {
  flex: 1; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2);
  background: var(--surface-2); border: 1px solid var(--hair); color: var(--text-primary);
  font: inherit;
}
.bv-modal-mode-tabs button[aria-selected="true"] {
  background: var(--accent-soft); border-color: var(--accent);
}
.bv-modal-flow-card { display: flex; flex-direction: column; gap: var(--space-3); }

/* Tier-aware header chips */
.bv-header-actions { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.bv-profile-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; font-size: var(--fz-small); }
.bv-profile-chip svg { width: 18px; height: 18px; }

/* Alerts banner on the resources surface */
.bv-alerts-banner { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.bv-alert { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); border-left: 4px solid var(--accent); background: var(--surface-2); }
.bv-alert-alert   { border-left-color: var(--alert); }
.bv-alert-warning { border-left-color: var(--warning); }
.bv-alert-body { flex: 1; }
.bv-alert-body p { margin: var(--space-1) 0; }
.bv-alert-dismiss { font-size: 1.4rem; line-height: 1; padding: 0 var(--space-2); }

/* PWA install chip — bottom-right floating */
.bv-install-chip {
  position: fixed;
  bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  right: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 999px;
  box-shadow: var(--shadow-2);
  font: inherit; cursor: pointer;
  z-index: 800;
}
.bv-install-chip svg { width: 18px; height: 18px; }
@media (min-width: 48rem) {
  .bv-install-chip { bottom: var(--space-4); }
}

/* Resource detail: required-docs checklist */
.bv-required-docs { margin: var(--space-5) 0; padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-3); }
.bv-checklist { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: var(--space-2); }
.bv-checklist li { display: flex; align-items: baseline; gap: var(--space-2); }
.bv-check-marker { font-size: 1.1rem; color: var(--success); width: 1.25rem; text-align: center; }
.bv-detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.bv-detail-grid dt { color: var(--text-secondary); }
.bv-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.bv-link-quiet { color: var(--text-primary); text-decoration: none; }
.bv-link-quiet:hover { text-decoration: underline; }

/* ============================================================ Nearby resources panel + mini-map == */

.bv-nearby {
  display: block;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
}
.bv-nearby-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.bv-nearby-h { margin: 0; font-size: var(--fz-h2); }
.bv-nearby-map { position: relative; }
.bv-nearby-map-svg {
  width: 100%; height: auto; max-height: 220px;
  border-radius: var(--radius-2); display: block;
}
.bv-nearby-grid line {
  stroke: var(--hair); stroke-width: 0.3;
}
.bv-nearby-pin circle {
  fill: var(--accent); stroke: var(--accent-ink); stroke-width: 0.8;
  cursor: pointer;
  transition: transform 0.15s ease, fill 0.15s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.bv-nearby-pin:hover circle,
.bv-nearby-pin:focus circle {
  fill: var(--alert);
  outline: none;
}
.bv-nearby-pin:focus { outline: none; }
.bv-nearby-pin-inner { fill: var(--accent-ink); pointer-events: none; }
.bv-nearby-me circle {
  fill: var(--success);
  stroke: var(--accent-ink); stroke-width: 0.6;
}
.bv-nearby-me circle[fill="none"] {
  fill: none; stroke: var(--success); stroke-width: 0.6;
}
.bv-nearby-map-osm {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fz-tiny);
  text-decoration: none;
}
.bv-nearby-map-osm:hover { text-decoration: underline; }

.bv-nearby-list {
  list-style: none; padding: 0; margin: var(--space-3) 0 0;
  display: grid; gap: var(--space-2);
}
.bv-nearby-row {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hair);
  border-radius: var(--radius-2);
  background: var(--surface-2);
}
.bv-nearby-row a { text-decoration: none; color: var(--text-primary); }
.bv-nearby-row a:hover strong { text-decoration: underline; }
.bv-nearby-dist {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fz-tiny);
  font-family: var(--font-mono);
}
.bv-nearby-loading {
  padding: var(--space-3);
  color: var(--text-tertiary);
  font-style: italic;
}

/* ============================================================ Self-hosted slippy map == */

.bv-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  background: var(--surface-2);
  border-radius: var(--radius-2);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.bv-map.dragging { cursor: grabbing; }
.bv-map:focus    { outline: 2px solid var(--focus); outline-offset: 2px; }

.bv-map-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.bv-map-pins {
  position: absolute; inset: 0;
  pointer-events: none;
}
.bv-map-pin {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.12s ease;
  transform-box: fill-box;
}
.bv-map-pin:hover, .bv-map-pin:focus { outline: none; }
.bv-map-pin:hover { transform-origin: center; }
.bv-map-pin-body {
  fill: var(--accent);
  stroke: var(--accent-ink);
  stroke-width: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3));
}
.bv-map-pin[data-kind="highlight"] .bv-map-pin-body { fill: var(--alert); }
.bv-map-pin-dot { fill: var(--accent-ink); }
.bv-map-pin:focus .bv-map-pin-body,
.bv-map-pin:hover .bv-map-pin-body { fill: var(--alert); }

.bv-map-me-dot  { fill: var(--success); stroke: var(--accent-ink); stroke-width: 1; }
.bv-map-me-halo { fill: none; stroke: var(--success); stroke-width: 1.5; stroke-dasharray: 3 2; opacity: 0.7; }

.bv-map-controls {
  position: absolute; top: var(--space-2); right: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
  z-index: 2;
}
.bv-map-controls button {
  width: 36px; height: 36px;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1.1rem; font-weight: 600;
  border-radius: var(--radius-2);
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.bv-map-controls button:hover { background: var(--surface-2); }

.bv-map-attribution {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 10px;
  background: rgba(255,255,255,0.7);
  padding: 0 4px;
  border-radius: 2px;
  pointer-events: auto;
  color: #333;
}
.bv-map-attribution a { color: #1a3a6b; text-decoration: none; }
.bv-map-attribution a:hover { text-decoration: underline; }

/* override the nearby-map sizing rules now that the canvas is sized via JS */
.bv-nearby-map { width: 100%; }
.bv-nearby-map-svg { display: none; }     /* unused now */

/* ============================================================ Directions panel == */

.bv-directions {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
}
.bv-directions-header h2 { margin: 0 0 var(--space-1); font-size: var(--fz-h2); }
.bv-directions-header p { margin: 0 0 var(--space-3); }
.bv-directions-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  margin-bottom: var(--space-3);
}
.bv-directions-controls {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin-bottom: var(--space-3);
}
.bv-directions-mode {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fz-small);
}
.bv-directions-mode select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}
.bv-directions-summary {
  padding: var(--space-3);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-2);
  margin-bottom: var(--space-3);
  font-size: var(--fz-body);
}
.bv-directions-steps {
  list-style: decimal;
  padding-left: var(--space-5);
  display: grid; gap: var(--space-2);
  font-size: var(--fz-small);
}
.bv-directions-steps li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--hair);
}
.bv-step-dist {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fz-tiny);
  white-space: nowrap;
}
.bv-directions-export { margin-top: var(--space-4); }

/* ---- Directions tool (top-level /#directions view) ----------------- */
.bv-directions-tool .bv-directions-header h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--fz-h1);
}
.bv-directions-search { position: relative; margin-bottom: var(--space-3); }
.bv-directions-search > label {
  display: block; margin-bottom: var(--space-1);
  font-size: var(--fz-small); font-weight: 600;
}
.bv-directions-search-row {
  display: flex; gap: var(--space-1); align-items: stretch;
}
.bv-directions-search-row input[type="search"] {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}
.bv-directions-search-row input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bv-directions-search-row > button { flex: 0 0 auto; padding: 0 var(--space-3); }
.bv-text-small { font-size: var(--fz-small); }
.bv-directions-hits {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 5;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-height: 320px;
  overflow-y: auto;
}
.bv-directions-hit {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--hair);
  display: grid;
}
.bv-directions-hit:last-child { border-bottom: none; }
.bv-directions-hit:hover,
.bv-directions-hit:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.bv-directions-hit-primary { font-weight: 600; color: var(--text-primary); }
.bv-directions-hit-secondary {
  font-size: var(--fz-small);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.bv-directions-hit-empty,
.bv-directions-hit-error {
  color: var(--text-tertiary);
  font-style: italic;
  cursor: default;
}
.bv-directions-map-hint { margin-top: -8px; margin-bottom: var(--space-3); }

/* Origin pin (A marker) styling */
.bv-map-pin-origin .bv-map-pin-origin-body { fill: var(--success); }
.bv-map-pin-origin-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; fill: white; pointer-events: none; }

/* Resources page top-of-page map */
.bv-resources-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  margin: var(--space-3) 0 var(--space-1);
}
.bv-resources-map-hint {
  margin: 0 0 var(--space-4);
  font-size: var(--fz-small);
}

/* ---- Map info popup ---- */
.bv-map { position: relative; }
.bv-map-popup-host {
  position: absolute;
  inset: 0;
  pointer-events: none;     /* the host catches no events; the box re-enables */
  z-index: 5;
}
.bv-map-popup {
  position: absolute;
  pointer-events: auto;
  min-width: 220px;
  max-width: min(320px, calc(100% - 16px));
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: var(--space-3);
  font-size: var(--fz-small);
  line-height: 1.45;
  animation: bv-map-popup-in 120ms ease-out;
}
@keyframes bv-map-popup-in {
  from { opacity: 0; transform: translateY(2px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bv-map-popup::after {
  /* Tail/arrow pointing at the pin. Position via --bv-map-popup-tail-x. */
  content: "";
  position: absolute;
  left: var(--bv-map-popup-tail-x, 50%);
  width: 12px;
  height: 12px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.bv-map-popup[data-placement="above"]::after { bottom: -7px; }
.bv-map-popup[data-placement="below"]::after {
  top: -7px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.bv-map-popup-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-1);
}
.bv-map-popup-close:hover { background: var(--surface); color: var(--text-primary); }

.bv-map-popup-card { display: flex; flex-direction: column; gap: var(--space-2); padding-right: 18px; }
.bv-map-popup-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.bv-map-popup-addr {
  margin: 0;
  font-size: var(--fz-tiny);
  color: var(--text-secondary);
}
.bv-map-popup-desc {
  margin: 0;
  font-size: var(--fz-small);
  color: var(--text-primary);
}
.bv-map-popup-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bv-map-popup-chips li {
  padding: 2px 8px;
  font-size: var(--fz-tiny);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}
.bv-map-popup-chips-more { font-style: italic; }
.bv-map-popup-meta {
  margin: 0;
  font-size: var(--fz-tiny);
  color: var(--text-secondary);
  font-family: var(--font-mono), ui-monospace, monospace;
}
.bv-map-popup-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.bv-map-popup-actions .bv-button-primary,
.bv-map-popup-actions .bv-button-ghost {
  padding: 4px 12px;
  font-size: var(--fz-tiny);
}
.bv-map-popup-actions a { text-decoration: none; }

/* ============================================================ Community Chat AI == */
.cc-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 880px;
  margin: 0 auto;
  min-height: min(70vh, 700px);
}
.cc-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.cc-titleblock h1 {
  margin: 0;
  font-size: var(--fz-h2);
  letter-spacing: -0.01em;
}
.cc-titleblock small {
  display: block;
  margin-top: 2px;
  font-size: var(--fz-tiny);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cc-header-actions { display: flex; gap: var(--space-2); }

.cc-tools-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--fz-tiny);
}
.cc-tools-strip[hidden] { display: none; }
.cc-tools-label {
  color: var(--text-secondary);
  margin-right: var(--space-1);
}
.cc-tool-chip {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
}
.cc-tool-more {
  color: var(--text-secondary);
  font-size: var(--fz-tiny);
  margin-left: var(--space-1);
}

/* File row layout (Vault → Files view) — icon + filename/meta + actions */
.bv-file-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.bv-file-row:last-child { border-bottom: 0; }
.bv-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 36px;
}
.bv-fileicon { display: block; }
.bv-file-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bv-file-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bv-file-sub {
  font-size: 0.85em;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bv-file-actions {
  display: inline-flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Wrapper holds the scrolling log + the floating jump-to-bottom button so
   the button can be positioned absolutely without clipping. */
.cc-log-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;  /* required so the inner .cc-log can shrink + scroll */
}

.cc-log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  overflow-y: auto;
  min-height: 240px;
  scroll-behavior: smooth;
}

/* Floating jump-to-bottom button. Spherical, centered horizontally, pinned
   just above the compose row. Hidden by default; the view toggles `hidden`
   based on scroll position. */
.cc-jump-bottom {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent, #2A5D7F);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.cc-jump-bottom:hover {
  background: var(--accent, #2A5D7F);
  color: var(--surface);
  transform: translateX(-50%) translateY(-1px);
}
.cc-jump-bottom:focus-visible {
  outline: 2px solid var(--accent, #2A5D7F);
  outline-offset: 2px;
}
.cc-jump-bottom[hidden] { display: none; }
.cc-jump-bottom svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
}

.cc-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-3);
  max-width: min(92%, 720px);
  font-size: var(--fz-body);
  line-height: 1.55;
}
.cc-bubble-role {
  font-size: var(--fz-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0;
}
.cc-bubble-body {
  white-space: pre-wrap;
  word-break: break-word;
}
.cc-bubble-body.cc-streaming::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  animation: cc-blink 1s steps(2) infinite;
  opacity: 0.6;
}
.cc-bubble-body.cc-error { color: var(--danger, #b00020); }
@keyframes cc-blink { 50% { opacity: 0; } }

.cc-bubble-user {
  align-self: flex-end;
  background: var(--accent-weak, color-mix(in oklab, var(--accent) 12%, var(--surface-2)));
  border: 1px solid var(--border);
}
.cc-bubble-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
}

.cc-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cc-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--surface-2);
}
.cc-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.cc-input-row textarea {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  font: inherit;
  color: inherit;
  min-height: 1.5em;
  max-height: 200px;
  overflow-y: auto;
}
.cc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  cursor: pointer;
}
.cc-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-icon-btn:hover { background: var(--surface-2); }
.cc-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.cc-icon-btn.bv-primary {
  background: var(--accent);
  color: var(--on-accent, #fff);
  border-color: transparent;
}
button.cc-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cc-attachments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cc-attachments:empty { display: none; }
.cc-att {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fz-tiny);
  max-width: 320px;
}
.cc-att-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.cc-att-meta { color: var(--text-secondary); }
.cc-att-ok      { color: var(--success, #2a7a3d); }
.cc-att-err     { color: var(--danger, #b00020); }
.cc-att-pending { color: var(--text-secondary); font-style: italic; }
.cc-att-remove {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-secondary);
  padding: 0 4px;
}
.cc-att-remove:hover { color: var(--text-primary); }

/* Token-budget meter (header-actions) */
.cc-meter {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 180px;
  font-size: var(--fz-tiny);
  color: var(--text-secondary);
  font-family: var(--font-mono), ui-monospace, monospace;
}
.cc-meter-label { letter-spacing: 0.02em; }
.cc-meter-track {
  height: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cc-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent, #2A5D7F);
  transition: width 200ms ease-out, background 200ms ease-out;
}
.cc-meter[data-state="warn"]   .cc-meter-fill { background: #d99a2b; }
.cc-meter[data-state="danger"] .cc-meter-fill { background: #c0392b; }

/* Markdown rendering inside assistant bubbles */
.cc-bubble-body .md-p { margin: 0 0 var(--space-2); }
.cc-bubble-body .md-p:last-child { margin-bottom: 0; }
.cc-bubble-body .md-h1,
.cc-bubble-body .md-h2,
.cc-bubble-body .md-h3,
.cc-bubble-body .md-h4,
.cc-bubble-body .md-h5,
.cc-bubble-body .md-h6 {
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cc-bubble-body .md-h1 { font-size: var(--fz-h2); }
.cc-bubble-body .md-h2 { font-size: var(--fz-h3); }
.cc-bubble-body .md-h3 { font-size: 1.05em; }
.cc-bubble-body .md-h4,
.cc-bubble-body .md-h5,
.cc-bubble-body .md-h6 { font-size: 1em; }
.cc-bubble-body .md-list { margin: 0 0 var(--space-2); padding-left: 1.4em; }
.cc-bubble-body .md-list li { margin-bottom: var(--space-1); }
.cc-bubble-body .md-bq {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
}
.cc-bubble-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-3) 0;
}
.cc-bubble-body .md-code {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.92em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}
.cc-bubble-body a {
  color: var(--accent, #2A5D7F);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Friendly artifact link: chip with file-type badge + filename. Replaces the
   raw /api/community-chat/v1/artifacts/<name>.pdf path the upstream emits. */
.cc-bubble-body a.md-artifact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  text-decoration: none;
  max-width: 100%;
  vertical-align: middle;
  margin: 2px 0;
}
.cc-bubble-body a.md-artifact:hover {
  border-color: var(--accent, #2A5D7F);
  background: var(--surface-2);
}
.cc-bubble-body a.md-artifact .md-artifact-ext {
  display: inline-block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent, #2A5D7F);
  color: var(--surface);
  flex: 0 0 auto;
}
.cc-bubble-body a.md-artifact .md-artifact-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 500;
}

/* Fenced code blocks */
.cc-bubble-body .md-pre-wrap {
  position: relative;
  margin: 0 0 var(--space-2);
}
.cc-bubble-body .md-pre {
  margin: 0;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow-x: auto;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.88em;
  line-height: 1.5;
}
.cc-bubble-body .md-pre code { background: transparent; border: 0; padding: 0; }
.cc-bubble-body .md-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  font-size: var(--fz-tiny);
  font-family: var(--font-mono), ui-monospace, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease;
}
.cc-bubble-body .md-pre-wrap:hover .md-copy,
.cc-bubble-body .md-copy:focus-visible { opacity: 1; }

/* Qwen3.6 <think> blocks */
.cc-bubble-body .md-think {
  margin: 0 0 var(--space-2);
  font-size: 0.92em;
  color: var(--text-secondary);
}
.cc-bubble-body .md-think summary {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.cc-bubble-body .md-think-body {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-left: 3px solid var(--border);
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  white-space: pre-wrap;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.88em;
}

/* ---- Tables ---- */
.cc-bubble-body .md-table-wrap {
  margin: 0 0 var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-2);
}
.cc-bubble-body .md-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
}
.cc-bubble-body .md-table th,
.cc-bubble-body .md-table td {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3);
  vertical-align: top;
  text-align: left;
}
.cc-bubble-body .md-table thead th {
  background: var(--surface);
  font-weight: 700;
}
.cc-bubble-body .md-table tbody tr:nth-child(odd) td {
  background: color-mix(in oklab, var(--surface) 50%, transparent);
}

/* ---- Task list checkboxes ---- */
.cc-bubble-body .md-task {
  list-style: none;
  margin-left: -1.4em;
  padding-left: 0;
}
.cc-bubble-body .md-task-cb {
  margin-right: 0.4em;
  vertical-align: middle;
  accent-color: var(--accent, #2A5D7F);
}

/* ---- Copy-message button (assistant header) ---- */
.cc-bubble-assistant .cc-bubble-role {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.cc-bubble-copy {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease;
}
.cc-bubble-assistant:hover .cc-bubble-copy,
.cc-bubble-copy:focus-visible { opacity: 1; }
.cc-bubble-copy:hover { color: var(--text-primary); background: var(--surface); }

/* ---- Code block toolbar (lang label + copy) ---- */
.cc-bubble-body .md-pre-toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.cc-bubble-body .md-pre-lang {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
  padding: 2px 6px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  letter-spacing: 0.04em;
  opacity: 0.7;
}
/* Streaming-incomplete code block (highlighter waits for closing fence). */
.cc-bubble-body .md-pre-open .md-pre-lang::after {
  content: " · streaming";
  opacity: 0.8;
}

/* ---- Syntax highlighting tokens ---- */
/* Atom-One-ish palette tuned to the warm-paper light theme; dark theme
   gets a separate hue band via prefers-color-scheme.  All tokens use the
   font from the code block so they don't break vertical rhythm. */
.cc-bubble-body .tok-kw  { color: #b15a14; font-weight: 600; }
.cc-bubble-body .tok-lit { color: #b15a14; }
.cc-bubble-body .tok-str { color: #2e6b3f; }
.cc-bubble-body .tok-num { color: #8a4a8a; }
.cc-bubble-body .tok-com { color: #888; font-style: italic; }
.cc-bubble-body .tok-var { color: #2A5D7F; }
@media (prefers-color-scheme: dark) {
  .cc-bubble-body .tok-kw  { color: #e29a4e; }
  .cc-bubble-body .tok-lit { color: #e29a4e; }
  .cc-bubble-body .tok-str { color: #8fd28a; }
  .cc-bubble-body .tok-num { color: #d29fe0; }
  .cc-bubble-body .tok-com { color: #7a7a7a; font-style: italic; }
  .cc-bubble-body .tok-var { color: #9ec4e8; }
}

/* ============================================================ */
/* Files view + viewer modal                                    */
/* ============================================================ */
.bv-files { max-width: 60rem; margin: 0 auto; padding: 1rem; }
.bv-files-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: 0.25rem; flex-wrap: wrap;
}
.bv-files-titlewrap {
  display: flex; align-items: center; gap: 0.75rem;
}
.bv-files-titlewrap h1 { margin: 0; }
.bv-storage {
  min-width: 14rem; max-width: 18rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.85em;
}
.bv-storage-label {
  font-weight: 600; opacity: 0.85; letter-spacing: 0.02em;
}
.bv-storage-bar {
  position: relative; height: 0.55rem; border-radius: 999px;
  background: var(--hair, #d0c8b6); overflow: hidden;
}
.bv-storage-fill {
  display: block; height: 100%; width: 0%;
  background: var(--accent, #2A5D7F);
  transition: width 200ms ease;
}
.bv-storage.is-warning .bv-storage-fill { background: var(--warning, #8A5A12); }
.bv-storage.is-danger  .bv-storage-fill { background: var(--alert, #A4262C); }
.bv-storage-text {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #5E564B);
}

.bv-files-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--hair, #d0c8b6);
  margin-bottom: 0.5rem;
}
.bv-files-toolbar input[type=search] { flex: 1 1 12rem; min-width: 8rem; }
.bv-files-list { list-style: none; padding: 0; margin: 0; }
.bv-file-row {
  display: grid;
  grid-template-columns: 1.25rem 2rem 1fr auto;
  align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--hair, #d0c8b6);
}
.bv-file-select { display: flex; align-items: center; justify-content: center; }
.bv-file-select input { width: 1rem; height: 1rem; cursor: pointer; }
.bv-file-icon svg { width: 1.5rem; height: 1.5rem; opacity: 0.85; }
.bv-file-name {
  display: flex; align-items: center; gap: 0.4rem;
  font-weight: 600; min-width: 0;
}
.bv-file-name-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.bv-file-eye {
  border: 0; background: transparent; padding: 0.15rem 0.25rem;
  color: inherit; opacity: 0.65; cursor: pointer; border-radius: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; line-height: 1; flex: 0 0 auto;
}
.bv-file-eye:hover, .bv-file-eye:focus-visible {
  opacity: 1; background: rgba(127,127,127,0.12); outline: none;
}
.bv-file-eye .bv-eye-svg { width: 1.05em; height: 1.05em; }
.bv-file-sub  { font-size: 0.85em; opacity: 0.7; }
.bv-file-actions { display: flex; gap: 0.5rem; }

dialog.bv-viewer {
  width: min(92vw, 56rem);
  max-height: 86vh;
  padding: 0;
  border: 1px solid var(--hair, #d0c8b6);
  border-radius: 0.75rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #1a1612);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
dialog.bv-viewer::backdrop { background: rgba(0,0,0,0.55); }
.bv-viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--hair, #d0c8b6);
  background: var(--surface-2, var(--surface));
}
.bv-viewer-name { font-weight: 600; word-break: break-all; color: var(--text-primary); }
.bv-viewer-sub  { font-size: 0.8em; color: var(--text-secondary); }
.bv-viewer-actions { display: flex; gap: 0.5rem; }
.bv-viewer-body {
  padding: 0; overflow: auto;
  max-height: calc(86vh - 4rem);
  color: var(--text-primary);
  background: var(--surface);
}
.bv-viewer-image  {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  background: repeating-conic-gradient(rgba(0,0,0,0.04) 0% 25%, transparent 0% 50%) 50%/16px 16px;
}
.bv-viewer-pdf    { width: 100%; height: 78vh; border: 0; background: #ffffff; }

/* Plain-text / code preview — readable mono block, sane line-height,
   neutral surface that doesn't fight the theme. */
.bv-viewer-text {
  white-space: pre-wrap; word-break: break-word;
  padding: 1.25rem 1.5rem; margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.55;
  color: var(--text-primary);
  background: var(--surface-2, var(--surface));
  tab-size: 2;
}

/* DOCX preview — laid out like a document page (white card, dark ink,
   serif body) so it reads as a document regardless of theme. */
.bv-viewer-docx {
  padding: 2.25rem 2.5rem;
  max-width: 50rem;
  margin: 1.25rem auto;
  background: #fdfcf8;
  color: #1a1612;
  line-height: 1.65;
  font-family: "Iowan Old Style", "Charter", Georgia, "Source Serif Pro", serif;
  font-size: 1rem;
  border: 1px solid var(--hair, #d0c8b6);
  border-radius: 0.25rem;
  box-shadow: 0 4px 18px -10px rgba(0,0,0,0.25);
}
.bv-viewer-docx p { margin: 0 0 0.85em 0; }
.bv-viewer-docx img { max-width: 100%; height: auto; }
.bv-viewer-docx h1, .bv-viewer-docx h2, .bv-viewer-docx h3,
.bv-viewer-docx h4, .bv-viewer-docx h5, .bv-viewer-docx h6 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #1a1612;
  margin: 1.5em 0 0.5em;
  line-height: 1.25;
}
.bv-viewer-docx h1 { font-size: 1.65rem; font-weight: 700; }
.bv-viewer-docx h2 { font-size: 1.35rem; font-weight: 700; }
.bv-viewer-docx h3 { font-size: 1.15rem; font-weight: 600; }
.bv-viewer-docx ul, .bv-viewer-docx ol { padding-left: 1.5em; margin: 0 0 1em; }
.bv-viewer-docx li { margin: 0.25em 0; }
.bv-viewer-docx a { color: #1d4f7a; text-decoration: underline; }
.bv-viewer-docx table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.bv-viewer-docx th, .bv-viewer-docx td {
  border: 1px solid #c8c0a8; padding: 0.4em 0.6em; vertical-align: top;
}
.bv-viewer-docx th { background: #ece4cd; font-weight: 600; }
.bv-viewer-docx blockquote {
  margin: 0 0 1em; padding: 0.25em 1em;
  border-left: 3px solid #a99e7d;
  color: #4a4035;
}
.bv-viewer-docx code, .bv-viewer-docx pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #ece4cd; color: #1a1612;
  border-radius: 0.2em; padding: 0.05em 0.3em;
}
.bv-viewer-docx pre { padding: 0.75em 1em; overflow-x: auto; }

/* ------------------------------------------------------------------ */
/* 404 / not-found view (#/<unknown>)                                 */
/* ------------------------------------------------------------------ */
.bv-not-found {
  max-width: 36rem;
  margin: var(--space-6) auto;
  padding: var(--space-5);
  text-align: center;
}
.bv-not-found-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--surface-2, #f0ece1);
  color: var(--text-tertiary, #888);
  margin-bottom: var(--space-3);
}
.bv-not-found-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bv-not-found-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.bv-not-found h1 {
  margin: 0 0 var(--space-2);
  font-size: 1.5rem;
}
.bv-not-found-body {
  color: var(--text-secondary, #555);
  margin: 0 0 var(--space-3);
}
.bv-not-found-path {
  display: block;
  background: var(--surface-2, #f5f1e8);
  border: 1px solid var(--border, #d9d3c3);
  border-radius: var(--radius-2, 6px);
  padding: 0.5rem 0.75rem;
  margin: 0 auto var(--space-4);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
  font-size: 0.85rem;
  text-align: left;
}
.bv-not-found-actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Profile view (#/profile)                                           */
/* ------------------------------------------------------------------ */
.bv-profile-intro {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.bv-profile-form {
  display: grid;
  gap: var(--space-4);
  max-width: 48rem;
}
.bv-profile-form fieldset {
  border: 1px solid var(--border, #d9d3c3);
  border-radius: var(--radius-2, 8px);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.bv-profile-form legend {
  font-weight: 700;
  padding: 0 0.4rem;
  color: var(--text-primary);
}
.bv-field {
  display: grid;
  gap: 0.25rem;
  margin: 0.75rem 0;
}
.bv-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.bv-field input:not([type="checkbox"]):not([type="radio"]),
.bv-field textarea {
  font: inherit;
  color: inherit;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d9d3c3);
  border-radius: var(--radius-2, 6px);
  padding: 0.55rem 0.7rem;
  width: 100%;
  box-sizing: border-box;
}
.bv-field input:not([type="checkbox"]):not([type="radio"]):focus,
.bv-field textarea:focus {
  outline: 2px solid var(--accent, #5a7da6);
  outline-offset: 1px;
  border-color: var(--accent, #5a7da6);
}
.bv-field textarea {
  resize: vertical;
  min-height: 5rem;
  font-family: inherit;
}
.bv-profile-privacy {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-2, #f5f1e8);
  border-left: 3px solid var(--accent, #5a7da6);
  border-radius: var(--radius-2, 6px);
}
.bv-profile-privacy strong { color: var(--text-primary); }
.bv-profile-actions {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bv-profile-actions #bv-profile-status {
  margin-left: 0.5rem;
}

@media (max-width: 560px) {
  .bv-profile-form fieldset { padding: var(--space-2) var(--space-3); }
}

/* About page ---------------------------------------------------------------
   Public-tier explainer. Mirrors the bv-card frame; the hero strip uses the
   same wordmark glyph as the sidebar so identity carries across surfaces. */
.bv-about { max-width: 860px; }
.bv-about-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--space-4);
}
.bv-about-glyph {
  font-family: var(--font-display, Georgia, serif);
  font-size: 56px;
  line-height: 1;
  color: var(--accent, #2A5D7F);
  flex: 0 0 auto;
}
.bv-about-hero-text { min-width: 0; }
.bv-about-hero h1 {
  margin: 0;
  font-size: var(--fz-h1, 1.75rem);
  letter-spacing: -0.01em;
}
.bv-about-tagline {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--fz-h4, 1rem);
}
.bv-about-lede {
  font-size: 1.05rem;
  line-height: var(--lh-prose, 1.55);
  margin: 0 0 var(--space-5);
  max-width: 64ch;
}
.bv-about-features {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bv-about-features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
  background: var(--surface-2, transparent);
}
.bv-about-feat-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-bg, rgba(42,93,127,0.10));
  color: var(--accent, #2A5D7F);
  flex: 0 0 auto;
}
.bv-about-feat-icon svg { width: 18px; height: 18px; }
.bv-about-features h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.bv-about-features p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.bv-about-how,
.bv-about-privacy {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hair);
}
.bv-about-how h2,
.bv-about-privacy h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fz-h3, 1.2rem);
}
.bv-about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bv-step;
  display: grid;
  gap: var(--space-3);
}
.bv-about-steps li {
  counter-increment: bv-step;
  position: relative;
  padding-left: 40px;
  line-height: 1.5;
  max-width: 64ch;
}
.bv-about-steps li::before {
  content: counter(bv-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  background: var(--accent, #2A5D7F);
  color: var(--surface);
  font-size: 0.85rem;
}
.bv-about-privacy ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--space-2);
  max-width: 64ch;
}
.bv-about-privacy li { line-height: 1.5; }

.bv-about-actions {
  margin: var(--space-5) 0 var(--space-3);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bv-about-footer {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hair);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Inline images in chat — click opens lightbox, hover lifts gently   */
/* ------------------------------------------------------------------ */
.cc-bubble-body .md-image-btn,
.cc-bubble-body .cc-user-image {
  display: block;
  margin: var(--space-2) 0;
  padding: 0;
  background: transparent;
  border: 0;
  line-height: 0;
  max-width: 100%;
  cursor: zoom-in;
  border-radius: var(--radius-2, 6px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cc-bubble-body .md-image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: var(--radius-2, 6px);
  border: 1px solid var(--border, #d9d3c3);
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  pointer-events: none;     /* clicks go to the button wrapper */
}
.cc-bubble-body .md-image-btn:hover,
.cc-bubble-body .cc-user-image:hover {
  transform: translateY(-1px);
}
.cc-bubble-body .md-image-btn:hover .md-image,
.cc-bubble-body .cc-user-image:hover .md-image {
  border-color: var(--accent, #2A5D7F);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.cc-bubble-body .md-image-btn:focus-visible,
.cc-bubble-body .cc-user-image:focus-visible {
  outline: 2px solid var(--accent, #2A5D7F);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .cc-bubble-body .md-image { max-height: 260px; }
}

/* Lightbox overlay — fades in, centers a single image, dismissed by
   backdrop click or Escape. Sits above the bubble stack but inside the
   normal document scope so it inherits chat tokens. */
.bv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
  cursor: zoom-out;
  padding: clamp(12px, 4vw, 48px);
}
.bv-lightbox.bv-lightbox-open { opacity: 1; }
.bv-lightbox-frame {
  position: relative;
  max-width: min(94vw, 1200px);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bv-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-3, 8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  cursor: default;
  background: #111;
}
.bv-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(20, 22, 28, 0.92);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.bv-lightbox-close:hover { background: rgba(40, 44, 54, 1); }
.bv-lightbox-close:focus-visible {
  outline: 2px solid var(--accent, #2A5D7F);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bv-lightbox,
  .cc-bubble-body .md-image-btn,
  .cc-bubble-body .cc-user-image {
    transition: none;
  }
}

/* User-bubble structured content: text paragraph + file-ref tag */
.cc-bubble-body .cc-user-text { margin: 0 0 var(--space-1); white-space: pre-wrap; }
.cc-bubble-body .cc-user-text:last-child { margin-bottom: 0; }
.cc-bubble-body .cc-user-fileref {
  margin: var(--space-1) 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: var(--fz-tiny);
  color: var(--text-secondary);
}

/* ===== Know-Your-Rights ===== */
.bv-rights { max-width: 880px; }
.bv-rights-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.bv-rights-header h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--fz-h1, 1.8rem);
}
.bv-rights-lede {
  margin: 0;
  color: var(--text-secondary);
  max-width: 60ch;
  line-height: 1.55;
}
.bv-rights-langtoggle {
  display: inline-flex;
  border: 1px solid var(--border, #d4cdb8);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #fdfbf3);
}
.bv-rights-langbtn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary, #6b6356);
  letter-spacing: 0.05em;
}
.bv-rights-langbtn.is-active {
  background: var(--accent, #4a6741);
  color: var(--on-accent, #fdfbf3);
}
.bv-rights-langbtn + .bv-rights-langbtn { border-left: 1px solid var(--border, #d4cdb8); }
.bv-rights-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bv-rights-card {
  border: 1px solid var(--border, #d4cdb8);
  border-radius: 10px;
  background: var(--surface, #fdfbf3);
  overflow: hidden;
}
.bv-rights-details[open] { background: var(--surface-elevated, #fffaee); }
.bv-rights-summary {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.bv-rights-summary::-webkit-details-marker { display: none; }
.bv-rights-chev {
  flex: 0 0 auto;
  width: 1.2em;
  transition: transform 0.15s ease;
  color: var(--accent, #4a6741);
  font-weight: 700;
}
.bv-rights-details[open] .bv-rights-chev { transform: rotate(90deg); }
.bv-rights-head { min-width: 0; flex: 1 1 auto; }
.bv-rights-head h2 { margin: 0; font-size: 1.1rem; }
.bv-rights-summary-text { margin: 4px 0 0; color: var(--text-secondary); line-height: 1.4; }
.bv-rights-body { padding: 0 var(--space-3) var(--space-3); }
.bv-rights-body h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bv-rights-body ul { margin: 0; padding-left: 1.2em; line-height: 1.5; }
.bv-rights-body ul li + li { margin-top: 4px; }
.bv-rights-scripts {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent, #4a6741);
  background: rgba(74, 103, 65, 0.07);
  border-radius: 0 6px 6px 0;
}
.bv-rights-scripts ul { padding-left: 0; list-style: none; font-style: italic; }
.bv-rights-scripts ul li + li { margin-top: 8px; }
.bv-rights-hotlines a { color: var(--accent, #4a6741); text-decoration: underline; }
.bv-rights-actions { margin-top: var(--space-3); gap: var(--space-2); }
.bv-rights-actions button { display: inline-flex; gap: 6px; align-items: center; }
.bv-rights-disclaimer {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  background: var(--surface-elevated, #fffaee);
  border: 1px dashed var(--border, #d4cdb8);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== Food banks ===== */
.bv-foodbanks { max-width: 920px; }
.bv-foodbanks-header h1 { margin: 0 0 var(--space-1); font-size: var(--fz-h1, 1.8rem); }
.bv-foodbanks-lede { margin: 0 0 var(--space-3); color: var(--text-secondary); max-width: 60ch; line-height: 1.55; }
.bv-foodbanks-quickcalls {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.bv-foodbanks-quickcall {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--space-2);
  background: var(--surface, #fdfbf3);
  border: 1px solid var(--border, #d4cdb8);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
}
.bv-foodbanks-quickcall:hover { background: var(--surface-elevated, #fffaee); }
.bv-foodbanks-quickcall svg { color: var(--accent, #4a6741); margin-top: 2px; flex: 0 0 auto; }
.bv-foodbanks-quickcall small { color: var(--text-secondary); font-size: 0.78rem; }
.bv-foodbanks-actions { margin-bottom: var(--space-3); }
.bv-foodbanks-actions button { display: inline-flex; gap: 6px; align-items: center; }
.bv-foodbanks-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bv-foodbanks-item {
  border: 1px solid var(--border, #d4cdb8);
  border-radius: 10px;
  padding: var(--space-3);
  background: var(--surface, #fdfbf3);
}
.bv-foodbanks-item h2 { margin: 0; font-size: 1.1rem; }
.bv-foodbanks-blurb { margin: 4px 0 var(--space-2); color: var(--text-secondary); line-height: 1.45; }
.bv-foodbanks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.bv-foodbanks-cell h3,
.bv-foodbanks-notes h3 {
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.bv-foodbanks-cell p,
.bv-foodbanks-cell ul { margin: 0; padding: 0; line-height: 1.45; }
.bv-foodbanks-cell ul { list-style: none; }
.bv-foodbanks-cell ul li + li { margin-top: 2px; }
.bv-foodbanks-cell a { color: var(--accent, #4a6741); text-decoration: underline; }
.bv-foodbanks-notes { margin-top: var(--space-2); }
.bv-foodbanks-notes ul { margin: 0; padding-left: 1.2em; line-height: 1.45; }
.bv-foodbanks-serves { margin: var(--space-2) 0 0; font-size: 0.9rem; color: var(--text-secondary); }
.bv-foodbanks-footer { margin-top: var(--space-3); color: var(--text-secondary); font-size: 0.85rem; }

/* ===== Digital library (#/digital-resources) ============================ */
.bv-dr-lede {
  max-width: var(--measure);
  margin: var(--space-2) 0 var(--space-4);
}
.bv-dr-intro {
  margin: var(--space-3) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
  color: var(--text-secondary);
  font-size: var(--fz-small);
  line-height: var(--lh-body);
}
.bv-dr-intro p { margin: 0; }
.bv-dr-intro p + p { margin-top: var(--space-2); }
.bv-dr-intro strong { color: var(--text-primary); }
.bv-dr-intro .bv-dr-bw {
  display: inline-flex;
  vertical-align: -2px;
  margin: 0 var(--space-1);
}

.bv-dr-search { margin: var(--space-3) 0 var(--space-3); }

.bv-dr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.bv-dr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fz-tiny);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.bv-dr-chip:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--hair-strong);
}
.bv-dr-chip[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.bv-dr-chip-count {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 6px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  text-align: center;
}

.bv-dr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .bv-dr-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.bv-dr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.bv-dr-card:hover {
  border-color: var(--hair-strong);
  box-shadow: var(--shadow-2);
}
.bv-dr-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.bv-dr-card-title {
  margin: 0;
  font-size: var(--fz-h3);
  line-height: var(--lh-tight);
  font-weight: 700;
}
.bv-dr-card-title a { color: var(--text-primary); text-decoration: none; }
.bv-dr-card-title a:hover { color: var(--accent); text-decoration: underline; }
.bv-dr-card-cat {
  font-size: var(--fz-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.bv-dr-card-blurb {
  margin: 0;
  font-size: var(--fz-small);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.bv-dr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.bv-dr-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: var(--fz-tiny);
  font-weight: 500;
}
.bv-dr-card-langs {
  font-size: var(--fz-tiny);
  color: var(--text-secondary);
}
.bv-dr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}
.bv-dr-host {
  font-family: var(--font-mono);
  font-size: 0.85em;
  margin-left: var(--space-1);
}

/* Bandwidth indicator: three vertical bars, fills based on data-bw. */
.bv-dr-bw {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.bv-dr-bw i {
  display: inline-block;
  width: 4px;
  background: var(--hair);
  border-radius: 1px;
}
.bv-dr-bw i:nth-child(1) { height: 6px; }
.bv-dr-bw i:nth-child(2) { height: 10px; }
.bv-dr-bw i:nth-child(3) { height: 14px; }
.bv-dr-bw[data-bw="1"] i.on { background: var(--success); }
.bv-dr-bw[data-bw="2"] i.on { background: var(--warning); }
.bv-dr-bw[data-bw="3"] i.on { background: var(--alert); }

.bv-dr-empty {
  list-style: none;
  padding: var(--space-5) var(--space-3);
  text-align: center;
  border: 1px dashed var(--hair);
  border-radius: var(--radius-3);
  color: var(--text-secondary);
}
.bv-dr-empty p { margin: 0; }
.bv-dr-empty p + p { margin-top: var(--space-2); }

.bv-dr-footer {
  margin-top: var(--space-5);
  font-size: var(--fz-tiny);
  text-align: center;
}

/* ===== Downloader (Digital Library "Save a video or song") ============== */
.bv-dr-downloader { margin: 0 0 var(--space-5); }

.bv-dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
}
.bv-dl-head h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fz-h2);
  line-height: var(--lh-tight);
}
.bv-dl-head p { margin: 0; max-width: var(--measure); }

.bv-dl-form { display: flex; flex-direction: column; gap: var(--space-3); }
.bv-dl-form .bv-field { margin: 0; max-width: none; }

.bv-dl-fieldset { display: flex; flex-direction: column; gap: var(--space-2); }
.bv-dl-fieldset .bv-field-label {
  display: block;
  font-size: var(--fz-small);
  color: var(--text-secondary);
  font-weight: 500;
}

.bv-dl-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.bv-dl-toggle {
  position: relative;
  display: block;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.bv-dl-toggle:hover { border-color: var(--hair-strong); }
.bv-dl-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bv-dl-toggle:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bv-dl-toggle-body { display: flex; flex-direction: column; gap: 2px; }
.bv-dl-toggle-title { font-weight: 600; color: var(--text-primary); }
.bv-dl-toggle-sub { font-size: var(--fz-tiny); color: var(--text-tertiary); }

.bv-dl-quality {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bv-dl-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.bv-dl-pill:hover { border-color: var(--hair-strong); }
.bv-dl-pill input { position: absolute; opacity: 0; pointer-events: none; }
.bv-dl-pill:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.bv-dl-pill span { font-weight: 600; font-size: var(--fz-small); }
.bv-dl-pill em {
  font-style: normal;
  font-size: var(--fz-tiny);
  color: var(--text-tertiary);
}

.bv-dl-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.bv-dl-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-2);
}
.bv-dl-bar {
  position: relative;
  height: 8px;
  background: var(--hair);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bv-dl-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success)));
  transition: width var(--dur-3) var(--ease);
}
.bv-dl-status-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.bv-dl-state {
  font-family: var(--font-mono);
  font-size: var(--fz-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.bv-dl-state[data-state="done"]    { color: var(--success); }
.bv-dl-state[data-state="error"]   { color: var(--alert); }
.bv-dl-state[data-state="running"] { color: var(--accent); }
.bv-dl-title {
  font-size: var(--fz-small);
  color: var(--text-primary);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.bv-dl-done {
  margin: 0;
  display: flex; gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fz-small);
}
.bv-dl-error {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3);
  background: var(--alert-bg);
  border-radius: var(--radius-2);
  font-size: var(--fz-small);
  color: var(--text-primary);
}
.bv-dl-error strong { color: var(--alert); }

.bv-dl-details {
  margin-top: var(--space-2);
  font-size: var(--fz-small);
}
.bv-dl-details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1) 0;
}
.bv-dl-details summary:hover { color: var(--text-primary); }
.bv-dl-details p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
.bv-dl-details strong { color: var(--text-primary); }
.bv-dl-details em { font-style: italic; color: var(--text-primary); }
.bv-dl-details h3 {
  margin: var(--space-4) 0 0;
  font-size: var(--fz-h3);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--text-primary);
}
.bv-dl-details h3:first-of-type { margin-top: var(--space-3); }
.bv-dl-details a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bv-dl-details a:hover { text-decoration-thickness: 2px; }
.bv-dl-details code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  padding: 1px 4px;
  border-radius: var(--radius-1);
  border: 1px solid var(--hair);
  color: var(--text-primary);
}

/* Nested "Why we believe this is covered" expander, inside the outer
   "Supported sites, fair use & the fine print" details. */
.bv-dl-legal {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-2);
}
.bv-dl-legal[open] {
  padding-bottom: var(--space-3);
  border-color: var(--hair-strong);
}
.bv-dl-legal > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  padding: var(--space-1) 0;
  font-size: var(--fz-small);
  list-style: none;
}
.bv-dl-legal > summary::-webkit-details-marker { display: none; }
.bv-dl-legal > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 1em;
  color: var(--text-tertiary);
  transition: transform var(--dur-1) var(--ease);
}
.bv-dl-legal[open] > summary::before { content: "▾ "; }
.bv-dl-legal > p {
  margin: var(--space-2) 0 0;
  font-size: var(--fz-small);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure);
}
.bv-dl-legal > p:first-of-type { margin-top: var(--space-2); }
.bv-dl-legal strong { color: var(--text-primary); }
.bv-dl-legal em { font-style: italic; color: var(--text-primary); }

/* Always-visible "Why we offer this" callout. */
.bv-dl-purpose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-2);
  font-size: var(--fz-small);
  line-height: var(--lh-body);
}
.bv-dl-purpose p { margin: 0; max-width: var(--measure); }
.bv-dl-purpose strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 36rem) {
  .bv-dl-toggles { grid-template-columns: 1fr; }
}


/* ================================================================ */
/* Inbox view — Gmail-style two-pane + floating compose             */
/* ================================================================ */

/* Reset typography in the inbox surface so it doesn't inherit any of
   the resources/dashboard line-height defaults. */
.bv-mail {
  --mail-topbar-h: 56px;
  --mail-rail-w: 256px;
  --mail-rail-w-collapsed: 72px;
  position: fixed;
  inset: 0;
  background: var(--surface-2);
  color: var(--text-primary);
  display: grid;
  /* topbar | optional signup banner (auto) | body (fills) */
  grid-template-rows: var(--mail-topbar-h) auto 1fr;
  z-index: 30;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 14px;
}
.bv-mail .bv-mail-icon { display: block; }

/* ---- signup / claim banner ---------------------------------------- */
.bv-mail-signup[hidden] { display: none; }
.bv-mail-signup {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-bottom: 1px solid var(--hair);
  padding: 0.65rem 1rem;
}
.bv-mail-signup-form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.bv-mail-signup-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bv-mail-signup-title { font-weight: 600; font-size: 0.95rem; }
.bv-mail-signup-sub { color: var(--text-secondary); font-size: 0.8rem; }
.bv-mail-signup-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  border-radius: 0.5rem;
  overflow: hidden;
  min-width: 260px;
}
.bv-mail-signup-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.bv-mail-signup-input {
  border: 0; outline: 0; background: transparent;
  padding: 0.45rem 0.65rem;
  min-width: 0; flex: 1 1 auto;
  font-size: 0.95rem; color: var(--text-primary);
  font-family: inherit;
}
.bv-mail-signup-suffix {
  display: flex; align-items: center;
  padding: 0 0.65rem;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-secondary);
  font-size: 0.88rem;
  border-left: 1px solid var(--hair);
  white-space: nowrap;
}
.bv-mail-signup-submit {
  border: 0; border-radius: 0.5rem;
  background: var(--accent); color: var(--accent-ink, #fff);
  padding: 0.5rem 1rem;
  font-weight: 600; font-size: 0.92rem;
  cursor: pointer;
}
.bv-mail-signup-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}
.bv-mail-signup-submit:disabled { opacity: 0.6; cursor: default; }
.bv-mail-signup-err {
  grid-column: 1 / -1;
  font-size: 0.82rem; color: var(--danger, #B0211D);
  min-height: 1em;
}
.bv-mail-signup-err:empty { display: none; }
@media (max-width: 720px) {
  .bv-mail-signup-form { grid-template-columns: 1fr; }
  .bv-mail-signup-field { min-width: 0; }
}

/* ---- top bar -------------------------------------------------- */
.bv-mail-topbar {
  display: grid;
  grid-template-columns: 56px 200px 1fr 120px;
  align-items: center;
  gap: 0;
  padding: 0 0.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hair);
  height: var(--mail-topbar-h);
  /* When the viewport is too narrow for "56 + 200 + flex + 120", the
     fixed-width brand column squeezed the search field down to 0 and
     hid the right-side action icons. min-width:0 lets the search
     column flex below its content size, and overflow-x:auto gives a
     last-resort scroll-bar instead of clipping. */
  min-width: 0;
  overflow-x: auto;
}
.bv-mail-topbar > * { min-width: 0; }
.bv-mail-brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 1.25rem; color: var(--text-primary);
  font-weight: 500; letter-spacing: -0.01em;
  padding-left: 0.25rem;
}
.bv-mail-brand-dev {
  font-size: 0.62rem; letter-spacing: 0.1em;
  background: var(--warning-bg, #FCEFCC);
  color: var(--warning, #8A5A12);
  padding: 0.15em 0.5em;
  border-radius: 0.25rem; font-weight: 700;
}
.bv-mail-searchwrap {
  position: relative;
  max-width: 720px; width: 100%;
  margin: 0 1rem;
  display: flex; align-items: center;
}
.bv-mail-search-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); pointer-events: none;
}
.bv-mail-search {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
  font-size: 0.95rem;
}
.bv-mail-search:focus {
  background: var(--surface);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.bv-mail-topbar-right {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.25rem;
}

/* ---- generic icon button (chrome) ----------------------------- */
.bv-mail-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; padding: 0;
}
.bv-mail-iconbtn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
.bv-mail-iconbtn:disabled { opacity: 0.35; cursor: default; }
.bv-mail-iconbtn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.bv-mail-toolbar-sep {
  width: 1px; height: 22px; background: var(--hair);
  margin: 0 0.3rem; align-self: center;
}

/* ---- body grid ------------------------------------------------ */
.bv-mail-body {
  display: grid;
  grid-template-columns: var(--mail-rail-w) 1fr;
  min-height: 0; overflow: hidden;
}

/* ---- folder rail ---------------------------------------------- */
.bv-mail-rail {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--surface-2);
  border-right: 0;
  min-height: 0; overflow-y: auto;
}
.bv-mail-compose-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.25rem 0.85rem 1rem;
  background: var(--surface);
  color: var(--text-primary);
  border: 0; border-radius: 1rem;
  cursor: pointer; font-size: 0.95rem; font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  align-self: flex-start;
  margin-bottom: 0.5rem;
}
.bv-mail-compose-btn:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.10);
}
.bv-mail-compose-btn .bv-mail-icon { color: var(--accent); }
.bv-mail-folders {
  display: flex; flex-direction: column; gap: 1px;
}
.bv-mail-folder {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 0.85rem;
  padding: 0.4rem 1rem 0.4rem 1.5rem;
  background: transparent; border: 0; border-radius: 0 999px 999px 0;
  margin-left: -0.75rem;
  color: var(--text-primary);
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; text-align: left;
  height: 32px;
}
.bv-mail-folder:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.bv-mail-folder.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.bv-mail-folder.is-active .bv-mail-icon { color: var(--accent); }
.bv-mail-folder-label { white-space: nowrap; }
.bv-mail-folder-count {
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.bv-mail-folder.is-active .bv-mail-folder-count { color: var(--accent); font-weight: 700; }
.bv-mail-rail-foot {
  margin-top: auto; padding: 0.85rem 0.5rem 0.25rem;
  font-size: 0.75rem;
}

/* ---- main pane ------------------------------------------------ */
.bv-mail-main {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 1rem 0 0 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-right: 0; border-bottom: 0;
}

/* ---- list toolbar (above list or reader) ---------------------- */
.bv-mail-listtoolbar, .bv-mail-readertoolbar {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--hair);
  background: var(--surface);
  min-height: 48px;
  /* Reader toolbar has 10 icon buttons; on narrow widths they overflowed
     the right edge and were clipped (no scroll-bar, no wrap). Allow
     horizontal scroll as a fallback and protect icon buttons + the
     flex-grow spacer from shrinking below their natural size so the
     row reads as a horizontal strip rather than collapsing into a
     two-line jumble. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.bv-mail-listtoolbar > .bv-mail-iconbtn,
.bv-mail-readertoolbar > .bv-mail-iconbtn,
.bv-mail-listtoolbar > .bv-mail-toolbar-sep,
.bv-mail-readertoolbar > .bv-mail-toolbar-sep,
.bv-mail-listtoolbar > .bv-mail-checkbox,
.bv-mail-listtoolbar > .bv-mail-range {
  flex-shrink: 0;
}
.bv-mail-listtoolbar-spacer { min-width: 0; }
.bv-mail-listtoolbar-spacer { flex: 1; }
.bv-mail-range {
  font-size: 0.78rem; color: var(--text-secondary);
  margin: 0 0.5rem; font-variant-numeric: tabular-nums;
}
.bv-mail-listtoolbar[data-bulk="true"] {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* ---- checkbox + star toggle ---------------------------------- */
.bv-mail-checkbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; cursor: pointer;
}
.bv-mail-checkbox input {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--accent);
}
.bv-mail-rowstar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-tertiary);
  border-radius: 4px;
}
.bv-mail-rowstar:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.bv-mail-rowstar.is-on { color: #F4B400; }

/* ---- list rows ----------------------------------------------- */
.bv-mail-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.bv-mail-row {
  display: grid;
  grid-template-columns: 36px 28px 32px 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  height: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 50%, transparent);
  background: color-mix(in srgb, var(--text-primary) 3%, var(--surface));
  cursor: pointer;
  position: relative;
  color: var(--text-secondary);
}
.bv-mail-row:hover {
  background: var(--surface);
  box-shadow: inset 1px 0 0 var(--hair), inset -1px 0 0 var(--hair), 0 1px 2px rgba(0,0,0,0.08), 0 1px 5px rgba(0,0,0,0.05);
  z-index: 1;
}
.bv-mail-row.is-checked { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bv-mail-row.is-unread {
  background: var(--surface);
  color: var(--text-primary);
}
.bv-mail-row.is-unread .bv-mail-rowsender,
.bv-mail-row.is-unread .bv-mail-rowsubject,
.bv-mail-row.is-unread .bv-mail-rowtime { font-weight: 700; }

.bv-mail-rowavatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 600;
}
.bv-mail-rowsender {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-rowcount {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.bv-mail-rowcontent {
  font-size: 0.875rem;
  display: flex; align-items: baseline; gap: 0.4rem;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-secondary);
}
.bv-mail-rowsubject {
  color: var(--text-primary);
  flex: 0 0 auto;
  max-width: 50%;
  overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-rowdash { color: var(--text-tertiary); flex: 0 0 auto; }
.bv-mail-rowsnippet {
  overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto;
}
.bv-mail-rowmeta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: var(--text-secondary);
  white-space: nowrap;
  padding: 0 0.5rem;
}
.bv-mail-rowatt { color: var(--text-tertiary); display: inline-flex; }

/* Hover-reveal action icons replace the date column. */
.bv-mail-rowhover {
  display: none;
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: inherit;
  padding-left: 1rem;
  background: linear-gradient(90deg, transparent, var(--surface) 25%);
}
.bv-mail-row:hover .bv-mail-rowhover { display: inline-flex; gap: 0.1rem; }
.bv-mail-row:hover .bv-mail-rowmeta { visibility: hidden; }

/* ---- empty state --------------------------------------------- */
.bv-mail-list-empty {
  list-style: none; padding: 4rem 1rem;
  text-align: center; color: var(--text-secondary);
}
.bv-mail-empty-glyph { display: flex; justify-content: center; color: var(--text-tertiary); margin-bottom: 1rem; }
.bv-mail-empty-title { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.bv-mail-empty-sub { font-size: 0.9rem; }

/* ---- reading view -------------------------------------------- */
.bv-mail-readerbody {
  overflow-y: auto; flex: 1; min-height: 0;
  padding: 1.5rem 2rem 6rem;
  background: var(--surface);
}
.bv-mail-readhead {
  max-width: 1024px; margin: 0 auto 1.25rem; padding: 0 1rem;
}
.bv-mail-readsubject {
  font-size: 1.45rem; line-height: 1.25; margin: 0 0 0.5rem;
  color: var(--text-primary); font-weight: 500;
}
.bv-mail-readlabels {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
}
.bv-mail-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.15em 0.6em;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.01em;
}
.bv-mail-pill.is-star { background: rgba(244,180,0,0.12); color: #B07900; }
.bv-mail-thread {
  max-width: 1024px; margin: 0 auto;
}
.bv-mail-msg {
  margin: 1rem 1rem 1.25rem; padding: 0;
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.bv-mail-msghead {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 1rem; align-items: center;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
}
.bv-mail-msg.is-collapsed .bv-mail-msgbody { display: none; }
.bv-mail-msg.is-collapsed .bv-mail-msghead { padding: 0.65rem 1.1rem; }
.bv-mail-msgavatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.95rem;
}
.bv-mail-msgmeta { min-width: 0; }
.bv-mail-msgfrom {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.95rem; color: var(--text-primary);
}
.bv-mail-msgfrom strong { font-weight: 600; }
.bv-mail-msgemail { color: var(--text-secondary); font-size: 0.85rem; }
.bv-mail-msgto {
  color: var(--text-secondary); font-size: 0.82rem;
  margin-top: 0.2rem; display: flex; gap: 0.25rem;
}
.bv-mail-msghead-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem;
}
.bv-mail-msgtime { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.bv-mail-msghead-actions { display: flex; gap: 0.2rem; }
.bv-mail-msghead-actions .bv-mail-iconbtn { width: 30px; height: 30px; }
.bv-mail-msgbody {
  padding: 0 1.1rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--hair) 70%, transparent);
}
.bv-mail-msghtml {
  line-height: 1.6; color: var(--text-primary); font-size: 0.95rem;
  padding-top: 1rem;
}
.bv-mail-msghtml p { margin: 0 0 0.85em; }
.bv-mail-msghtml ul, .bv-mail-msghtml ol { padding-left: 1.5em; margin: 0 0 0.85em; }
.bv-mail-msghtml li { margin: 0.2em 0; }
.bv-mail-msghtml img { max-width: 100%; height: auto; border-radius: 0.25rem; }
.bv-mail-msghtml a { color: var(--accent); }
.bv-mail-msghtml blockquote {
  margin: 0 0 0.85em; padding: 0.25em 0.85em;
  border-left: 3px solid var(--hair-strong); color: var(--text-secondary);
}

/* Attachment strip on each message */
.bv-mail-attstrip {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  margin: 1rem 0 0.25rem;
}
.bv-mail-attchip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 0.4rem;
  color: var(--text-primary);
  cursor: pointer; min-width: 16rem; max-width: 22rem;
  text-align: left;
}
.bv-mail-attchip:hover { background: var(--accent-soft); border-color: var(--accent); }
.bv-mail-attchip-thumb {
  width: 44px; height: 44px; border-radius: 0.3rem;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
}
.bv-mail-attchip-meta {
  display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.bv-mail-attchip-name {
  font-size: 0.85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-attchip-size {
  font-size: 0.74rem; color: var(--text-secondary);
}
.bv-mail-attchip-dl { color: var(--text-secondary); }

/* Reply / forward chips after the last message */
.bv-mail-replychips {
  max-width: 1024px; margin: 0.5rem auto 1.5rem;
  padding: 0 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.bv-mail-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--surface); color: var(--text-primary);
  cursor: pointer; font-size: 0.875rem;
}
.bv-mail-chip:hover { background: var(--surface-2); border-color: var(--hair-strong); }

/* ---- floating compose ---------------------------------------- */
.bv-mail-fc {
  position: fixed;
  right: 1.25rem;
  bottom: 0;
  width: 520px;
  max-height: 75vh;
  z-index: 60;
  background: var(--surface);
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}
.bv-mail-fc.is-minimized {
  max-height: none;
  width: 320px;
  height: 40px;
}
.bv-mail-fc.is-expanded {
  width: min(900px, 90vw);
  height: min(700px, 88vh);
  max-height: 88vh;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  border-radius: 0.75rem;
}

.bv-mail-fc-head {
  display: flex; align-items: center; gap: 0.5rem;
  background: #1f1f1f;
  color: #f5f5f5;
  padding: 0 0.5rem 0 1rem;
  height: 40px;
  cursor: pointer; user-select: none;
}
@media (prefers-color-scheme: light) {
  .bv-mail-fc-head { background: #404040; }
}
.bv-mail-fc-title {
  flex: 1; min-width: 0;
  font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-fc-headactions { display: flex; gap: 0.1rem; }
.bv-mail-fc-headbtn {
  width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: 0.25rem;
  color: #f5f5f5; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bv-mail-fc-headbtn:hover { background: rgba(255,255,255,0.12); }

.bv-mail-fc-body {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  background: var(--surface);
}
.bv-mail-fc-row {
  display: flex; align-items: center; gap: 0.25rem;
  border-bottom: 1px solid var(--hair);
  padding: 0.1rem 0.85rem;
}
.bv-mail-fc-field {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1; min-width: 0;
}
.bv-mail-fc-fieldfull {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.1rem 0.85rem;
  border-bottom: 1px solid var(--hair);
}
.bv-mail-fc-rowlabel {
  width: 50px; min-width: 50px;
  font-size: 0.82rem; color: var(--text-secondary);
}
.bv-mail-fc-field input,
.bv-mail-fc-fieldfull input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  color: var(--text-primary); font-size: 0.9rem;
  padding: 0.55rem 0; outline: none;
}
.bv-mail-fc-ccbcc {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: 0.78rem; color: var(--text-secondary);
}
.bv-mail-fc-ccbcc button {
  background: transparent; border: 0; color: var(--text-secondary);
  cursor: pointer; padding: 0.25rem 0.4rem; border-radius: 0.25rem;
  font-size: 0.82rem;
}
.bv-mail-fc-ccbcc button:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); }

.bv-mail-fc-textarea {
  flex: 1; min-height: 12rem;
  border: 0; background: transparent;
  color: var(--text-primary); font-family: inherit;
  font-size: 0.95rem; line-height: 1.5;
  padding: 0.85rem 1rem;
  resize: none; outline: none;
}

.bv-mail-fc-atts {
  list-style: none; margin: 0; padding: 0 0.85rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 8rem; overflow-y: auto;
}
.bv-mail-fc-att {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--hair); border-radius: 0.3rem;
  background: var(--surface-2);
}
.bv-mail-fc-att-thumb {
  width: 36px; height: 36px; border-radius: 0.3rem;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1;
}
.bv-mail-fc-att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bv-mail-fc-att-name {
  font-size: 0.8rem; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-fc-att-size { font-size: 0.72rem; color: var(--text-secondary); }
.bv-mail-fc-att-toggle {
  background: transparent; border: 1px solid var(--hair);
  color: var(--text-secondary); cursor: pointer;
  font-size: 0.72rem; padding: 0.2rem 0.45rem;
  border-radius: 999px;
}
.bv-mail-fc-att-toggle.is-on {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.bv-mail-fc-att-remove {
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-secondary); padding: 0.2rem;
  display: inline-flex; align-items: center;
}
.bv-mail-fc-att-remove:hover { color: var(--alert); }

.bv-mail-fc-foot {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--hair);
  /* Send + attach/vault/discard buttons must remain visible even when the
     compose window is narrow (the floating window is ~520px wide on
     desktop but only ~92vw on mobile). Wrap onto a second row instead
     of clipping. */
  flex-wrap: wrap;
}
.bv-mail-fc-send { flex-shrink: 0; }
.bv-mail-fc-foot-actions { flex-shrink: 0; }
.bv-mail-fc-error {
  margin: 0 0.85rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--danger, #B0211D) 12%, transparent);
  color: var(--danger, #B0211D);
  font-size: 0.85rem;
}
.bv-mail-fc-send {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 1.25rem 0.55rem 1.1rem;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 0.4rem;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.bv-mail-fc-send:hover:not(:disabled) { filter: brightness(0.95); }
.bv-mail-fc-send:disabled { opacity: 0.6; cursor: default; }
.bv-mail-fc-foot-actions { margin-left: auto; display: flex; gap: 0.1rem; }
.bv-mail-fc-iconbtn,
.bv-mail-fc-attachbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-secondary); cursor: pointer;
}
.bv-mail-fc-iconbtn:hover,
.bv-mail-fc-attachbtn:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}

/* ---- scrim (mobile sidebar overlay) -------------------------- */
.bv-mail-sidebar-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.45);
}

/* ---- responsive ---------------------------------------------- */
@media (max-width: 60rem) {
  .bv-mail-body { grid-template-columns: 1fr; }
  .bv-mail-rail {
    position: fixed; top: var(--mail-topbar-h); bottom: 0; left: 0;
    width: var(--mail-rail-w);
    z-index: 50;
    background: var(--surface-2);
    border-right: 1px solid var(--hair);
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .bv-mail-rail[data-open="true"] { transform: translateX(0); }
  /* On narrow widths drop the search column to flex (was 1fr forcing
     the right-side action buttons off-screen), and reserve enough
     width on the right to actually fit both the Settings + Account
     icon buttons (2 × 36px + gap). */
  .bv-mail-topbar { grid-template-columns: 56px auto 1fr 88px; }
  .bv-mail-topbar .bv-mail-searchwrap { margin: 0 0.5rem; }
  .bv-mail-brand-dev { display: none; }
  .bv-mail-main { border-radius: 0; border: 0; }
  .bv-mail-fc {
    right: 0; left: 0; width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .bv-mail-fc.is-expanded {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100%; height: 100%; max-height: 100%;
    transform: none; border-radius: 0;
  }
}
@media (min-width: 60.01rem) {
  .bv-mail-sidebar-scrim { display: none !important; }
  .bv-mail-menubtn { display: none; }
}
@media (max-width: 40rem) {
  .bv-mail-row { grid-template-columns: 32px 24px 28px 1fr auto; }
  .bv-mail-rowsender {
    grid-column: 4; width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .bv-mail-rowcontent { display: none; }
}

/* ---- compose: attach-source popover (paperclip menu) -------- */
.bv-mail-fc-attachwrap { position: relative; display: inline-flex; }
.bv-mail-fc-attachmenu {
  position: absolute; bottom: calc(100% + 6px);
  /* Anchor to the trigger's right edge so the menu opens leftward into the
     compose window (which has overflow:hidden). Opening rightward would
     clip the menu against the compose card's right edge. */
  right: 0; left: auto;
  width: max-content;
  min-width: 260px; max-width: min(320px, 92vw);
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 0.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  padding: 0.4rem;
  z-index: 65;
}
.bv-mail-fc-attachmenu-title,
.bv-mail-fc-attachmenu-sub { white-space: normal; word-break: break-word; }
.bv-mail-fc-attachmenu-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.65rem; align-items: center;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 0.35rem;
  padding: 0.5rem 0.6rem;
  cursor: pointer; color: var(--text-primary);
}
.bv-mail-fc-attachmenu-item:hover { background: var(--surface-2); }
.bv-mail-fc-attachmenu-item .bv-mail-icon { color: var(--accent); }
.bv-mail-fc-attachmenu-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bv-mail-fc-attachmenu-title { font-size: 0.875rem; font-weight: 500; }
.bv-mail-fc-attachmenu-sub { font-size: 0.75rem; color: var(--text-secondary); }

/* ---- vault picker (modal over compose) ---------------------- */
.bv-mail-vault-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.45);
}
.bv-mail-vault {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 81;
  width: min(580px, 92vw); max-height: 80vh;
  background: var(--surface); color: var(--text-primary);
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.30), 0 4px 10px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; overflow: hidden;
}
.bv-mail-vault-head {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1rem 1rem 0.85rem 1.25rem;
  border-bottom: 1px solid var(--hair);
}
.bv-mail-vault-head-main { display: flex; gap: 0.85rem; flex: 1; min-width: 0; align-items: flex-start; }
.bv-mail-vault-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bv-mail-vault-title {
  font-size: 1.05rem; font-weight: 600; margin: 0 0 0.15rem;
  color: var(--text-primary);
}
.bv-mail-vault-sub {
  font-size: 0.82rem; color: var(--text-secondary); margin: 0;
  line-height: 1.45;
}
.bv-mail-vault-toolbar {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.bv-mail-vault-search {
  position: relative; flex: 1;
  display: flex; align-items: center;
}
.bv-mail-vault-search-icon {
  position: absolute; left: 0.7rem; pointer-events: none;
  color: var(--text-secondary);
}
.bv-mail-vault-search input {
  width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.7rem 0.45rem 2.1rem;
  border: 1px solid var(--hair); border-radius: 0.35rem;
  background: var(--surface); color: var(--text-primary);
  font-size: 0.88rem;
}
.bv-mail-vault-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.bv-mail-vault-selectall {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap;
}
.bv-mail-vault-selectall input { width: 14px; height: 14px; accent-color: var(--accent); }

.bv-mail-vault-listwrap {
  flex: 1; min-height: 0; overflow-y: auto;
}
.bv-mail-vault-list { list-style: none; margin: 0; padding: 0.25rem 0; }
.bv-mail-vault-row {
  display: grid;
  grid-template-columns: 36px 40px 1fr;
  align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem 0.6rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 50%, transparent);
  cursor: pointer;
}
.bv-mail-vault-row:hover { background: var(--surface-2); }
.bv-mail-vault-row.is-checked { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.bv-mail-vault-rowcheck {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
}
.bv-mail-vault-rowcheck input { width: 16px; height: 16px; accent-color: var(--accent); }
.bv-mail-vault-rowicon {
  width: 40px; height: 40px; border-radius: 0.35rem;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; line-height: 1;
}
.bv-mail-vault-rowmeta { min-width: 0; }
.bv-mail-vault-rowname {
  font-size: 0.88rem; color: var(--text-primary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-mail-vault-rowsub {
  font-size: 0.73rem; color: var(--text-secondary);
}
.bv-mail-vault-loading {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 2.5rem 1rem;
}
.bv-mail-vault-empty {
  padding: 2.5rem 1.5rem; text-align: center;
}
.bv-mail-vault-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--hair);
  background: var(--surface-2);
}
.bv-mail-vault-count { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.bv-mail-vault-foot-actions { display: flex; gap: 0.5rem; }
.bv-mail-vault-cancel {
  padding: 0.5rem 1rem;
  border: 1px solid var(--hair); border-radius: 0.4rem;
  background: var(--surface); color: var(--text-primary);
  cursor: pointer; font-size: 0.88rem;
}
.bv-mail-vault-cancel:hover { background: var(--surface-2); }
.bv-mail-vault-attach {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 0.4rem;
  cursor: pointer; font-size: 0.88rem; font-weight: 600;
}
.bv-mail-vault-attach:disabled { opacity: 0.45; cursor: not-allowed; }
.bv-mail-vault-attach:not(:disabled):hover { filter: brightness(0.95); }

@media (max-width: 36rem) {
  .bv-mail-vault {
    inset: 0; transform: none;
    width: 100%; height: 100%; max-height: 100%;
    border-radius: 0;
  }
}

/* ================================================================ */
/* Book search (libgen.li) — mirrors the yt-dlp downloader card     */
/* ================================================================ */
.bv-bs {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  margin-top: var(--space-3);
}
.bv-bs-head h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fz-h2);
  line-height: var(--lh-tight);
}
.bv-bs-head p { margin: 0; max-width: var(--measure); }

.bv-bs-purpose {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: var(--space-3);
  border-radius: var(--radius-2);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.bv-bs-purpose p { margin: 0; max-width: var(--measure); }
.bv-bs-purpose strong { color: var(--text-primary); font-weight: 700; }

.bv-bs-form { display: flex; flex-direction: column; gap: var(--space-1); }
.bv-bs-searchfield { display: flex; flex-direction: column; gap: var(--space-1); }
.bv-bs-searchwrap {
  display: flex; gap: 0.5rem; align-items: stretch;
  flex-wrap: wrap;
}
.bv-bs-searchwrap input[type="search"] {
  flex: 1 1 20rem; min-width: 12rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 0.95rem;
}
.bv-bs-searchwrap input[type="search"]:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.bv-bs-searchwrap button { white-space: nowrap; }
.bv-bs-hint { margin: 0; font-size: 0.82rem; }

.bv-bs-status {
  font-size: 0.88rem;
  padding: 0.5rem 0;
  color: var(--text-secondary);
  min-height: 1.25em;
}
.bv-bs-status[data-severity="ok"]    { color: var(--success); }
.bv-bs-status[data-severity="warn"]  { color: var(--warning); }
.bv-bs-status[data-severity="error"] { color: var(--alert); }

.bv-bs-results {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}

.bv-bs-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: var(--radius-2);
}
.bv-bs-row-cover {
  width: 64px; height: 88px;
  background: var(--surface-2);
  border: 1px solid var(--hair); border-radius: 0.35rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.bv-bs-row-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.bv-bs-row-coverglyph { font-size: 1.9rem; opacity: 0.6; }
.bv-bs-row-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.bv-bs-row-title {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}
.bv-bs-row-authors {
  font-size: 0.85rem; color: var(--text-secondary);
  word-break: break-word;
}
.bv-bs-row-meta {
  font-size: 0.78rem; color: var(--text-tertiary);
  margin-top: 0.15rem;
}
.bv-bs-row-source {
  font-size: 0.72rem; letter-spacing: 0.02em;
  text-transform: lowercase;
}
.bv-bs-row-action {
  display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;
  min-width: 9rem;
}
.bv-bs-dlbtn { white-space: nowrap; }
.bv-bs-row-progress {
  width: 100%;
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.78rem;
}
.bv-bs-bar {
  height: 4px; border-radius: 999px;
  background: var(--hair); overflow: hidden;
  width: 9rem;
}
.bv-bs-bar-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: width 200ms ease;
}
.bv-bs-bar-sub { font-size: 0.74rem; }
.bv-bs-rowerror { color: var(--alert); font-size: 0.78rem; }
.bv-bs-rowok    { color: var(--success); font-size: 0.78rem; }

.bv-bs-details {
  margin-top: var(--space-2);
  border-top: 1px solid var(--hair); padding-top: var(--space-3);
}
.bv-bs-details summary {
  cursor: pointer; font-weight: 500; color: var(--text-secondary);
  padding: 0.25rem 0;
}
.bv-bs-details summary:hover { color: var(--text-primary); }
.bv-bs-details p, .bv-bs-details ul {
  max-width: var(--measure); margin: 0.6em 0;
  font-size: 0.9rem; line-height: 1.55;
}
.bv-bs-details ul { padding-left: 1.4em; }
.bv-bs-details li { margin: 0.25em 0; }
.bv-bs-details a { color: var(--accent); }

@media (max-width: 36rem) {
  .bv-bs-row { grid-template-columns: 56px 1fr; }
  .bv-bs-row-action { grid-column: 1 / -1; align-items: stretch; min-width: 0; }
  .bv-bs-bar { width: 100%; }
}

/* ================================================================ */
/* Book search — additions: mode tabs, advanced grid, filter chips, */
/* sortable column header, stat columns, load-more, etc.            */
/* ================================================================ */

.bv-bs-modeswitch {
  display: inline-flex;
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.2rem;
  margin-bottom: 0.65rem;
  gap: 0.15rem;
}
.bv-bs-modebtn {
  border: 0; background: transparent;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  cursor: pointer; font-size: 0.85rem; font-weight: 500;
  color: var(--text-secondary);
}
.bv-bs-modebtn:hover { color: var(--text-primary); }
.bv-bs-modebtn.is-active {
  background: var(--surface); color: var(--text-primary);
  box-shadow: var(--shadow-1);
}

.bv-bs-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 0.75rem;
}
.bv-bs-grid .bv-field { margin: 0; max-width: none; }
.bv-bs-grid input {
  width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface); color: var(--text-primary);
  font-size: 0.9rem;
}
.bv-bs-grid input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.bv-bs-yearfield input { font-variant-numeric: tabular-nums; }
.bv-bs-grid-actions {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.6rem; flex-wrap: wrap;
}

.bv-bs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin: 0.25rem 0 0.5rem;
}
.bv-bs-toolbar .bv-bs-spacer { flex: 1; }
.bv-bs-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  align-items: center;
}
.bv-bs-chip {
  border: 1px solid var(--hair); background: var(--surface);
  color: var(--text-secondary);
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem; cursor: pointer;
}
.bv-bs-chip:hover { background: var(--surface-2); color: var(--text-primary); }
.bv-bs-chip.is-active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent);
}
.bv-bs-sortwrap {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem;
}
.bv-bs-sortwrap select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface); color: var(--text-primary);
  font-size: 0.85rem;
}


/* ================================================================ */
/* Book search — table layout (final, overrides earlier definitions) */
/* ================================================================ */

/* Shared grid template for the column header + every result row. The
   minmax(0, *fr) on the text columns is what lets long titles/authors
   wrap instead of forcing the row to overflow horizontally. */
.bv-bs-tablehead,
.bv-bs-row {
  display: grid;
  grid-template-columns:
    56px                  /* cover         */
    minmax(0, 2.4fr)      /* title cell    */
    minmax(0, 1.4fr)      /* author cell   */
    56px                  /* year          */
    56px                  /* pages         */
    74px                  /* size          */
    62px                  /* format        */
    9rem;                 /* action button */
  gap: 0.75rem;
  align-items: center;
}

.bv-bs-tablehead {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}
.bv-bs-th-spacer, .bv-bs-th-actspacer { display: block; }
.bv-bs-th {
  background: transparent; border: 0;
  text-align: left;
  padding: 0.2rem 0.1rem;
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--text-secondary); font-weight: 600;
  cursor: pointer; border-radius: 0.25rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.bv-bs-th:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.bv-bs-th.is-on { color: var(--accent); }
.bv-bs-th-arr { font-size: 0.7rem; }
.bv-bs-th-narrow { justify-content: flex-end; text-align: right; }

.bv-bs-row {
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 70%, transparent);
  border-radius: 0;
  align-items: center;
}
.bv-bs-row:hover { background: var(--surface-2); }
.bv-bs-row-cover {
  width: 56px; height: 76px;
  background: var(--surface-2);
  border: 1px solid var(--hair); border-radius: 0.3rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bv-bs-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.bv-bs-row-coverglyph { font-size: 1.55rem; opacity: 0.55; }

.bv-bs-row-titlecell  { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bv-bs-row-authorcell { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.bv-bs-row-title {
  font-size: 0.92rem; font-weight: 600;
  color: var(--text-primary); line-height: 1.3;
  /* Cap to 2 lines, then ellipsis — keeps row heights consistent and
     stops a 150-char libgen title from blowing up the layout. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}
.bv-bs-row-pub {
  font-size: 0.74rem; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-bs-row-authors {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis;
}
.bv-bs-row-lang { font-size: 0.74rem; color: var(--text-tertiary); }

.bv-bs-row-stat {
  font-size: 0.85rem; color: var(--text-primary);
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bv-bs-row-format { text-align: right; }
.bv-bs-fmt {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 0.25rem;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}

.bv-bs-row-action {
  display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch;
  min-width: 0;
}
.bv-bs-dlbtn {
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Empty + load-more */
.bv-bs-row-empty {
  display: block; padding: 1.2rem; text-align: center;
  border: 1px dashed var(--hair); border-radius: var(--radius-2);
  background: var(--surface-2);
}
.bv-bs-loadmore {
  display: flex; justify-content: center; padding: 0.85rem 0 0.25rem;
}

/* ---- responsive collapse to stacked card layout ---------------- */
@media (max-width: 64rem) {
  .bv-bs-tablehead { display: none; }
  .bv-bs-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "cover  title"
      "cover  author"
      "stats  stats"
      "action action";
    row-gap: 0.25rem;
    padding: 0.75rem 0.9rem;
  }
  .bv-bs-row-cover      { grid-area: cover; width: 64px; height: 88px; }
  .bv-bs-row-titlecell  { grid-area: title; }
  .bv-bs-row-authorcell { grid-area: author; }
  .bv-bs-row-stat {
    grid-area: stats; display: inline-flex; align-items: baseline;
    text-align: left; font-size: 0.78rem; color: var(--text-secondary);
    padding-right: 0.6rem;
  }
  .bv-bs-row-stat[data-label]::before {
    content: attr(data-label) ":";
    font-size: 0.7rem; text-transform: uppercase;
    color: var(--text-tertiary); margin-right: 0.3em;
    font-weight: 600; letter-spacing: 0.03em;
  }
  .bv-bs-row-stat { display: inline; }
  .bv-bs-row-action { grid-area: action; min-width: 0; }
  .bv-bs-row-title  { -webkit-line-clamp: 3; }
}
@media (max-width: 36rem) {
  .bv-bs-grid          { grid-template-columns: 1fr; }
}

/* ================================================================ */
/* Forms view — catalog + per-form detail panel                     */
/* ================================================================ */
.bv-forms { max-width: 56rem; }
.bv-forms-lede { margin: 0 0 var(--space-3); }
.bv-forms-warn {
  background: var(--warning-bg, #FCEFCC); color: var(--warning, #8A5A12);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
}
.bv-forms-warn a { color: inherit; text-decoration: underline; }

.bv-forms-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-3);
}
.bv-forms-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius-2);
}
.bv-forms-card-head {
  display: flex; justify-content: space-between; gap: var(--space-2);
  align-items: flex-start;
}
.bv-forms-card-title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.bv-forms-card-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.bv-forms-tag {
  font-size: 0.7rem; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--text-secondary);
  padding: 0.1em 0.5em; border-radius: 999px;
}
.bv-forms-card-desc {
  margin: 0; flex: 1;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5;
}
.bv-forms-open { align-self: flex-start; }

.bv-forms-detail {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: var(--radius-3);
}
.bv-forms-detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.bv-forms-detail-head h2 { margin: 0; font-size: 1.2rem; }
.bv-forms-detail-form .bv-field { margin-bottom: var(--space-2); }
.bv-forms-detail-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface); color: var(--text-primary);
  font: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical;
}
.bv-forms-detail-form input[type="text"],
.bv-forms-detail-form input[type="date"],
.bv-forms-detail-form select {
  width: 100%; box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface); color: var(--text-primary);
  font: inherit; font-size: 0.9rem;
}
.bv-forms-help { margin: 0.2rem 0 0 0; font-size: 0.78rem; }
.bv-forms-required { color: var(--alert); }
/* Checkbox row: small native checkbox, label wraps naturally next to it.
   `align-items: flex-start` keeps the box aligned with the first line of
   the label when the label wraps to multiple lines. */
.bv-forms-detail-form .bv-field-check {
  display: block;
  margin: 0.35rem 0;
}
.bv-forms-checkrow {
  display: flex; gap: 0.55rem; align-items: flex-start;
  cursor: pointer; font-size: 0.9rem; line-height: 1.4;
}
.bv-forms-checkrow input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0 0;
  accent-color: var(--accent, #5a7da6);
  cursor: pointer;
}
.bv-forms-checkrow > span { flex: 1 1 auto; min-width: 0; }
.bv-field-check .bv-forms-help {
  margin: 0.15rem 0 0 1.6rem;
}
/* Section heading inside a form — groups runs of related fields. */
.bv-forms-detail-form .bv-forms-section {
  margin: var(--space-3) 0 var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hair);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, var(--text-primary));
}
.bv-forms-detail-form .bv-forms-section:first-child {
  border-top: 0; padding-top: 0; margin-top: 0;
}
.bv-forms-detail-form .bv-forms-section-note {
  margin: 0.15rem 0 var(--space-1);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-tertiary, var(--text-secondary));
}
.bv-forms-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin: var(--space-2) 0 var(--space-1);
}

/* ---- AI draft button (per-textarea, opt-in) ----------------------- */
.bv-forms-ai {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.35rem 0 0;
}
.bv-forms-ai-btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface-2, #f5f1e8);
  color: var(--text-primary);
  border: 1px solid var(--hair, #d9d3c3);
  border-radius: 999px;
  font: inherit; font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: filter 0.12s ease, background 0.12s ease;
}
.bv-forms-ai-btn:hover:not(:disabled),
.bv-forms-ai-btn:focus-visible {
  background: var(--accent-soft, var(--surface-2));
  outline: none;
  filter: brightness(1.02);
}
.bv-forms-ai-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.bv-forms-ai-status {
  font-size: 0.78rem;
  color: var(--text-tertiary, var(--text-secondary));
  flex: 1 1 auto;
  min-width: 0;
}
.bv-forms-ai-status.bv-forms-ai-ok    { color: var(--success); }
.bv-forms-ai-status.bv-forms-ai-error { color: var(--alert); }

.bv-forms-ai-consent {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2, #f5f1e8);
  border: 1px solid var(--hair, #d9d3c3);
  border-left: 3px solid var(--accent, #5a7da6);
  border-radius: var(--radius-2, 6px);
  font-size: 0.85rem;
  line-height: 1.45;
}
.bv-forms-ai-consent p { margin: 0 0 0.55rem; }
.bv-forms-ai-consent-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.bv-forms-ai-consent-actions button {
  appearance: none;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--accent, #5a7da6);
  color: var(--accent-ink, #fff);
  font: inherit; font-size: 0.8rem; font-weight: 500;
  cursor: pointer;
}
.bv-forms-ai-consent-actions button.bv-button-ghost {
  background: transparent;
  color: var(--text-primary);
}
.bv-forms-ai-consent-actions button:hover,
.bv-forms-ai-consent-actions button:focus-visible {
  filter: brightness(1.05); outline: none;
}
.bv-forms-privacy { font-size: 0.78rem; }
.bv-forms-result { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.bv-forms-ok    { color: var(--success); margin: 0; }
.bv-forms-error { color: var(--alert);   margin: 0; }
.bv-forms-preview {
  width: 100%; height: 70vh; max-height: 800px;
  border: 1px solid var(--hair); border-radius: var(--radius-2);
  background: var(--surface);
}

/* Sign-Up pill (login → setup) */
.bv-card a[href="#/setup"],
.bv-pill-signup {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  transition: filter 0.15s ease;
}
.bv-card a[href="#/setup"]:hover,
.bv-card a[href="#/setup"]:focus-visible,
.bv-pill-signup:hover,
.bv-pill-signup:focus-visible {
  filter: brightness(1.08);
  text-decoration: none;
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* Login CTA row: Sign-Up pill + ghost worker-setup pill */
.bv-login-cta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.bv-card p:has(> a[href="#/setup"]) {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0;
  margin-top: 1rem;
}
.bv-card p:has(> a[href="#/setup"]) > a { font-size: var(--fz-base); }

.bv-pill-ghost,
.bv-card a[href="#/worker-setup"] {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background: transparent;
  color: var(--ink, var(--accent));
  border: 1px solid var(--hair, currentColor);
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.1;
  transition: background 0.15s ease, color 0.15s ease;
}
.bv-pill-ghost:hover,
.bv-pill-ghost:focus-visible,
.bv-card a[href="#/worker-setup"]:hover,
.bv-card a[href="#/worker-setup"]:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink, var(--accent));
  outline: none;
}

/* ===== Local Board (#/board, #/board-new, #/board/<id>) ============ */
.bv-board { display: block; }
.bv-board-header { margin-bottom: var(--space-3); }
.bv-board-actions { margin-top: var(--space-3); }

.bv-board-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-3);
}

.bv-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--fz-small);
  cursor: pointer;
}
.bv-chip:hover { background: var(--surface-2); }
.bv-chip-small { padding: 2px 8px; font-size: calc(var(--fz-small) * 0.92); }
.bv-chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink, var(--accent));
}

.bv-board-list { display: grid; gap: var(--space-2); }
.bv-board-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.bv-board-row:last-child { border-bottom: none; }
.bv-board-row-title {
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.bv-board-row-title:hover { text-decoration: underline; }
.bv-board-row-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fz-small);
}

.bv-board-detail-body {
  white-space: pre-wrap;
  margin: var(--space-3) 0;
}
.bv-board-detail-actions { margin: var(--space-2) 0 var(--space-4); }
.bv-board-replies { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.bv-board-replies h2 { margin: 0 0 var(--space-2); font-size: var(--fz-h3); }
.bv-board-reply {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.bv-board-reply:last-child { border-bottom: none; }

.bv-field-check { display: flex; align-items: center; gap: 8px; }
.bv-field-check input { margin: 0; }
.bv-field-check span { margin: 0; }