.discord-demo{--avatar:38px;--message-size:14px;--message-gap:10px;display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative;min-height:0;font-family:'gg sans','Helvetica Neue',Arial,sans-serif;font-synthesis:weight;letter-spacing:0;container-type:size}
.demo-stack{position:relative;width:min(100%,86cqh);padding-top:72px}
.chat-card{position:relative;background:#1d1e21;color:#e0e0e5;border:1px solid #ffffff12;border-radius:18px;box-shadow:0 8px 22px #00000013;overflow:clip}
.corner-mascot{position:absolute;z-index:3;width:clamp(105px,21%,160px);height:auto;right:18px;top:-28px;object-fit:contain;pointer-events:none}
.channel-header{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-bottom:1px solid #ffffff14;color:#e0e0e5;font-size:14px}
.channel-discord{filter:invert(.85);width:20px;height:18px;object-fit:contain}.channel-hash{color:#93949c;font-size:22px}.channel-header strong{font-weight:600}
.demo-actions{display:flex;gap:3px;margin-left:auto;position:relative;z-index:4}.demo-actions button{width:26px;height:26px;border:0;border-radius:4px;display:grid;place-items:center;padding:0;background:transparent;cursor:pointer}.demo-actions button:hover{background:#36363d}.demo-actions img{filter:invert(.65)}.demo-actions button:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.discord-messages{padding:17px 18px 0;overflow:clip;display:flex;flex-direction:column;gap:var(--message-gap)}
.d-message{display:grid;grid-template-columns:var(--avatar) minmax(0,1fr);column-gap:12px;min-height:var(--avatar);animation:message-arrive .3s ease-out both}
.d-message[hidden]{display:grid!important;visibility:hidden;animation:none}.d-message-established,.d-bot-message{animation:none}
.anime-avatar{display:inline-block;width:var(--avatar);height:var(--avatar);border-radius:50%;background-image:var(--avatars,url('assets/anime-avatars.png'));background-size:200% 100%;background-repeat:no-repeat}.kiro-avatar{background-position:left center}.yuki-avatar{background-position:right center}.d-bot-avatar{width:var(--avatar);height:var(--avatar);border-radius:50%}
.d-bot-avatar[hidden],.d-bot-intro[hidden]{display:block!important;visibility:hidden}.d-bot-content{min-width:0}.d-bot-intro{min-height:38px}
.d-author{display:flex;align-items:center;gap:6px;margin:0 0 4px;line-height:1.2;flex-wrap:wrap}.d-author strong{font-size:var(--message-size);font-weight:600;color:#e9e9ed}.d-author strong.kiro-name{color:#75d8c2}.d-author strong.yuki-name{color:#ee9cc4}.d-author time{font-size:9px;color:#92939d;font-weight:400}.d-message p{font-size:var(--message-size);line-height:1.35;margin:0;overflow-wrap:anywhere}.discord-mention{color:#d7f56b;background:#bdd42e26;border-radius:3px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.discord-app-badge{background:#ffffff18;color:#bdbdc5;border-radius:3px;padding:2px 4px;font-size:8px;font-weight:500;line-height:1}.discord-generating{display:flex;align-items:center;gap:7px;font-size:var(--message-size);height:19px}
.video-tile{position:relative;width:100%;margin-top:7px;aspect-ratio:2/1;border-radius:9px;background:#111114;overflow:clip}.video-tile video{display:block;width:100%;height:100%;object-fit:cover}
.discord-typing{height:18px;margin:0 18px 0 68px;display:flex;align-items:center;font-size:9px;color:#a4a5af}.discord-typing:not(:empty):after{content:'•••';letter-spacing:2px;margin-left:5px;color:#dbdce5;animation:typing-pulse 1s ease-in-out infinite}
.message-composer{height:39px;margin:0 14px 14px;padding:0 12px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff12;border-radius:9px;background:#2a2b30;color:#898a93;font-size:12px;user-select:none}.composer-add{display:grid;place-items:center;background:#96979f;border-radius:50%;width:19px;height:19px}.composer-add img{opacity:.75}.composer-icons{margin-left:auto;display:flex;gap:14px}.composer-icons img{filter:invert(.57)}
.is-paused *,.is-paused *:after{animation-play-state:paused!important}
@keyframes message-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes typing-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none;transition:opacity .32s ease}.video-tile.is-playing .video-poster{opacity:0}
.video-controls{position:absolute;z-index:2;right:10px;bottom:10px;display:flex;align-items:center;gap:6px}.video-control{width:32px;height:32px;padding:7px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;background:#17171bcc;color:white;cursor:pointer;transition:opacity .16s,background .16s}.video-control img{width:18px;height:18px;filter:invert(1)}.video-control:hover{background:#38383ee8}.video-control:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.video-extra{opacity:0;pointer-events:none}.video-tile:hover .video-extra,.video-tile:focus-within .video-extra,.video-tile.needs-play .video-extra{opacity:1;pointer-events:auto}
.video-tile:fullscreen{width:100%;height:100%;margin:0;transform:none;border-radius:0;background:#111114;aspect-ratio:auto}.video-tile:fullscreen video,.video-tile:fullscreen .video-poster{object-fit:contain}
@media(min-width:1500px) and (min-height:800px){.discord-demo{--avatar:46px;--message-size:16px;--message-gap:14px}.channel-header{height:49px;padding:0 22px;font-size:16px}.discord-messages{padding:20px 22px 0}.d-message{column-gap:14px}.d-author time{font-size:10px}.d-bot-intro{min-height:42px}.discord-typing{margin-left:82px}.message-composer{height:44px;margin:0 17px 17px;font-size:14px}.demo-stack{padding-top:80px}.corner-mascot{top:-30px}}
@media(max-width:1100px){.discord-demo{--avatar:32px;--message-size:12px;--message-gap:10px}.demo-stack{padding-top:58px;width:min(100%,84cqh)}.corner-mascot{width:110px;top:-28px;right:12px}.channel-header{height:39px;padding:0 14px;font-size:13px}.discord-messages{padding:14px 14px 0}.d-message{column-gap:10px}.d-author{gap:5px;margin-bottom:3px}.d-author time{font-size:8px}.d-bot-intro{min-height:32px}.discord-typing{height:18px;margin-left:56px}.message-composer{height:34px;margin:0 12px 12px;font-size:11px}}
@media(min-width:761px) and (max-height:700px){.discord-demo{--avatar:29px;--message-size:11px;--message-gap:9px}.demo-stack{padding-top:48px;width:min(100%,84cqh)}.corner-mascot{width:100px;top:-32px}.channel-header{height:36px}.discord-messages{padding-top:12px}.d-author time{font-size:7px}.d-bot-intro{min-height:29px}.discord-typing{height:15px}.message-composer{height:31px;margin-bottom:11px}.video-tile{margin-top:6px}}
@media(max-width:760px){.discord-demo{--avatar:29px;--message-size:12px;--message-gap:10px}.demo-stack{width:min(100%,86cqh);padding-top:56px}.corner-mascot{width:112px;top:-30px;right:12px}.chat-card{border-radius:14px}.channel-header{height:38px}.discord-messages{padding:13px 13px 0}.d-message{column-gap:9px}.d-bot-intro{min-height:32px}.d-author time{font-size:7px}.discord-app-badge{font-size:7px;padding:2px 3px}.discord-typing{margin-left:51px;height:18px;font-size:8px}.message-composer{height:34px;font-size:11px}.video-controls{right:7px;bottom:7px;gap:4px}.video-control{width:29px;height:29px;padding:6px}.video-control img{width:16px;height:16px}}
@media(max-width:480px){.discord-demo{--avatar:28px;--message-size:11px;--message-gap:10px}.d-author{gap:4px}.channel-header{height:36px}.d-bot-intro{min-height:30px}.message-composer{height:32px;margin:0 10px 10px}}
@media(max-width:760px) and (max-height:700px){.discord-demo{--avatar:23px;--message-size:10px;--message-gap:6px}.demo-stack{padding-top:38px;width:min(100%,82cqh)}.corner-mascot{width:85px;top:-27px}.channel-header{height:30px;font-size:11px}.channel-discord{width:17px;height:15px}.discord-messages{padding:10px 11px 0}.d-bot-intro{min-height:27px}.d-author{margin-bottom:2px}.d-author time{font-size:6px}.discord-app-badge{font-size:6px}.discord-typing{height:12px;font-size:7px}.message-composer{height:27px;margin:0 8px 8px;font-size:10px}.composer-icons{gap:10px}.composer-icons img{width:16px;height:16px}.video-tile{margin-top:5px}.video-control{width:25px;height:25px;padding:5px}.video-control img{width:14px;height:14px}}
@media(hover:none){.video-extra{opacity:1;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.d-message,.discord-typing:after{animation:none}.video-poster,.video-control{transition:none}}

/* Reserve the attachment space without exposing its poster or controls early. */
.video-tile[hidden]{display:block!important;visibility:hidden}