/* ────────────────────────────────────────────────────────────
   SovAI CRE/PM — Brand CSS Overlay v2.0
   Injected via nginx sub_filter — zero-fork approach
   Issue #21: LibreChat UI branding via nginx CSS injection
   ──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── SovAI Brand Palette ──────────────────────────────── */
  --sovai-charcoal:     #181A20;
  --sovai-surface:      #1E2028;
  --sovai-surface-alt:  #252830;
  --sovai-indigo:       #2E1A47;
  --sovai-blue:         #4a90c4;
  --sovai-blue-bright:  #007BFF;
  --sovai-mint:         #00F5D4;
  --sovai-amber:        #f5c563;
  --sovai-coral:        #e8904f;
  --sovai-slate:        #64748b;
  --sovai-border:       rgba(100, 116, 139, 0.18);
  --sovai-text:         #e2e8f0;
  --sovai-text-dim:     #94a3b8;
  --sovai-text-muted:   #64748b;
  --sovai-glass:        rgba(30, 32, 40, 0.85);
  --sovai-glass-hover:  rgba(40, 43, 52, 0.9);
  --sovai-glow:         rgba(0, 245, 212, 0.08);

  /* ── Radius ───────────────────────────────────────────── */
  --sovai-radius-sm:    6px;
  --sovai-radius-md:    10px;
  --sovai-radius-lg:    14px;
  --sovai-radius-xl:    20px;

  /* ── Transitions ──────────────────────────────────────── */
  --sovai-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --sovai-transition:   all 0.2s var(--sovai-ease);
}

/* ═══════════════════════════════════════════════════════════
   TIER 1: TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

html,
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

pre,
code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 2: FORCE DARK MODE
   Override LibreChat's light theme to SovAI dark
   ═══════════════════════════════════════════════════════════ */

/* ── Global Background ──────────────────────────────────── */
html, body {
  background: var(--sovai-charcoal) !important;
  color: var(--sovai-text) !important;
}

/* ── Main Content Area ──────────────────────────────────── */
main,
[role="main"],
.bg-white,
.bg-gray-50,
.bg-gray-100 {
  background: var(--sovai-charcoal) !important;
  color: var(--sovai-text) !important;
}

/* ── Any white/light surface → dark ─────────────────────── */
div[class*="bg-white"],
div[class*="bg-gray-50"],
div[class*="bg-gray-100"],
div[class*="bg-token-main-surface"],
.bg-surface-primary,
.bg-surface-secondary,
.bg-surface-tertiary {
  background: var(--sovai-charcoal) !important;
}

/* ── BUG FIX #32: Artifact panel tab bar + controls ────── */
/* The .bg-muted class resolves to rgb(245,245,245) (white)
   in the Code/Preview tabs and toolbar area. */
.bg-muted {
  background-color: var(--sovai-surface-alt) !important;
}

/* Artifact toolbar button area */
.border-border-light,
[class*="border-border"] {
  border-color: var(--sovai-border) !important;
}

/* Artifact panel close button and header icons */
[class*="artifact"] button,
[class*="sandbox"] button {
  color: var(--sovai-text-dim) !important;
  border-color: var(--sovai-border) !important;
}

[class*="artifact"] button:hover,
[class*="sandbox"] button:hover {
  color: var(--sovai-text) !important;
}

/* ── Override LibreChat CSS variables ────────────────────── */
:root,
html,
html.light {
  --text-primary: #e2e8f0 !important;
  --text-secondary: #94a3b8 !important;
  --text-tertiary: #64748b !important;
  --surface-primary: #181A20 !important;
  --surface-secondary: #1E2028 !important;
  --surface-tertiary: #252830 !important;
  --surface-chat: #1E2028 !important;
  --border-light: rgba(100, 116, 139, 0.18) !important;
  --border-medium: rgba(100, 116, 139, 0.25) !important;
  --border-heavy: rgba(100, 116, 139, 0.35) !important;
  --presentation: #181A20 !important;
  --p: #181A20 !important;
  --border: rgba(100, 116, 139, 0.18) !important;
}

/* ── Kill presentation/p white backgrounds ──────────────── */
.bg-presentation,
.bg-p {
  background-color: var(--sovai-charcoal) !important;
}

