/* ============================================================================
   Ask Angela — the hero conversation. Framed, foldable, anchored at the top of
   the page: Angela's three rolling statements arrive as sends, and a visitor
   can reply. Palette/type come from main.css tokens only.
   ========================================================================== */
.chat{width:min(660px,100%);background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.6);border-radius:26px;padding:20px 22px 18px;box-shadow:0 18px 48px rgba(31,26,36,.055);backdrop-filter:blur(8px) saturate(130%);-webkit-backdrop-filter:blur(8px) saturate(130%);margin:22px auto 0}

/* Header — the top of an open thread, and the fold control. */
.chat-hdr{display:flex;align-items:center;gap:15px;padding:2px 24px 16px;margin:0 -24px;border-bottom:1px solid transparent;cursor:pointer;transition:border-color .3s ease}
.chat-hdr.is-open{border-bottom-color:var(--line)}
.chat-av{width:56px;height:56px;border-radius:50%;position:relative;flex:none}
.chat-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:0 3px 14px rgba(31,26,36,.13)}
.chat-av .live{position:absolute;right:1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:#5ED39B;box-shadow:0 0 0 3px var(--bg)}
.chat-id{min-width:0;flex:1}
/* The name IS the hero wordmark now — one "Angela Xie" on the page, living in
   the thread header, keeping the Georgia gradient treatment. */
.chat-nm{font-size:30px!important;padding:0!important;line-height:1.15!important}
.chat-st{font-size:15px;color:var(--ink-mute);margin-top:4px;display:flex;align-items:center;gap:6px}
.chat-st i{width:5px;height:5px;border-radius:50%;background:#5ED39B;display:inline-block;font-style:normal}
.chat-peek{font-size:15px;color:var(--ink-mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-quota{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-left:auto;padding:6px 11px;border-radius:999px;background:rgba(31,26,36,.045)}
.chat-chev{margin-left:auto;width:30px;height:30px;border-radius:50%;border:none;background:rgba(31,26,36,.05);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .35s cubic-bezier(.3,.8,.3,1),background .2s ease}
.chat-hdr:hover .chat-chev{background:rgba(31,26,36,.09)}
.chat-hdr.is-shut .chat-chev{transform:rotate(180deg)}

/* Fold — grid-rows 1fr→0fr animates a height the content defines itself. */
.chat-fold{display:grid;min-height:0;grid-template-rows:1fr;transition:grid-template-rows .44s cubic-bezier(.3,.8,.3,1),opacity .3s ease}
.chat-fold.is-shut{grid-template-rows:0fr;opacity:0}
/* Padding + matching negative margin: the fold still clips for the animation,
   but the clip box sits outside the composer's shadow instead of shaving it. */
.chat-fold>div{min-height:0;overflow:hidden;padding:0 16px 16px;margin:0 -16px -16px}

/* Collapsed thread → compact hero. The hero normally centers the chat in a
   70vh shell (main.css); when the visitor folds the conversation we release
   that height so Selected Work rises into view. min-height animates 70vh→0
   with the same curve as the fold, so the shell and its content shrink as
   one motion. */
.hero{transition:min-height .44s cubic-bezier(.3,.8,.3,1)}
.hero.hero-compact{min-height:0}

/* Log. Before the first reply it is exactly as tall as Angela's three sends —
   they are the statement, full contrast, fully in view. The first reply LOCKS
   that height and turns the log into a scroll window: new turns push the old
   ones up under the top fade, and the container never changes size. */
.chat-log{display:flex;flex-direction:column;gap:6px;padding:14px 0 4px}
.chat-log.is-window{overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 34px,#000 96px);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 34px,#000 96px)}
.chat-log.is-window::-webkit-scrollbar{display:none}

.chat-msg{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;animation:chatRise .42s cubic-bezier(.2,.9,.3,1) both}
/* Angela's sends get a 20px avatar gutter; only the first bubble of a run shows
   the photo, the rest of the run keeps the indent so the stack stays aligned. */
.chat-msg.is-bot{grid-template-columns:20px minmax(0,1fr);column-gap:8px}
.chat-sender{width:20px;height:20px;border-radius:50%;margin-top:9px}
.chat-sender img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.chat-msg.is-you{justify-items:end}
@keyframes chatRise{from{opacity:0;transform:translateY(14px) scale(.97)}}
.chat-stack{display:flex;flex-direction:column;gap:8px;min-width:0}
.chat-msg.is-you .chat-stack{align-items:flex-end}

.bub{padding:13px 17px;border-radius:18px;font-size:15.5px;line-height:1.55;max-width:min(100%,520px);text-wrap:pretty}
.chat-msg.is-bot .bub{background:#F0F0F0;box-shadow:none;color:var(--ink)}
/* The visitor's own sends carry the site's Dawn gradient — peach → pink → lilac. */
.chat-msg.is-you .bub{background:linear-gradient(45deg,#FF9F70 0%,#FFB4B4 42%,#E8C8F0 74%,#C8A8E0 100%);color:#FFFFFF}
/* Grouped runs only: a lone bubble keeps all four corners equal. */
.chat-msg.is-bot .bub.gp-first{border-bottom-left-radius:4px}
.chat-msg.is-bot .bub.gp-mid{border-top-left-radius:4px;border-bottom-left-radius:4px}
.chat-msg.is-bot .bub.gp-last{border-top-left-radius:4px;border-bottom-left-radius:18px}
.chat-msg.is-you .bub.gp-first{border-bottom-right-radius:4px}
.chat-msg.is-you .bub.gp-mid{border-top-right-radius:4px;border-bottom-right-radius:4px}
.chat-msg.is-you .bub.gp-last{border-top-right-radius:4px;border-bottom-right-radius:18px}

/* Composing → message is one continuous bubble: the box keeps its identity and
   eases between the two sizes while the dots cross-fade into the text. */
.bub{transition:padding .34s cubic-bezier(.3,.8,.3,1),border-radius .34s ease}
.bub.is-typing{align-self:flex-start;width:fit-content;padding:15px 18px}
.chat-msg.is-you .bub.is-typing{align-self:flex-end}
.bub .dots{display:flex;align-items:center;gap:5px;height:1.55em;animation:chatFade .22s ease both}
.bub .dots span{width:8px;height:8px;border-radius:50%;background:var(--ink-mute);animation:chatDot 1.35s ease-in-out infinite}
.bub .dots span:nth-child(2){animation-delay:.18s}
.bub .dots span:nth-child(3){animation-delay:.36s}
.bub-t{animation:chatFade .3s ease both}
@keyframes chatFade{from{opacity:0}to{opacity:1}}
@keyframes chatDot{0%,72%,100%{opacity:.32;transform:translateY(0) scale(.86)}32%{opacity:.85;transform:translateY(-3px) scale(1)}}

/* Action line — the receipt of the bot operating the page, not just talking. */
.chat-act{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple,#C8A8E0)}
.chat-act .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:chatPulse 1.4s ease-in-out infinite}
@keyframes chatPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* Project card — a deep link into the Work section below. */
/* Hover is a 1px brand-gradient border (same double-background trick as the
   gate's "colored" field variant), NOT a lift+shadow — the composer overlaps
   the last card and was clipping the shadow. The resting 1px transparent
   border keeps the box size identical so nothing shifts on hover. */
.chat-pc{display:flex;align-items:center;gap:11px;padding:10px 13px;background:rgba(255,255,255,.78);border:1px solid transparent;border-radius:14px;cursor:pointer;max-width:340px;width:100%;text-align:left}
.chat-pc:hover{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,#FFB088 0%,#FFC2D4 45%,#B8A4E8 100%) border-box}
.chat-pc .n{font-size:13.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.chat-pc .m{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-top:3px}
.chat-pc .go{margin-left:auto;color:var(--ink-mute);font-size:15px}

/* Quick replies sit on the visitor's side — they are things you're about to say. */
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:16px 0 0;justify-content:flex-end}
.chat-chip{padding:8px 14px;border:none;background:#FFFFFF;border-radius:999px;font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;box-shadow:0 3px 14px rgba(31,26,36,.1);transition:box-shadow .2s ease,color .2s ease,transform .16s ease}
.chat-chip:hover{color:var(--ink);transform:translateY(-1px);box-shadow:0 6px 20px rgba(31,26,36,.14)}
a.chat-chip{text-decoration:none;display:inline-flex;align-items:center}

/* Composer — a reply field, not a search bar. */
.chat-form{display:flex;align-items:flex-end;gap:8px;margin-top:14px;padding:6px 6px 6px 18px;background:#FFFFFF;border:none;border-radius:22px;box-shadow:0 3px 14px rgba(31,26,36,.1);transition:box-shadow .25s ease,background .25s ease}
.chat-form:focus-within{background:#FFFFFF;box-shadow:0 6px 22px rgba(184,164,232,.24),0 0 0 4px rgba(184,164,232,.15)}
/* overflow-y hidden by default: the single-line box is a hair shorter than its
   content (36px vs ~36.5px line+padding), which paints a stray scrollbar in
   some browsers. The composer's autosize handler re-enables scrolling only
   once the draft is tall enough to hit the 82px cap. */
.chat-form textarea{flex:1;border:none;outline:none;background:none;font:inherit;font-size:15.5px;color:var(--ink);resize:none;height:36px;max-height:82px;padding:7px 0;line-height:1.45;overflow-y:hidden}
.chat-form textarea::placeholder{color:rgba(31,26,36,.4)}
.chat-hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);padding-bottom:13px;opacity:0;transition:opacity .2s ease}
/* Hint appears only when there's actually something to send (.is-on = draft
   non-empty), not merely on focus — an empty box showing "↵ send" is noise. */
.chat-form:focus-within .chat-hint.is-on{opacity:1}
.chat-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--ink);color:var(--bg);cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .16s ease,opacity .2s ease}
.chat-send:hover{transform:translateY(-1.5px)}
.chat-send:disabled{opacity:.28;cursor:default;transform:none}
.chat-foot{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);text-align:center;padding-top:12px;line-height:1.7}

@media (max-width:640px){
  .chat{padding:16px 15px 14px;border-radius:22px}
  .bub{font-size:15px;padding:12px 15px}
}
@media (prefers-reduced-motion:reduce){
  .chat-msg,.bub,.bub .dots,.bub .dots span,.bub-t,.chat-act .dot{animation:none!important;transition:none!important}
  .chat-fold{transition:none}
}