/* =====================================================================
   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;
}