/* ── Presentation gradient overrides (header fades) ─────── */
.from-presentation,
.from-presentation\/80,
.from-presentation\/70,
.via-presentation,
.via-presentation\/70,
.to-presentation,
[class*="from-presentation"],
[class*="via-presentation"],
[class*="to-presentation"] {
  --tw-gradient-from: #181A20 !important;
  --tw-gradient-to: #181A20 !important;
  --tw-gradient-stops: #181A20, #181A20 !important;
  background-color: var(--sovai-charcoal) !important;
}

/* ── Divider/border strips ──────────────────────────────── */
.bg-border,
.bg-border-light,
.border-border-light {
  background-color: rgba(100, 116, 139, 0.18) !important;
  border-color: rgba(100, 116, 139, 0.18) !important;
}

/* ── Force all text elements to light ───────────────────── */
.text-text-primary,
[class*="text-token-text"] {
  color: var(--sovai-text) !important;
}

.text-text-secondary {
  color: var(--sovai-text-dim) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 3: LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Login Container (full page) ────────────────────────── */
/* IMPORTANT: Only target pages that contain a login form.
   Using :has(form) prevents the indigo gradient from flashing
   on the main chat page during navigation/load. */
#root > div:has(form[aria-label]),
div[class*="login"]:has(form) {
  background: linear-gradient(
    160deg,
    var(--sovai-charcoal) 0%,
    #141620 40%,
    var(--sovai-indigo) 100%
  ) !important;
}

/* ── Login Card ─────────────────────────────────────────── */
form[aria-label] {
  background: var(--sovai-glass) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-xl) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(100, 116, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 2rem !important;
}

/* ── Login "Welcome back" heading ───────────────────────── */
h1, h2 {
  color: var(--sovai-text) !important;
}

/* ── Login inputs ───────────────────────────────────────── */
form[aria-label] input[type="email"],
form[aria-label] input[type="password"],
form[aria-label] input[type="text"] {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-md) !important;
  color: var(--sovai-text) !important;
  padding: 10px 14px !important;
  transition: var(--sovai-transition) !important;
}

form[aria-label] input:focus {
  border-color: var(--sovai-blue) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 196, 0.15) !important;
  outline: none !important;
}

/* ── Login button ───────────────────────────────────────── */
/* NOTE: Do NOT use broad selectors like button:has(> span:only-child)
   here — it catches the chat send button and makes it pill-shaped (#58) */
form[aria-label] button[type="submit"] {
  background: linear-gradient(135deg, var(--sovai-blue) 0%, var(--sovai-blue-bright) 100%) !important;
  border: none !important;
  border-radius: var(--sovai-radius-md) !important;
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 10px 20px !important;
  transition: var(--sovai-transition) !important;
}

form[aria-label] button[type="submit"]:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 16px rgba(74, 144, 196, 0.3) !important;
}

/* ── Login links ────────────────────────────────────────── */
form[aria-label] a,
a[href*="register"],
.text-green-500,
.text-green-600 {
  color: var(--sovai-mint) !important;
}

/* ── Login page labels ──────────────────────────────────── */
form[aria-label] label {
  color: var(--sovai-text-dim) !important;
}

/* ── Login page "Sign up" text ──────────────────────────── */
form[aria-label] ~ p,
form[aria-label] ~ div {
  color: var(--sovai-text-dim) !important;
}

/* ── Login logo replacement — hide default feather ──────── */
form[aria-label]::before {
  content: "SovAI CRE/PM";
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sovai-mint);
  margin-bottom: 4px;
  text-shadow: 0 0 30px rgba(0, 245, 212, 0.2);
}

/* ── Login subtitle ─────────────────────────────────────── */
form[aria-label]::after {
  content: "South Coast Commercial Intelligence Platform";
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--sovai-text-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: -2px;
}

/* ═══════════════════════════════════════════════════════════
   TIER 4: HEADER / NAV BAR
   ═══════════════════════════════════════════════════════════ */

/* ── Top Header Bar ─────────────────────────────────────── */
nav,
header,
div[class*="sticky"][class*="top-0"],
.border-b {
  background: var(--sovai-surface) !important;
  border-color: var(--sovai-border) !important;
}

