/* ============================================================
   BASE LAYOUT — slanted neon chat. Structure only; paint in themes/.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{background:transparent!important;overflow:hidden;width:100%;height:100%}
body{min-height:100vh;display:flex;padding:48px;font-family:var(--font,'Rajdhani',sans-serif)}
body.align-top{align-items:flex-start}
body.align-bottom{align-items:flex-end}

.stage{position:relative;transform:scale(var(--scale,1));transform-origin:bottom left;width:var(--w,440px)}
body.align-top .stage{transform-origin:top left}
/* window frame is only painted by themes that want it (e.g. Y2K Win98); hidden chrome by default */
.titlebar,.menubar{display:none}
/* straight mode — cancel any theme lean/tilt */
.stage.straight .win{transform:none!important}

/* the message list — NO overflow clip (skewed boxes + neon glow overhang the edges);
   message count is bounded by the JS MAX trim instead. padding gives the glow room. */
.list{display:flex;flex-direction:column;gap:var(--gap,12px);justify-content:flex-end;
  padding:10px 26px;min-height:40px}
/* horizontal layout = a wrapping row of fixed-width cards along the bottom */
.stage.horizontal{width:auto;max-width:1820px}
.stage.horizontal .list{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--gap,14px)}
.stage.horizontal .msg{width:300px}

/* one chat message — a SLANTED neon box */
.msg{position:relative;padding:10px 16px;border-radius:8px;
  transform:skewX(var(--skew,-9deg));animation:msgin .34s cubic-bezier(.2,.9,.25,1) both;will-change:transform,opacity}
.msg>*{transform:skewX(calc(var(--skew,-9deg) * -1))}   /* un-skew content so text stays straight */
@keyframes msgin{from{opacity:0;transform:skewX(var(--skew,-9deg)) translateX(-26px)}to{opacity:1;transform:skewX(var(--skew,-9deg)) translateX(0)}}
.msg.out{animation:msgout .4s ease forwards}
@keyframes msgout{to{opacity:0;transform:skewX(var(--skew,-9deg)) translateX(16px)}}

.msg .head{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.msg .badge{width:20px;height:20px;flex-shrink:0;image-rendering:pixelated}
.msg .name{font-size:calc(var(--fs,21px) * .92);font-weight:700;white-space:nowrap;line-height:1.1;letter-spacing:.3px}
.msg .dot{margin-left:auto;display:flex;gap:3px}
.msg .dot i{width:5px;height:5px;border-radius:50%;display:inline-block;opacity:.5}
.msg .txt{font-size:var(--fs,21px);line-height:1.18;word-break:break-word}
.msg .txt .emote{height:calc(var(--fs,21px) * 1.2);vertical-align:middle;margin:0 1px}

/* alert messages (follower / sub / raid / bits / tip) */
.msg.alert .head{margin-bottom:4px}
.msg.alert .name{text-transform:uppercase;letter-spacing:1px}
.msg.alert .ico{font-size:calc(var(--fs,21px) * 1.05)}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}