/* ============================================================
   George Brothers — css/demos/lucy.css
   TRY IT panel for /work/lucy. A Telegram-style replay of one real
   Lucy exchange: a quiz, a miss, and that miss folded into tomorrow's
   plan. Shared .lud-chat/.lud-msg/.lud-bubble classes render the
   same markup whether JS built it (animated, replayable) or the
   no-JS fallback did (static, already-finished transcript), so the
   panel looks identical either way. Typing/reveal timing is plain
   JS (see js/demos/lucy.js); the sitewide reduced-motion clamp in
   css/site.css covers the CSS transitions below, and the script
   itself skips the staged reveal under prefers-reduced-motion.
   ============================================================ */

.lud{display:flex;flex-direction:column;gap:18px}

.lud-chat{border:1px solid rgba(243,234,217,.16);border-radius:14px;background:#1b140c;overflow:hidden}

.lud-head{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(243,234,217,.12);background:rgba(243,234,217,.03)}
.lud-head-name{font:500 14px 'Space Grotesk',sans-serif;color:#f3ead9}
.lud-head-status{font:400 11.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:rgba(243,234,217,.5)}

.lud-body{display:flex;flex-direction:column;gap:12px;padding:20px 18px;min-height:64px}

.lud-msg{display:flex;max-width:88%}
.lud-msg-lucy{justify-content:flex-start;align-self:flex-start}
.lud-msg-you{justify-content:flex-end;align-self:flex-end}
.lud-msg-plan{align-self:stretch;max-width:100%;flex-direction:column;gap:6px;margin-top:4px}

.lud-bubble{margin:0;font:400 14.5px/1.6 'Space Grotesk',sans-serif;padding:12px 16px;border-radius:16px}
.lud-msg-lucy .lud-bubble{background:rgba(243,234,217,.06);color:#f3ead9;border-bottom-left-radius:4px}
.lud-msg-you .lud-bubble{background:#efa85c;color:#171009;border-bottom-right-radius:4px}
.lud-msg-plan .lud-bubble{background:rgba(147,181,115,.1);border:1px solid rgba(147,181,115,.4);color:rgba(243,234,217,.9);border-radius:12px}

.lud-gloss{color:rgba(23,16,9,.6)}
.lud-msg-lucy .lud-gloss{color:rgba(243,234,217,.55)}

.lud-plan-label{margin:0;font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#93b573}

/* ===== typing indicator ===== */
.lud-typing{display:inline-flex;gap:4px;align-items:center;background:rgba(243,234,217,.06);border-radius:16px;border-bottom-left-radius:4px;padding:12px 16px}
.lud-msg-you .lud-typing{background:rgba(239,168,92,.35);border-bottom-left-radius:16px;border-bottom-right-radius:4px}
.lud-typing span{width:5px;height:5px;border-radius:50%;background:rgba(243,234,217,.6);opacity:.35;animation:lud-blink 1.1s ease-in-out infinite}
.lud-msg-you .lud-typing span{background:rgba(23,16,9,.6)}
.lud-typing span:nth-child(2){animation-delay:.15s}
.lud-typing span:nth-child(3){animation-delay:.3s}
@keyframes lud-blink{0%,60%,100%{opacity:.35}30%{opacity:.9}}

/* ===== fade/slide-in for each message as it lands ===== */
.lud-msg{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.lud-msg.on{opacity:1;transform:none}

/* ===== controls ===== */
.lud-controls{display:flex}
.lud-play{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(243,234,217,.3);color:#f3ead9;background:transparent;font:500 13px 'Space Grotesk',sans-serif;padding:10px 20px;border-radius:999px;cursor:pointer;transition:border-color .3s,color .3s}
.lud-play:hover:not(:disabled),.lud-play:focus-visible{border-color:#efa85c;color:#efa85c}
.lud-play:disabled{opacity:.5;cursor:default}
.lud-play:focus-visible{outline:2px solid #efa85c;outline-offset:2px}

@media (max-width:640px){
  .lud-msg{max-width:94%}
}