/* ========================================
   OURB STYLESHEET (Post-Brand-Refresh v1.1)
   ========================================
   Design system: ourb-design.css (primary)
   Sidebar + drawer: nav-layout.css
   Page CSS: eval.css, agent-*.css, analysis.css, knowledge-profile.css

   This file (~545 lines, down from ~1574 pre brand-104):
   Token bridge, a11y, chat UI, messages, composer, hero, site-auth,
   responsive + mobile chat overrides.

   Deprecated orb / user-context / banner blocks removed 2026-03-26.
   ======================================== */

/* ---------- 1. Token bridge ---------- */
:root {
  --bg: var(--ourb-grey-25);
  --panel: var(--ourb-white);
  --ink: var(--ourb-black);
  --ink-muted: var(--ourb-grey-500);
  --rule: var(--ourb-grey-100);
  /* Table row/header dividers. Deliberately a literal, not an --ourb-* alias:
     it must clear 3:1 against BOTH light and dark grounds, so it must not
     invert with the theme. Full rationale + measured ratios at the
     "Markdown tables (Copilot)" block near the end of this file. */
  --table-divider: #8C8C8C;
  --accent: var(--ourb-accent);
  --accent-2: var(--ourb-accent-dark);
  --r: var(--ourb-radius-lg);
  --wrap: 1100px;
  --s1: var(--ourb-space-2);
  --s2: var(--ourb-space-3);
  --s3: var(--ourb-space-4);
  --s4: var(--ourb-space-6);
  --s5: var(--ourb-space-8);
  --s6: var(--ourb-space-12);
  --fs-1: var(--ourb-text-sm);
  --fs-2: var(--ourb-text-base);
  --fs-3: var(--ourb-text-lg);
  --fs-4: var(--ourb-text-xl);
  --fs-5: var(--ourb-text-2xl);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--ourb-black);
  padding: var(--ourb-space-2);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
html,body{height:100%}
body{
  margin:0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s6) var(--s4);
}
.chat-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); /* chat dominant, canvas sidebar (CMP-002) */
  gap: var(--s5);
  align-items: stretch;
}
.chat-container.ourb-card {
  border-radius: var(--ourb-radius-2xl);
  padding: var(--ourb-space-4);
  display: flex;
  flex-direction: column;
  min-height: 560px;
  max-height: 72vh;
  box-shadow: var(--ourb-shadow-md);
}
.chat-status-bar {
  height: 6px;
  border-radius: var(--ourb-radius-md);
  background: var(--ourb-grey-100);
  width: 100px;
  margin: 0 auto var(--ourb-space-4);
}
#log.chat-log {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ourb-space-3);
  padding: var(--ourb-space-3);
  background: var(--ourb-grey-50);
  border: 1px solid var(--ourb-grey-100);
  border-radius: var(--ourb-radius-lg);
  scroll-behavior: smooth;
}
.chat-message {
  max-width: 85%;
  padding: var(--ourb-space-3) var(--ourb-space-4);
  border-radius: var(--ourb-radius-lg);
  line-height: var(--ourb-leading-normal);
  word-wrap: break-word;
  font-family: var(--ourb-font-primary);
  font-size: var(--ourb-text-base);
  position: relative;
  animation: messageSlide 0.2s ease-out;
}
@keyframes messageSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-message--assistant p { margin: 0 0 0.5em; }
.chat-message--assistant p:last-of-type { margin-bottom: 0; }
.chat-message--assistant ul,
.chat-message--assistant ol { margin: 0.4em 0 0.5em 1.2em; padding: 0; }
.chat-message--assistant li { margin-bottom: 0.2em; }
.chat-message--assistant a { color: var(--ourb-accent-dark); text-decoration: underline; }
.chat-message--assistant strong { font-weight: 600; }
.chat-message--assistant code {
  font-family: monospace;
  background: var(--ourb-grey-50);
  padding: 1px 5px;
  border-radius: var(--ourb-radius-sm);
  font-size: 0.9em;
}
.chat-message--assistant pre {
  background: var(--ourb-grey-50);
  padding: var(--ourb-space-3);
  border-radius: var(--ourb-radius-md);
  overflow-x: auto;
  margin: 0.5em 0;
}
.chat-message--assistant pre code { background: none; padding: 0; }
.chat-copy-btn {
  position: absolute;
  bottom: var(--ourb-space-2);
  right: var(--ourb-space-2);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ourb-grey-400);
  padding: var(--ourb-space-1);
  border-radius: var(--ourb-radius-sm);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--ourb-transition-fast), color var(--ourb-transition-fast);
}
.chat-message--assistant:hover .chat-copy-btn { opacity: 1; }
.chat-copy-btn:hover { color: var(--ourb-accent); }

