/* ============================================================
   Ask the Machine — site-wide grounded AI console (Cmd+J)
   System AI-X · Apple Liquid Glass console
   Self-contained. Honors light/dark + prefers-reduced-motion.
   Namespaced under .atm- to avoid any collision with the page.
   ============================================================ */

:root {
  --atm-z: 95;                       /* above cmdk(90), below nothing critical */
  --atm-radius: var(--radius, 18px);
  --atm-ease: var(--ease-out, cubic-bezier(.16,1,.3,1));
  --atm-accent: var(--accent, #7c5cff);
  --atm-accent-2: var(--accent-2, #38bdf8);
  --atm-glow: var(--accent-glow, rgba(124,92,255,.55));
}

/* ---- Launch button (lives in hero cta-row) ---------------- */
.atm-launch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 18px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.14));
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--surface-2, rgba(255,255,255,.025));
  color: var(--fg, #f5f5f7);
  font: 500 14.5px/1 var(--sans, system-ui);
  letter-spacing: -.01em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: border-color .25s var(--atm-ease), background .25s var(--atm-ease),
              transform .25s var(--atm-ease), box-shadow .25s var(--atm-ease);
}
.atm-launch:hover {
  border-color: var(--atm-accent);
  background: var(--accent-soft, rgba(124,92,255,.18));
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -24px var(--atm-glow);
}
.atm-launch:focus-visible { outline: 2px solid var(--atm-accent); outline-offset: 3px; }
.atm-launch .atm-launch-spark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--atm-accent-2);
  box-shadow: 0 0 10px var(--accent-glow-2, rgba(56,189,248,.45));
  animation: atm-spark 2.6s var(--ease-in-out, ease) infinite;
}
.atm-launch .atm-kbd {
  font-family: var(--mono, monospace); font-size: 11px;
  padding: 3px 7px; border-radius: 7px;
  border: 1px solid var(--hairline, rgba(255,255,255,.08));
  color: var(--fg-dim, rgba(245,245,247,.62));
  background: rgba(0,0,0,.18);
}
html[data-theme="light"] .atm-launch .atm-kbd { background: rgba(0,0,0,.04); }
@keyframes atm-spark { 0%,100%{opacity:.55;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} }

/* ---- Overlay / scrim -------------------------------------- */
.atm-overlay {
  position: fixed; inset: 0; z-index: var(--atm-z);
  display: none; place-items: start center;
  padding: clamp(48px, 11vh, 120px) 16px 16px;
  background: rgba(8,8,11,.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}
html[data-theme="light"] .atm-overlay { background: rgba(251,251,253,.62); }
.atm-overlay.is-open { display: grid; animation: atm-fade .28s var(--atm-ease); }
@keyframes atm-fade { from { opacity: 0 } to { opacity: 1 } }

/* ---- Console panel (the glass sheet) ---------------------- */
.atm-panel {
  width: min(680px, 100%);
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  position: relative;
  border-radius: var(--atm-radius);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.16));
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)),
    color-mix(in oklab, var(--bg-elev, #111114) 86%, transparent);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,        /* specular top edge */
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 50px 120px -48px var(--atm-glow),
    0 24px 60px -40px rgba(0,0,0,.7);
  overflow: hidden;
}
.atm-overlay.is-open .atm-panel { animation: atm-rise .42s var(--atm-ease); }
@keyframes atm-rise { from { opacity: 0; transform: translateY(-14px) scale(.985) } to { opacity: 1; transform: none } }
html[data-theme="light"] .atm-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)),
    color-mix(in oklab, var(--bg-elev, #fff) 90%, transparent);
}

/* specular hairline sweep along the top */
.atm-panel::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: .7; pointer-events: none;
}

/* ---- Header ----------------------------------------------- */
.atm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--hairline, rgba(255,255,255,.08));
}
.atm-head-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, var(--atm-accent), color-mix(in oklab, var(--atm-accent-2) 60%, var(--atm-accent)));
  box-shadow: 0 0 18px -2px var(--atm-glow);
}
.atm-head-mark svg { width: 16px; height: 16px; color: #fff; }
.atm-head-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.atm-head-title { font: 600 14.5px/1.1 var(--sans); letter-spacing: -.01em; color: var(--fg); }
.atm-head-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint, rgba(245,245,247,.4));
  display: inline-flex; align-items: center; gap: 7px;
}
.atm-conn-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-quiet, rgba(245,245,247,.22));
  transition: background .3s var(--atm-ease), box-shadow .3s var(--atm-ease);
}
.atm-conn-dot[data-state="ok"] { background: var(--atm-accent-2); box-shadow: 0 0 9px var(--accent-glow-2, rgba(56,189,248,.45)); }
.atm-conn-dot[data-state="bad"] { background: #ff6b6b; box-shadow: 0 0 9px rgba(255,107,107,.5); }
.atm-head .atm-esc {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--hairline, rgba(255,255,255,.08));
  color: var(--fg-dim); background: var(--surface-2, rgba(255,255,255,.025));
  cursor: pointer; transition: border-color .2s var(--atm-ease), color .2s var(--atm-ease);
}
.atm-head .atm-esc:hover { border-color: var(--atm-accent); color: var(--fg); }

/* ---- Transcript ------------------------------------------- */
.atm-body {
  flex: 1 1 auto; min-height: 96px; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.atm-body::-webkit-scrollbar { width: 8px; }
.atm-body::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 8px; }