/* ── Model/Agent Selector Button ────────────────────────── */
button[aria-label="Select a model"],
button[data-testid="model-selector"] {
  background: var(--sovai-surface-alt) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-md) !important;
  color: var(--sovai-text) !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  transition: var(--sovai-transition) !important;
}

button[aria-label="Select a model"]:hover {
  background: var(--sovai-glass-hover) !important;
  border-color: var(--sovai-blue) !important;
}

/* ── Model Selector Dropdown ────────────────────────────── */
div[role="listbox"],
div[class*="popover"],
div[data-radix-popper-content-wrapper] {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) !important;
}

/* ── Dropdown Items ─────────────────────────────────────── */
div[role="option"],
div[role="menuitem"] {
  color: var(--sovai-text) !important;
  border-radius: var(--sovai-radius-sm) !important;
  transition: var(--sovai-transition) !important;
}

div[role="option"]:hover,
div[role="menuitem"]:hover {
  background: var(--sovai-glow) !important;
}

div[role="option"][aria-selected="true"],
div[role="option"]:focus {
  background: rgba(74, 144, 196, 0.12) !important;
  color: var(--sovai-blue) !important;
}

/* ── Search inputs in dropdowns ─────────────────────────── */
input[placeholder*="Search"] {
  background: var(--sovai-surface-alt) !important;
  border: 1px solid var(--sovai-border) !important;
  color: var(--sovai-text) !important;
  border-radius: var(--sovai-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 5: SIDEBAR
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar Container ──────────────────────────────────── */
nav[aria-label="Chat history"],
aside,
div[class*="sidebar"],
.w-\[260px\] {
  background: var(--sovai-surface) !important;
  border-right: 1px solid var(--sovai-border) !important;
}

/* ── Sidebar Header (Chats label, search) ───────────────── */
nav[aria-label="Chat history"] > div:first-child {
  border-bottom: 1px solid var(--sovai-border) !important;
}

/* ── Search Messages Input ──────────────────────────────── */
input[placeholder="Search messages"] {
  background: var(--sovai-surface-alt) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-md) !important;
  color: var(--sovai-text) !important;
}

input[placeholder="Search messages"]:focus {
  border-color: var(--sovai-blue) !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 196, 0.12) !important;
}

/* ── Chat History Items — FORCE VISIBLE TEXT ────────────── */
nav[aria-label="Chat history"] a,
nav[aria-label="Chat history"] li,
nav[aria-label="Chat history"] a *,
nav[aria-label="Chat history"] li *,
nav[aria-label="Chat history"] span,
nav[aria-label="Chat history"] p,
nav[aria-label="Chat history"] div {
  color: var(--sovai-text-dim) !important;
  border-radius: var(--sovai-radius-sm) !important;
  transition: var(--sovai-transition) !important;
}

nav[aria-label="Chat history"] a:hover,
nav[aria-label="Chat history"] a:hover *,
nav[aria-label="Chat history"] li:hover,
nav[aria-label="Chat history"] li:hover * {
  background: var(--sovai-surface-alt) !important;
  color: var(--sovai-text) !important;
}

/* ── Kill sidebar gradient masks that hide text ─────────── */
/* The white fade is a div.bg-gradient-to-l.from-surface-primary-alt
   that resolves to rgb(247,247,248) in light mode. Target it precisely. */
nav[aria-label="Chat history"] .bg-gradient-to-l,
nav[aria-label="Chat history"] [class*="bg-gradient"],
nav[aria-label="Chat history"] [style*="gradient"],
nav[aria-label="Chat history"] [class*="mask"],
nav[aria-label="Chat history"] [class*="fade"] {
  background: none !important;
  background-image: none !important;
  --tw-gradient-from: var(--sovai-surface) !important;
  --tw-gradient-to: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 0 !important;
}

/* Also override the surface-primary-alt variable used by the gradient */
:root,
html,
html.light {
  --surface-primary-alt: #1E2028 !important;
  --surface-active-alt: #252830 !important;
}

/* ── Active/Selected Chat ───────────────────────────────── */
nav[aria-label="Chat history"] a[class*="bg-"],
nav[aria-label="Chat history"] a[class*="bg-"] *,
nav[aria-label="Chat history"] li[class*="bg-"],
nav[aria-label="Chat history"] li[class*="bg-"] * {
  background: rgba(74, 144, 196, 0.1) !important;
  color: var(--sovai-text) !important;
  border-left: 2px solid var(--sovai-blue) !important;
}

