/* ────────────────────────────────────────────────────────────
   SovAI Cannabis — Brand CSS Overlay v3.0
   Ported from CRE-PM's battle-tested 21-tier architecture
   Palette: Gunmetal (dark) / Amber (accent) / Warm Ash (light)
   Injected via nginx sub_filter — zero-fork approach
   ──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── SovAI Cannabis Palette ────────────────────────────── */
  --sovai-charcoal:     #1c1f26;
  --sovai-surface:      #20242e;
  --sovai-surface-alt:  #252930;
  --sovai-amber:        #e8904f;
  --sovai-amber-bright: #f5a568;
  --sovai-gold:         #f5c563;
  --sovai-slate:        #5a6778;
  --sovai-border:       rgba(42, 47, 58, 0.8);
  --sovai-text:         #d4dbe8;
  --sovai-text-dim:     #7a8799;
  --sovai-text-muted:   #4a5568;
  --sovai-glass:        rgba(32, 36, 46, 0.85);
  --sovai-glass-hover:  rgba(37, 41, 48, 0.9);
  --sovai-glow:         rgba(232, 144, 79, 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: Artifact panel tab bar + controls ──────────── */
.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: #d4dbe8 !important;
  --text-secondary: #7a8799 !important;
  --text-tertiary: #4a5568 !important;
  --surface-primary: #1c1f26 !important;
  --surface-secondary: #20242e !important;
  --surface-tertiary: #252930 !important;
  --surface-chat: #20242e !important;
  --border-light: rgba(42, 47, 58, 0.8) !important;
  --border-medium: rgba(42, 47, 58, 0.9) !important;
  --border-heavy: rgba(42, 47, 58, 1) !important;
  --presentation: #1c1f26 !important;
  --p: #1c1f26 !important;
  --border: rgba(42, 47, 58, 0.8) !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: #1c1f26 !important;
  --tw-gradient-to: #1c1f26 !important;
  --tw-gradient-stops: #1c1f26, #1c1f26 !important;
  background-color: var(--sovai-charcoal) !important;
}

