@font-face{font-family:Inter;src:url('/fonts/inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
.chat-message{filter:drop-shadow(0 3px 7px rgb(0 0 0 / var(--shadow-opacity,.3)))}
.chat-stage[data-full-width=true] .chat-message{width:100%}
.chat-surface{position:relative;isolation:isolate;border-radius:var(--bubble-radius,12px);min-width:0}
.chat-content{position:relative;z-index:1;min-width:0}
.chat-decoration{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0;opacity:var(--fx-opacity,.45)}
.chat-stage:not([data-theme=cyber]) .chat-surface{background:color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent);border:var(--bubble-border,1px) solid color-mix(in srgb,var(--accent) 35%,transparent)}
.chat-stage:not([data-theme=cyber]) .chat-head{padding:var(--bubble-padding,12px) var(--bubble-padding,12px) 0;gap:12px;margin:0}
.chat-stage:not([data-theme=cyber]) .chat-nameplate{background:transparent;color:var(--user-color);clip-path:none;padding:0;border:0;border-radius:0}
.chat-stage:not([data-theme=cyber]) .chat-name{text-shadow:none}
.chat-stage:not([data-theme=cyber]) .chat-body{background:transparent;border:0;clip-path:none;padding:6px var(--bubble-padding,12px) var(--bubble-padding,12px)}
.chat-stage:not([data-theme=cyber]) .chat-body::after{display:none}
.chat-avatar{width:var(--avatar-size,34px);height:var(--avatar-size,34px);border-radius:50%;background:color-mix(in srgb,var(--user-color) 70%,#172232);border:1px solid color-mix(in srgb,var(--user-color) 50%,white);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:700 calc(var(--avatar-size,34px)*.4)/1 Inter,Arial,sans-serif;flex-shrink:0;text-shadow:0 1px 2px #000a;margin-inline-end:3px}
.chat-stage[data-name-position=inline] .chat-head{float:inline-start;display:inline-flex;padding-bottom:3px;margin-inline-end:8px}
.chat-stage[data-name-position=inline] .chat-body{display:block;min-height:2.6em;padding-top:var(--bubble-padding)}
.chat-stage[data-name-position=inline] .chat-content::after{content:'';display:block;clear:both}
.chat-stage[data-name-position=inline] .chat-time{display:none}
.chat-stage[data-theme=glass] .chat-surface{box-shadow:inset 0 1px #ffffff30,inset 0 -1px #ffffff10;border-color:#c3eaff55;background:linear-gradient(135deg,#a0d4ff22,transparent 55%),color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent)}
.chat-stage[data-theme=neon] .chat-surface{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 0 15px color-mix(in srgb,var(--secondary) 12%,transparent);border-color:var(--accent)}
.chat-stage[data-theme=neon] .chat-nameplate{border-bottom:1px solid var(--secondary);padding-bottom:3px}
.chat-stage[data-theme=aurora] .chat-surface{border-color:color-mix(in srgb,var(--secondary) 50%,transparent);border-radius:var(--bubble-radius) var(--bubble-radius) var(--bubble-radius) 5px}
.chat-stage[data-theme=holo] .chat-surface{clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);border-left:3px solid var(--accent)}
.chat-stage[data-theme=holo] .chat-name::before{content:'// ';opacity:.5;color:var(--accent)}
.chat-stage[data-theme=holo] .chat-time{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 5px}
.chat-stage[data-theme=minimal] .chat-surface{border:none;border-radius:0;border-left:2px solid var(--user-color);text-shadow:0 2px 4px #000e}
.chat-stage[data-theme=minimal] .chat-head{padding-top:0}.chat-stage[data-theme=minimal] .chat-body{padding-bottom:2px}.chat-stage[data-theme=minimal] .chat-name{text-shadow:0 1px 4px #000e}
.chat-stage[data-theme=social] .chat-surface{border-radius:var(--bubble-radius) var(--bubble-radius) var(--bubble-radius) 5px;margin-inline-start:calc(var(--avatar-size) + 12px)}
.chat-stage[data-theme=social] .chat-avatar{position:absolute;inset-inline-start:calc(-1*(var(--avatar-size) + 12px));top:3px}.chat-stage[data-theme=social] .chat-head{padding-bottom:1px}
.chat-stage[data-theme=sticker] .chat-surface{border-color:#fff;box-shadow:5px 5px 0 #24213299;transform:rotate(-.6deg)}
.chat-stage[data-theme=sticker] .chat-nameplate{padding:3px 10px;color:#292238;background:var(--accent);border-radius:5px;transform:rotate(-1deg)}
.chat-stage[data-theme=sticker] .chat-time{color:#59506c}.chat-stage[data-theme=sticker] .chat-name{color:#292238}
.chat-stage[data-theme=terminal] .chat-surface{border-style:dashed}.chat-stage[data-theme=terminal] .chat-head{padding-bottom:4px;border-bottom:1px dashed color-mix(in srgb,var(--accent) 30%,transparent)}
.chat-stage[data-theme=terminal] .chat-name::before{content:'> ';color:var(--accent)}.chat-stage[data-theme=terminal] .chat-name::after{content:'_';color:var(--accent)}.chat-stage[data-theme=terminal] .chat-body{font-size:calc(var(--message-size)*.9)}
.chat-stage[data-theme=editorial] .chat-surface{border:0;border-top:3px solid var(--accent);box-shadow:2px 4px 0 #0002}.chat-stage[data-theme=editorial] .chat-name{color:var(--chat-text);font-style:italic}.chat-stage[data-theme=editorial] .chat-head{border-bottom:1px solid #0002;padding-bottom:7px}.chat-stage[data-theme=editorial] .chat-time{color:#5e5c58}
.chat-stage[data-theme=broadcast] .chat-surface{border:0;border-left:6px solid var(--accent)}.chat-stage[data-theme=broadcast] .chat-head{padding:0;justify-content:start;gap:14px}.chat-stage[data-theme=broadcast] .chat-nameplate{background:var(--accent);padding:3px 20px 3px 9px;color:#151a20;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}.chat-stage[data-theme=broadcast] .chat-name{color:#151a20}.chat-stage[data-theme=broadcast] .chat-body{padding-top:9px}
.chat-stage[data-theme=orbit] .chat-surface{border-radius:var(--bubble-radius);border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--secondary) 17%,transparent),transparent 70%),color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent)}
.chat-stage[data-highlight-roles=true] .chat-message[data-role=broadcaster] .chat-badge{box-shadow:0 0 0 1px #ffb4b4}.chat-stage[data-highlight-roles=true] .chat-message[data-role=moderator] .chat-badge{box-shadow:0 0 0 1px #b4ffd0}.chat-stage[data-highlight-roles=true] .chat-message[data-role=vip] .chat-badge{box-shadow:0 0 0 1px #ffc4f4}
/* Decoration uses one bounded background layer plus, for borders, one masked pseudo-element. */
.chat-stage:not([data-effect=none])[data-theme=cyber] .chat-surface{background:color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent)}
.chat-stage:not([data-effect=none])[data-theme=cyber] .chat-body{background:transparent}
.chat-stage[data-effect=aurora] .chat-decoration{background:radial-gradient(ellipse at 15% 10%,var(--accent),transparent 60%),radial-gradient(ellipse at 90% 90%,var(--secondary),transparent 65%);background-size:180% 180%;animation:chat-aurora var(--fx-speed) ease-in-out infinite alternate}
.chat-stage[data-effect=shimmer] .chat-decoration,.chat-stage[data-effect=lightSweep] .chat-decoration{background:linear-gradient(115deg,transparent 20%,#ffffff03 35%,#ffffffaa 45%,transparent 55%);background-size:300% 100%;animation:chat-light var(--fx-speed) ease-in-out infinite}
.chat-stage[data-effect=lightSweep] .chat-decoration{background-image:linear-gradient(115deg,transparent 30%,var(--accent) 45%,transparent 52%)}
.chat-stage[data-effect=scanlines] .chat-decoration{background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--accent) 45%,transparent) 3px 4px);animation:chat-scan var(--fx-speed) linear infinite}
.chat-stage[data-effect=grid] .chat-decoration{background-image:linear-gradient(color-mix(in srgb,var(--accent) 35%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 35%,transparent) 1px,transparent 1px);background-size:20px 20px;animation:chat-grid var(--fx-speed) linear infinite}
.chat-stage[data-effect=particles] .chat-decoration{background-image:radial-gradient(circle,var(--accent) 1px,transparent 2px),radial-gradient(circle,var(--secondary) 1px,transparent 2px);background-size:43px 37px,67px 61px;background-position:0 0,15px 12px;animation:chat-particles var(--fx-speed) linear infinite}
.chat-stage[data-effect=halo] .chat-decoration{background:radial-gradient(ellipse at 50% 100%,var(--secondary),transparent 75%);animation:chat-halo var(--fx-speed) ease-in-out infinite alternate}
.chat-stage:is([data-effect=starBorder],[data-effect=gradientBorder],[data-effect=electric],[data-effect=neonPulse]) .chat-surface::before{content:'';position:absolute;inset:-1px;pointer-events:none;z-index:2;border-radius:inherit;padding:max(1px,var(--bubble-border));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;background:linear-gradient(110deg,var(--accent),var(--secondary),var(--accent));background-size:300% 100%;opacity:var(--fx-opacity);animation:chat-light var(--fx-speed) linear infinite}
.chat-stage[data-effect=starBorder] .chat-surface::before{background-image:linear-gradient(100deg,transparent 10%,var(--secondary) 30%,#fff 36%,var(--accent) 40%,transparent 55%);background-size:350% 100%}
.chat-stage[data-effect=electric] .chat-surface::before{background-image:repeating-linear-gradient(115deg,var(--accent) 0 9px,#fff 10px 11px,var(--secondary) 12px 22px);background-size:200% 100%;animation:chat-electric calc(var(--fx-speed)*.6) steps(5,end) infinite}
.chat-stage[data-effect=neonPulse] .chat-surface::before{background:var(--accent);animation:chat-neon var(--fx-speed) ease-in-out infinite}
.chat-stage[data-name-effect=gradient] .chat-name,.chat-stage[data-name-effect=shine] .chat-name{background:linear-gradient(100deg,var(--accent),var(--secondary),var(--accent));background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent!important;text-shadow:none!important}
.chat-stage[data-name-effect=shine] .chat-name{background-image:linear-gradient(100deg,var(--accent) 20%,#fff 40%,var(--secondary) 55%,var(--accent) 80%);animation:chat-light var(--fx-speed) linear infinite}
.chat-stage[data-name-effect=neon] .chat-name{text-shadow:0 0 7px var(--user-color),0 0 14px color-mix(in srgb,var(--accent) 50%,transparent)!important}
.chat-stage[data-name-effect=chromatic] .chat-name{text-shadow:1px 0 var(--secondary),-1px 0 var(--accent)!important}
.chat-message[data-fx-active=false] .chat-decoration,.chat-message[data-fx-active=false] .chat-surface::before,.chat-message[data-fx-active=false] .chat-name{animation:none!important}
.chat-stage:not([data-animation=full]) .chat-decoration,.chat-stage:not([data-animation=full]) .chat-surface::before,.chat-stage:not([data-animation=full]) .chat-name,.chat-stage[data-performance=light] .chat-decoration,.chat-stage[data-performance=light] .chat-surface::before,.chat-stage[data-performance=light] .chat-name{animation:none!important}
.chat-stage[data-performance=light] .chat-message{filter:none}.chat-stage[data-performance=light] .chat-surface{box-shadow:none!important}
@keyframes chat-aurora{from{background-position:0% 20%,100% 70%}to{background-position:100% 80%,0% 20%}}
@keyframes chat-light{0%,15%{background-position:100% 0}85%,100%{background-position:0% 0}}
@keyframes chat-scan{to{background-position:0 20px}}
@keyframes chat-grid{to{background-position:20px 20px}}
@keyframes chat-particles{to{background-position:43px -37px,-52px -49px}}
@keyframes chat-halo{from{opacity:calc(var(--fx-opacity)*.4)}to{opacity:var(--fx-opacity)}}
@keyframes chat-neon{0%,100%{opacity:calc(var(--fx-opacity)*.4)}50%{opacity:var(--fx-opacity)}}
@keyframes chat-electric{0%,100%{background-position:0 0;opacity:calc(var(--fx-opacity)*.55)}25%{background-position:40% 0;opacity:calc(var(--fx-opacity)*.8)}55%{background-position:60% 0;opacity:calc(var(--fx-opacity)*.55)}80%{background-position:100% 0;opacity:var(--fx-opacity)}}
/* Original arrival/departure effects animate whole messages, preserving emotes and GIF frames. */
.chat-transition{animation-duration:var(--chat-animation,400ms);animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.chat-transition-blurReveal{animation-name:chat-blur-in}.chat-transition-blurAway{animation-name:chat-blur-in;animation-direction:reverse}
.chat-transition-springPop{animation-name:chat-spring-in}.chat-transition-springAway{animation-name:chat-spring-in;animation-direction:reverse}
.chat-transition-wipeReveal{animation-name:chat-wipe-in}.chat-transition-wipeAway{animation-name:chat-wipe-in;animation-direction:reverse}
.chat-transition-rise3D{animation-name:chat-rise-in}.chat-transition-fall3D{animation-name:chat-rise-in;animation-direction:reverse}
.chat-transition-pixelReveal{animation-name:chat-pixel-in;animation-timing-function:steps(7,end)}.chat-transition-pixelAway{animation-name:chat-pixel-in;animation-direction:reverse;animation-timing-function:steps(7,end)}
.chat-transition-glitchIn{animation-name:chat-glitch-in}.chat-transition-glitchOut{animation-name:chat-glitch-in;animation-direction:reverse}
@keyframes chat-blur-in{from{opacity:0;filter:blur(9px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes chat-spring-in{0%{opacity:0;transform:translateY(12px) scale(.82)}70%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes chat-wipe-in{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes chat-rise-in{from{opacity:0;transform:perspective(600px) translateY(24px) rotateX(14deg)}to{opacity:1;transform:perspective(600px) translateY(0) rotateX(0)}}
@keyframes chat-pixel-in{0%{opacity:0;clip-path:polygon(0 0,0 0,0 20%,0 20%,0 50%,0 50%,0 75%,0 75%,0 100%,0 100%)}50%{opacity:1;clip-path:polygon(0 0,70% 0,70% 20%,40% 20%,40% 50%,80% 50%,80% 75%,55% 75%,55% 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 20%,100% 20%,100% 50%,100% 50%,100% 75%,100% 75%,100% 100%,0 100%)}}
@keyframes chat-glitch-in{0%{opacity:0;transform:translateX(-6px)}35%{opacity:.7;transform:translateX(3px)}55%{transform:translateX(-2px)}75%{transform:translateX(1px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat-stage[data-reduce-motion=true] *,.chat-stage[data-reduce-motion=true] *::before,.chat-stage[data-reduce-motion=true] *::after{animation:none!important;transition:none!important}}

/* Explicit advanced options take precedence over a theme's starting values. */
.chat-message{max-width:var(--bubble-max-width,100%);filter:drop-shadow(0 var(--shadow-offset,3px) var(--shadow-blur,7px) color-mix(in srgb,var(--shadow-color,#000) calc(var(--shadow-opacity,.3)*100%),transparent))}.chat-body{line-height:var(--message-line-height,1.4);letter-spacing:var(--message-letter-spacing,0px)}.chat-stage[data-text-align=left] .chat-body{text-align:left}.chat-stage[data-text-align=center] .chat-body{text-align:center}.chat-stage[data-text-align=right] .chat-body{text-align:right}
.chat-stage[data-bubble-shape=rounded] .chat-surface{clip-path:none;border-radius:var(--bubble-radius)}.chat-stage[data-bubble-shape=square] .chat-surface{clip-path:none;border-radius:0}.chat-stage[data-bubble-shape=pill] .chat-surface{clip-path:none;border-radius:40px}.chat-stage[data-bubble-shape=angular] .chat-surface{border-radius:0;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.chat-stage:not([data-bubble-shape=theme]) .chat-body{clip-path:none;border-radius:inherit}.chat-stage:not([data-bubble-shape=theme])[data-theme=cyber] .chat-surface{background:color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent);overflow:hidden}.chat-stage:not([data-bubble-shape=theme])[data-theme=cyber] .chat-body{background:transparent}
.chat-stage:not([data-background-mode=theme]) .chat-body{background:transparent!important}.chat-stage[data-background-mode=solid] .chat-surface{background:color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent)!important}.chat-stage[data-background-mode=gradient] .chat-surface{background:linear-gradient(var(--gradient-angle),color-mix(in srgb,var(--chat-bg) calc(var(--chat-alpha)*100%),transparent),color-mix(in srgb,var(--secondary) calc(var(--chat-alpha)*100%),transparent))!important}.chat-stage[data-background-mode=none] .chat-surface{background:transparent!important}
.chat-stage:not([data-border-style=theme]) .chat-surface{border:var(--bubble-border) solid var(--accent)}.chat-stage[data-border-style=dashed] .chat-surface{border-style:dashed}.chat-stage[data-border-style=dotted] .chat-surface{border-style:dotted}.chat-stage[data-border-style=double] .chat-surface{border-style:double}.chat-stage[data-border-style=none] .chat-surface,.chat-stage[data-border-style=none] .chat-body{border:0!important}
.chat-stage:is([data-nameplate-style=solid],[data-nameplate-style=pill]) .chat-nameplate{clip-path:none;border:0;background:color-mix(in srgb,var(--nameplate-color) calc(var(--nameplate-alpha)*100%),transparent);padding:4px 10px;border-radius:3px}.chat-stage[data-nameplate-style=pill] .chat-nameplate{border-radius:999px}.chat-stage[data-nameplate-style=none] .chat-nameplate{clip-path:none;background:transparent;border:0;padding:0;border-radius:0}
.chat-stage[data-name-color-mode=custom] .chat-name{color:var(--name-custom-color)!important;background:none!important;-webkit-text-fill-color:var(--name-custom-color)}.chat-stage[data-name-color-mode=user] .chat-name{color:var(--user-color)!important;background:none!important;-webkit-text-fill-color:var(--user-color)}.chat-stage[data-show-name=false] .chat-name{display:none}.chat-stage[data-avatar-shape=rounded] .chat-avatar{border-radius:8px}.chat-stage[data-avatar-shape=square] .chat-avatar{border-radius:0}

.chat-stage[data-theme=cyber] .chat-body{padding:calc(var(--bubble-padding,12px)*.6) var(--bubble-padding,12px)}