/* DGxOne • /css/overrides.css (v1.8 — z-index map, click-through guards,
   AI-config contrast, chat only on Home, accent fallbacks)
   Order: header < bubble < chat panel < AI config < Identity
   Safe with main.js ≥ v30.0, ai-config.js ≥ v5.1, chat.css ≥ v3.2
*/

/* ───────── 0) Global safety ───────── */
[hidden],
[aria-hidden="true"],
[inert]{
  display: none !important;
  pointer-events: none !important;
}

/* Never let hidden overlays eat clicks */
#aiConfigMenu[hidden],
#nameWizard[hidden],
#emojiPicker[hidden]{ display:none !important; pointer-events:none !important; }

/* ───────── 1) Stacking map (top to bottom) ─────────
   2147483600  Identity widget (forced below)
   2147483400  AI Config / Name Wizard
   2147483200  Chat panel
   2147483100  Chat bubble
   2147483000  Site header
*/
.site-header{
  position: sticky;
  top: 0;
  z-index: 2147483000;
  isolation: isolate;               /* keep header’s stacking self-contained */
}

/* Chat bubble must always be clickable (on Home only; see section 4) */
.chat-bubble{
  position: fixed;
  z-index: 2147483100;
}

/* Chat panel above bubble */
.chat-panel{ z-index: 2147483200; }

/* AI configuration and Name Wizard above chat */
.ai-config,
#nameWizard.ai-config{ z-index: 2147483400; }

/* Netlify Identity must always win (iframe/modal) */
#netlify-identity-widget,
.netlify-identity-widget,
.netlify-identity-modal,
.netlify-identity-overlay,
.netlify-identity-ui,
.netlify-identity-iframe{ z-index: 2147483600 !important; }

/* ───────── 2) Media / transform safety ───────── */
/* Prevent videos, canvases, or transformed parents creating “click walls” */
.hero-wrap,
.video-wrap,
.video-wrap .media-img,
.carousel,
.slides{
  position: relative;
  z-index: auto;
  transform: none;                  /* avoid forming new stacking contexts */
  will-change: auto;
}
/* Keep actions clickable over the video */
.video-wrap .media-img{ pointer-events: none; }

/* Generic overlay class (future-proof) */
.overlay[hidden]{ display:none !important; pointer-events:none !important; }

/* ───────── 3) Merged AI-Config card styles (BYOK) ───────── */
.ai-config{
  position: fixed;
  right: 18px;
  top: 64px;
  width: min(520px, 94vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  background: color-mix(in oklab, var(--bg-2) 96%, black 4%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(150%);
  color: var(--text);               /* ensure all top-level text is readable */
}
@media (max-width: 640px){
  .ai-config{
    left: 12px;
    right: 12px;
    top: 56px;
    width:auto;
    max-height: calc(100vh - 72px);
  }
}

/* layout helpers */
.ai-config .row{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.ai-config .row.between{ justify-content:space-between; }
.ai-config .row.center{ justify-content:center; }
.ai-config .group{ margin:10px 0 8px; }
.ai-config .label{
  font-weight:700;
  margin-bottom:4px;
  color:var(--text);                /* “Status”, “Provider”, etc. stay readable */
}
.ai-config .hint{
  color: var(--muted);
  font-size:.92rem;
}

/* inputs/selects */
.ai-config .input,
.ai-config .select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  outline:none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}
.ai-config .input:focus,
.ai-config .select:focus{
  border-color: var(--accent, var(--neon));
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--accent, var(--neon)) 28%, transparent);
}

/* chips */
.ai-config .chip,
.ai-config .chip-prov,
.icon-chip{
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--card) 92%, black 8%);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  user-select:none;
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}
.ai-config .chip:hover,
.ai-config .chip-prov:hover{ transform:translateY(-1px); }
.ai-config .chip:active,
.ai-config .chip-prov:active{ transform:translateY(0); }

/* danger chip */
.ai-config .chip.danger{
  border-color:#6b1f1f;
  background:color-mix(in oklab, #a61e1e 15%, var(--card));
  color:#ffd7d7;
}
.ai-config .chip.danger:hover{
  border-color:#a61e1e;
  background:color-mix(in oklab, #a61e1e 30%, var(--card));
}

/* provider pills */
.ai-config .chip-prov{ position:relative; }

/* has-key outline */
.ai-config .chip-prov[data-has-key="true"]{
  border-color:color-mix(
    in oklab,
    var(--accent, var(--neon)) 60%,
    var(--line)
  );
  box-shadow:0 4px 16px
    color-mix(in oklab, var(--accent, var(--neon)) 22%, transparent);
}

/* ACTIVE provider pill (OpenAI / xAI / Gemini) */
.ai-config .chip-prov.active,
.ai-config .chip-prov[aria-pressed="true"]{
  background:linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent, var(--neon)) 70%, #ffffff),
    color-mix(in oklab, var(--accent-2, #6f8bff) 55%, #020617)
  );
  color:#020617;                    /* dark ink on bright pill */
  border-color:transparent;
  box-shadow:0 8px 22px
    color-mix(in oklab, var(--accent, var(--neon)) 40%, transparent);
  transform:scale(1.04);
}

/* subtle pulse when selected (JS toggles .pulse) */
@keyframes ai-prov-pulse{
  0%,100%{ transform:scale(1.04) }
  50%{ transform:scale(1.06) }
}
.ai-config .chip-prov.pulse{ animation:ai-prov-pulse 900ms ease-in-out 1; }

/* status dot spacing */
#aiConfigStatus.status-dot{ margin-left:.5rem; }

/* capabilities badges */
.ai-config .cap{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  font-size:.92rem;
  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .12s ease;
}
.ai-config .cap[disabled]{ opacity:.6; cursor:default; }
.ai-config .cap[aria-pressed="true"]{
  background:color-mix(in oklab, var(--accent, var(--neon)) 22%, var(--card));
  border-color:color-mix(
    in oklab,
    var(--accent, var(--neon)) 60%,
    var(--line)
  );
  box-shadow:0 2px 10px
    color-mix(in oklab, var(--accent, var(--neon)) 24%, transparent);
}

/* masked key hint uses monospace for alignment */
#keyHint{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.2px;
  opacity:.9;
  word-break:break-all;
}

/* Name Wizard shares the same card look but is left-aligned */
#nameWizard.ai-config{ left:18px; right:auto; }

/* Accessible focus ring */
.ai-config .chip:focus-visible,
.ai-config .chip-prov:focus-visible,
.ai-config .cap:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px
    color-mix(in oklab, var(--accent, var(--neon)) 28%, transparent);
  border-color:var(--accent, var(--neon));
}

/* ───────── 4) Chat only on Home route ─────────
   (body[data-route="home"] comes from each page’s <body> tag)
*/
body:not([data-route="home"]) .chat-bubble,
body:not([data-route="home"]) .chat-panel,
body:not([data-route="home"]) #chatOpen,
body:not([data-route="home"]) #emojiPicker,
body:not([data-route="home"]) #chatForm,
body:not([data-route="home"]) .chat-attachments{
  display:none !important;
  pointer-events:none !important;
}

/* ───────── 5) About/App card contrast tweaks ───────── */

/* Make hero content on About easier to read against the light gradient */
body[data-route="about"] .hero{
  color:var(--text);
}

/* Card readability on light gradient: slightly stronger shadow + spacing */
body[data-route="about"] .cards .card,
body[data-route="app"] .cards .card{
  background:var(--bg-2);
  color:var(--text);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

/* Add a little air so sections don’t visually “stack” on each other */
body[data-route="about"] .cards{ margin-top:18px; }