/*
 * banner.css: the hero one-line chat banner (js/banner.js renders the markup),
 * solo mode plus the landing-page overrides. All px are pre-zoom CSS px; the
 * 0.875 zoom at 1024–1600 comes from site.css.
 */

/* ---------- wrapper ----------
 * mx-auto, w calc(100vw - 40px), max 888, pt 32 / mb -28 below 768, pt 40 / mb -24 from 768.
 * It reserves the banner's height (156, or 126 at <=600) so the page never jumps when
 * the script mounts, and so the space stays empty without JS. */
.landing-hero-banner{
  box-sizing:content-box;     /* min-height is the banner alone; padding-top sits above it */
  width:calc(100vw - 40px);
  max-width:888px;
  min-height:156px;
  margin-inline:auto;
  margin-bottom:-28px;
  padding-top:32px;
}
@media (min-width:768px){
  .landing-hero-banner{padding-top:40px;margin-bottom:-24px}
}
@media (max-width:600px){
  .landing-hero-banner{min-height:126px}
}

/* ---------- banner ---------- */
.hl-banner{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;height:156px;background:transparent;
  font-family:var(--font-sans,"Geist",ui-sans-serif,system-ui,sans-serif);
  font-size:16px;line-height:24px;letter-spacing:0;color:var(--text-primary,#282828);
}
.hl-banner,.hl-banner *{box-sizing:border-box}
.hl-banner [hidden]{display:none!important}
.hl-lines{position:relative;width:min(568px,100vw - 40px);height:40px;margin:0 auto;perspective:420px}

/* Lines: a vertical "drum". Entering transition on the base rule,
   leaving transition on .is-past. */
.hl-line{
  position:absolute;top:0;left:0;right:0;height:36px;
  display:flex;justify-content:flex-start;align-items:center;gap:8px;white-space:nowrap;
  opacity:0;
  transition:opacity .38s cubic-bezier(.2,0,.2,1),transform .44s cubic-bezier(.2,0,0,1);
}
.hl-line.is-current{opacity:1;transform:translateY(2px)}
.hl-line.is-past{
  opacity:0;transform:translateY(-24px) rotateX(42deg);
  transition:opacity .3s cubic-bezier(.4,0,1,1),transform .36s cubic-bezier(.4,0,1,1);
}
.hl-line.is-future{opacity:0;transform:translateY(42px) rotateX(-42deg)}

.hl-face{display:block;flex:none;width:26px;height:26px;max-width:none;border-radius:999px;object-fit:cover}
.hl-name{color:var(--hl-ink,#1a1817);font-size:16px;font-weight:500;line-height:24px}
.hl-name.is-agent{color:var(--hl-agent,#2563eb)}
.hl-msg{
  position:relative;display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;
  background:var(--hl-bubble,#f5f5f4);border-radius:12px 12px 12px 8px;
  transition:background-color .24s cubic-bezier(.2,0,0,1);
}
.hl-text{color:var(--hl-ink,#1a1817);font-size:16px;line-height:24px}
.hl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Typing caret */
.hl-caret{display:inline-block;width:1.5px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--hl-ink,#1a1817);animation:.9s step-end infinite hl-caret-blink}
@keyframes hl-caret-blink{0%,to{opacity:1}50%{opacity:0}}

/* Agent line: thinking (no bubble, shimmering label), then the send wipe */
.hl-line.is-musing .hl-msg{background:transparent}
.hl-think{
  display:none;font-size:15px;line-height:24px;color:transparent;
  background:linear-gradient(90deg,#a8a29e 38%,#58524e 50%,#a8a29e 62%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:2.2s linear infinite hl-shimmer;
}
.hl-think.is-on{display:inline-block}
@keyframes hl-shimmer{0%{background-position:160% 0}to{background-position:-60% 0}}
.hl-line.is-sent .hl-text{animation:.34s cubic-bezier(.2,0,0,1) both hl-send}
@keyframes hl-send{
  0%{opacity:0;clip-path:inset(0 100% 0 -4px);transform:translate(-5px)}
  to{opacity:1;clip-path:inset(0 -4px);transform:none}
}

/* Live avatar: 26 x 26 slot holding a 44 x 44 SVG centred on it */
.hl-stagewrap{position:relative;flex:none;width:26px;height:26px}
.hl-stagewrap svg{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Meta row: avatar trail + 👍 chip */
.hl-meta{display:flex;justify-content:center;align-items:center;gap:10px;height:24px;margin-top:14px}
.hl-trail{display:flex;align-items:center}
.hl-tslot{width:0;overflow:visible;transition:width .42s cubic-bezier(.2,0,0,1)}
.hl-tslot.is-in{width:15px}
.hl-tslot img{
  display:block;box-sizing:border-box;width:20px;max-width:none;height:20px;
  border:2px solid #fff;border-radius:999px;object-fit:cover;
  opacity:0;transform:scale(.5);
  transition:opacity .32s cubic-bezier(.2,0,0,1),transform .38s cubic-bezier(.34,1.4,.64,1);
}
.hl-tslot.is-in img{opacity:.92;transform:scale(1)}
.hl-chip{
  display:inline-flex;flex:none;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:999px;background:var(--hl-bubble,#f5f5f4);color:var(--hl-chip-ink,#58524e);
  font-size:12px;line-height:16px;
  opacity:1;transform:scale(1);transform-origin:0;
  transition:opacity .3s cubic-bezier(.34,1.4,.64,1),transform .38s cubic-bezier(.34,1.4,.64,1);
}
.hl-chip.is-hidden{opacity:0;transform:scale(.55)}
.hl-chip b{font-weight:500;font-variant-numeric:tabular-nums;animation:.26s cubic-bezier(.34,1.4,.64,1) both hl-count-pop}
@keyframes hl-count-pop{0%{opacity:0;transform:translateY(5px) scale(.8)}to{opacity:1;transform:none}}
.hl-banner.is-out .hl-chip{transition:opacity .26s cubic-bezier(.4,0,1,1) 80ms,transform .26s cubic-bezier(.4,0,1,1) 80ms}

/* Paused (tab hidden or banner off-screen): hold every running keyframe where it is. */
.hl-banner.is-paused,.hl-banner.is-paused *{animation-play-state:paused!important}

/* ---------- <=600 px: stacked, centred two-row grid; no meta row ---------- */
@media (max-width:600px){
  .hl-banner{height:126px}
  .hl-lines{height:92px}
  .hl-line{
    display:grid;grid-template-columns:1fr auto auto 1fr;grid-template-rows:auto auto;
    justify-content:center;align-items:center;gap:11px 6px;height:auto;white-space:normal;
  }
  .hl-line.is-future{transform:translateY(98px) rotateX(-42deg)}
  .hl-line .hl-face,.hl-line .hl-stagewrap{grid-area:2/2;width:20px;height:20px;margin-top:0}
  .hl-line .hl-name{grid-area:2/3;font-size:14px;line-height:21px}
  .hl-line .hl-msg{grid-area:1/1/auto/-1;justify-self:center}
  .hl-text{font-size:15px;line-height:21px}
  .hl-line .hl-stagewrap svg{transform:translate(-50%,-50%) scale(.77)}
  .hl-meta{display:none}
}

/* ---------- reduced motion: banner.js shows the final state ---------- */
@media (prefers-reduced-motion:reduce){
  .hl-line,.hl-chip,.hl-tslot,.hl-tslot img{transition:none!important}
  .hl-line.is-sent .hl-text,.hl-caret,.hl-think,.hl-chip b{animation:none}
}