/* ── Divider/border strips ──────────────────────────────── */
.bg-border,
.bg-border-light,
.border-border-light {
  background-color: rgba(42, 47, 58, 0.8) !important;
  border-color: rgba(42, 47, 58, 0.8) !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 ────────────────────────────────────── */
#root > div:has(form[aria-label]),
div[class*="login"]:has(form) {
  background: linear-gradient(
    160deg,
    var(--sovai-charcoal) 0%,
    #1a1d24 40%,
    #2a1e14 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(42, 47, 58, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 2rem !important;
}

/* ── Login 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-amber) !important;
  box-shadow: 0 0 0 3px rgba(232, 144, 79, 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-amber) 0%, #d4793a 100%) !important;
  border: none !important;
  border-radius: var(--sovai-radius-md) !important;
  color: #0e0f11 !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(232, 144, 79, 0.3) !important;
}

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

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

/* ── Login branding ─────────────────────────────────────── */
form[aria-label]::before {
  content: "SovAI Cannabis";
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #e8904f 0%, #f5c563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

form[aria-label]::after {
  content: "Sovereign Intelligence for Cannabis Operators";
  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
   ═══════════════════════════════════════════════════════════ */

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-amber) !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(232, 144, 79, 0.12) !important;
  color: var(--sovai-amber) !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
   ═══════════════════════════════════════════════════════════ */

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

nav[aria-label="Chat history"] > div:first-child {
  border-bottom: 1px solid var(--sovai-border) !important;
}

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-amber) !important;
  box-shadow: 0 0 0 2px rgba(232, 144, 79, 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 ─────────── */
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;
}

:root,
html,
html.light {
  --surface-primary-alt: #20242e !important;
  --surface-active-alt: #252930 !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(232, 144, 79, 0.1) !important;
  color: var(--sovai-text) !important;
  border-left: 2px solid var(--sovai-amber) !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;
}

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

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;
}

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

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

main {
  background: linear-gradient(
    180deg,
    #1a1d24 0%,
    #1c1f26 30%,
    #1e2128 60%,
    #20242e 100%
  ) !important;
}

/* ── User Messages ──────────────────────────────────────── */
div[data-message-author-role="user"] > div > div {
  background: linear-gradient(135deg, rgba(232, 144, 79, 0.10) 0%, rgba(232, 144, 79, 0.05) 100%) !important;
  border: 1px solid rgba(232, 144, 79, 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 Prose — force light text ──────────────────── */
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;
}

div[data-message-author-role="assistant"] .prose strong,
div[data-message-author-role="assistant"] .prose b,
.prose.light strong,
.prose.light b {
  color: #f8fafc !important;
  font-weight: 700 !important;
}

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 {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
}

/* ── Links in messages ──────────────────────────────────── */
div[data-message-author-role="assistant"] .prose a,
div[data-message-author-role="assistant"] .markdown a,
.prose.light a {
  color: var(--sovai-amber) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(232, 144, 79, 0.4) !important;
  text-underline-offset: 2px !important;
}

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

/* ── Table styling ──────────────────────────────────────── */
div[data-message-author-role="assistant"] .prose th {
  color: #f8fafc !important;
  font-weight: 600 !important;
  background: var(--sovai-surface-alt) !important;
  border-bottom: 2px solid var(--sovai-amber) !important;
}

div[data-message-author-role="assistant"] .prose td {
  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-amber) !important;
}

/* ── Inline Code ────────────────────────────────────────── */
.prose code:not(pre code),
.markdown code:not(pre code) {
  background: var(--sovai-surface-alt) !important;
  color: var(--sovai-amber) !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 above messages ──────────────────────────── */
.agent-turn .font-semibold,
div[data-message-author-role="assistant"] .font-semibold:first-child {
  color: var(--sovai-amber) !important;
  font-weight: 600 !important;
}

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

/* ── Strip ALL borders from nested layers ───────────────── */
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(42, 47, 58, 0.6) !important;
  border-radius: var(--sovai-radius-xl) !important;
  transition: var(--sovai-transition) !important;
  outline: none !important;
}

.bg-surface-chat:focus-within {
  border-color: rgba(232, 144, 79, 0.3) !important;
  box-shadow: 0 0 15px rgba(232, 144, 79, 0.08),
              0 0 30px rgba(232, 144, 79, 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[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-amber) !important;
  color: #0e0f11 !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-amber-bright) !important;
  box-shadow: 0 2px 12px rgba(232, 144, 79, 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
   ═══════════════════════════════════════════════════════════ */

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-amber) !important;
  box-shadow: 0 4px 20px rgba(232, 144, 79, 0.1) !important;
}

.agent-turn svg,
div[role="option"] svg {
  color: var(--sovai-amber) !important;
}

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

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

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

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

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: PII BANNER
   ═══════════════════════════════════════════════════════════ */

body::before {
  content: "SOVAI CANNABIS\00a0\00a0·\00a0\00a0SHIELD ACTIVE\00a0\00a0·\00a0\00a0SOVEREIGN INFRA\00a0\00a0·\00a0\00a0BEDROCK US-EAST-1";
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 16px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sovai-amber);
  background: linear-gradient(90deg, rgba(42, 30, 14, 0.6), rgba(28, 31, 38, 0.8), rgba(42, 30, 14, 0.6));
  border-bottom: 1px solid rgba(232, 144, 79, 0.1);
  z-index: 9999;
  position: relative;
}

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

[role="contentinfo"] span {
  font-size: 0 !important;
  color: transparent !important;
}

[role="contentinfo"] span::after {
  content: "SovAI Cannabis | Sovereign AI Platform";
  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;
}

[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-amber) !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;
}

tr:nth-child(even) td {
  background: rgba(32, 36, 46, 0.5) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   TIER 15: GREEN → AMBER OVERRIDE
   ═══════════════════════════════════════════════════════════ */

.text-green-500,
.text-green-600,
.text-green-700 {
  color: var(--sovai-amber) !important;
}

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

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

*:focus-visible {
  outline: 2px solid var(--sovai-amber) !important;
  outline-offset: 2px !important;
}

::selection {
  background: rgba(232, 144, 79, 0.3) !important;
  color: white !important;
}

/* ═══════════════════════════════════════════════════════════
   TIER 16: RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

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

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

/* ═══════════════════════════════════════════════════════════
   TIER 17: FILE INPUT FIX
   ═══════════════════════════════════════════════════════════ */

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
   ═══════════════════════════════════════════════════════════ */

html {
  background: var(--sovai-charcoal) !important;
}

#root {
  animation: sovai-fade-in 0.3s ease-out;
}

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

