/* =====================================================================
   968.ai — ARC theme layer (2026-08-15)
   Loaded AFTER theme.css. Iron-Man / HUD direction approved by Saleh:
   true-black night + pure-white day surfaces, single accent switchable
   between blood red (default) and tree green via html[data-accent].
   The accent is a USER preference persisted in localStorage('g968-accent')
   — see the init script in index.html. Add a palette = one block here.
   ===================================================================== */

/* ---- 1 · accent tokens ------------------------------------------------ */
:root, html[data-accent="red"] {
  --arc: #e8253d;            /* blood red — bright, for dark surfaces   */
  --arc-deep: #b3122f;       /* blood red — deep, for light surfaces    */
  --arc-gold: #c79b3b;       /* credit costs only                       */
}
html[data-accent="green"] {
  --arc: #1fb45e;            /* tree green — bright                     */
  --arc-deep: #137a3e;       /* tree green — deep                       */
  --arc-gold: #c79b3b;
}
/* on light surfaces the deep shade IS the accent */
html.light, html:not(.dark) { --arc-ui: var(--arc-deep); --arc-glow: 26%; }
html.dark                   { --arc-ui: var(--arc);      --arc-glow: 55%; }

/* ---- 2 · night surfaces: ChatGPT gray -> ARC true black --------------- */
html.dark {
  --surface-primary: #070708;
  --surface-primary-alt: #0e0e10;
  --surface-primary-contrast: #0e0e10;
  --surface-secondary: #0e0e10;
  --surface-secondary-alt: #17171a;
  --surface-tertiary: #121214;
  --surface-chat: #070708;
  --surface-active-alt: #1a1a1d;
  --surface-hover: #141416;
  --border-light: #ffffff14;
  --border-medium: #ffffff1f;
  --border-heavy: #ffffff2e;
  --presentation: #070708;
  --background: 240 4% 3%;
}
html.dark body, html.dark #root { background: #070708; }
/* theme.css paints these #212121 !important — repaint true black */
html.dark .gpt-dark-gray, html.dark .dark\:gpt-dark-gray { background-color: #070708 !important; }

/* faint blueprint grid behind the empty-state hero (both modes) */
html.g968-empty.dark body {
  background:
    radial-gradient(480px 480px at 50% 30%, color-mix(in srgb, var(--arc) 7%, transparent), transparent 62%),
    linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 44px 100%,
    #070708;
}
html.g968-empty:not(.dark) body {
  background:
    radial-gradient(480px 480px at 50% 30%, color-mix(in srgb, var(--arc-deep) 5%, transparent), transparent 62%),
    linear-gradient(rgba(16,17,20,.035) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(16,17,20,.035) 1px, transparent 1px) 0 0 / 44px 100%,
    #ffffff;
}
/* let the presentation surface show the grid through on the empty state */
html.g968-empty [class*="presentation"], html.g968-empty main,
html.g968-empty.dark #root, html.g968-empty.dark .gpt-dark-gray {
  background: transparent !important;
}

/* ---- 3 · send button: black/white -> accent gradient + glow ----------- */
/* html.dark duplicates match theme.css's specificity so this file wins */
html.dark button[type="submit"]:not(:disabled),
html.dark button[data-testid="send-button"]:not(:disabled),
html.dark [aria-label*="Send"]:not(:disabled),
button[type="submit"]:not(:disabled),
button[data-testid="send-button"],
[aria-label="Send message"], [aria-label*="Send"] {
  background: linear-gradient(160deg, var(--arc), var(--arc-deep)) !important;
  color: #fff !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--arc) var(--arc-glow), transparent) !important;
}
button[type="submit"]:not(:disabled):hover,
button[data-testid="send-button"]:hover {
  background: linear-gradient(160deg, var(--arc), var(--arc-deep)) !important;
  filter: brightness(1.08);
}
:root, html.light, html:not(.dark) {
  --surface-submit: var(--arc-deep);
  --surface-submit-hover: var(--arc);
}
html.dark { --surface-submit: var(--arc); --surface-submit-hover: var(--arc-deep); }

/* ---- 4 · hero: rubric word + telemetry line --------------------------- */
.g968-hero-ar em, .g968-hero-ar i, .g968-hero-ar b {
  color: var(--arc-ui); font-style: normal;
}
.g968-hero-en {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10px !important; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--text-secondary);
  direction: ltr; /* stays Latin telemetry even in the RTL/Arabic UI */
}
/* Arabic headline: Plex Arabic, no tracking (Arabic hates letter-spacing) */
.g968-hero-h1.g968-hero-ar {
  font-family: 'IBM Plex Sans Arabic', var(--font-family, sans-serif);
  letter-spacing: 0; line-height: 1.55;
}

