/* AQ Atlas v2 SPA shell — page-level CSS lifted from design ref AQ-Atlas v2.html */
*{box-sizing:border-box}
:root{
  --aq-control-h:32px;
  --aq-icon-btn-size:32px;
  --aq-nav-row-h:36px;
  --aq-small-action-size:30px;
  --aq-motion-fast:120ms;
  --aq-motion-med:160ms;
  --aq-ease-out:cubic-bezier(.16,1,.3,1);
  --aq-ease-standard:cubic-bezier(.2,.8,.2,1);
}
html,body{margin:0;padding:0;background:var(--aq-bg);color:var(--aq-text);font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased}
body{height:100vh;overflow:hidden;
  /* Smooth theme transition. transition only the few props that flip with
     data-theme — animating "all" would jank every hover state across the SPA. */
  transition:background-color var(--aq-motion-med) var(--aq-ease-standard), color var(--aq-motion-med) var(--aq-ease-standard)}
/* Keyboard focus ring. :focus-visible only fires for keyboard nav (and a few
   other "user is navigating without a pointer" heuristics), so mouse clicks
   stay clean while Tab gets a clear ring. Applied broadly because v2 widgets
   are mostly inline-styled <button>s without their own focus styles. */
:where(button,a,input,textarea,select,[role="button"],[tabindex]):focus{outline:none}
:where(button,a,input,textarea,select,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--aq-accent);
  outline-offset:2px;
  border-radius:6px;
}
button{font:inherit;color:inherit}
button:disabled{cursor:not-allowed}
button:active:not(:disabled){transform:translateY(1px)}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--aq-accent-subtle)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--aq-border);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:var(--aq-text-muted)}
.aq-hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.aq-hide-scrollbar::-webkit-scrollbar{display:none}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.up{color:var(--aq-success)} .down{color:var(--aq-danger)} .muted{color:var(--aq-text-muted)}
.small-caps{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--aq-text-muted);font-weight:500}
.hairline{border:1px solid var(--aq-border)}
body[data-density="compact"]{font-size:12px}
body[data-density="comfy"]{font-size:14px}
body[data-theme="light"]{
  --aq-bg:#f6f7f9;
  --aq-surface:#ffffff;
  --aq-surface-raised:#fbfcfd;
  --aq-surface-hover:#eef1f5;
  --aq-surface-active:#e3e7ee;
  --aq-border:#dee2ea;
  --aq-border-subtle:#eaedf2;
  --aq-text:#0f1117;
  --aq-text-secondary:#3f4651;
  --aq-text-muted:#6b7385;
  --aq-text-inverse:#ffffff;
  --aq-success:#0f8b5e;
  --aq-danger:#c54040;
  --aq-warning:#b8842c;
}
.ghost-btn{
  border:1px solid var(--aq-border);background:var(--aq-surface-raised);color:var(--aq-text-secondary);
  min-height:var(--aq-control-h);padding:5px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;
  transition:background-color var(--aq-motion-fast) var(--aq-ease-out), color var(--aq-motion-fast) var(--aq-ease-out), border-color var(--aq-motion-fast) var(--aq-ease-out), transform var(--aq-motion-fast) var(--aq-ease-out), opacity var(--aq-motion-fast) var(--aq-ease-out);
  white-space:nowrap;flex-shrink:0;
}
.ghost-btn:hover{background:var(--aq-surface-hover);color:var(--aq-text);border-color:var(--aq-text-muted)}
.ghost-btn:active:not(:disabled){transform:translateY(1px)}
.chip-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 6px 3px 7px;border-radius:6px;
  background:transparent;border:1px solid transparent;
  color:var(--aq-text-secondary);font-size:11px;
  font-family:var(--font-mono);cursor:pointer;
  transition:background-color var(--aq-motion-fast) var(--aq-ease-out), color var(--aq-motion-fast) var(--aq-ease-out), border-color var(--aq-motion-fast) var(--aq-ease-out), transform var(--aq-motion-fast) var(--aq-ease-out);
  white-space:nowrap;
}
.chip-btn:hover{background:var(--aq-surface-hover);color:var(--aq-text);border-color:var(--aq-border)}
.chip-btn:active{transform:translateY(1px)}
.chip-btn svg:last-child{opacity:.5}
.chip-icon{
  width:24px;height:24px;border-radius:6px;border:0;background:transparent;
  color:var(--aq-text-muted);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
  transition:background-color var(--aq-motion-fast) var(--aq-ease-out), color var(--aq-motion-fast) var(--aq-ease-out), transform var(--aq-motion-fast) var(--aq-ease-out);
}
.chip-icon:hover{background:var(--aq-surface-hover);color:var(--aq-text)}
.chip-icon:active{transform:translateY(1px)}
input[type=range]{accent-color:var(--aq-accent)}
/* page body — block-flow scrolling so cards keep natural height */
.page-scroll > * + *{margin-top:14px}
/* streaming animations */
@keyframes aqCaret { 0%{opacity:1} 50%{opacity:0} 100%{opacity:1} }
@keyframes aqPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
@keyframes aqDot   { 0%,80%,100%{opacity:.2;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)} }
@keyframes aqFadeIn { from{opacity:0} to{opacity:1} }
@keyframes aqToastIn { from{opacity:0;transform:translate(-50%,6px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes aqDrawerIn { from{opacity:.96;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
/* details/summary 的 chevron 旋转（思考过程折叠）*/
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
details summary .aq-chev{transition:transform var(--aq-motion-med) var(--aq-ease-out)}
details[open] summary .aq-chev{transform:rotate(90deg)}
/* Selector chips: hide native focus ring, add custom chevron */
.chip-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;border:1px solid transparent;cursor:pointer;
  padding:3px 22px 3px 8px;border-radius:6px;
  font:inherit;color:var(--aq-text-secondary);font-size:11px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%236b7385' stroke-width='1.6'><path d='m4 6 4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;
  outline:none;
}
.chip-select:hover{background-color:var(--aq-surface-hover);color:var(--aq-text);border-color:var(--aq-border)}
.chip-select{transition:background-color var(--aq-motion-fast) var(--aq-ease-out), color var(--aq-motion-fast) var(--aq-ease-out), border-color var(--aq-motion-fast) var(--aq-ease-out)}
.chip-select:focus{outline:none}
.chip-select:focus-visible{outline:2px solid var(--aq-accent);outline-offset:2px}
/* Compact variant — used inside composer where space is tight */
.chip-select--compact{
  padding:2px 18px 2px 6px;font-size:10.5px;border-radius:5px;
  background-position:right 4px center;
}
@media (max-width: 640px){
  :root{
    --aq-control-h:40px;
    --aq-icon-btn-size:40px;
    --aq-nav-row-h:44px;
    --aq-small-action-size:36px;
  }
  body{height:100dvh}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  button:active:not(:disabled){transform:none}
}