/* Chat characters ("Portrait" skin) -- see web/static/js/portrait.js.
   Geometry is the approved mockup's (docs/mockups/portrait_skin_mockup.html),
   namespaced pt-* so nothing here can match an existing chat/player rule. */
#portrait-stage {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  pointer-events: none; overflow: hidden; z-index: 6;
}
/* Any layer over the Twitch iframe pauses it; portrait.js also refuses to spawn. */
body.twitch-safe-surface #portrait-stage,
body.hide-player #portrait-stage { display: none; }

#portrait-stage .pt-sp { position: absolute; left: 0; bottom: 6px; width: 90px; height: 124px; will-change: transform; }
#portrait-stage .pt-char { position: absolute; left: 0; bottom: 0; width: 90px; height: 124px; transform-origin: 45px 124px; }
#portrait-stage .pt-body { position: absolute; bottom: 0; left: 15px; width: 60px; height: 62px; border-radius: 26px 26px 12px 12px; border: 3px solid #111; box-sizing: border-box; }
#portrait-stage .pt-arm { position: absolute; top: 70px; width: 15px; height: 40px; border: 3px solid #111; border-radius: 8px; transform-origin: 7px 5px; box-sizing: border-box; }
#portrait-stage .pt-arm.pt-l { left: -9px; }
#portrait-stage .pt-arm.pt-r { left: 51px; }
#portrait-stage .pt-head { position: absolute; bottom: 55px; left: 12px; width: 66px; height: 62px; border-radius: 50%; border: 3px solid #111; transform-origin: 33px 60px; box-sizing: border-box; }
#portrait-stage .pt-eye { position: absolute; top: 21px; width: 8px; height: 11px; border-radius: 50%; background: #111; }
#portrait-stage .pt-eye.pt-l { left: 15px; }
#portrait-stage .pt-eye.pt-r { left: 33px; }
#portrait-stage .pt-mouth { position: absolute; top: 37px; left: 21px; width: 14px; height: 3px; border-radius: 3px; background: #111; }
#portrait-stage .pt-sp.pt-talk .pt-mouth { height: 9px; border-radius: 0 0 8px 8px; }
#portrait-stage .pt-hat { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
/* 3D layer: one canvas behind the bubbles; the 2D body stays in the DOM as the
   fallback and is hidden once a speaker has a 3D guy. */
#portrait-stage .pt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#portrait-stage .pt-sp.pt-3d .pt-char { visibility: hidden; }
#portrait-stage .pt-hat3 { position: absolute; transform-origin: 50% 100%; z-index: 5; }

#portrait-stage .pt-bubble {
  position: absolute; bottom: 132px; left: 34px; min-width: 110px; max-width: 260px; width: max-content;
  background: #fff; color: #141414; border: 3px solid #111; border-radius: 14px;
  padding: 5px 11px 7px; font-weight: 600; font-size: 16px; line-height: 1.2;
  transform-origin: 10px 100%; overflow-wrap: anywhere; text-shadow: none;
}
#portrait-stage .pt-bubble .pt-nm { display: block; font-weight: 700; font-size: 11px; line-height: 1.3; margin-bottom: 1px; }
#portrait-stage .pt-bubble .pt-tx img { max-height: 48px; max-width: 200px; vertical-align: middle; }
#portrait-stage .pt-bubble::after { content: ""; position: absolute; left: 14px; bottom: -12px; border: 9px solid transparent; border-top: 12px solid #111; border-bottom: 0; }
#portrait-stage .pt-bubble::before { content: ""; position: absolute; left: 17px; bottom: -7px; border: 6px solid transparent; border-top: 8px solid #fff; border-bottom: 0; z-index: 1; }
#portrait-stage .pt-sp.pt-small .pt-bubble { font-size: 12px; max-width: 170px; padding: 3px 8px 5px; }
#portrait-stage .pt-sp.pt-small .pt-bubble .pt-tx img { max-height: 32px; }
#portrait-stage .pt-sp.pt-hidebubble .pt-bubble { display: none; }
#portrait-stage .pt-sp.pt-flip .pt-bubble { left: auto; right: 34px; }
#portrait-stage .pt-sp.pt-flip .pt-bubble::after { left: auto; right: 14px; }
#portrait-stage .pt-sp.pt-flip .pt-bubble::before { left: auto; right: 17px; }
#portrait-stage .pt-count { font-weight: 700; font-size: 12px; background: #111; color: #fff; border-radius: 2px; padding: 0 5px; margin-left: 6px; vertical-align: 2px; }