/* localagi-deck — theme matched to Lion's palette (navy + electric cyan) */
:root {
  --black: #0a0e1a;            /* deep navy */
  --white: #eef2fb;
  --muted: #8b95ad;
  --accent: #22d3ee;           /* electric cyan */
  --accent-dim: rgba(34,211,238,.14);
  --warm: #d4a373;
  --surface: #101728;
  --surface-elevated: #16203a;
  --border: rgba(139,149,173,.22);
  --radius-pill: 999px;
  --radius-soft: 12px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--black); color: var(--white); font-family: var(--font); overflow: hidden; }

.atmosphere { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(34,211,238,.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 105% 108%, rgba(212,163,115,.06), transparent 50%);
}

.shell {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(360px, 44%) 0 1fr; height: 100vh; gap: 0;
  overflow: hidden;
}
.shell > .narrator-head {
  grid-column: 1 / -1; grid-row: 1;
}
.narrator-panel { grid-column: 1; grid-row: 1; }
.split-glow { grid-column: 2; grid-row: 1; }
.slide-panel { grid-column: 3; grid-row: 1; }
.split-glow {
  position: relative; z-index: 8; width: 0; pointer-events: none;
  --lamp-y: 0.5;
}
.split-glow::before {
  content: ""; position: absolute; top: 8%; bottom: 8%; left: -1px;
  width: 2px; border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34,211,238,.16) 14%,
    rgba(34,211,238,.16) 86%,
    transparent 100%
  );
}
.split-glow-lamp {
  position: absolute; top: calc(8% + var(--lamp-y) * 48%); left: -2px;
  width: 4px; height: 36%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34,211,238,.39) 16%,
    rgba(34,211,238,.85) 46%,
    rgba(236,254,255,.9) 50%,
    rgba(34,211,238,.85) 54%,
    rgba(34,211,238,.39) 84%,
    transparent 100%
  );
  box-shadow:
    0 0 6px rgba(236,254,255,.55),
    0 0 16px rgba(34,211,238,.56),
    0 0 36px rgba(34,211,238,.27);
}
.split-glow-lamp::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: min(280px, 26vw); height: min(50vh, 460px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scaleX(1);
  transform-origin: left center;
  background: radial-gradient(
    ellipse 90% 70% at 0% 50%,
    rgba(34,211,238,.32) 0%,
    rgba(34,211,238,.15) 34%,
    rgba(34,211,238,.05) 56%,
    transparent 76%
  );
  transition: opacity .75s cubic-bezier(.22,.8,.32,1),
              transform .75s cubic-bezier(.22,.8,.32,1);
}
.shell.attn-slide .split-glow-lamp::after {
  opacity: 1; transform: translateY(-50%) scaleX(1);
}
.shell.attn-narrator .split-glow-lamp::after {
  opacity: 1; transform: translateY(-50%) scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .split-glow-lamp::after { transition: none; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .shell > .narrator-head {
    grid-column: 1; grid-row: 1;
    position: relative; top: auto; left: auto; transform: none;
    padding: 10px 20px 6px;
  }
  .narrator-panel { grid-column: 1; grid-row: 2; padding: 8px 20px 20px; }
  .split-glow { display: none; }
  .slide-cluster { display: none; }
  .lio-gaze--stage { display: none; }
  .slide-panel {
    grid-column: 1; grid-row: 3;
    display: flex; justify-content: flex-end; align-items: center;
    padding: 4px 20px 20px; background: transparent;
  }
  .slide-continue { position: static; }
  .shell.is-factory .slide-cluster { display: block; width: calc(100% - 8px); }
  .shell.is-factory .slide-panel {
    justify-content: center; padding: 8px 16px 20px; background: var(--black);
  }
  .shell.is-factory .slide-window { height: min(42vh, 360px); }
}

/* boot/start hero — fullscreen, front-office shell pattern */
.shell-hero {
  position: fixed; inset: 0; z-index: 50;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center; align-items: center;
  gap: 22px; width: 100%; border: 0; cursor: pointer;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(34,211,238,.12), transparent 60%),
    var(--black);
  color: var(--white); font-family: var(--font);
  transition: opacity .45s ease, visibility .45s ease;
}
body.shell-open .shell-hero { opacity: 0; visibility: hidden; pointer-events: none; }
.lio-gaze {
  --look-x: 0;
  --look-y: 0;
  --look-m: 0;
  --tilt-y: 12deg;
  --tilt-x: 9deg;
  position: relative;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  perspective: 640px;
  perspective-origin: calc(50% + var(--look-x) * 36%) calc(42% + var(--look-y) * 28%);
  isolation: isolate;
}
.lio-gaze--hero {
  width: clamp(150px, 18vw, 220px); height: clamp(150px, 18vw, 220px);
  box-shadow: 0 0 60px rgba(34,211,238,.45);
  animation: hero-breathe 4s ease-in-out infinite;
  align-self: end;
}
.lio-gaze--stage {
  position: relative; z-index: 5;
  width: clamp(220px, 28vw, 340px); height: clamp(220px, 28vw, 340px);
  margin-bottom: -72px;
  box-shadow: 0 0 28px rgba(34,211,238,.1);
  animation: none;
}
.lio-gaze-turn {
  display: block; width: 100%; height: 100%; position: relative;
  border-radius: 50%; overflow: hidden;
  transform-origin: 50% 46%;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--look-x) * var(--tilt-y)))
    rotateX(calc(var(--look-y) * -1 * var(--tilt-x)))
    translateZ(16px);
  will-change: transform;
  box-shadow:
    calc(var(--look-x) * -18px) calc(var(--look-y) * 14px) 22px rgba(4, 10, 22, .42),
    0 0 0 2px var(--accent);
}
.lio-gaze--stage .lio-gaze-turn {
  box-shadow:
    calc(var(--look-x) * -18px) calc(var(--look-y) * 14px) 22px rgba(4, 10, 22, .42),
    0 0 0 1.5px rgba(34,211,238,.21);
}
.lio-gaze-turn::before,
.lio-gaze-turn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity .7s cubic-bezier(.22,.8,.32,1);
}
.lio-gaze-turn::before {
  inset: 0; z-index: 6;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(4, 8, 18, .62) 0px,
      rgba(4, 8, 18, .62) 2px,
      rgba(34, 211, 238, .05) 2px,
      transparent 5px
    ),
    radial-gradient(circle at 50% 40%, transparent 48%, rgba(4, 8, 18, .55) 100%);
  mix-blend-mode: multiply;
  opacity: .72;
  animation: crt-flicker 5.6s infinite;
}
.lio-gaze-turn::after {
  left: -8%; right: -8%; top: -38%; height: 38%; z-index: 7;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(224, 242, 254, .16) 48%,
    rgba(34, 211, 238, .08) 52%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: crt-roll 6.4s linear infinite;
}
.lio-gaze-base {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; pointer-events: none;
  animation: crt-tube 7.4s infinite;
  transition: filter .7s ease;
}
.shell.attn-narrator .lio-gaze--stage .lio-gaze-turn::before,
.shell.attn-narrator .lio-gaze--stage .lio-gaze-turn::after {
  opacity: 0;
  animation: none;
}
.shell.attn-narrator .lio-gaze--stage .lio-gaze-base {
  animation: none;
  filter: none;
}
.lio-gaze-shade {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(
      120% 95% at calc(50% + var(--look-x) * 38%) calc(32% + var(--look-y) * 28%),
      rgba(255,255,255,.2) 0%,
      rgba(34,211,238,.07) 26%,
      transparent 55%
    ),
    radial-gradient(
      95% 85% at calc(50% - var(--look-x) * 42%) calc(72% - var(--look-y) * 24%),
      rgba(4,8,18,.5),
      transparent 64%
    );
  mix-blend-mode: soft-light;
  opacity: var(--look-m);
}
.lio-gaze-eye {
  position: absolute; overflow: hidden; pointer-events: none;
  left: calc(var(--ex) * 100%); top: calc(var(--ey) * 100%);
  width: calc(var(--ew) * 100%); height: calc(var(--eh) * 100%);
  transform: translate(-50%, -50%);
  transform-origin: 50% 18%;
  border-radius: 50%;
  transition: transform .28s cubic-bezier(.22, .8, .32, 1);
  -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 48%, #000 52%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 64% at 50% 48%, #000 52%, transparent 78%);
}
.lio-gaze-eye--l { --ex: .472; --ey: .361; --ew: .128; --eh: .108; }
.lio-gaze-eye--r { --ex: .628; --ey: .345; --ew: .148; --eh: .118; }
.lio-gaze-eye img {
  position: absolute; max-width: none; object-fit: cover;
  width: calc(100% / var(--ew)); height: calc(100% / var(--eh));
  left: calc(50% - (var(--ex) / var(--ew)) * 100%);
  top: calc(50% - (var(--ey) / var(--eh)) * 100%);
  transform: translate(calc(var(--look-x) * 1.1%), calc(var(--look-y) * 0.85%));
}
.lio-gaze-smile {
  position: absolute; overflow: hidden; pointer-events: none;
  left: calc(var(--sx) * 100%); top: calc(var(--sy) * 100%);
  width: calc(var(--sw) * 100%); height: calc(var(--sh) * 100%);
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse 90% 82% at 50% 46%, #000 64%, transparent 92%);
  mask-image: radial-gradient(ellipse 90% 82% at 50% 46%, #000 64%, transparent 92%);
}
.lio-gaze-smile--l { --sx: .518; --sy: .534; --sw: .155; --sh: .135; }
.lio-gaze-smile--r { --sx: .632; --sy: .534; --sw: .155; --sh: .135; }
.lio-gaze-smile-inner {
  display: block; width: 100%; height: 100%; position: relative;
  transition: transform .28s cubic-bezier(.22, .8, .32, 1);
}
.lio-gaze-smile--l .lio-gaze-smile-inner { transform-origin: 100% 42%; }
.lio-gaze-smile--r .lio-gaze-smile-inner { transform-origin: 0% 42%; }
.lio-gaze-smile img {
  position: absolute; max-width: none; object-fit: cover;
  width: calc(100% / var(--sw)); height: calc(100% / var(--sh));
  left: calc(50% - (var(--sx) / var(--sw)) * 100%);
  top: calc(50% - (var(--sy) / var(--sh)) * 100%);
}
.lio-gaze.is-smiling .lio-gaze-smile--l .lio-gaze-smile-inner {
  transform: rotate(-11deg) translateY(-8%);
}
.lio-gaze.is-smiling .lio-gaze-smile--r .lio-gaze-smile-inner {
  transform: rotate(11deg) translateY(-8%);
}
.lio-gaze.is-smiling .lio-gaze-eye {
  transform: translate(-50%, -50%) scaleY(.78);
}
@keyframes hero-breathe { 0%,100% { box-shadow: 0 0 40px rgba(34,211,238,.3);} 50% { box-shadow: 0 0 70px rgba(34,211,238,.55);} }
@keyframes crt-flicker {
  0%, 100% { opacity: .58; }
  6% { opacity: .3; }
  7% { opacity: .62; }
  8% { opacity: .44; }
  10% { opacity: .6; }
  39% { opacity: .55; }
  40% { opacity: .2; }
  42% { opacity: .6; }
  63% { opacity: .5; }
  64% { opacity: .34; }
  66% { opacity: .58; }
  84% { opacity: .52; }
  85% { opacity: .26; }
  87% { opacity: .6; }
}
@keyframes crt-roll {
  0% { transform: translateY(0); }
  100% { transform: translateY(420%); }
}
@keyframes crt-tube {
  0%, 100% { filter: contrast(1.05) brightness(1); }
  8% { filter: contrast(1.08) brightness(1.05); }
  9% { filter: contrast(.97) brightness(.9); }
  11% { filter: contrast(1.05) brightness(1); }
  47% { filter: contrast(1.04) brightness(1); }
  48% { filter: contrast(1.1) brightness(1.07); }
  49% { filter: contrast(.95) brightness(.86); }
  51% { filter: contrast(1.05) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lio-gaze--hero,
  .lio-gaze--stage { animation: none; }
  .lio-gaze-turn { transform: none; }
  .lio-gaze-turn::before { animation: none; opacity: .32; }
  .lio-gaze-turn::after { animation: none; display: none; }
  .lio-gaze-base { animation: none; filter: none; }
  .lio-gaze-eye img { transform: none; }
  .lio-gaze.is-smiling .lio-gaze-smile-inner { transform: none; }
  .lio-gaze.is-smiling .lio-gaze-eye { transform: translate(-50%, -50%); }
  .lio-gaze-shade { opacity: 0; }
}
.hero-wordmark { position: relative; font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: .06em;
  text-align: center; line-height: 1.15; text-transform: none; }
.hero-wordmark small { display: block; position: absolute; left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%); white-space: nowrap;
  font-weight: 400; font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: normal; color: var(--muted); margin-top: 0; }
.hero-cta { background: var(--accent); color: #04121a; font-weight: 700; font-size: 15px;
  border-radius: 999px; padding: 15px 38px; box-shadow: 0 0 30px rgba(34,211,238,.45);
  transition: transform .12s ease, box-shadow .25s ease; align-self: start; margin-top: 26px; }
.shell-hero:hover .hero-cta { transform: scale(1.05); box-shadow: 0 0 46px rgba(34,211,238,.65); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* remove obsolete prstory rules if present */

/* narrator — same navy as the slide pane; no top wash */
.narrator-panel { display: flex; flex-direction: column; padding: 72px 28px 28px; min-height: 0;
  background: var(--black); }
.narrator-panel .chat .msg,
.narrator-panel .chips,
.narrator-panel .dropzone,
.narrator-panel .gate {
  transition: opacity .9s cubic-bezier(.22,.8,.32,1), filter .9s ease;
}
.narrator-panel:not(.is-lit) .chat .msg:not(.typing),
.narrator-panel:not(.is-lit) .chips,
.narrator-panel:not(.is-lit) .dropzone,
.narrator-panel:not(.is-lit) .gate {
  opacity: .82; filter: none;
}
.narrator-panel.is-lit .chat .msg,
.narrator-panel.is-lit .chips,
.narrator-panel.is-lit .dropzone,
.narrator-panel.is-lit .gate {
  opacity: 1; filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .narrator-panel .chat .msg,
  .narrator-panel .chips,
  .narrator-panel .dropzone,
  .narrator-panel .gate { transition: none; }
  .msg.narrator { transition: none; }
}

.narrator-head {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 12; margin: 0; text-align: center; pointer-events: none;
}
.lio-head { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.venture-title { font-size: 18px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.lio-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.chat {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  min-height: 0; scrollbar-width: none; -ms-overflow-style: none;
}
.chat::-webkit-scrollbar { width: 0; height: 0; }
.msg { max-width: 92%; padding: 12px 16px; border-radius: var(--radius-soft); line-height: 1.55; font-size: 14.5px; }
.msg.narrator {
  align-self: flex-start; background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid rgba(34,211,238,.38);
  transition: border-color .45s ease, box-shadow .45s ease;
}
.msg.narrator.is-latest {
  border-left-color: var(--accent);
  box-shadow:
    -2px 0 10px rgba(34,211,238,.5),
    0 0 18px rgba(34,211,238,.16);
}
.msg.user { align-self: flex-end; background: var(--surface-elevated); border-left: 3px solid var(--accent); }
.msg .cite { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.msg .cite a { color: var(--accent); text-decoration: none; }
.msg .label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

.msg.typing { display: flex; gap: 5px; padding: 14px 16px; }
.msg.typing .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: lio-dot 1.2s infinite ease-in-out; }
.msg.typing .dot:nth-child(2) { animation-delay: .2s; }
.msg.typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes lio-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.qa-form { display: flex; align-items: center; gap: 8px; margin-top: 16px; position: relative; z-index: 9; }
.qa-form input { flex: 1 1 auto; min-width: 0; background: var(--surface); border: 1px solid var(--border); color: var(--white);
  border-radius: var(--radius-pill); padding: 11px 18px; font-family: var(--font); font-size: 14px; outline: none; }
.qa-form.has-chips input { flex: 1 1 0; min-width: 6.5rem; }
.qa-form.has-chips #btn-continue-mini { display: none; }
.qa-form input:focus { border-color: var(--accent); box-shadow: 0 0 12px rgba(34,211,238,.25); }

.pill { border: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 13.5px;
  border-radius: var(--radius-pill); padding: 11px 22px; transition: transform .08s ease, box-shadow .2s ease; }
.pill:active { transform: scale(.97); }
.pill-primary { background: var(--accent); color: #04121a; box-shadow: 0 0 18px rgba(34,211,238,.35); }
.pill-primary:hover { box-shadow: 0 0 28px rgba(34,211,238,.5); }
.pill-primary:disabled { opacity: .4; cursor: default; box-shadow: none; }
.qa-form input:disabled { opacity: .45; cursor: default; }

.narrator-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

.gate { margin-top: 14px; padding: 16px; background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-soft); font-size: 13.5px; }
.gate-form { flex-wrap: wrap; }
.gate-form input[type=text] { flex: 1 1 40%; }
.gate-form input[type=email] { flex: 1 1 40%; }

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* slides — Lion sits in the middle of the pane so the gaze has room to turn */
.slide-panel {
  position: relative; background: #0a0e1a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0; padding: 20px 32px 76px; overflow: visible;
}
.slide-continue {
  position: absolute; right: 28px; bottom: 22px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill-chevron {
  font-size: 20px; font-weight: 600; line-height: 1;
}
.slide-cluster {
  position: relative;
  width: min(780px, calc(100% - 16px));
  overflow: visible;
}
.slide-window {
  position: relative;
  width: 100%;
  height: min(58vh, 540px);
  flex: none;
  border-radius: 18px;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 14px rgba(34,211,238,.05);
  animation: card-glow 4s ease-in-out infinite;
}
.slide-window::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: 0;
  background: var(--accent);
  opacity: .16;
}
.slide-window.is-busy {
  animation: none;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 16px rgba(34,211,238,.08);
}
.slide-window.is-busy::before {
  opacity: 1;
  background: conic-gradient(
    from var(--spin),
    rgba(34,211,238,.22) 0deg,
    rgba(34,211,238,.08) 70deg,
    transparent 110deg,
    transparent 240deg,
    rgba(34,211,238,.45) 300deg,
    #ecfeff 328deg,
    var(--accent) 348deg,
    rgba(34,211,238,.22) 360deg
  );
  animation: neon-spin 3.2s linear infinite;
}
.slide-window-inner {
  position: relative; z-index: 1; width: 100%; height: 100%;
  border-radius: 17px; overflow: hidden;
  background: #070b14;
  box-shadow: 0 0 0 1px rgba(34,211,238,.1);
}
@keyframes neon-spin { to { --spin: 360deg; } }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 14px rgba(34,211,238,.04); }
  50% { box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 22px rgba(34,211,238,.08); }
}
#slide-frame { width: 100%; height: 100%; border: none; transition: opacity .35s ease; }
#slide-frame.is-fading { opacity: .25; }
.slide-panel.is-factory #slide-frame { visibility: hidden; }
.slide-panel.is-factory .slide-continue,
.shell.is-factory #btn-continue-mini { display: none; }
.factory-slide {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 96px 40px 28px;
  background: #070b14; color: var(--white);
  opacity: 1; transition: opacity .35s ease;
}
.factory-slide[hidden] { display: none; }
.factory-slide.is-fading { opacity: .25; }
.factory-kicker {
  color: var(--accent); font-size: 13px; letter-spacing: .24em;
  text-transform: uppercase; margin-bottom: 22px;
}
.factory-title {
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.14; font-weight: 700;
  max-width: 16ch; margin-bottom: 18px;
}
.factory-lead {
  color: #c9d2e2; font-size: clamp(15px, 1.4vw, 19px);
  max-width: 42ch; line-height: 1.65;
}
.factory-cta {
  align-self: flex-start; margin-top: 28px; text-decoration: none;
  display: none; align-items: center;
}
.factory-slide.is-ready .factory-cta { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .slide-window, .slide-window.is-busy::before { animation: none; }
  .slide-window::before { background: var(--accent); opacity: .16; }
  .factory-slide { transition: none; }
}

.pill-secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.pill-secondary:hover { background: var(--accent-dim); }
.pill-secondary:disabled { opacity: .4; cursor: default; }
.pill-icon {
  flex: none; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--accent);
  background: transparent; color: var(--accent);
  font-family: var(--font); font-size: 20px; font-weight: 600; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease;
}
.pill-icon:active { transform: scale(.97); }
.pill-icon:hover { background: var(--accent-dim); }
.pill-icon:disabled { opacity: .4; cursor: default; }
.pill-icon svg { width: 18px; height: 18px; display: block; }
.pill-icon.pill-primary svg { width: 17px; height: 17px; margin-left: 1px; margin-bottom: 1px; }
.pill-icon.pill-primary {
  background: var(--accent); color: #04121a; border-color: var(--accent);
  box-shadow: 0 0 18px rgba(34,211,238,.35);
}
.pill-icon.pill-primary:hover { background: var(--accent); box-shadow: 0 0 28px rgba(34,211,238,.5); }
.pill-icon.pill-primary:disabled { box-shadow: none; }
.pill-icon.pill-primary svg { margin-left: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips[hidden] { display: none !important; }
.chip { background: var(--surface-elevated); color: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 16px; font-family: var(--font); font-size: 13px;
  cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.qa-form .chips {
  flex: 0 0 auto; flex-wrap: nowrap; margin: 0; gap: 8px;
  opacity: 1; filter: none;
}
.qa-form .chip {
  white-space: nowrap;
  background: var(--black);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 0 14px rgba(34,211,238,.3);
}
.qa-form .chip:hover { background: var(--accent-dim); color: var(--accent); }

.dropzone { margin-top: 12px; padding: 18px; border: 1.5px dashed var(--border);
  border-radius: var(--radius-soft); color: var(--muted); font-size: 13px; text-align: center;
  cursor: pointer; }
.dropzone.is-hot { border-color: var(--accent); color: var(--accent); }

/* cleaner chat: user = compact right chip; answer = labeled card */
.msg.user { max-width: 80%; padding: 10px 15px; font-size: 14px; }
.msg .cite { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.msg .cite a { border-bottom: 1px dotted var(--accent); cursor: pointer; }

/* start-click loading state */
.shell-hero.is-loading .hero-cta { animation: cta-pulse .7s ease-in-out infinite; }
@keyframes cta-pulse { 0%,100% { opacity: .55; transform: scale(.98);} 50% { opacity: 1; transform: scale(1.02);} }
.shell-hero.is-loading .lio-gaze--hero { animation-duration: 1.2s; }
.shell-hero:disabled { cursor: progress; }