/* Shared feedback widget — used by Chat (PMC-006) and CX Intel (PMC-007). */
.copilot-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ourb-space-2);
  margin-top: var(--ourb-space-3);
  padding-top: var(--ourb-space-2);
  border-top: 1px solid var(--ourb-grey-100);
}
/* CMP-002: let the feedback row recede so it does not sit full-strength under
   every message. The shared row (`.ourb-feedback-row`, feedback-actions.js)
   fades in to opacity 1 via a `forwards` animation; we override that resting
   state to a low opacity (higher specificity + `animation: none` so the fill
   value no longer wins) and return it to full opacity on message hover or when
   any control inside it is focused. Keyboard-reachable; still POSTs feedback. */
.chat-message--assistant .ourb-feedback-row {
  animation: none;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.chat-message--assistant:hover .ourb-feedback-row,
.chat-message--assistant:focus-within .ourb-feedback-row,
.chat-message--assistant .ourb-feedback-row:focus-within {
  opacity: 1;
}
.copilot-feedback-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: var(--ourb-space-1);
  border-radius: var(--ourb-radius-sm);
  color: var(--ourb-grey-400);
  transition: color 0.15s, transform 0.1s;
}
.copilot-feedback-btn:hover:not(:disabled) { color: var(--ourb-grey-600); }
.copilot-feedback-btn:focus-visible {
  outline: 2px solid var(--ourb-accent);
  outline-offset: 2px;
}
.copilot-feedback-btn:disabled { cursor: default; }
.copilot-feedback-btn--active-up { color: var(--ourb-feedback-positive); }
.copilot-feedback-btn--active-down { color: var(--ourb-feedback-negative); }
.copilot-feedback-thanks {
  font-size: var(--ourb-text-xs);
  color: var(--ourb-grey-500);
}
.chat-message--assistant {
  align-self: flex-start;
  background: var(--ourb-white);
  color: var(--ourb-grey-700);
  border: 1px solid var(--ourb-grey-100);
  border-bottom-left-radius: var(--ourb-radius-sm);
}
.chat-message--user {
  align-self: flex-end;
  background: var(--ourb-grey-900);
  color: var(--ourb-white);
  border: 1px solid var(--ourb-grey-200);
  border-bottom-right-radius: var(--ourb-radius-sm);
}

/* CMP-001: companion-feel avatar row for assistant replies (mirrors miniapp).
   Desktop-first — reuses the existing chat column, no mobile container. */
.chat-assistant-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ourb-space-2);
  align-self: flex-start;
  max-width: 92%;
}
/* The bubble inside the row should not span the full row width on a wide
   desktop column; cap it so the companion bubble stays readable. */
.chat-assistant-row .chat-message--assistant {
  max-width: min(85%, 640px);
}
.chat-assistant-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--ourb-grey-50);
  border: 1px solid var(--ourb-grey-100);
}
.chat-message--typing {
  display: flex;
  align-items: center;
  padding: var(--ourb-space-2) var(--ourb-space-3);
  background: var(--ourb-white);
  border: 1px solid var(--ourb-grey-100);
  color: var(--ourb-grey-400);
  box-shadow: none;
}
.chat-message--error {
  background: var(--ourb-white);
  border: 1px solid var(--ourb-grey-200);
  color: var(--ourb-grey-600);
  align-self: flex-start;
}