/* ── "Today" / Date Labels ──────────────────────────────── */
nav[aria-label="Chat history"] span[class*="text-xs"],
.text-token-text-secondary {
  color: var(--sovai-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ── Sidebar Icons ──────────────────────────────────────── */
nav[aria-label="Chat history"] svg {
  color: var(--sovai-text-muted) !important;
}

/* ── New Chat Button ────────────────────────────────────── */
button[aria-label="New chat"],
a[href="/c/new"] {
  color: var(--sovai-text) !important;
}

button[aria-label="New chat"]:hover {
  background: var(--sovai-surface-alt) !important;
}

/* ── User Badge at Bottom ───────────────────────────────── */
nav[aria-label="Chat history"] > div:last-child {
  border-top: 1px solid var(--sovai-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 6: CHAT AREA
   ═══════════════════════════════════════════════════════════ */

/* ── Chat Messages Container ────────────────────────────── */
main {
  background: linear-gradient(
    180deg,
    #121520 0%,
    #161A28 30%,
    #1A1E2A 60%,
    #1E2028 100%
  ) !important;
}

/* ── User Messages ──────────────────────────────────────── */
div[data-message-author-role="user"] > div > div {
  background: linear-gradient(135deg, rgba(74, 144, 196, 0.12) 0%, rgba(74, 144, 196, 0.06) 100%) !important;
  border: 1px solid rgba(74, 144, 196, 0.15) !important;
  border-radius: var(--sovai-radius-lg) !important;
  padding: 12px 16px !important;
  color: var(--sovai-text) !important;
}

/* ── Assistant Messages ─────────────────────────────────── */
div[data-message-author-role="assistant"] > div > div {
  background: transparent !important;
  color: var(--sovai-text) !important;
}

/* ── Assistant Message Content (prose) ──────────────────── */
/* BUG FIX #33: The .prose element has class "light" which sets
   color to rgb(17,24,39) (near-black). Our previous selector lost
   the specificity war. Using wildcard descendant + !important. */
div[data-message-author-role="assistant"] .prose,
div[data-message-author-role="assistant"] .prose *,
div[data-message-author-role="assistant"] .prose p,
div[data-message-author-role="assistant"] .prose li,
div[data-message-author-role="assistant"] .prose span,
div[data-message-author-role="assistant"] .prose td,
div[data-message-author-role="assistant"] .markdown,
div[data-message-author-role="assistant"] .markdown *,
.prose.light,
.prose.light * {
  color: var(--sovai-text) !important;
}

/* BUG FIX #30: Bold text must be BRIGHTER than body text, not the same */
div[data-message-author-role="assistant"] .prose strong,
div[data-message-author-role="assistant"] .prose b,
div[data-message-author-role="assistant"] .markdown strong,
div[data-message-author-role="assistant"] .markdown b,
.prose.light strong,
.prose.light b {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

/* BUG FIX #30: Italic text — slightly brighter for emphasis */
div[data-message-author-role="assistant"] .prose em,
div[data-message-author-role="assistant"] .markdown em {
  color: #e2e8f0 !important;
  font-style: italic !important;
}

/* BUG FIX #30: Headings must have clear hierarchy — brighter than body */
div[data-message-author-role="assistant"] .prose h1,
div[data-message-author-role="assistant"] .prose h2,
div[data-message-author-role="assistant"] .markdown h1,
div[data-message-author-role="assistant"] .markdown h2 {
  color: #ffffff !important;
  font-weight: 700 !important;
}

div[data-message-author-role="assistant"] .prose h3,
div[data-message-author-role="assistant"] .prose h4,
div[data-message-author-role="assistant"] .markdown h3,
div[data-message-author-role="assistant"] .markdown h4 {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

div[data-message-author-role="assistant"] .prose h5,
div[data-message-author-role="assistant"] .prose h6,
div[data-message-author-role="assistant"] .markdown h5,
div[data-message-author-role="assistant"] .markdown h6 {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

/* BUG FIX #30: Links — visible blue with underline + hover state */
div[data-message-author-role="assistant"] .prose a,
div[data-message-author-role="assistant"] .markdown a,
.prose.light a {
  color: var(--sovai-blue) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(74, 144, 196, 0.4) !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

div[data-message-author-role="assistant"] .prose a:hover,
div[data-message-author-role="assistant"] .markdown a:hover,
.prose.light a:hover {
  color: var(--sovai-mint) !important;
  text-decoration-color: var(--sovai-mint) !important;
}

/* BUG FIX #30: Table headers — brighter with bottom border accent */
div[data-message-author-role="assistant"] .prose th,
div[data-message-author-role="assistant"] .markdown th {
  color: #f8fafc !important;
  font-weight: 600 !important;
  background: var(--sovai-surface-alt) !important;
  border-bottom: 2px solid var(--sovai-blue) !important;
}

/* BUG FIX #30: Table cells — full brightness, not dim */
div[data-message-author-role="assistant"] .prose td,
div[data-message-author-role="assistant"] .markdown td {
  color: var(--sovai-text) !important;
}

/* BUG FIX #30: Numbered/bulleted list items — ensure visible */
div[data-message-author-role="assistant"] .prose ol > li,
div[data-message-author-role="assistant"] .prose ul > li,
div[data-message-author-role="assistant"] .markdown ol > li,
div[data-message-author-role="assistant"] .markdown ul > li {
  color: var(--sovai-text) !important;
}

div[data-message-author-role="assistant"] .prose ol > li::marker,
div[data-message-author-role="assistant"] .prose ul > li::marker {
  color: var(--sovai-blue) !important;
}

/* Ensure secondary text elements are slightly dimmer */
div[data-message-author-role="assistant"] .prose .text-token-text-secondary,
div[data-message-author-role="assistant"] .prose blockquote {
  color: var(--sovai-text-dim) !important;
}

/* ── Inline Code ────────────────────────────────────────── */
.prose code:not(pre code),
.markdown code:not(pre code) {
  background: var(--sovai-surface-alt) !important;
  color: var(--sovai-mint) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.875em !important;
}

/* ── Code Blocks ────────────────────────────────────────── */
.prose pre,
.markdown pre {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-md) !important;
}

/* ── Agent Name/Label above messages ────────────────────── */
.agent-turn .font-semibold,
div[data-message-author-role="assistant"] .font-semibold:first-child {
  color: var(--sovai-blue) !important;
  font-weight: 600 !important;
}

/* ── Welcome / Hero Section ─────────────────────────────── */
h2[class*="text-2xl"],
main h2 {
  color: var(--sovai-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 7: CHAT INPUT
   ═══════════════════════════════════════════════════════════ */

/* ── Textarea Container ─────────────────────────────────── */
/* Strip ALL borders from nested layers to prevent blue rectangle stacking */
form[aria-label*="chat"],
form[aria-label*="chat"] > div,
form[aria-label*="chat"] > div > div,
div:has(> textarea[placeholder*="Message"]),
main form,
main form > div,
main form > div > div,
div[class*="text-input"],
div[class*="composer"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Single border on the outermost chat input shell */
.bg-surface-chat {
  background: var(--sovai-surface) !important;
  border: 1px solid rgba(100, 116, 139, 0.15) !important;
  border-radius: var(--sovai-radius-xl) !important;
  transition: var(--sovai-transition) !important;
  outline: none !important;
}

/* Soft glow on focus — replaces harsh blue rectangles */
.bg-surface-chat:focus-within {
  border-color: rgba(0, 245, 212, 0.3) !important;
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.08),
              0 0 30px rgba(74, 144, 196, 0.05) !important;
}

/* Kill focus outlines on ALL nested input elements */
.bg-surface-chat *:focus,
.bg-surface-chat *:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ── Textarea Text ──────────────────────────────────────── */
textarea[placeholder*="Message"],
textarea#prompt-textarea {
  background: transparent !important;
  color: var(--sovai-text) !important;
}

textarea[placeholder*="Message"]::placeholder {
  color: var(--sovai-text-muted) !important;
}

/* ── Send Button ────────────────────────────────────────── */
/* FIX #58: Explicit sizing prevents login button selector from
   making this an oversized pill. Must be a compact 36px circle. */
#send-button,
button[data-testid="send-button"],
button[aria-label="Send message"] {
  background: var(--sovai-blue) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--sovai-transition) !important;
}

#send-button:hover,
button[data-testid="send-button"]:hover,
button[aria-label="Send message"]:hover {
  background: var(--sovai-blue-bright) !important;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.3) !important;
}

/* ── Attachment & Tool Buttons ──────────────────────────── */
button[aria-label="Attach files"],
button[aria-label="Use a tool"] {
  color: var(--sovai-text-muted) !important;
}

button[aria-label="Attach files"]:hover,
button[aria-label="Use a tool"]:hover {
  color: var(--sovai-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 8: AGENT CARDS
   ═══════════════════════════════════════════════════════════ */

/* ── Agent Card in Marketplace ──────────────────────────── */
div[class*="agent-card"],
div[data-testid*="agent-card"],
.agent-panel,
div[role="option"][class*="agent"] {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-lg) !important;
  transition: var(--sovai-transition) !important;
}

div[class*="agent-card"]:hover {
  border-color: var(--sovai-blue) !important;
  box-shadow: 0 4px 20px rgba(74, 144, 196, 0.1) !important;
}

/* ── Agent Icon (wrench/tool) ───────────────────────────── */
.agent-turn svg,
div[role="option"] svg {
  color: var(--sovai-blue) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 9: BUTTONS & INTERACTIVE ELEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Generic Buttons ────────────────────────────────────── */
button {
  color: var(--sovai-text) !important;
  transition: var(--sovai-transition) !important;
}

/* ── Icon Buttons (header, sidebar) ─────────────────────── */
button[class*="icon"],
button svg {
  color: var(--sovai-text-dim) !important;
}

button:hover svg {
  color: var(--sovai-text) !important;
}

/* ── Right Panel Buttons (Agent Builder, Prompts, etc.) ─── */
aside button,
div[class*="panel"] button,
button[class*="bg-white"],
button.bg-white {
  background: var(--sovai-surface-alt) !important;
  color: var(--sovai-text) !important;
  border-color: var(--sovai-border) !important;
}

aside button:hover,
div[class*="panel"] button:hover {
  background: var(--sovai-glass-hover) !important;
}

/* ── Catch-all: kill any remaining white backgrounds ────── */
.bg-white,
[class*="bg-white"] {
  background: var(--sovai-surface) !important;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--sovai-charcoal);
}

::-webkit-scrollbar-thumb {
  background: var(--sovai-slate);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sovai-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   TIER 10: PRIVACY BANNER & SHIELD
   ═══════════════════════════════════════════════════════════ */

/* Static banner hidden — replaced by sovai-privacy.js */
html.dark body::before {
  display: none !important;
}

#sovai-privacy-banner {
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--sovai-mint);
  background: linear-gradient(90deg, rgba(46, 26, 71, 0.6), rgba(24, 26, 32, 0.8), rgba(46, 26, 71, 0.6));
  border-bottom: 1px solid rgba(0, 245, 212, 0.1);
  z-index: 9999;
  position: relative;
}

#sovai-privacy-banner[data-enabled="false"] {
  color: var(--sovai-amber);
  background: linear-gradient(90deg, rgba(71, 46, 26, 0.6), rgba(24, 26, 32, 0.8), rgba(71, 46, 26, 0.6));
  border-bottom-color: rgba(245, 197, 99, 0.1);
}

/* ── Shield Toggle Button ──────────────────────────────── */
#sovai-shield {
  position: fixed;
  bottom: 72px;
  left: 16px;
  z-index: 10000;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--sovai-mint);
  background: rgba(0, 245, 212, 0.08);
  color: var(--sovai-mint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--sovai-transition);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 245, 212, 0.15);
}

#sovai-shield:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(0, 245, 212, 0.25);
}

#sovai-shield[data-enabled="false"] {
  border-color: var(--sovai-slate);
  background: rgba(100, 116, 139, 0.08);
  color: var(--sovai-slate);
  box-shadow: 0 2px 12px rgba(100, 116, 139, 0.1);
}

