/* The Telegram sample as a chat in motion. Base styles are the finished thread; the sequence only
   runs while sage-chat.js sets .is-live and its stage classes, and pause or reduced motion clear them. */

/* reply lines, tags and the composer */
.sage-message .msg-lines{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.msg-lines li{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.5;color:#bdd0ea}
.msg-lines li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--scan-ice);box-shadow:0 0 10px #9ac4ff99}
.msg-lines li.warn::before{background:var(--scan-amber);box-shadow:0 0 10px #e0b36a99}
.msg-lines li.ok::before{background:var(--scan-ok);box-shadow:0 0 10px #8fd3b499}
.sage-message .message-tags{gap:6px}
.message-tags span{padding:4px 10px;border-radius:99px;border:1px solid #9ac4ff2b;background:#9ac4ff12;font-size:12px;line-height:1.5;color:#c6d9f4}
.composer{display:flex;align-items:center;gap:10px;min-height:42px;margin-top:18px;padding:7px 7px 7px 15px;border-radius:99px;border:1px solid #9ac4ff2b;background:#0d1a2e}
.composer-text{overflow:hidden;white-space:nowrap;font:13px var(--mono);color:#dce9ff}
.composer-text:empty{display:none}
.composer-text:not(:empty)+.composer-hint{display:none}
.composer-hint{font-size:13px;color:#6f86a8}
.composer .send{position:relative;flex:none;width:28px;height:28px;margin-left:auto;border-radius:50%;background:#9ac4ff24}
.composer .send::before{content:'';position:absolute;inset:8px 7px 8px 10px;background:var(--scan-ice);clip-path:polygon(0 0,100% 50%,0 100%,24% 50%)}

/* "Starq is reading" bubble, laid over the reply slot so nothing jumps */
.typing{position:relative;z-index:1;height:0;opacity:0;transition:opacity .25s}
.typing-bubble{position:absolute;top:18px;left:0;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px 12px 12px 3px;border:1px solid #83b4f326;background:#111f34;font:12px var(--mono);color:#9bb3d6;white-space:nowrap}
.typing .dots{display:inline-flex;gap:4px}
.typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--scan-ice);opacity:.5}

@keyframes chat-send{from{opacity:0;transform:translateY(48px) scale(.86)}}
@keyframes chat-card{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes chat-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes chat-pop{from{opacity:0;transform:scale(.6)}}
@keyframes chat-dot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes chat-blink{50%{opacity:0}}
@keyframes chat-sent{0%{background:var(--scan-ice);box-shadow:0 0 16px #9ac4ffaa}100%{background:#9ac4ff24}}
@keyframes chat-out{to{opacity:0;transform:translateY(-10px)}}

.telegram-thread.is-live .user-message,.telegram-thread.is-live .sage-message{animation:none}
.telegram-thread.is-live:not(.is-sent) .user-message{opacity:0}
.telegram-thread.is-live:not(.is-answering) .sage-message{opacity:0}
.telegram-thread.is-live .composer-text::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--scan-ice);animation:chat-blink 1s steps(1) infinite}
.telegram-thread.is-sent .user-message{transform-origin:100% 100%;animation:chat-send .5s var(--scan-ease) both}
.telegram-thread.is-sent .send{animation:chat-sent .6s ease both}
.telegram-thread.is-thinking:not(.is-answering) .typing{opacity:1}
.telegram-thread.is-thinking .typing .dots i{animation:chat-dot 1s ease-in-out infinite}
.telegram-thread.is-thinking .typing .dots i:nth-child(2){animation-delay:.15s}
.telegram-thread.is-thinking .typing .dots i:nth-child(3){animation-delay:.3s}
.telegram-thread.is-answering .sage-message{transform-origin:0 100%;animation:chat-card .55s var(--scan-ease) both}
.telegram-thread.is-answering .sage-message>small{animation:chat-rise .4s ease backwards .15s}
.telegram-thread.is-answering .sage-message h3{animation:chat-rise .55s var(--scan-ease) backwards .3s}
.telegram-thread.is-answering .msg-lines li{animation:chat-rise .45s var(--scan-ease) backwards;animation-delay:calc(.75s + var(--i,0)*.25s)}
.telegram-thread.is-answering .msg-lines li::before{animation:chat-pop .35s var(--scan-ease) backwards;animation-delay:calc(.85s + var(--i,0)*.25s)}
.telegram-thread.is-answering .message-tags span{animation:chat-pop .35s var(--scan-ease) backwards;animation-delay:calc(1.6s + var(--i,0)*.1s)}
.telegram-thread.is-answering .message-bottom{animation:chat-rise .4s ease backwards 2s}
.telegram-thread.is-fading .user-message,.telegram-thread.is-fading .sage-message{animation:chat-out .45s ease forwards}

.sage-paused .telegram-thread *,.sage-paused .telegram-thread *::before,.sage-paused .telegram-thread *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){
  .telegram-thread *,.telegram-thread *::before,.telegram-thread *::after{animation:none!important}
}