/*
 * Multichat Comic Overlay v2 — Stage2D-faithful look + Slop Shop composer.
 *
 * Layout regions (all live inside #shmotime-multichat-overlay):
 *   .comic-frame                full-bleed comic panels (scene panel transparent)
 *   .multichat-hud              top-left: show name + objective + cast tiles
 *   .multichat-topbar           top-center: mute + volume + stop
 *   .multichat-close            top-right: X
 *   .caption-container          lower-center: typewriter dialogue bubble
 *   .multichat-composer         bottom: huge Slop Shop-style input
 *   .multichat-wordfly-layer    full-bleed: fly-word spawn surface
 *
 * Many selectors below (.comic-*, .caption-*, .cl-*) are unprefixed so the
 * Stage2D JS port lines up 1:1 with the original. They're scoped under
 * #shmotime-multichat-overlay to keep them from touching anything else.
 */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap');

/* =========================================== Root overlay =================== */

.shmotime-multichat {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: transparent;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
    user-select: none;
    /* Click-through everywhere on the overlay by default; only the three
     * interactive panels (HUD, topbar, composer) opt back in via
     * `pointer-events: auto` further down. Lets the user interact with the
     * underlying page through the transparent scene panel + comic frame.
     * Scrolling is still blocked by `document.body.style.overflow = 'hidden'`
     * set in JS openOverlay(). */
    pointer-events: none;
}
.multichat-hud      { pointer-events: auto; }
.multichat-topbar   { pointer-events: auto; }
.multichat-composer { pointer-events: auto; }
.multichat-composer.is-hidden { pointer-events: none; }
.shmotime-multichat[hidden] { display: none !important; }

/* Subtle vignette top + bottom to ground the UI without covering the scene panel. */
.shmotime-multichat::before,
.shmotime-multichat::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 110px;
    pointer-events: none;
    z-index: 1;
}
.shmotime-multichat::before { top: 0;    background: linear-gradient(180deg, rgba(8,8,12,0.72), rgba(8,8,12,0)); }
.shmotime-multichat::after  { bottom: 0; background: linear-gradient(0deg,   rgba(8,8,12,0.72), rgba(8,8,12,0)); }

.shmotime-multichat.is-sending .multichat-composer { opacity: 0.5; pointer-events: none; }

/* =========================================== Comic frame (Stage2D port) ===== */

#shmotime-multichat-overlay .comic-frame {
    position: absolute;
    inset: 0;
    z-index: 400;
    pointer-events: none;
}

#shmotime-multichat-overlay .comic-panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
}
/* The actor panel is the only one that ever paints a bg color. */
#shmotime-multichat-overlay .comic-panel--actor { background: #000; }

/* When SOME panel is speaking, dim the other actor panels' contents. */
#shmotime-multichat-overlay .comic-frame:has(.comic-panel.speaking) .comic-panel--actor:not(.speaking) > .comic-panel-bg,
#shmotime-multichat-overlay .comic-frame:has(.comic-panel.speaking) .comic-panel--actor:not(.speaking) > .comic-panel-actor {
    opacity: 0.6;
    filter: saturate(0.7);
}

/* Scene panel — transparent. The page shows through here. */
#shmotime-multichat-overlay .comic-panel--scene { background: transparent !important; }
#shmotime-multichat-overlay .comic-panel--scene > .comic-panel-bg {
    background: transparent !important;
    background-image: none !important;
}

#shmotime-multichat-overlay .comic-panel-bg,
#shmotime-multichat-overlay .comic-panel-actor {
    position: absolute;
    /* left/top/width/height set inline per panel via JS comicPositionLayerToBBox */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 5.5s ease-in-out, opacity .25s ease, filter .25s ease;
    will-change: transform;
    transform: translate(0, 0) scale(1);
}
#shmotime-multichat-overlay .comic-panel-actor {
    background-position: center center;
    background-size: contain;
}

#shmotime-multichat-overlay .comic-gutters {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 410;
}
#shmotime-multichat-overlay .comic-gutters line,
#shmotime-multichat-overlay .comic-gutters polyline {
    stroke: #000;
    stroke-width: 2.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
    fill: none;
}
#shmotime-multichat-overlay .comic-gutters rect.comic-frame-border {
    fill: none;
    stroke: #000;
    stroke-width: 3.2;
}

/* =========================================== Caption bubble (Stage2D port) == */

#shmotime-multichat-overlay .caption-container {
    position: absolute;
    left: 50%;
    bottom: 200px;
    transform: translateX(-50%);
    width: min(720px, 92vw);
    z-index: 425;
    pointer-events: none;
    opacity: 0;
    display: none;
}
#shmotime-multichat-overlay .caption-container.show {
    display: block;
    opacity: 1;
    animation: multichat-captionSlideIn 0.42s cubic-bezier(.2, 1.5, .4, 1) both;
}

