@font-face{font-family:Orbitron;src:url('/fonts/orbitron.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:Oxanium;src:url('/fonts/oxanium.ttf') format('truetype');font-weight:200 800;font-display:swap}
.chat-overlay-page{margin:0!important;background:transparent!important;overflow:hidden!important;width:100vw;height:100vh}
.chat-overlay-page #chat-output{position:absolute;inset:0}
.chat-stage{--accent:#ff9f1c;--chat-text:#ff9f1c;--chat-bg:#0d1117;--chat-alpha:.8;--name-size:17px;--message-size:24px;--chat-gap:16px;--chat-padding:12px;position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;height:100%;width:100%;background:transparent;color:var(--chat-text);line-height:1.4;text-align:start}
.chat-stage *{box-sizing:border-box}.chat-stage[hidden]{display:none!important}
.chat-list{position:absolute;bottom:0;left:0;right:0;padding:var(--chat-padding);display:flex;flex-direction:column;align-items:flex-start;gap:var(--chat-gap)}
.chat-stage[data-newest=top] .chat-list{top:0;bottom:auto}.chat-stage[data-align=right] .chat-list{align-items:flex-end}
.chat-message{position:relative;max-width:100%;min-width:100px;width:fit-content;flex-shrink:0;transform-origin:bottom left;filter:drop-shadow(0 2px 4px #0004)}
.chat-head{display:flex;align-items:center;gap:12px;justify-content:space-between;padding-right:10px;margin-bottom:-1px;position:relative;z-index:1}
.chat-nameplate{display:flex;align-items:center;gap:6px;max-width:100%;color:#fff;background:var(--user-color,var(--accent));padding:2px 12px 3px 8px;clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);border-left:3px solid #ffffff90;border-radius:3px 2px 0 0}
.chat-name{font-family:var(--name-font,Orbitron),Arial,sans-serif;font-size:var(--name-size);font-weight:var(--name-weight,700);text-shadow:0 1px 3px #000b;overflow-wrap:anywhere;line-height:1.5}
.chat-badge{font-family:Arial,sans-serif;font-size:.8em;display:inline-flex;align-items:center;justify-content:center;line-height:1;width:16px;height:16px;border-radius:2px;background:#151b23b8;color:#fff;flex-shrink:0}
.badge-moderator{background:#00a54e}.badge-vip{background:#c90086}.badge-broadcaster{background:#e33445}.badge-subscriber,.badge-founder{background:#6c3cc4}
.chat-time{font-family:var(--name-font,Orbitron),sans-serif;font-size:10px;font-weight:500;color:var(--accent);opacity:.8;white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-body{position:relative;min-height:1.7em;padding:7px 16px 9px 11px;border-left:2px solid var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent);font-family:var(--message-font,Oxanium),Arial,sans-serif;font-size:var(--message-size);font-weight:var(--message-weight,500);overflow-wrap:anywhere;white-space:pre-wrap;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.chat-body::after{content:'';position:absolute;right:2px;top:3px;width:5px;height:5px;border-right:1px solid var(--accent);border-top:1px solid var(--accent);opacity:.7}
.chat-action{font-style:italic}.chat-emote{height:var(--emote-size,36px);max-width:200px;width:auto;vertical-align:middle;object-fit:contain;display:inline-block}
.emote-stack{display:inline-block;position:relative;vertical-align:middle;line-height:1}.emote-stack .zero-width{position:absolute;right:0;top:50%;transform:translateY(-50%);max-width:none}
.chat-gif{display:block;position:relative;width:fit-content;max-width:100%;margin:5px 0 0;line-height:1}.chat-gif-image{display:block;max-width:100%;width:var(--gif-size,220px);max-height:calc(var(--gif-size,220px)*1.2);object-fit:contain;object-position:left center;border-radius:3px}.giphy-credit{display:block;font:8px/1.5 Arial,sans-serif;letter-spacing:.12em;color:#b1b8c0;margin-top:3px;opacity:.8}
.chat-stage[data-animation=full] .chat-body::after{animation:chat-detail-glow 3s ease-in-out infinite}
@keyframes chat-detail-glow{50%{opacity:.2}}