/* ---- 4b · empty-state reactor + headline (injected by index.html) ----- */
.g968-reactor { position: relative; width: 132px; height: 132px; margin: 0 auto 26px; }
.g968-reactor i { position: absolute; border-radius: 50%; display: block; }
.g968-reactor .r1 { inset: 0; border: 1px solid color-mix(in srgb, var(--arc-ui) 16%, transparent); }
.g968-reactor .r2 { inset: 10px; border: 1px dashed color-mix(in srgb, var(--arc-ui) 26%, transparent);
  animation: g968spin 90s linear infinite; }
.g968-reactor .r3 { inset: 24px; border: 1.5px solid color-mix(in srgb, var(--arc-ui) 38%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--arc-ui) calc(var(--arc-glow) * .45), transparent),
              inset 0 0 18px color-mix(in srgb, var(--arc-ui) 14%, transparent); }
.g968-reactor .tk { inset: 4px;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--arc-ui) 55%, transparent) 0deg .9deg, transparent .9deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%);
  animation: g968spin 150s linear infinite reverse; }
.g968-reactor .core { position: absolute; inset: 37px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--arc-ui) 20%, transparent),
    color-mix(in srgb, var(--arc-ui) 5%, transparent) 70%);
  box-shadow: 0 0 44px color-mix(in srgb, var(--arc-ui) calc(var(--arc-glow) * .6), transparent),
              inset 0 0 20px color-mix(in srgb, var(--arc-ui) 12%, transparent); }
.g968-reactor .core svg { stroke: var(--arc-ui);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--arc-ui) var(--arc-glow), transparent)); }
@keyframes g968spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .g968-reactor .r2, .g968-reactor .tk { animation: none; } }
.g968-hero-h1 { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.35;
  color: var(--text-primary); margin-bottom: 8px; }
.g968-hero-h1 em { color: var(--arc-ui); font-style: normal; }

/* ---- 5 · header model pill -> ARC capsule ----------------------------- */
button[data-testid="model-selector-button"] {
  border: 1px solid color-mix(in srgb, var(--arc-ui) 35%, transparent) !important;
  background: color-mix(in srgb, var(--arc-ui) 7%, transparent) !important;
  color: var(--arc-ui) !important;
  border-radius: 9999px !important;
  font-weight: 600;
}
button[data-testid="model-selector-button"] svg {
  color: var(--arc-ui) !important;
}

/* ---- 6 · pills: credits + upgrade take the accent --------------------- */
.g968-credits {
  border-color: color-mix(in srgb, var(--arc-ui) 40%, transparent) !important;
  color: var(--arc-ui) !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}
.g968-upgrade {
  border-color: color-mix(in srgb, var(--arc-ui) 40%, transparent) !important;
}
/* RTL mirrors the header: pill (and the palette dot, via index.html) flip left */
html[dir="rtl"] .g968-upgrade { right: auto !important; left: 12px !important; }
.g968-upgrade span:first-child { color: var(--arc-ui); }

/* ---- 7 · user turn: accent-tinted HUD bubble --------------------------
   verified DOM (0.8.7): .user-turn > ... > .text-message is the bubble */
.user-turn .text-message {
  background: color-mix(in srgb, var(--arc-ui) 8%, var(--surface-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--arc-ui) 22%, transparent) !important;
}
html.dark .user-turn .text-message {
  background: color-mix(in srgb, var(--arc) 10%, #0e0e10) !important;
}

/* ---- 7b · suggestion chips: icon takes the accent --------------------- */
.g968-chip { display: inline-flex; align-items: center; gap: 8px; }
.g968-chip svg { color: var(--arc-ui); flex-shrink: 0; }
.g968-chip:hover, html.dark .g968-chip:hover {
  border-color: color-mix(in srgb, var(--arc-ui) 45%, transparent);
}

/* ---- 8 · links + selection ------------------------------------------- */
.prose a, .markdown-body a { color: var(--arc-ui) !important; }
::selection { background: color-mix(in srgb, var(--arc-ui) 25%, transparent); }

/* ---- 9 · palette picker (injected by index.html) ---------------------- */
/* fixed top-right beside the Upgrade pill; index.html computes the right
   offset from the pill width and hides it while the nav drawer is open */
.g968-accent {
  position: fixed; top: 10px; right: 64px; z-index: 9997;
  width: 33px; height: 33px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-primary);
  border: 1px solid var(--border-medium);
  cursor: pointer; padding: 0;
  transition: border-color .12s ease, transform .12s ease;
}
.g968-accent:hover { border-color: var(--arc-ui); transform: scale(1.06); }
.g968-accent i {
  display: block; width: 14px; height: 14px; border-radius: 9999px;
  background: var(--arc-ui);
  box-shadow: 0 0 10px color-mix(in srgb, var(--arc-ui) var(--arc-glow), transparent);
}
.g968-accent i { width: 13px; height: 13px; }