#shmotime-multichat-overlay .caption-bubble {
    position: relative;
    background: #fffdf2;
    border: 4px solid #1a1a1a;
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 10px 0 #1a1a1a, 0 18px 40px rgba(0, 0, 0, 0.45);
    min-height: 90px;
    display: flex;
    align-items: center;
}
#shmotime-multichat-overlay .caption-body {
    flex: 1 1 auto;
    min-width: 0;
}
#shmotime-multichat-overlay .caption-actor-name {
    font-family: 'Comic Neue', system-ui, sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #d12d2d;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#shmotime-multichat-overlay .caption-actor-name:empty { display: none; }

#shmotime-multichat-overlay .caption-text {
    font-family: 'Bangers', system-ui, sans-serif;
    color: #1a1a1a;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.18;
    letter-spacing: 1.2px;
    text-shadow: none;
    max-height: calc(1.18em * 3);
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#shmotime-multichat-overlay .caption-text-inner {
    transition: transform 0.12s ease-out;
    will-change: transform;
}
#shmotime-multichat-overlay .caption-letter {
    display: inline-block;
    opacity: 0;
    font-family: 'Bangers', system-ui, sans-serif;
    animation: multichat-captionLetterIn 0.2s cubic-bezier(.2, 1.4, .4, 1) forwards;
    transform-origin: 50% 80%;
    will-change: transform, opacity;
}
#shmotime-multichat-overlay .caption-word {
    display: inline-block;
    white-space: nowrap;
    font-family: 'Bangers', system-ui, sans-serif;
}

@keyframes multichat-captionLetterIn {
    0%   { transform: translateY(8px)  scale(0.5);  opacity: 0; }
    60%  { transform: translateY(-2px) scale(1.15); opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
@keyframes multichat-captionSlideIn {
    0%   { transform: translate(-50%, 110%) scale(0.9);  opacity: 0; }
    70%  { transform: translate(-50%, -2%)  scale(1.02); opacity: 1; }
    100% { transform: translate(-50%, 0)    scale(1);    opacity: 1; }
}

/* Loading-state surface inside the bubble — shows "AI Thinking…" /
 * "Audio Synthesizing…" before any actor has spoken. Shares the bubble's
 * slide-in animation so the bubble doesn't reappear each time the text
 * changes — only the inner text content swaps in place. */
#shmotime-multichat-overlay .caption-loading-text {
    display: none;
    font-family: 'Bangers', system-ui, sans-serif;
    color: #1a1a1a;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.18;
    letter-spacing: 1.2px;
    text-align: center;
    padding: 0 8px;
}
#shmotime-multichat-overlay .caption-container.is-loading .caption-body {
    display: none;
}
#shmotime-multichat-overlay .caption-container.is-loading .caption-loading-text {
    display: block;
    animation: multichat-pulse 1.6s ease-in-out infinite;
}
@keyframes multichat-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

body[data-multichat-paused="true"] #shmotime-multichat-overlay .caption-letter {
    animation-play-state: paused;
}
body[data-multichat-paused="true"] #shmotime-multichat-overlay .caption-text-inner {
    transition: none;
}

/* =========================================== HUD (top-left) ================ */

