:root {color-scheme: dark;font-family: Inter, "Segoe UI", Arial,sans-serif}
*,*::before,*::after {box-sizing:border-box}
html,body {margin:0;width:100%;height:100%;overflow:hidden;background:transparent}
#overlay {width:100%;height:100%;min-height:240px;position:relative;display:flex;flex-direction:column;
 border:none;border-radius:0;color:#fff;background:transparent;
 box-shadow:none;padding:0 14px 10px;overflow:hidden}
#overlay::before {content:none;display:none}
.header {position:relative;display:flex;align-items:center;gap:8px;min-height:122px;padding-left:92px}
.mascot {position:absolute;top:8px;left:-8px;width:113px;height:105px;object-fit:cover;object-position:center;
 filter:drop-shadow(0 4px 10px #ed36a17a);animation:float 5s ease-in-out infinite}
.headcopy strong {display:block;font-weight:1000;font-size:39px;letter-spacing:-2px;line-height:1.05;
 text-shadow:0 0 13px rgba(255,43,191,.6)}
.headcopy strong span {color:#9eff58}
.headcopy small {font-size:12px;font-weight:900;letter-spacing:3px;color:#ffddfc}
.headcopy small i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8eff6a;box-shadow:0 0 9px #90ff56;animation:pulse 2s infinite}
.indicator{margin-left:auto;display:flex;gap:4px;align-self:flex-end;padding-bottom:25px}
.indicator span {height:6px;width:6px;border-radius:50%;background:#dd79ff;animation:pulse 1.6s infinite}
.indicator span:nth-child(2){animation-delay:.25s}.indicator span:nth-child(3){animation-delay:.5s}
.divider {height:0;flex:0 0 0;display:none}
.message-box {min-height:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:11px;overflow:hidden;padding:15px 2px 13px}
.empty {font-size:17px;line-height:1.55;opacity:.78;padding:15px;text-align:center}
.msg {position:relative;background:rgba(26,12,42,.79);backdrop-filter:blur(5px);border:1px solid rgba(213,127,251,.23);
 border-left:4px solid #9e5afa;border-radius:12px;padding:10px 12px 10px;
 box-shadow:0 2px 8px #05050b50;flex-shrink:0;min-width:0;animation:appear .35s ease-out}
.msg.youtube{border-left-color:#ff4666}
.username{display:flex;gap:8px;align-items:baseline;min-width:0;margin-bottom:3px}
.platform {font-size:9px;letter-spacing:.5px;font-weight:900;padding:3px 6px;border-radius:5px;color:#fff;flex-shrink:0;background:#8746d6}
.youtube .platform{background:#d72b50}
.user {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:850;color:#d8b5ff}
.youtube .user{color:#ffabb5}
.msgtext{overflow-wrap:anywhere;font-size:18px;line-height:1.27;font-weight:550;white-space:pre-wrap}
.footer {flex:0 0 35px;display:flex;gap:12px;align-items:center;border-top:none;
 font-size:10px;font-weight:800;letter-spacing:.7px;white-space:nowrap}
.footer > span {display:flex;gap:4px;align-items:center}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%}.dot.t{background:#9c64ff}.dot.y{background:#ff4e62}
.tilda-label{margin-left:auto;font-size:12px;font-style:italic;color:#ff8cde;letter-spacing:0}
.tilda-label span{color:#a4ff66}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes glide{0%,100%{left:-100%}45%,55%{left:140%}}
@keyframes pulse{0%,100%{opacity:.35;box-shadow:0 0 2px currentColor}50%{opacity:1;box-shadow:0 0 12px currentColor}}
@keyframes appear{from{opacity:0;transform:translateY(13px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:350px){.headcopy strong{font-size:30px}.header{padding-left:78px}.mascot{width:95px}.msgtext{font-size:15px}.footer{gap:5px}}

/* Kai87 OBS transparent v1.1: only these small islands have a backdrop.
   The full 430x660 browser-source rectangle is alpha-transparent. */
.header { filter:drop-shadow(0 2px 3px rgba(10,4,18,.88)); }
.headcopy {padding:5px 12px 7px 9px;border-radius:12px;
 background:linear-gradient(90deg,rgba(22,9,38,.65),rgba(16,7,27,.13));}
.message-box {isolation:isolate;}
.footer{filter:drop-shadow(0px 2px 3px #140921);}