/* ---- 10 · QA sweep fixes (2026-08-15) --------------------------------- */
/* theme.css's generic form rule paints EVERY input white with dark text
   (no dark variant) — that broke the sidebar/settings/model-search inputs
   and made typed composer text invisible at night. Neutralize it. */
nav input, aside input, [role="dialog"] input, .popover-ui input {
  background-color: transparent !important;
  border: none !important;
  min-height: 0;
}
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
  background-color: transparent;
  color: #f5f6f7;
  border-color: var(--border-medium);
}
html.dark form textarea { color: #f5f6f7 !important; }
form textarea { caret-color: var(--arc-ui); }

/* auth floating labels: gray boxes on true black — labels sit INSIDE the
   field (never cross the border), so they don't need a masking background */
html.dark form label { background: transparent !important; }

/* popover panels (model select, account menu) -> ARC panel */
html.dark .popover-ui {
  background: #0e0e10 !important;
  border: 1px solid color-mix(in srgb, var(--arc-ui) 22%, #ffffff1f) !important;
}
/* mobile model picker is a bg-presentation dialog — §2's empty-state rule
   makes [class*="presentation"] transparent; re-solidify the popover (this
   later rule wins the equal-specificity tie) */
html.g968-empty .animate-popover, .animate-popover,
html.g968-empty .animate-popover-left, .animate-popover-left {
  background: var(--surface-primary-alt, #ffffff) !important;
}
html.dark .animate-popover, html.g968-empty.dark .animate-popover,
html.dark .animate-popover-left, html.g968-empty.dark .animate-popover-left {
  background: #0e0e10 !important;
  border: 1px solid color-mix(in srgb, var(--arc-ui) 22%, #ffffff1f) !important;
}

/* ---- 11 · model picker: ARC sheet styling (dress-up script in index.html) - */
.animate-popover, .animate-popover-left { border-radius: 16px !important; }
/* provider submenu (animate-popover-left) casts a shadow so it reads as a
   layer above the main list instead of bleeding into it */
.animate-popover-left { box-shadow: 0 12px 40px -10px rgba(0,0,0,.45) !important; }
/* Auto = hero option: accent card with the knot mark (approved sheet mockup) */
.g968-opt-auto {
  margin: 2px 4px 8px !important;
  border: 1.5px solid color-mix(in srgb, var(--arc-ui) 55%, transparent) !important;
  background: color-mix(in srgb, var(--arc-ui) 9%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--arc-ui) 35%, transparent);
}
.g968-opt-auto > div { padding: 8px !important; align-items: center !important; }
.g968-opt-auto span.truncate { font-weight: 700; font-size: 14.5px; }
.g968-auto-k {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--arc-ui) 50%, transparent);
  background: color-mix(in srgb, var(--arc-ui) 8%, transparent);
  color: var(--arc-ui);
}
.g968-auto-k svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--arc-ui) 60%, transparent));
}
/* the row wrapper's w-full doesn't resolve to the option's width in this flex
   context (computed ~148px of 320) → descriptions wrap tight and badges hug
   the text. Grow wrapper + title column so badges right-align cleanly. */
.animate-popover [role="option"] > div,
.animate-popover-left [role="menuitem"] > div {
  flex: 1 1 auto !important;
}
.animate-popover [role="option"] > div > div,
.animate-popover-left [role="menuitem"] > div > div {
  flex: 1 1 auto !important;
}
/* the trailing pin button flexes to half the row (148px) and starves the
   text column — lock it to its natural ~24px */
.animate-popover [role="option"] > button,
.animate-popover-left [role="menuitem"] > button {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* gold per-message cost, right-aligned (mirrors in RTL via auto margin) */
.g968-cr {
  margin-left: auto; margin-right: 2px; align-self: center; flex-shrink: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .5px; white-space: nowrap;
  color: var(--arc-gold); direction: ltr;
}
html[dir="rtl"] .g968-cr { margin-left: 2px; margin-right: auto; }
/* RTL bidi: English labels/descriptions ("968 picks…", "Search models…")
   otherwise reorder around numbers/ellipses in an RTL context */
html[dir="rtl"] .animate-popover span.truncate,
html[dir="rtl"] .animate-popover span.break-words,
html[dir="rtl"] .animate-popover-left span.truncate,
html[dir="rtl"] .animate-popover-left span.break-words,
html[dir="rtl"] .animate-popover input {
  unicode-bidi: plaintext;
}
html[dir="rtl"] .animate-popover input::placeholder {
  unicode-bidi: plaintext;
}