/* BidReady AI — tokens from root DESIGN.md (see /DESIGN.md) */
:root {
  --ca-text: #0f172a;
  --ca-text-muted: #64748b;
  --ca-accent: #0284c7;
  --ca-accent-hover: #0369a1;
  --ca-on-accent: #ffffff;
  --ca-page: #f4f6f8;
  --ca-elevated: #ffffff;
  --ca-sidebar: #f0f2f5;
  --ca-border: #e2e8f0;
  --ca-accent-subtle: #e0f2fe;
  --ca-success: #059669;
  --ca-success-subtle: #d1fae5;
  --ca-warning: #d97706;
  --ca-warning-subtle: #fef3c7;
  --ca-surface-tint: #f1f5f9;
  --ca-item-hover: rgba(15, 23, 42, 0.06);
  --ca-radius-sm: 6px;
  --ca-radius-md: 10px;
  --ca-radius-lg: 14px;
  --ca-shadow-chrome: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ca-primary: var(--ca-accent);
  --ca-primary-hover: var(--ca-accent-hover);
  --ca-surface-page: var(--ca-page);
  --ca-surface-elevated: var(--ca-elevated);
}

html.dark {
  --ca-text: #f1f5f9;
  --ca-text-muted: #94a3b8;
  --ca-accent: #38bdf8;
  --ca-accent-hover: #0ea5e9;
  --ca-on-accent: #0f172a;
  --ca-page: #0f172a;
  --ca-elevated: #1e293b;
  --ca-sidebar: #0c1320;
  --ca-border: #334155;
  --ca-accent-subtle: #0c4a6e;
  --ca-success: #34d399;
  --ca-success-subtle: #064e3b;
  --ca-warning: #fbbf24;
  --ca-warning-subtle: #422006;
  --ca-surface-tint: #334155;
  --ca-item-hover: rgba(255, 255, 255, 0.06);
  --ca-on-accent: #ffffff;
  --ca-shadow-chrome: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Login / auth inputs — use accent for caret; surfaces from tokens */
.auth-input {
  color: var(--ca-text);
  background-color: var(--ca-elevated);
  caret-color: var(--ca-accent);
  border-color: var(--ca-border);
}
html.dark .auth-input,
.dark .auth-input {
  color: var(--ca-text);
  background-color: #0f172a;
  caret-color: var(--ca-accent);
  border-color: var(--ca-border);
}
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ca-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ca-elevated) inset;
  box-shadow: 0 0 0 1000px var(--ca-elevated) inset;
  transition: background-color 99999s ease-out;
}
html.dark .auth-input:-webkit-autofill,
html.dark .auth-input:-webkit-autofill:hover,
html.dark .auth-input:-webkit-autofill:focus,
html.dark .auth-input:-webkit-autofill:active,
.dark .auth-input:-webkit-autofill,
.dark .auth-input:-webkit-autofill:hover,
.dark .auth-input:-webkit-autofill:focus,
.dark .auth-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ca-text);
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset;
  box-shadow: 0 0 0 1000px #0f172a inset;
}

/* Shared marketing / static page shell */
.ca-marketing-body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--ca-page);
  color: var(--ca-text);
}
html.dark body {
  background-color: var(--ca-page);
}

/* Chrome: headers / sidebars that sit above the canvas */
.ca-chrome {
  box-shadow: var(--ca-shadow-chrome);
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}
.dark ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.prose {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ca-text-muted);
  min-width: 0;
}
.dark .prose,
html.dark .prose {
  color: var(--ca-text-muted);
}
/* App-wide selection highlight — same palette the chat already uses, so
   selecting text (e.g. file names in the Data Room) is clearly visible. */
::selection {
  background-color: #bae6fd;
  color: #0c4a6e;
}
.dark ::selection,
html.dark ::selection {
  background-color: #0ea5e9;
  color: #f8fafc;
}