/* empty state */
.atm-empty { color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
.atm-empty strong { color: var(--fg); font-weight: 600; }
.atm-empty .atm-empty-eyebrow {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--atm-accent-2);
}

/* message rows */
.atm-msg { display: flex; flex-direction: column; gap: 8px; animation: atm-msg-in .35s var(--atm-ease); }
@keyframes atm-msg-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.atm-msg-role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-faint);
}
.atm-msg.user .atm-msg-role { color: var(--atm-accent); }
.atm-msg.machine .atm-msg-role { color: var(--atm-accent-2); }
.atm-bubble {
  font-size: 15px; line-height: 1.6; color: var(--fg);
  white-space: pre-wrap; word-break: break-word;
}
.atm-msg.user .atm-bubble {
  align-self: flex-start;
  padding: 11px 15px; border-radius: 14px 14px 14px 4px;
  background: var(--accent-soft, rgba(124,92,255,.18));
  border: 1px solid color-mix(in oklab, var(--atm-accent) 30%, transparent);
  color: var(--fg);
}
.atm-msg.machine .atm-bubble { padding: 2px 0; }

/* streaming caret */
.atm-caret {
  display: inline-block; width: 8px; height: 1.05em;
  vertical-align: -2px; margin-left: 2px; border-radius: 2px;
  background: var(--atm-accent);
  box-shadow: 0 0 10px var(--atm-glow);
  animation: atm-blink 1s steps(2,start) infinite;
}
@keyframes atm-blink { 50% { opacity: 0 } }

/* thinking shimmer */
.atm-thinking {
  display: inline-block;
  background: linear-gradient(90deg, var(--fg-faint) 0%, var(--fg) 45%, var(--fg-faint) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: atm-shimmer 1.6s linear infinite;
  font-size: 14.5px;
}
@keyframes atm-shimmer { from { background-position: 140% 0 } to { background-position: -140% 0 } }

/* source chips */
.atm-sources {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px;
  animation: atm-msg-in .4s var(--atm-ease);
}
.atm-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  color: var(--fg-dim);
  border: 1px solid var(--hairline, rgba(255,255,255,.08));
  background: var(--surface-2, rgba(255,255,255,.025));
}
.atm-source::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--atm-accent-2); box-shadow: 0 0 7px var(--accent-glow-2, rgba(56,189,248,.45));
}
.atm-source.local::before { background: var(--atm-accent); box-shadow: 0 0 7px var(--atm-glow); }

/* error tint */
.atm-msg.machine.is-error .atm-bubble { color: #ff8585; }

/* ---- Suggested prompt pills ------------------------------- */
.atm-suggest {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 18px 12px;
}
.atm-pill {
  font-size: 12.5px; line-height: 1; color: var(--fg-dim);
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--hairline, rgba(255,255,255,.08));
  background: var(--surface-2, rgba(255,255,255,.025));
  cursor: pointer; white-space: nowrap;
  transition: border-color .2s var(--atm-ease), color .2s var(--atm-ease),
              background .2s var(--atm-ease), transform .15s var(--atm-ease);
}
.atm-pill:hover { border-color: var(--atm-accent); color: var(--fg); background: var(--accent-soft, rgba(124,92,255,.12)); transform: translateY(-1px); }
.atm-pill:focus-visible { outline: 2px solid var(--atm-accent); outline-offset: 2px; }

/* ---- Composer --------------------------------------------- */
.atm-composer {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border-top: 1px solid var(--hairline, rgba(255,255,255,.08));
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg-soft, #16161a) 50%, transparent));
}
.atm-input-wrap {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 13px;
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.14));
  background: var(--bg, #0a0a0c);
  transition: border-color .2s var(--atm-ease), box-shadow .2s var(--atm-ease);
}
html[data-theme="light"] .atm-input-wrap { background: #fff; }
.atm-input-wrap:focus-within { border-color: var(--atm-accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(124,92,255,.18)); }
.atm-input-wrap svg { width: 16px; height: 16px; color: var(--fg-faint); flex: none; }
.atm-input {
  flex: 1 1 auto; border: 0; background: transparent; outline: 0;
  font: 400 15px/1.4 var(--sans); color: var(--fg);
  caret-color: var(--atm-accent);
}
.atm-input::placeholder { color: var(--fg-faint); }
.atm-send {
  flex: none; height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid transparent;
  background: var(--atm-accent); color: #fff;
  font: 600 13.5px/1 var(--sans); letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 14px 30px -18px var(--atm-glow);
  transition: filter .2s var(--atm-ease), transform .15s var(--atm-ease), opacity .2s var(--atm-ease);
}
.atm-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.atm-send:disabled { opacity: .5; cursor: default; transform: none; }
.atm-send svg { width: 15px; height: 15px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .atm-overlay.is-open,
  .atm-overlay.is-open .atm-panel,
  .atm-msg, .atm-sources,
  .atm-launch .atm-launch-spark,
  .atm-caret, .atm-thinking { animation: none !important; }
  .atm-launch:hover, .atm-pill:hover, .atm-send:hover { transform: none; }
  .atm-caret { opacity: 1; background: var(--atm-accent-2); }
}

/* mobile */
@media (max-width: 560px) {
  .atm-overlay { padding-top: 8vh; align-items: stretch; }
  .atm-panel { max-height: 88vh; }
  .atm-suggest { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .atm-pill { flex: none; }
  .atm-launch { width: 100%; justify-content: center; }
}