/* Dark / dark-brass: chat uses hardcoded light surfaces; align bubbles and log with tokens */
[data-theme="dark"] #log.chat-log,
[data-theme="dark-brass"] #log.chat-log {
  background: var(--ourb-grey-50);
  border-color: var(--ourb-grey-100);
}

[data-theme="dark"] .chat-container.ourb-card,
[data-theme="dark-brass"] .chat-container.ourb-card {
  background: var(--ourb-white);
  border-color: var(--ourb-grey-100);
}

[data-theme="dark"] .chat-message--assistant,
[data-theme="dark-brass"] .chat-message--assistant {
  background: var(--ourb-grey-100);
  color: var(--ourb-grey-900);
  border-color: var(--ourb-grey-200);
}

[data-theme="dark"] .chat-message--assistant a,
[data-theme="dark-brass"] .chat-message--assistant a {
  color: var(--ourb-accent);
}

[data-theme="dark"] .chat-message--assistant code,
[data-theme="dark-brass"] .chat-message--assistant code {
  background: var(--ourb-grey-200);
  color: var(--ourb-grey-900);
}

[data-theme="dark"] .chat-message--assistant pre,
[data-theme="dark-brass"] .chat-message--assistant pre {
  background: var(--ourb-grey-200);
  border: 1px solid var(--ourb-grey-300);
}

[data-theme="dark"] .chat-message--typing,
[data-theme="dark-brass"] .chat-message--typing {
  background: var(--ourb-grey-100);
  border-color: var(--ourb-grey-200);
  color: var(--ourb-grey-500);
}

[data-theme="dark"] .chat-message--user,
[data-theme="dark-brass"] .chat-message--user {
  background: var(--ourb-grey-300);
  color: var(--ourb-black);
  border-color: var(--ourb-grey-200);
}

[data-theme="dark"] .chat-message--error,
[data-theme="dark-brass"] .chat-message--error {
  background: var(--ourb-grey-100);
  border-color: var(--ourb-grey-200);
  color: var(--ourb-grey-800);
}

[data-theme="dark"] .chat-copy-btn,
[data-theme="dark-brass"] .chat-copy-btn {
  color: var(--ourb-grey-500);
}

/* CMP-001: dark-theme avatar — align border/background with dark bubble tokens. */
[data-theme="dark"] .chat-assistant-avatar,
[data-theme="dark-brass"] .chat-assistant-avatar {
  background: var(--ourb-grey-100);
  border-color: var(--ourb-grey-200);
}

/* Mobile full-bleed chat: same dark surfaces as desktop (base selector is more specific) */
[data-theme="dark"] body.page-chat #log.chat-log,
[data-theme="dark-brass"] body.page-chat #log.chat-log {
  background: var(--ourb-grey-50);
}

[data-theme="dark"] body.page-chat .chat-message--assistant,
[data-theme="dark-brass"] body.page-chat .chat-message--assistant {
  background: var(--ourb-grey-100);
  color: var(--ourb-grey-900);
  border-color: var(--ourb-grey-200);
}

[data-theme="dark"] body.page-chat .chat-message--user,
[data-theme="dark-brass"] body.page-chat .chat-message--user {
  background: var(--ourb-grey-300);
  color: var(--ourb-black);
  border-color: var(--ourb-grey-200);
}

[data-theme="dark"] body.page-chat .chat-message--typing,
[data-theme="dark-brass"] body.page-chat .chat-message--typing {
  background: var(--ourb-grey-100);
  border-color: var(--ourb-grey-200);
  color: var(--ourb-grey-500);
}