.chat-message-content,
.chat-message-content * {
  -webkit-user-select: text !important;
  user-select: text !important;
  cursor: text;
}
.chat-message-content::selection,
.chat-message-content *::selection {
  background-color: #bae6fd;
  color: #0c4a6e;
}
.chat-message-content::-moz-selection,
.chat-message-content *::-moz-selection {
  background-color: #bae6fd;
  color: #0c4a6e;
}
.dark .chat-message-content::selection,
.dark .chat-message-content *::selection,
html.dark .chat-message-content::selection,
html.dark .chat-message-content *::selection {
  background-color: #0ea5e9;
  color: #f8fafc;
}
.dark .chat-message-content::-moz-selection,
.dark .chat-message-content *::-moz-selection,
html.dark .chat-message-content::-moz-selection,
html.dark .chat-message-content *::-moz-selection {
  background-color: #0ea5e9;
  color: #f8fafc;
}
.chat-message-content table,
.chat-message-content thead,
.chat-message-content tbody,
.chat-message-content tr,
.chat-message-content th,
.chat-message-content td {
  -webkit-user-select: text !important;
  user-select: text !important;
}
.prose h2,
.prose h3 {
  color: var(--ca-text);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.dark .prose h2,
.dark .prose h3,
html.dark .prose h2,
html.dark .prose h3 {
  color: var(--ca-text);
}
.prose strong {
  color: var(--ca-text);
  font-weight: 600;
}
.dark .prose strong,
html.dark .prose strong {
  color: var(--ca-text);
}
.prose ul {
  list-style-type: disc;
  padding-left: 1.25em;
  margin: 1em 0;
}
.prose ul li {
  display: list-item;
  margin: 0.5em 0;
  padding-left: 0.25em;
}
.prose ol {
  list-style-type: decimal;
  padding-left: 1.25em;
  margin: 1em 0;
}
.prose ol li {
  display: list-item;
  margin: 0.5em 0;
  padding-left: 0.25em;
}
/* Tables — a wrapper provides the rounded border + the scroll context that lets
   headers stick while a long table scrolls (DESIGN: chat-table) */
.ca-table-wrap {
  margin: 1.25em 0;
  max-width: 100%;
  max-height: 65vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  box-shadow: var(--ca-shadow-chrome);
}
.dark .ca-table-wrap,
html.dark .ca-table-wrap {
  border-color: var(--ca-border);
}
.prose table {
  /* Size to content but always fill the wrapper. On a narrow column (e.g. a 13"
     screen with the insights panel open) a wide table grows past the wrapper and
     the .ca-table-wrap scrolls horizontally, instead of crushing every column to
     one word per line or getting clipped. */
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
  /* auto sizing lets short columns (e.g. Status) shrink and text-heavy columns
     (e.g. Finding & Citation) take the remaining width — fixes skinny columns */
  table-layout: auto;
  font-size: 0.875rem;
  margin: 0;
}
/* Sticky header: pinned while a long table scrolls inside its wrapper. The
   divider is drawn with an inset shadow (not border-bottom) so it can't scroll
   away from the sticky cell under border-collapse. */
.prose thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--ca-surface-tint);
  box-shadow: inset 0 -1px 0 var(--ca-border);
}
.prose th {
  color: var(--ca-text);
  font-weight: 600;
  text-align: left;
  padding: 0.625rem 0.875rem;
  /* Keep headers on one line so they never break mid-word ("Own er"); this also
     gives each column a sensible minimum width. */
  white-space: nowrap;
}
.dark .prose th,
html.dark .prose th {
  background-color: var(--ca-surface-tint);
  color: var(--ca-text);
}
.prose td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--ca-border);
  white-space: normal;
  /* break-word (not anywhere): wrap at word boundaries and size columns to whole
     words, so cells/headers don't crush to one character per line. Genuinely long
     unbreakable tokens (e.g. filenames) still break to avoid overflow. */
  overflow-wrap: break-word;
  /* Cap text-heavy cells so a long description wraps instead of stretching the
     table to an unusable width; short columns stay compact. */
  max-width: 28rem;
  color: var(--ca-text);
  vertical-align: top;
}
.dark .prose td,
html.dark .prose td {
  color: #e2e8f0;
  border-bottom-color: var(--ca-border);
}
/* Wrapper supplies the bottom edge, so the last row needs no divider */
.prose tbody tr:last-child td {
  border-bottom: none;
}
/* Zebra striping — subtle, so the eye tracks across wide rows */
.prose tbody tr:nth-child(even) td {
  background-color: rgba(15, 23, 42, 0.025);
}
.dark .prose tbody tr:nth-child(even) td,
html.dark .prose tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.035);
}
.prose tbody tr:hover td {
  background-color: rgba(15, 23, 42, 0.05);
}
.dark .prose tr:hover td,
html.dark .prose tr:hover td {
  background-color: rgba(51, 65, 85, 0.55);
}

/* Status pills — replace bare ✓/✗ status cells with scannable, color-coded
   badges (DESIGN: chat-status-pill) */
