/* ============================================================================
   chat.css — the live.zenshinzo.com chat widget, extracted from index.html
   2026-09-30, for the POP-OUT chat. Loaded by BOTH the main page (sidebar) and
   /popout.html (standalone window), so the chat exists once, not twice.
   Rules below are byte-identical to what index.html carried inline; only the
   .popbtn / .popout-* rules at the end are new.
   ========================================================================== */
:root{
  --bg:#0a0a0b; --panel:#131316; --ink:#f4f4f5; --muted:#8a8a93;
  --line:#26262b; --accent:#e8412e; --live:#2ec26a; --chatw:360px;
}
  /* chat */
  .chat{
    flex:0 0 var(--chatw); width:var(--chatw); display:flex; flex-direction:column;
    border-left:1px solid var(--line); background:var(--panel); min-height:0;
  }
  .chat-head{
    display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem;
    border-bottom:1px solid var(--line); font-weight:600; font-size:.9rem; flex:0 0 auto;
  }
  .chat-head .vc{margin-left:auto; color:var(--muted); font-weight:500; font-size:.78rem}
  .msgs{flex:1; overflow-y:auto; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.28rem}
  .m{font-size:.9rem; line-height:1.4; word-wrap:break-word; overflow-wrap:anywhere}
  .m .who{font-weight:700; margin-right:.4rem}
  .m.role-admin .who{color:var(--accent)}
  .m.role-moderator .who{color:var(--live)}
  .m.role-user .who{color:#c9c9d1}
  /* legacy classes (pre-Phase-8 rows) */
  .m.role-owner .who{color:var(--accent)}
  .m.role-mod .who{color:var(--live)}
  .m.role-viewer .who{color:#c9c9d1}
  .m.mirror .who{color:#c9c9d1}
  /* ---- 2026-09-30, Zen: name the platform by colour ----
     "if a message comes from kick, make their name Kick green, if the user
     comes from Twitch, make their name Twitch purple".
     Exactly the two brand colours already used by the inline badge SVGs above,
     so the badge and the name agree instead of being two different greens.
     Same specificity as .m.mirror .who (0,2,1) and declared AFTER it, so these
     win on source order — do not move them above that rule. */
  .m.src-kick   .who{color:#53fc18}
  .m.src-twitch .who{color:#9146ff}
  .badge{display:inline-flex;vertical-align:-2px;margin-right:.28rem}
  .badge svg{display:block}
  .who{cursor:default}
  .m.canmod .who{cursor:pointer;text-decoration:underline dotted transparent}
  .m.canmod .who:hover{text-decoration-color:currentColor}
  .modmenu{position:fixed;z-index:50;background:var(--panel,#131316);border:1px solid var(--line,#26262b);
    border-radius:9px;padding:.3rem;display:flex;flex-wrap:wrap;gap:.25rem;max-width:15rem;box-shadow:0 6px 24px rgba(0,0,0,.5)}
  .modmenu button{font-size:.72rem;padding:.25rem .45rem;background:#26262b;color:var(--ink,#f4f4f5);
    border:0;border-radius:6px;cursor:pointer}
  .modmenu button.ban{background:var(--accent,#e8412e)}
  .modmenu .lbl{width:100%;font-size:.66rem;color:var(--muted,#8a8a93);padding:.1rem .2rem 0}
  .m .del{color:var(--muted); cursor:pointer; margin-left:.35rem; font-size:.78rem; opacity:.5}
  .m .del:hover{opacity:1; color:var(--accent)}
  .m.sys{color:var(--muted); font-style:italic; font-size:.82rem}
  .composer{border-top:1px solid var(--line); padding:.6rem .7rem; flex:0 0 auto}
  .composer form{display:flex; gap:.4rem}
  .composer input[type=text]{
    flex:1; padding:.55rem .7rem; background:#0f0f12; border:1px solid var(--line);
    border-radius:9px; color:var(--ink); font-size:.9rem;
  }
  .btn{background:var(--accent); color:#fff; border:0; border-radius:9px; padding:.55rem .9rem; font-weight:600; cursor:pointer; font-size:.9rem}
  .btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
  .signin-row{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted)}
  .link{color:var(--ink); background:none; border:0; border-bottom:1px solid var(--accent); cursor:pointer; padding:0 0 1px; font-size:.85rem}
  .me-row{display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); margin-bottom:.45rem}
  .me-row .u{color:var(--ink); font-weight:600}

  /* modal */
  .modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:1rem; z-index:50}
  .modal.show{display:flex}
  .modal .box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.4rem; width:100%; max-width:22rem}
  .modal h2{margin:.1rem 0 .8rem; font-size:1.1rem}
  .modal input{width:100%; margin-bottom:.6rem; padding:.6rem .75rem; background:#0f0f12; border:1px solid var(--line); border-radius:9px; color:var(--ink); font-size:.95rem}
  .modal .row{display:flex; gap:.5rem; align-items:center; margin-top:.3rem}
  .modal .msg{font-size:.82rem; margin:.5rem 0 0; min-height:1.1em}
  .modal .msg.err{color:var(--accent)} .modal .msg.ok{color:var(--live)}
  .modal .alt{margin-top:.8rem; font-size:.82rem; color:var(--muted); text-align:center}

/* ---- clickable links in chat, 2026-09-30 ----
   Underlined rather than just recoloured: in a chat where the NAME is already
   carrying colour meaning (kick green / twitch purple), colour alone would be
   one more thing competing for the same signal. overflow-wrap so a long url
   cannot push the chat column wide. */
.chatlink{color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:var(--accent); overflow-wrap:anywhere}
.chatlink:hover{color:var(--accent)}

/* ---- Kick emotes, 2026-09-30 ----
   Height-capped rather than width-capped: emotes vary wildly in aspect ratio
   and a fixed width would squash the tall ones. max-width is a guard against a
   pathologically wide one blowing out the column. The chat line-height is 1.4
   on a .9rem font, so 28px sits a little proud of the text — deliberate, it is
   what makes them read as emotes rather than punctuation. */
.emote{
  height:28px; width:auto; max-width:120px; vertical-align:-8px;
  margin:0 1px; display:inline-block;
}
/* an emote Kick no longer serves degrades to its name, never a broken icon */
.emote-dead{color:var(--muted); font-size:.82rem}

/* ---- new 2026-09-30: pop-out affordance + standalone window layout ---- */
.chat-head .popbtn{
  /* measured at 21x20 with the first padding values — too small to hit, and the
     chat goes full-width on a phone where this is the only control in the head.
     Sized to a deliberate 30x30 box instead of letting the icon decide. */
  margin-left:.4rem; background:none; border:0; padding:0; cursor:pointer;
  color:var(--muted); line-height:0; border-radius:6px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.chat-head .popbtn:hover{color:var(--ink); background:#26262b}
.chat-head .popbtn svg{display:block}
/* The standalone window: chat fills the viewport, no sidebar border.
   NOTE the height chain. .msgs scrolls internally only if every ancestor has a
   DEFINITE height — with min-height:100dvh the body just grew to fit all the
   messages (measured 2465px tall in an 860px window) and the whole DOCUMENT
   scrolled instead, which loses the pinned-to-bottom behaviour. height +
   overflow:hidden is what makes the inner scroller work. */
/* plain, not :has() — index.html already declares this itself, so setting it
   unconditionally costs nothing there and does not depend on :has() support. */
html,body{height:100%}
body.popout{margin:0; background:var(--panel); display:flex; flex-direction:column;
  height:100dvh; max-height:100dvh; overflow:hidden;
  /* index.html carried colour + the font stack in its own body{} rule, which is
     page-level and correctly did NOT move into this shared file — so the popout
     had to declare them itself. Without these the message bodies inherit the
     browser default: near-black text on a near-black panel, in a serif face. */
  color:var(--ink);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
body.popout .chat{flex:1 1 auto; width:100%; border-left:0; min-height:0}
body.popout .chat-head .back{margin-left:auto; font-size:.76rem}