/* ── Shield Tooltip ────────────────────────────────────── */
#sovai-shield-tooltip {
  display: none;
  position: fixed;
  bottom: 114px;
  left: 16px;
  z-index: 10001;
  padding: 8px 12px;
  font-size: 11px;
  max-width: 240px;
  color: var(--sovai-text);
  background: var(--sovai-glass);
  border: 1px solid var(--sovai-border);
  border-radius: var(--sovai-radius-md);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   TIER 11: FOOTER BRANDING
   ═══════════════════════════════════════════════════════════ */

/* Footer rebranding — works in both light & dark */
[role="contentinfo"] span {
  font-size: 0 !important;
  color: transparent !important;
}

[role="contentinfo"] span::after {
  content: "South Coast Commercial | Powered by SovAI";
  font-size: 11px !important;
  color: var(--sovai-text-muted) !important;
  letter-spacing: 0.03em !important;
}

[role="contentinfo"] span a {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 12: TOOLTIPS & POPOVERS
   ═══════════════════════════════════════════════════════════ */

[role="tooltip"],
[data-state="open"][role="tooltip"] {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  color: var(--sovai-text) !important;
  border-radius: var(--sovai-radius-sm) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 13: MODAL DIALOGS
   ═══════════════════════════════════════════════════════════ */

[role="dialog"],
div[data-state="open"][class*="Dialog"] {
  background: var(--sovai-surface) !important;
  border: 1px solid var(--sovai-border) !important;
  border-radius: var(--sovai-radius-xl) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important;
}

/* ── Dialog Overlay ─────────────────────────────────────── */
[data-state="open"][class*="Overlay"] {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 14: TABLES & DATA
   ═══════════════════════════════════════════════════════════ */

table {
  border-color: var(--sovai-border) !important;
  border-collapse: collapse !important;
}

th {
  background: var(--sovai-surface-alt) !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  border-color: var(--sovai-border) !important;
  border-bottom: 2px solid var(--sovai-blue) !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

td {
  border-color: var(--sovai-border) !important;
  color: var(--sovai-text) !important;
  padding: 6px 12px !important;
}

/* BUG FIX #30: Alternating row stripes for readability */
tr:nth-child(even) td {
  background: rgba(30, 32, 40, 0.5) !important;
}

tr:hover td {
  background: var(--sovai-surface-alt) !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 15: SELECTION & GREEN → BLUE OVERRIDE
   ═══════════════════════════════════════════════════════════ */

/* LibreChat uses green extensively — remap to SovAI Blue */
.text-green-500,
.text-green-600,
.text-green-700 {
  color: var(--sovai-blue) !important;
}

.bg-green-500,
.bg-green-600,
.bg-green-700 {
  background: var(--sovai-blue) !important;
}

.border-green-500,
.border-green-600 {
  border-color: var(--sovai-blue) !important;
}

/* ── Focus Rings ────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--sovai-blue) !important;
  outline-offset: 2px !important;
}

/* ── Text Selection ─────────────────────────────────────── */
::selection {
  background: rgba(74, 144, 196, 0.3) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 16: RESPONSIVE (768px breakpoint)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Sidebar overlay on mobile */
  nav[aria-label="Chat history"],
  aside {
    background: var(--sovai-surface) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
  }

  /* Compact chat input */
  form[aria-label*="chat"],
  div:has(> textarea[placeholder*="Message"]) {
    border-radius: var(--sovai-radius-lg) !important;
    margin: 0 8px 8px !important;
  }

  /* Privacy shield repositioned */
  #sovai-shield {
    bottom: 16px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Adjust font sizes */
  h2[class*="text-2xl"] {
    font-size: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TIER 17: FILE INPUT & ARTIFACT FIXES
   ═══════════════════════════════════════════════════════════ */

/* ── Hide native file input that leaks into the UI (#34) ── */
input[type="file"] {
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 18: SMOOTH LOADING
   ═══════════════════════════════════════════════════════════ */

/* Prevent flash of unstyled content */
html {
  background: var(--sovai-charcoal) !important;
}

/* Smooth page transitions */
#root {
  animation: sovai-fade-in 0.3s ease-out;
}

@keyframes sovai-fade-in {
  from { opacity: 0.92; }
  to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   TIER 19: ARTIFACT DASHBOARD BUG FIXES (#31, #32, #33)
   ═══════════════════════════════════════════════════════════ */

/* FIX #31: Hide MetaMask error overlay blocking dashboards */
div[id*="metamask"],
#metamask-provider-error,
div:has(> iframe[src*="metamask"]) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* FIX #32: Remove white borders on dark backgrounds inside Dashboards */
div[class*="dashboard"],
div[class*="artifact"],
div[class*="FacetsVessel"] {
  border-color: var(--sovai-border) !important;
}

div[class*="dashboard"] *,
div[class*="artifact"] *,
div[class*="FacetsVessel"] * {
  border-color: var(--sovai-border) !important;
}

/* FIX #33: Fix dark text on dark background (unreadable) */
div[class*="dashboard"],
div[class*="artifact"],
div[class*="FacetsVessel"] {
  color: var(--sovai-text) !important;
}

div[class*="dashboard"] h1,
div[class*="dashboard"] h2,
div[class*="dashboard"] h3,
div[class*="dashboard"] h4,
div[class*="dashboard"] p,
div[class*="dashboard"] span,
div[class*="dashboard"] text,
div[class*="artifact"] h1,
div[class*="artifact"] h2,
div[class*="artifact"] h3,
div[class*="artifact"] h4,
div[class*="artifact"] p,
div[class*="artifact"] span,
div[class*="artifact"] text,
div[class*="FacetsVessel"] h1,
div[class*="FacetsVessel"] h2,
div[class*="FacetsVessel"] h3,
div[class*="FacetsVessel"] h4,
div[class*="FacetsVessel"] p,
div[class*="FacetsVessel"] span,
div[class*="FacetsVessel"] text {
  fill: #E6EDF3 !important; /* var(--text-primary) */
  color: #E6EDF3 !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 20: ANTI-VIBE DASHBOARD ENFORCEMENT (#63)
   ═══════════════════════════════════════════════════════════ */

div[class*="chart-container"],
div[class*="kpi-card"],
.kpi-card,
.chart-container,
.sovai-tooltip {
  border-radius: 0px !important; /* Anti-Vibe Sharp Corners */
  background: #1C2128 !important; /* bg-card per standards */
}

/* Force Technical Typography on data display elements */
table, .kpi-value, text, .data-point {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important;
}


h1, h2, h3, h4, .kpi-label, .axis text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 21: ARTIFACT CARD DARK MODE FIX (v3 — scoped)

   Root cause (verified from LibreChat compiled JS + CSS):
   The artifact trigger button uses class "bg-surface-tertiary"
   (collapsed) and "bg-surface-hover" (expanded). LibreChat's
   compiled CSS has hardcoded LIGHT fallbacks before the var():
     .bg-surface-tertiary { background-color: #ececec; ... }
     .bg-surface-hover    { background-color: #e3e3e3; ... }

   v3 FIX: Scoped ONLY to the artifact card button. Previous
   versions used global .bg-surface-* overrides which broke
   user message bubbles, inputs, and sidebar elements.

   Artifact button DOM (from source):
   <div class="group relative my-4 rounded-xl text-sm text-text-primary">
     <button class="relative overflow-hidden rounded-xl ...
                    border-border-light bg-surface-tertiary shadow-sm">
   ═══════════════════════════════════════════════════════════ */

/* Layer 1: Direct attribute-selector override on the EXACT
   artifact button class combination from LibreChat source.
   Targets: button[overflow-hidden + rounded-xl + surface-tertiary]
   — this combination doesn't appear on any other element.         */
button[class*="overflow-hidden"][class*="rounded-xl"][class*="bg-surface-tertiary"],
button[class*="overflow-hidden"][class*="rounded-xl"][class*="bg-surface-hover"] {
  background-color: #2f2f2f !important;  /* dark gray-700 */
  border-color:     #424242 !important;
  color:            #ececec !important;
}

button[class*="overflow-hidden"][class*="rounded-xl"][class*="bg-surface-tertiary"]:hover,
button[class*="overflow-hidden"][class*="rounded-xl"][class*="bg-surface-hover"]:hover {
  background-color: #424242 !important;  /* dark gray-600 */
  border-color:     #595959 !important;
}

/* Layer 2: Scoped to the artifact card wrapper div only.
   The outer div has class="group relative my-4 rounded-xl" —
   this combination is unique to artifact cards in message flow. */
div.group.relative.my-4.rounded-xl > button {
  background-color: #2f2f2f !important;
  border-color: #424242 !important;
  color: #ececec !important;
}

div.group.relative.my-4.rounded-xl > button:hover {
  background-color: #424242 !important;
}