/* ═══════════════════════════════════════════════════════════
   TIER 21: ARTIFACT CARD DARK MODE FIX
   ═══════════════════════════════════════════════════════════ */

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;
  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;
  border-color: #595959 !important;
}

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;
}

/* ═══════════════════════════════════════════════════════════
   TIER 13: BRAND ERASURE + CANNABIS LEAF INJECTION (v5)
   ═══════════════════════════════════════════════════════════ */

/* 1. Hide explicitly branded image logos */
img[alt*="LibreChat" i],
img[alt*="logo" i],
img[src*="logo" i],
img[src*="librechat" i] {
  display: none !important;
}

/* 2. Hide LibreChat leaf/bot Lucide icons but keep their CONTAINERS visible */
svg.lucide-feather,
svg.lucide.lucide-feather,
svg.lucide-bot,
svg.lucide.lucide-bot {
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* 3. Inject cannabis leaf into the CONTAINER of the hidden feather/bot icon */
/* Targets any flex/rounded container that directly holds the now-invisible SVG */
/* Agent marketplace avatar circles */
[class*="rounded-full"]:has(> svg.lucide-feather),
[class*="rounded-full"]:has(> svg.lucide-bot) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22%23e8904f%22%20d%3D%22M50%2C85%20L48%2C65%20C40%2C70%2030%2C68%2024%2C62%20C30%2C56%2040%2C54%2048%2C56%20L46%2C48%20C36%2C52%2026%2C48%2022%2C40%20C30%2C36%2040%2C40%2046%2C44%20C44%2C36%2040%2C26%2042%2C18%20C46%2C24%2050%2C35%2050%2C45%20C50%2C35%2054%2C24%2058%2C18%20C60%2C26%2056%2C36%2054%2C44%20C60%2C40%2070%2C36%2078%2C40%20C74%2C48%2064%2C52%2054%2C48%20L52%2C56%20C60%2C54%2070%2C56%2076%2C62%20C70%2C68%2060%2C70%2052%2C65%20L50%2C85Z%22/%3E%3Cline%20x1%3D%2250%22%20y1%3D%2285%22%20x2%3D%2250%22%20y2%3D%2295%22%20stroke%3D%22%23e8904f%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") !important;
  background-size: 60% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* 4. Restore amber icon in the agent greeting header */
/* The flex row containing the feather SVG + agent name text */
main .flex.items-center:has(> svg.lucide-feather)::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e8904f%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%3E%3Cpath%20d%3D%22M12%202L2%207l10%205%2010-5-10-5zM2%2017l10%205%2010-5M2%2012l10%205%2010-5%22%20/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5rem;
}

/* 5. Auth page: cannabis leaf above login form */
[data-testid="login-form"]:has(svg.lucide-feather)::before,
[data-testid="registration-form"]:has(svg.lucide-feather)::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22%23e8904f%22%20d%3D%22M50%2C85%20L48%2C65%20C40%2C70%2030%2C68%2024%2C62%20C30%2C56%2040%2C54%2048%2C56%20L46%2C48%20C36%2C52%2026%2C48%2022%2C40%20C30%2C36%2040%2C40%2046%2C44%20C44%2C36%2040%2C26%2042%2C18%20C46%2C24%2050%2C35%2050%2C45%20C50%2C35%2054%2C24%2058%2C18%20C60%2C26%2056%2C36%2054%2C44%20C60%2C40%2070%2C36%2078%2C40%20C74%2C48%2064%2C52%2054%2C48%20L52%2C56%20C60%2C54%2070%2C56%2076%2C62%20C70%2C68%2060%2C70%2052%2C65%20L50%2C85Z%22/%3E%3Cline%20x1%3D%2250%22%20y1%3D%2285%22%20x2%3D%2250%22%20y2%3D%2295%22%20stroke%3D%22%23e8904f%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ═══════════════════════════════════════════════════════════
   TIER 14: SEND BUTTON — SQUARE + LIGHTER GREY
   ═══════════════════════════════════════════════════════════ */

button[aria-label="Send message"],
button[aria-label="Send Message"],
button[data-testid="send-button"] {
  border-radius: 4px !important;
  background-color: #5a6474 !important;
}

button[aria-label="Send message"]:hover,
button[aria-label="Send Message"]:hover,
button[data-testid="send-button"]:hover {
  background-color: #e8904f !important;
}