.typing-orb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--ourb-grey-100);
  border-radius: 50%;
  animation: orbPulse 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes orbPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-6px) scale(1.08);
    opacity: 1;
  }
}
.error-content {
  display: flex;
  flex-direction: column;
  gap: var(--ourb-space-3);
}
.error-message {
  margin: 0;
}
.retry-btn {
  align-self: flex-start;
}
textarea:disabled {
  background: var(--ourb-grey-50);
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
#send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#send.sending {
  position: relative;
  color: transparent;
}
#send.sending::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--ourb-grey-200);
  border-top-color: var(--ourb-accent);
  border-radius: 50%;
  animation: sendSpin 0.8s linear infinite;
}
@keyframes sendSpin {
  to {
    transform: rotate(360deg);
  }
}
.chat-composer.sending .ourb-textarea {
  border-color: var(--ourb-accent);
  box-shadow: 0 0 0 2px var(--ourb-ring-sending);
}
.chat-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ourb-space-2);
  margin: var(--ourb-space-2) 0;
  padding: 0 var(--ourb-space-3);
}
/* CMP-002: lighter-weight suggestion chips so the first screen reads as a
   focused conversation, not a tool dashboard. Still fully clickable. */
.chat-quick-options .ourb-btn {
  font-weight: 400;
  color: var(--ourb-grey-500);
  background: transparent;
  border-color: var(--ourb-grey-200);
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.chat-quick-options .ourb-btn:hover,
.chat-quick-options .ourb-btn:focus-visible {
  color: var(--ourb-grey-700);
  border-color: var(--ourb-grey-300);
  opacity: 1;
}
.hidden {
  display: none !important;
}
.chat-composer {
  display: flex;
  gap: var(--ourb-space-3);
  margin-top: var(--ourb-space-3);
}
.chat-disclaimer {
  margin: var(--ourb-space-2) 0 0;
  padding: 0 var(--ourb-space-2);
  text-align: center;
}
.chat-composer .ourb-textarea {
  flex: 1;
  min-height: 80px;
  resize: vertical;
  border-radius: var(--ourb-radius-xl);
  border-color: var(--ourb-grey-200);
  background: var(--ourb-white);
  font-family: var(--ourb-font-primary, inherit);
  font-size: var(--ourb-text-base, inherit);
  color: var(--ourb-black);
}
.chat-composer .ourb-textarea:focus {
  outline: none;
  border-color: var(--ourb-accent);
  box-shadow: 0 0 0 2px var(--ourb-ring-focus-outer);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-composer .ourb-btn {
  width: 90px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--ourb-radius-xl);
  font-weight: 700;
  transition: transform 0.1s ease;
}
.chat-composer .ourb-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  align-self: flex-end;
  flex-shrink: 0;
}
/* CRC-002: reference canvas (right pane) — replaces the decorative hero image. */
.chat-canvas {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ourb-radius-lg);
  border: 1px solid var(--ourb-grey-100);
  background: var(--ourb-white);
  box-shadow: var(--ourb-shadow-sm);
}
.chat-canvas-header {
  padding: var(--ourb-space-4) var(--ourb-space-4) var(--ourb-space-3);
  border-bottom: 1px solid var(--ourb-grey-100);
  color: var(--ourb-grey-500);
  flex-shrink: 0;
}
.chat-canvas-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ourb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ourb-space-4);
}
.canvas-turn {
  display: flex;
  flex-direction: column;
  gap: var(--ourb-space-2);
}
.canvas-turn-label {
  color: var(--ourb-grey-400);
  margin: 0;
}
.canvas-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ourb-space-3);
  padding: var(--ourb-space-3);
  border: 1px solid var(--ourb-grey-100);
  border-radius: var(--ourb-radius-md, 12px);
  background: var(--ourb-white);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.canvas-card:hover {
  border-color: var(--ourb-grey-300);
  box-shadow: var(--ourb-shadow-sm);
}
.canvas-card__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.4;
}
.canvas-card__body { min-width: 0; flex: 1; }
.canvas-card__title {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ourb-grey-400);
  margin-top: 2px;
}
.canvas-card__domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-card__arrow { margin-left: auto; color: var(--ourb-grey-300); flex-shrink: 0; }
.micro{ display:none !important; }
@media (max-width: 980px){
  .chat-stage { grid-template-columns: 1fr; }
  /* CRC-002: reference canvas is a desktop enhancement — hidden below the two-column breakpoint. */
  .chat-canvas { display: none; }
  .chat-message { max-width: 92%; }
}
@media (max-width: 640px) {
  .wrap {
    padding: var(--ourb-space-6) var(--ourb-space-4);
  }
  .chat-container.ourb-card {
    min-height: min(460px, calc(100vh - 200px));
    max-height: min(72vh, calc(100vh - 160px));
  }
  .chat-composer {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-composer .ourb-textarea {
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
  }
  .chat-composer .ourb-btn {
    width: 100%;
    max-width: none;
    min-height: 48px;
  }
}
.chat-mobile-header { display: none; }
@media (max-width: 767px) {
  .agent-ops-wrap,
  .agent-profile-wrap,
  .eval-wrap {
    padding-left: var(--ourb-space-4);
    padding-right: var(--ourb-space-4);
  }
  body.page-chat main.wrap,
  body.page-chat .chat-stage { display: contents; }
  body.page-chat .chat-canvas { display: none !important; }
  body.page-chat .chat-status-bar { display: none; }
  body.page-chat .micro { display: none !important; }
  /* position: fixed; inset: 0 is bulletproof on all iOS Safari versions —
     no dvh/svh quirks, no browser-chrome resize jank */
  body.page-chat .chat-container.ourb-card {
    position: fixed;
    top: 0;
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    bottom: 0;
    min-height: none;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
  }
  .chat-mobile-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--ourb-space-3);
    padding: calc(env(safe-area-inset-top, 0px) + var(--ourb-space-3)) var(--ourb-space-4) var(--ourb-space-3);
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
  }
  .chat-mobile-avatar {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .chat-mobile-name {
    display: block;
    font: 600 16px/1 "Inter Tight", Inter, sans-serif;
    color: var(--ink);
  }
  .chat-mobile-tagline {
    display: block;
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
  }
  body.page-chat #log.chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border: none;
    background: var(--bg);
    padding: var(--ourb-space-4) var(--ourb-space-4) var(--ourb-space-3);
  }
  body.page-chat .chat-message {
    max-width: 82%;
    font-size: 15px;
  }
  /* Quick-option chips: horizontal strip between log and composer.
     Lives outside the log so it never gets clipped by overflow-y. */
  body.page-chat .chat-quick-options {
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--ourb-space-2) var(--ourb-space-4);
    border-top: 1px solid var(--rule);
    background: var(--panel);
    scrollbar-width: none;
  }
  body.page-chat .chat-quick-options::-webkit-scrollbar { display: none; }
  body.page-chat .chat-composer {
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--ourb-space-3);
    margin-top: 0;
    padding: var(--ourb-space-3) var(--ourb-space-4);
    background: var(--panel);
    border-top: 1px solid var(--rule);
  }
  /* Disclaimer absorbs the iOS safe-area inset so it sits just above the
     home indicator instead of being clipped by it. */
  body.page-chat .chat-disclaimer {
    flex-shrink: 0;
    margin: 0;
    padding: 0 var(--ourb-space-4) calc(var(--ourb-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    text-align: center;
  }
  body.page-chat .chat-composer .ourb-textarea {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    resize: none;
    border-radius: var(--ourb-radius-chat-pill);
    padding: var(--ourb-space-3) var(--ourb-space-4);
    font-size: 15px;
    box-sizing: border-box;
    width: auto;
  }
  body.page-chat .chat-composer .ourb-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    align-self: flex-end;
  }
  body.has-nav .site-auth {
    top: calc(var(--ourb-space-3) + env(safe-area-inset-top, 0px));
    right: calc(var(--ourb-space-3) + env(safe-area-inset-right, 0px));
  }
}
.site-auth {
  position: fixed;
  z-index: 60;
  top: calc(var(--ourb-space-3) + env(safe-area-inset-top, 0px));
  right: calc(var(--ourb-space-3) + env(safe-area-inset-right, 0px));
  max-width: min(280px, calc(100vw - 72px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ourb-space-2) var(--ourb-space-3);
  padding: var(--ourb-space-2) var(--ourb-space-3);
  border-radius: var(--ourb-radius-xl);
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: var(--ourb-shadow-md);
  font-size: var(--fs-1);
  line-height: 1.3;
}
body.has-nav .site-auth {
  right: calc(var(--ourb-space-3) + env(safe-area-inset-right, 0px));
}
.site-auth-error {
  width: 100%;
  margin: 0 0 var(--ourb-space-1);
  padding: 0;
  color: var(--ourb-semantic-error);
  font-size: var(--ourb-text-xs);
}
.site-auth-in {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: var(--ourb-border-thin) solid var(--accent);
}
.site-auth-in:hover,
.site-auth-in:focus-visible {
  color: var(--accent);
}
.site-auth-user {
  display: inline-flex;
  align-items: center;
  gap: var(--ourb-space-2);
  min-width: 0;
}
.site-auth-avatar {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.site-auth-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  color: var(--ink-muted);
}
.site-auth-out {
  margin: 0;
  padding: var(--ourb-space-1) var(--ourb-space-3);
  border: var(--ourb-border-thin) solid var(--rule);
  border-radius: var(--ourb-radius-md);
  background: var(--bg);
  font: inherit;
  font-size: var(--ourb-text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
}
.site-auth-out:hover,
.site-auth-out:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

/* ── Markdown tables (Copilot) ────────────────────────────────────────────
   The app's only table rules live in world-theme.css:517-534 scoped to
   [data-theme="world"]. copilot.html declares that statically, but theme.js
   replaces or removes the attribute on load, so tables lose all table styling
   the moment the page initialises. These rules use the surface's own tokens —
   ourb-design.css inverts the --ourb-* primitives under both
   [data-theme="dark"] (148) and [data-theme="dark-brass"] (179) — so no
   per-theme override is needed.

   Scoped to .page-copilot deliberately: .chat-log is ALSO used by the customer
   chat (index.html), miniapp.html and miniapp-preview.html. Do not widen this
   selector without re-checking those three surfaces.

   display:block + width:max-content makes the table its own horizontal scroll
   container. .resource-pane-body sets only overflow-y (copilot.html:239-242),
   so without this a wide table forces the whole pane sideways.
   ──────────────────────────────────────────────────────────────────────── */
.page-copilot .chat-log table,
.page-copilot .resource-markdown table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: var(--ourb-text-sm);
}

/* Table dividers use a dedicated token, NOT --rule and NOT --ourb-grey-200.

   --rule resolves to --ourb-grey-100 (#262626 under both dark themes), which is
   exactly what the assistant bubble paints its background with (styles.css:286-290)
   — a --rule divider is invisible. --ourb-grey-200 fixes the collision but only
   reaches 1.47:1 in light and 1.46:1 in dark, well under the W3C 3:1 non-text
   boundary benchmark (WCAG 2.2 technique G209).

   --table-divider is a single theme-independent mid-grey chosen to clear 3:1
   against EVERY surface a Copilot table sits on, measured:
     assistant bubble  #FFFFFF light 3.36:1   #262626 dark 4.50:1
     resource pane     #FFFFFF light 3.36:1   #0A0A0A dark 5.89:1
   Because it clears on both grounds, it needs no per-theme override. Changing it
   requires re-measuring against all four surfaces — see the contrast assertions
   in tests/unit/copilot-table-styles.test.js. */
.page-copilot .chat-log th,
.page-copilot .resource-markdown th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--ourb-grey-50);
  border-bottom: 1px solid var(--table-divider);
}

.page-copilot .chat-log td,
.page-copilot .resource-markdown td {
  padding: 0.5rem 0.75rem;
  color: var(--ink);
  border-bottom: 1px solid var(--table-divider);
  vertical-align: top;
}