/* One renderer for the native OBS canvas and the fitted editor preview. */
.chat-shell[data-chat-style] .chat-platform-badge{flex:none;padding:3px 5px;border:1px solid currentColor;border-radius:4px;font:600 8px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;background:#ffffff08;opacity:.9}
.chat-platform-badge[data-platform="youtube"]{color:#ff536d}.chat-platform-badge[data-platform="kick"]{color:#8dff65}.chat-platform-badge[data-platform="tiktok"]{color:#25f4ee}
.chat-shell[data-show-platforms="false"] .chat-platform-badge{display:none!important}
.chat-shell[data-chat-style]{padding:12px;gap:0;color:var(--chat-text);font-family:var(--chat-font);font-size:var(--chat-font-size);font-weight:var(--chat-weight)}
.chat-shell[data-chat-style] .chat-header{min-height:46px;height:auto;gap:9px;padding:13px 16px;background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff1c;border-radius:var(--chat-radius) var(--chat-radius) 0 0;box-shadow:none;letter-spacing:.1em;color:var(--chat-name)}
.chat-shell[data-chat-style] .chat-header strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;flex:1}
.chat-shell[data-chat-style] .chat-header #chatStatus{margin:0;white-space:nowrap;font-size:8px;color:var(--chat-text);opacity:.6}
.chat-shell[data-chat-style] .live-dot{flex:0 0 7px;background:var(--chat-accent);box-shadow:0 0 12px var(--chat-accent)}
.chat-shell[data-chat-style] .messages-wrap{min-height:0;flex:1;background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff1c;border-top:0;border-radius:0 0 var(--chat-radius) var(--chat-radius);box-shadow:none;backdrop-filter:none}
.chat-shell[data-chat-style] .chat-messages{height:100%;padding:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--chat-gap)}
.chat-shell[data-chat-style] .chat-message{flex:0 0 auto;margin:0;display:flex;align-items:flex-start;gap:10px;padding:var(--chat-padding);border:0;border-radius:var(--chat-radius);background:none;animation:none}
.chat-shell[data-chat-style] .chat-message:first-child{margin-top:auto}
.chat-shell[data-chat-style] .chat-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:linear-gradient(135deg,#ffffff22,#ffffff08);box-shadow:inset 0 1px #ffffff15;color:var(--chat-name);font-size:12px}
.chat-shell[data-chat-style] .chat-content{min-width:0;flex:1}
.chat-shell[data-chat-style] .chat-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 6px;min-width:0}
.chat-shell[data-chat-style] .chat-meta strong{flex:1 1 80px;min-width:0;max-width:100%;font-size:var(--chat-font-size);line-height:1.3;font-weight:750;color:var(--chat-name);text-shadow:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-shell[data-chat-style] .chat-content p{margin:5px 0 0;color:var(--chat-text);font-size:var(--chat-font-size);font-weight:var(--chat-weight);line-height:1.5;overflow-wrap:anywhere;text-shadow:0 1px 3px #0003}
.chat-shell[data-chat-style] .role-badge{flex:0 0 auto;padding:3px 5px;border-radius:4px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:7px;line-height:1.2;letter-spacing:.06em}
.chat-shell[data-chat-style] .role-badge.owner{background:#ffffff12;color:var(--chat-accent)}
.chat-shell[data-chat-style] .role-badge.mod{background:#ffffff12;color:#c0c5cc}
.chat-shell[data-chat-style] .role-badge.member{background:#ffffff12;color:#d1d5da}
.chat-shell[data-chat-style] .super-amount{min-width:0;max-width:100%;margin-left:auto;font-size:calc(var(--chat-font-size) - 2px);line-height:1.3;font-weight:800;color:var(--chat-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-shell[data-chat-style] .chat-time{font-family:ui-sans-serif,system-ui,sans-serif;font-size:8px;color:var(--chat-text);opacity:.5}
.chat-shell[data-chat-style] .chat-empty{inset:0;color:var(--chat-text);gap:5px}
.chat-shell[data-chat-style] .chat-empty strong{color:var(--chat-name);font-size:14px}
.chat-shell[data-chat-style] .chat-empty span{font-size:11px;opacity:.6}
.chat-shell[data-show-header="false"] .chat-header,.chat-shell[data-show-avatars="false"] .chat-avatar,.chat-shell[data-show-badges="false"] .role-badge,.chat-shell[data-show-time="false"] .chat-time{display:none!important}
.chat-shell[data-show-header="false"] .messages-wrap{border-radius:var(--chat-radius);border-top:1px solid #ffffff1c}
.chat-shell[data-highlight-paid="true"] .chat-message.superchat{border:1px solid var(--chat-accent);background:rgba(var(--chat-surface-rgb),var(--chat-opacity));box-shadow:inset 3px 0 var(--chat-accent)}
/* Studio: a continuous panel with a small accent rail. */
.chat-shell[data-chat-style="studio"] .chat-header{border-top:3px solid var(--chat-accent)}
.chat-shell[data-chat-style="studio"] .chat-message+.chat-message{border-top:1px solid #ffffff0c}
/* Glass: independent, translucent cards. */
.chat-shell:is([data-chat-style="glass"],[data-chat-style="bubble"],[data-chat-style="editorial"],[data-chat-style="split"],[data-chat-style="neon"],[data-chat-style="minimal"],[data-chat-style="cards"]){gap:10px}
.chat-shell:is([data-chat-style="glass"],[data-chat-style="bubble"],[data-chat-style="editorial"],[data-chat-style="split"],[data-chat-style="neon"],[data-chat-style="minimal"],[data-chat-style="cards"]) .messages-wrap{background:transparent;border:0;border-radius:0;overflow:hidden}
.chat-shell:is([data-chat-style="glass"],[data-chat-style="bubble"],[data-chat-style="editorial"],[data-chat-style="split"],[data-chat-style="neon"],[data-chat-style="minimal"],[data-chat-style="cards"]) .chat-messages{padding:2px}
.chat-shell:is([data-chat-style="glass"],[data-chat-style="bubble"],[data-chat-style="split"],[data-chat-style="neon"],[data-chat-style="cards"]) .chat-header{border-radius:var(--chat-radius);border-top:2px solid var(--chat-accent)}
.chat-shell[data-chat-style="glass"] .chat-message{background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff28;box-shadow:inset 0 1px #ffffff0d,0 6px 18px #0002;backdrop-filter:blur(10px)}
/* Bubble: avatars outside the conversation surface. */
.chat-shell[data-chat-style="bubble"] .chat-message{padding:0;background:none;border:0;box-shadow:none}
.chat-shell[data-chat-style="bubble"] .chat-avatar{margin-top:8px}
.chat-shell[data-chat-style="bubble"] .chat-content{padding:var(--chat-padding);border-radius:var(--chat-radius) var(--chat-radius) var(--chat-radius) 5px;background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff16}
.chat-shell[data-chat-style="bubble"][data-highlight-paid="true"] .chat-message.superchat{background:none;border:0;box-shadow:none}
.chat-shell[data-chat-style="bubble"][data-highlight-paid="true"] .superchat .chat-content{border-color:var(--chat-accent);box-shadow:inset 3px 0 var(--chat-accent)}
/* Editorial: typography, generous rhythm and thin dividers. */
.chat-shell[data-chat-style="editorial"] .chat-header{padding:12px 0;border:0;border-bottom:2px solid var(--chat-accent);border-radius:0;background:transparent}
.chat-shell[data-chat-style="editorial"] .chat-message{border-bottom:1px solid #ffffff24;border-radius:var(--chat-radius);background:rgba(var(--chat-surface-rgb),var(--chat-opacity))}
.chat-shell[data-chat-style="editorial"] .chat-meta strong{color:var(--chat-name);text-transform:uppercase;font-size:calc(var(--chat-font-size) - 2px);letter-spacing:.08em}
/* Split: separate name and message columns. */
.chat-shell[data-chat-style="split"] .chat-message{background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff14}
.chat-shell[data-chat-style="split"] .chat-content{display:grid;grid-template-columns:minmax(60px,29%) minmax(0,1fr);gap:12px}
.chat-shell[data-chat-style="split"] .chat-meta{align-content:flex-start;align-items:flex-start;border-right:2px solid var(--chat-accent);padding-right:10px}
.chat-shell[data-chat-style="split"] .chat-meta strong{flex-basis:100%;font-size:calc(var(--chat-font-size) - 2px)}
.chat-shell[data-chat-style="split"] .chat-content p{margin:0}
.chat-shell[data-chat-style="split"] .super-amount{margin-left:0;font-size:11px}
/* Neon: a luminous frame without a solid full-canvas background. */
.chat-shell[data-chat-style="neon"] .chat-header{border-color:var(--chat-accent);box-shadow:inset 0 0 16px #ffffff04}
.chat-shell[data-chat-style="neon"] .chat-message{background:linear-gradient(120deg,#ffffff08,transparent),rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid var(--chat-accent);box-shadow:inset 3px 0 var(--chat-accent),0 0 12px #0003}
.chat-shell[data-chat-style="neon"] .chat-avatar{border-radius:9px;border:1px solid var(--chat-accent)}
/* Minimal: a fully open canvas and subtle text shadow. */
.chat-shell[data-chat-style="minimal"] .chat-header{border:0;border-radius:var(--chat-radius);background:transparent;padding:10px var(--chat-padding)}
.chat-shell[data-chat-style="minimal"] .chat-message{background:transparent;border:0}
.chat-shell[data-chat-style="minimal"] .chat-meta strong{color:var(--chat-name);text-shadow:0 1px 3px #0008}
/* Cards: avatar + author header, message across the full card. */
.chat-shell[data-chat-style="cards"] .chat-message{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;background:rgba(var(--chat-surface-rgb),var(--chat-opacity));border:1px solid #ffffff20}
.chat-shell[data-chat-style="cards"] .chat-avatar{width:28px;height:28px;flex-basis:28px}
.chat-shell[data-chat-style="cards"] .chat-content{display:contents}
.chat-shell[data-chat-style="cards"] .chat-meta{grid-column:2}
.chat-shell[data-chat-style="cards"] .chat-content p{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid #ffffff12}
.chat-shell[data-chat-style="cards"][data-show-avatars="false"] .chat-message{grid-template-columns:minmax(0,1fr)}
.chat-shell[data-chat-style="cards"][data-show-avatars="false"] .chat-meta{grid-column:1}
.chat-shell[data-animation="slide"] .chat-message.new{animation:chatSlide var(--chat-speed) cubic-bezier(.2,.8,.2,1) both}
.chat-shell[data-animation="fade"] .chat-message.new{animation:chatFade var(--chat-speed) ease both}
.chat-shell[data-animation="pop"] .chat-message.new{animation:chatPop var(--chat-speed) cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom left}
.chat-shell[data-animation="rise"] .chat-message.new{animation:chatRise var(--chat-speed) cubic-bezier(.2,.8,.2,1) both}
@keyframes chatSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes chatFade{from{opacity:0}to{opacity:1}}
@keyframes chatPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes chatRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chat-shell[data-chat-style] .chat-message.new{animation:none!important}}