.ca-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.ca-status-pass {
  background-color: var(--ca-success-subtle);
  color: var(--ca-success);
  border-color: color-mix(in srgb, var(--ca-success) 30%, transparent);
}
.ca-status-fail {
  background-color: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.30);
}
.ca-status-warn {
  background-color: var(--ca-warning-subtle);
  color: var(--ca-warning);
  border-color: color-mix(in srgb, var(--ca-warning) 32%, transparent);
}
.dark .ca-status-fail,
html.dark .ca-status-fail {
  background-color: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.40);
}


/* Citation — tertiary-container + tertiary (DESIGN: citation-chip) */
.citation-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--ca-accent-subtle);
  color: var(--ca-accent);
  padding: 2px 6px;
  border-radius: var(--ca-radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 4px;
  border: 1px solid color-mix(in srgb, var(--ca-accent) 28%, transparent);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s;
  text-decoration: none;
}
.citation-badge:hover {
  background-color: color-mix(in srgb, var(--ca-accent-subtle) 85%, #fff);
  border-color: var(--ca-accent);
  color: var(--ca-accent-hover);
}
.dark .citation-badge,
html.dark .citation-badge {
  background-color: var(--ca-accent-subtle);
  color: var(--ca-accent);
  border-color: color-mix(in srgb, var(--ca-accent) 35%, transparent);
}
.dark .citation-badge:hover,
html.dark .citation-badge:hover {
  background-color: #075985;
  border-color: var(--ca-accent);
  color: #e0f2fe;
}

/* Inline section-ref citation that resolves to a web source: a chip labelled
   with the source name (context) that opens the source directly, instead of a
   bare "6.2.1" that scrolls nowhere. Reuses .citation-badge styling. */
.citation-web {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit; /* a readable name, not the monospace section number */
}
.citation-web-arrow {
  margin-left: 3px;
  font-size: 0.85em;
  opacity: 0.7;
}
.citation-web:hover .citation-web-arrow {
  opacity: 1;
}
/* Unmapped section ref: still a chip, but its click reveals the sources list. */
.citation-section {
  cursor: pointer;
}

/* Inline web-source citation: a small superscript number next to a grounded
   statement that links to its "Verified Web Sources" entry. */
.web-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05em;
  height: 1.05em;
  padding: 0 0.28em;
  margin: 0 1px;
  vertical-align: super;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  background-color: var(--ca-accent-subtle);
  color: var(--ca-accent);
  border: 1px solid color-mix(in srgb, var(--ca-accent) 30%, transparent);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.web-cite:hover {
  background-color: var(--ca-accent);
  color: #fff;
  border-color: var(--ca-accent);
}

/* Briefly highlight the "Verified Web Sources" block when an unresolved
   citation chip (a web/Vertex search section ref) is clicked and scrolls here. */
.web-sources-flash {
  animation: caSourcesFlash 1.6s ease-out;
}
@keyframes caSourcesFlash {
  0%, 25% {
    background-color: var(--ca-accent-subtle);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ca-accent) 45%, transparent);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 2px transparent;
  }
}

/* Thinking indicator — a single line whose label shimmers with a light sheen
   sweeping across it (DESIGN: thinking-shimmer). Colors stay in the sky/accent
   palette; the moving highlight is a lighter tint of the same accent. */
.ca-shimmer-text {
  background-image: linear-gradient(
    100deg,
    var(--ca-accent) 0%,
    var(--ca-accent) 38%,
    color-mix(in srgb, var(--ca-accent) 30%, #ffffff) 50%,
    var(--ca-accent) 62%,
    var(--ca-accent) 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Soft glow behind the glyphs — the "shadow" from the reference. Shows even
     with a transparent fill because text-shadow paints with its own color. */
  text-shadow: 0 0 10px color-mix(in srgb, var(--ca-accent) 35%, transparent);
  animation: caShimmerSweep 2.2s linear infinite;
}
@keyframes caShimmerSweep {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
/* Each newly-swapped label fades + lifts in, so the text changes in place
   instead of the list unfolding. */
.ca-thinking-swap {
  animation: caThinkingSwap 0.4s ease-out;
}
@keyframes caThinkingSwap {
  0% { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ca-shimmer-text {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--ca-accent);
    color: var(--ca-accent);
    text-shadow: none;
  }
  .ca-thinking-swap {
    animation: none;
  }
}

/* Thin horizontal scrollbar for suggestions */
.scrollbar-thin::-webkit-scrollbar {
  height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--ca-border);
  border-radius: 2px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb,
html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background: #475569;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover,
html.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}