.multichat-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: 320px;
    z-index: 420;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.multichat-hud-title {
    font-family: 'Bangers', 'Comic Neue', system-ui, sans-serif;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6);
    color: #fff;
}
.multichat-hud-objective {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.55);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
}
.multichat-hud-objective-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6ee7a3;
    font-size: 10px;
    font-weight: 600;
}
.multichat-hud-objective-text {
    color: #cfead8;
    text-shadow: 0 0 8px rgba(110, 231, 163, 0.5);
}
.multichat-hud-tiles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.multichat-hud-tile {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    background-color: rgba(0,0,0,0.4);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.multichat-hud-tile:hover { transform: scale(1.08); border-color: rgba(255,255,255,0.65); }
.multichat-hud-tile.is-active {
    border-color: #6ee7a3;
    box-shadow: 0 0 0 2px rgba(110, 231, 163, 0.35), 0 0 14px rgba(110, 231, 163, 0.55);
}

/* =========================================== Top-center controls =========== */

.multichat-topbar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 430;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(8, 8, 12, 0.78);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.multichat-mute {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background .15s ease;
}
.multichat-mute:hover { background: rgba(255,255,255,0.12); }
.multichat-mute::before { content: '🔊'; }
.multichat-topbar[data-muted="true"] .multichat-mute::before { content: '🔇'; }
.multichat-volume {
    width: 120px;
    height: 22px;
    accent-color: #1d9bf0;
    cursor: pointer;
}
.multichat-playpause {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, opacity .15s ease;
}
.multichat-playpause:hover { background: rgba(255,255,255,0.2); }
.multichat-playpause:disabled { opacity: 0.35; pointer-events: none; }
.multichat-playpause-icon { display: inline-block; }
.multichat-topbar[data-playing="true"]  .multichat-playpause-icon::before { content: '\23F8'; } /* ⏸ */
.multichat-topbar[data-playing="false"] .multichat-playpause-icon::before { content: '\25B6'; } /* ▶ */

/* =========================================== Close (inline in topbar) ====== */

.multichat-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.multichat-close:hover  { background: #d12d2d; }
.multichat-close:focus  { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================== Composer (Slop Shop) =========== */

.multichat-composer {
    position: absolute;
    left: 50%;
    bottom: 6vh;
    transform: translateX(-50%);
    width: min(1200px, 92vw);
    z-index: 440;
    background: rgba(8, 8, 12, 0.72);
    backdrop-filter: blur(8px);
    border: 4px solid #000;
    border-radius: 22px;
    padding: 18px 24px 14px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
    cursor: text;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.multichat-composer:focus-within {
    border-color: #ffd86b;
    box-shadow: 0 0 0 4px rgba(255, 216, 107, 0.45), 0 16px 36px rgba(0,0,0,0.55);
}

.multichat-composer-display {
    position: relative;
    min-height: 1.2em;
    font-family: 'Bangers', system-ui, sans-serif;
    font-size: clamp(36px, 5.6vw, 84px);
    letter-spacing: 2px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 4px 0 #000, 0 6px 14px rgba(0,0,0,0.55);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    text-align: center;
}
.multichat-composer.is-empty .multichat-composer-display::before {
    content: 'TYPE SOMETHING…';
    color: rgba(255,255,255,0.32);
    text-shadow: 0 4px 0 rgba(0,0,0,0.5);
}

/* Hide-during-sequence: composer fades down + out while the chat is playing.
 * Comes back when the queue empties or the user stops playback. */
.multichat-composer.is-hidden {
    opacity: 0;
    transform: translate(-50%, 24px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease-out;
}
.multichat-composer:not(.is-hidden) {
    transition: opacity .25s ease, transform .25s ease-out;
}

/* Per-letter pop animation. */
.cl-letter {
    display: inline-block;
    animation: multichat-letter-pop 220ms cubic-bezier(.2, 1.4, .4, 1) both;
    transform-origin: 50% 90%;
    will-change: transform, opacity;
}
.cl-letter.is-space { display: inline-block; width: 0.4em; }

@keyframes multichat-letter-pop {
    0%   { opacity: 0; transform: translateY(-30%) rotate(-15deg) scale(0.2); }
    60%  { opacity: 1; transform: translateY(0)    rotate(0)      scale(1.25); }
    100% { opacity: 1; transform: translateY(0)    rotate(0)      scale(1);    }
}

.cl-caret {
    display: inline-block;
    width: 4px;
    height: 0.95em;
    vertical-align: middle;
    background: #fff;
    box-shadow: 0 2px 0 #000;
    animation: multichat-caret-blink 0.85s steps(2) infinite;
    margin-left: 0.05em;
}
.multichat-composer.is-empty .cl-caret { opacity: 0.6; }
@keyframes multichat-caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Hidden form input — invisible but receives all keystrokes. */
.multichat-composer-form {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}
.multichat-composer-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 18px 24px;
    margin: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    outline: none;
    font-family: inherit;
    font-size: clamp(36px, 5.6vw, 84px);
    letter-spacing: 2px;
    z-index: 2;
}
.multichat-composer-input::selection { background: rgba(255,216,107,0.35); color: transparent; }

.multichat-composer-hint {
    margin-top: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.05em;
    text-align: center;
}
.multichat-composer.is-disabled {
    opacity: 0.55;
    filter: saturate(0.7);
    pointer-events: none;
}
.multichat-composer.is-disabled .multichat-composer-display { color: rgba(255,255,255,0.6); }

/* =========================================== Fly-word layer ================ */

.multichat-wordfly-layer {
    position: absolute;
    inset: 0;
    z-index: 445;
    pointer-events: none;
    overflow: hidden;
}
.multichat-fly-word {
    position: absolute;
    font-family: 'Bangers', system-ui, sans-serif;
    font-size: clamp(34px, 4vw, 60px);
    color: #ffd86b;
    text-shadow: 0 4px 0 #000, 0 8px 14px rgba(0,0,0,0.55);
    animation: multichat-fly-word 1100ms ease-out forwards;
    pointer-events: none;
    white-space: nowrap;
}
@keyframes multichat-fly-word {
    0%   { transform: translate(0, 0) rotate(0) scale(1);                                                   opacity: 1; }
    20%  { transform: translate(calc(var(--drift, 0px) * 0.3), -40px) rotate(calc(var(--rot, 0deg) * 0.3)) scale(1.15); opacity: 1; }
    100% { transform: translate(var(--drift, 0px), -260px) rotate(var(--rot, 0deg)) scale(0.8);             opacity: 0; }
}

/* =========================================== Status line =================== */

.multichat-status {
    position: absolute;
    bottom: calc(6vh + 130px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 426;
    font-size: 13px;
    color: #ffd;
    background: rgba(0,0,0,0.55);
    padding: 6px 14px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.multichat-status.is-visible { opacity: 1; }

/* =========================================== Mobile ======================= */

@media (max-width: 768px) {
    .multichat-hud { max-width: calc(100vw - 96px); }
    .multichat-hud-title { font-size: 22px; }
    .multichat-volume { width: 80px; }
    .multichat-composer { padding: 12px 16px 10px; }
    .multichat-composer-display { font-size: clamp(28px, 7vw, 48px); }
    .multichat-composer-input    { font-size: clamp(28px, 7vw, 48px); padding: 12px 16px; }
    #shmotime-multichat-overlay .caption-container { bottom: 180px; }
}