/* ============================================================================
   D2 GUN LOCKER  -  07-ask.css : first-class Ask surface (52-assistant.js)
   ----------------------------------------------------------------------------
   Replaces the old floating orb/FAB. Two pieces:
   - .ask-strip-btn : slim pill injected into the top strip (.header-inner),
     sparkle + "Ask" + a quiet "/" kbd hint (icon-only under 768px).
   - .ask-panel     : right-docked panel under the strip on desktop (380px,
     hairline left edge, slides in with --dur-2); full-height sheet above the
     bottom bar on mobile. Holds the existing chat UI (.d2a-* inner classes,
     which 57-assistant-ai.js also renders into — names kept on purpose).
   Every inner rule is scoped under .ask-panel so it out-cascades the legacy
   flat .d2a-* skin in 02-refinements-3.css until that block is deleted.
   ============================================================================ */

/* ---- top strip trigger --------------------------------------------------- */
/* The AI is the site's signature feature — this trigger is meant to stand out:
   an accent-filled pill, not a quiet outline. */
.ask-strip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  padding: 6px 15px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.35);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ask-strip-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.ask-strip-btn:hover {
  background: color-mix(in srgb, var(--accent), #fff 10%);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
}
.ask-strip-btn:active { transform: translateY(0); }
.ask-strip-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent), #000 12%);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
}
.ask-strip-kbd {
  font-size: var(--fs-xs); font-weight: 600; text-transform: none;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  padding: 0 5px; line-height: 15px;
}

/* ---- right-docked panel (desktop) ---------------------------------------- */
.ask-panel {
  position: fixed;
  top: var(--strip-h); right: 0; bottom: 0; left: auto;
  z-index: 10010; /* over #siteDisclaimer (10000); under the terminal overlays */
  width: 380px; max-width: calc(100vw - var(--rail-w));
  height: auto; max-height: none;
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 0; border-left: 1px solid var(--hairline-strong);
  border-radius: 0;
  box-shadow: var(--shadow-raised);
  opacity: 1;
  transform: translateX(102%);
  pointer-events: none; visibility: hidden;
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  overflow: hidden;
}
.ask-panel.open {
  transform: none;
  pointer-events: auto; visibility: visible;
  transition: transform var(--dur-2) var(--ease);
}

/* head: name-led — title on one line, the model-aware status wraps below it */
.ask-panel .d2a-head {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: 1px;
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.ask-panel .d2a-title {
  order: 1; white-space: nowrap;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-primary);
}
.ask-panel .d2a-sub { order: 3; flex: 1 1 100%; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.5px; color: var(--text-secondary); }
.ask-panel .d2a-close {
  order: 2; margin-left: auto; align-self: center;
  background: none; border: 0; padding: 0 var(--sp-1);
  color: var(--text-dim); font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.ask-panel .d2a-close:hover { color: var(--text-primary); }

/* log + messages: hairlines, not boxes */
.ask-panel .d2a-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ask-panel .d2a-msg {
  max-width: 100%; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.5;
}
.ask-panel .d2a-user {
  align-self: flex-end; max-width: 88%;
  padding: 6px 12px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text-primary);
}
.ask-panel .d2a-bot { align-self: stretch; color: var(--text-secondary); }
.ask-panel .d2a-bot b { color: var(--text-primary); font-weight: 600; }
.ask-panel .d2a-list {
  list-style: none; margin: var(--sp-2) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.ask-panel .d2a-list li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: 6px 0;
  background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
.ask-panel .d2a-list li:last-child { border-bottom: 0; }
.ask-panel .d2a-li-name { color: var(--text-secondary); min-width: 0; }
.ask-panel .d2a-li-val { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.ask-panel .d2a-note { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim); }

/* suggestion chips */
.ask-panel .d2a-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-self: flex-start; max-width: 100%; }
.ask-panel .d2a-chip {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  text-align: left; cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ask-panel .d2a-chip:hover { color: var(--text-primary); background: var(--bg-card); }

/* input row */
.ask-panel .d2a-input {
  flex: 0 0 auto;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.ask-panel .d2a-input input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 400;
  outline: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ask-panel .d2a-input input:focus { border-color: var(--hairline-strong); background: var(--bg-card); }
.ask-panel .d2a-input input::placeholder { color: var(--text-dim); }
.ask-panel .d2a-send {
  flex: 0 0 auto; width: 40px;
  background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ask-panel .d2a-send:hover { color: var(--text-primary); background: var(--bg-card); }

/* voice-input mic in the composer (Web Speech; hidden when unsupported) */
.ask-panel .d2a-mic {
  flex: 0 0 auto; width: 40px;
  background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ask-panel .d2a-mic svg { width: 18px; height: 18px; }
.ask-panel .d2a-mic:hover { color: var(--text-primary); background: var(--bg-card); }
.ask-panel .d2a-mic.listening { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); animation: d2aMicPulse 1.1s ease-in-out infinite; }
@keyframes d2aMicPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* OTTO / Mega model toggle — docked just above the composer (Claude-style) */
.ask-panel .d2a-modelrow {
  flex: 0 0 auto;
  display: flex; gap: var(--sp-2); justify-content: center;
  padding: var(--sp-2) var(--sp-4) 0;
}
.ask-panel .d2a-modelbtn {
  padding: 4px 16px;
  background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ask-panel .d2a-modelbtn:hover { color: var(--text-primary); }
.ask-panel .d2a-modelbtn.active {
  background: rgba(var(--accent-rgb, 240, 199, 95), .16);
  border-color: rgba(var(--accent-rgb, 240, 199, 95), .5);
  color: var(--accent, #f0c75f);
}

/* The UI-scale pill floats fixed bottom-right (01-core-3.css) — the same
   corner the open panel's input row occupies. Sleep it while the panel is
   open (the old orb used to re-home it; now it just yields the corner). */
body:has(#d2aPanel.open) .ui-scale-controls { opacity: 0; pointer-events: none; }

/* ---- mobile (<=768px): icon-only trigger, full-height sheet -------------- */
@media (max-width: 768px) {
  .ask-strip-btn { padding: 5px 9px; margin-left: auto; }
  .ask-strip-btn svg { width: 16px; height: 16px; }
  .ask-strip-btn .ask-strip-label,
  .ask-strip-btn .ask-strip-kbd { display: none; }
  /* Full-screen app-like sheet on phones — covers the bottom nav rail so the
     page behind never peeks through when the chat scrolls. Opaque bg inherited
     from the base .ask-panel rule (var(--bg-primary)). */
  .ask-panel {
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none;
    border-left: 0;
    box-shadow: none;
  }
  .ask-panel .d2a-head { padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }
  /* header already stacks title over status (base rule); nudge status size down */
  .ask-panel .d2a-sub { font-size: 12px; }
  /* 16px input font stops iOS Safari's auto-zoom-on-focus (it zooms whenever a
     focused field is < 16px). Preserves the user's own pinch-zoom, unlike a
     viewport user-scalable=no lock. */
  .ask-panel .d2a-input input { font-size: 16px; }
  /* the on-screen keyboard lifts the whole full-screen sheet by --d2a-kb
     (set from visualViewport in 52-assistant.js) so the composer stays visible */
  .ask-panel.open { bottom: var(--d2a-kb, 0px); }
  /* hand the whole screen to the AI chat: hide the bottom nav rail while open */
  body:has(#d2aPanel.open) .rail { display: none !important; }
  /* comfortable safe-area gap under the composer */
  .ask-panel .d2a-input { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}