/* Act 1 — the room. Scene UI for act1-talk.js.
   Own stylesheet, like the effects layer: if the talk files are switched off,
   nothing in here has a node to style and the chapter is untouched.

   The design job here is one thing: make it read as PEOPLE IN A ROOM, not as a
   support widget. So — no chat bubbles facing each other, no avatars-in-circles
   floating over a white sheet. Lines are set like a script: who spoke, then
   what they said, tinted with that character's own colour down the left edge. */

.a1-scene {
    margin: 0 0 22px;
    border: 1px solid var(--a1-line);
    border-radius: 14px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(53, 224, 245, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, #0b1120 0%, #090e1a 100%);
    padding: 16px 16px 14px;
}

.a1-scene-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--a1-ink-3);
    margin-bottom: 11px;
}

/* ---- who is here ---- */

.a1-scene-cast {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px; margin-bottom: 15px;
}

.a1-who {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    text-align: left; font-family: inherit; color: inherit; cursor: pointer;
    background: #0c1220; border: 1px solid var(--a1-line);
    border-radius: 12px; padding: 9px 11px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.a1-who:hover { border-color: #2e3f63; }

/* The one you are talking to is lit; the other is in the room but not
   addressed. Two states, no explaining label needed. */
.a1-who.on {
    background: #101a2e;
    border-color: rgba(255, 207, 107, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 207, 107, 0.09);
}
.a1-who:not(.on) { opacity: 0.62; }
.a1-who:not(.on):hover { opacity: 0.86; }

.a1-who-face {
    position: relative; flex: none;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; overflow: hidden;
    font-size: 15px; line-height: 1;
    color: var(--tint, var(--a1-amber));
    background: color-mix(in srgb, var(--tint, #ffcf6b) 14%, #0b1120);
    border: 1px solid color-mix(in srgb, var(--tint, #ffcf6b) 34%, transparent);
}
/* A portrait covers the sigil when one exists; act1-talk.js drops the img on
   404, which uncovers the sigil again rather than leaving a broken frame. */
.a1-who-face img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.a1-who-txt { min-width: 0; display: grid; gap: 2px; }
.a1-who-txt b {
    font-size: 12.5px; font-weight: 700; color: var(--a1-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a1-who-txt i {
    font-style: normal; font-size: 11px; line-height: 1.35; color: var(--a1-ink-3);
}

/* ---- the lines ---- */

/* THE PANEL IS BOUNDED, AND THAT IS THE POINT. A chapter completes when
   something is POSTED, and the Start button lives below this. An unbounded
   scene grows the page by every exchange until the task is a scroll away — so
   the conversation scrolls inside its own frame and the chapter keeps its
   shape no matter how long they talk. */
.a1-scene-lines {
    display: grid; gap: 13px; margin-bottom: 13px;
    max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px;
    /* the top line fades rather than being guillotined by the frame edge */
    mask-image: linear-gradient(180deg, transparent 0, #000 14px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.a1-scene-lines::-webkit-scrollbar { width: 5px; }
.a1-scene-lines::-webkit-scrollbar-thumb { background: #23324f; border-radius: 99px; }

.a1-line {
    border-left: 2px solid color-mix(in srgb, var(--tint, #ffcf6b) 55%, transparent);
    padding-left: 12px;
}
.a1-line-who {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--tint, var(--a1-amber));
    margin-bottom: 5px;
}
.a1-line-said {
    font-size: 15px; line-height: 1.75; color: #d6dfef;
    white-space: pre-wrap; word-break: break-word;
}

/* What the player said sits quieter than what was said to them — they already
   know what they typed. */
.a1-line.you { border-left-color: #24324f; }
.a1-line.you .a1-line-who { color: var(--a1-ink-3); }
.a1-line.you .a1-line-said { color: var(--a1-ink-2); font-size: 14.5px; }

.a1-line.typing { cursor: pointer; }
.a1-line .a1-cursor {
    display: inline-block; width: 7px; height: 1.05em; margin-left: 1px;
    vertical-align: -2px; background: var(--tint, var(--a1-amber));
    opacity: 0.75; animation: a1TalkBlink 1s steps(1) infinite;
}
@keyframes a1TalkBlink { 50% { opacity: 0; } }

/* Someone taking a breath before answering. */
.a1-line.waiting .a1-line-said::after {
    content: '···'; letter-spacing: 0.2em;
    color: var(--a1-ink-3); animation: a1TalkWait 1.1s ease-in-out infinite;
}
@keyframes a1TalkWait { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }

/* ---- what you might say ---- */

.a1-scene-asks { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }

.a1-ask {
    font-family: inherit; cursor: pointer;
    font-size: 12.5px; line-height: 1.4;
    color: var(--a1-ink-2); background: #0d1424;
    border: 1px dashed #2a3a5c; border-radius: 99px;
    padding: 7px 13px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.a1-ask:hover { color: var(--a1-ink); border-color: var(--a1-cyan); background: #10192c; }

/* ---- saying it ---- */

.a1-scene-say { display: flex; gap: 8px; align-items: flex-end; }

.a1-scene-ta {
    flex: 1 1 auto; min-width: 0; resize: none;
    font-family: inherit; font-size: 14.5px; line-height: 1.6;
    color: var(--a1-ink); background: #070c17;
    border: 1px solid var(--a1-line); border-radius: 11px;
    padding: 11px 12px;
}
.a1-scene-ta::placeholder { color: #4d5a76; }
.a1-scene-ta:focus { outline: none; border-color: var(--a1-cyan); }
.a1-scene-ta:disabled { opacity: 0.6; }

.a1-scene-send {
    flex: none; font-family: inherit; font-weight: 700; font-size: 13.5px;
    cursor: pointer; color: #06202a;
    background: linear-gradient(180deg, #55e7f8, #23c8de);
    border: 0; border-radius: 11px; padding: 12px 16px;
}
.a1-scene-send:disabled { cursor: default; opacity: 0.55; }

.a1-scene-note {
    margin-top: 11px; font-size: 13px; line-height: 1.65;
    color: var(--a1-ink-3); font-style: italic;
}

/* ---- the bench ----

   The room is a panel you look at; this is a person standing next to the work.
   So: no card, no border box, no header — a face, a tinted rule down the left
   edge, and a line. It has to read as someone leaning over rather than as a
   help widget bolted to the bottom of a form, which is why the only chrome
   here is the same edge the script lines use. */

.a1-bench {
    margin: 22px 0 4px;
    padding: 13px 0 0 14px;
    border-left: 2px solid color-mix(in srgb, var(--tint, #ffcf6b) 50%, transparent);
}

.a1-bench-head { display: flex; gap: 11px; align-items: flex-start; }

.a1-bench-face {
    position: relative; flex: none;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; overflow: hidden;
    font-size: 13px; line-height: 1;
    color: var(--tint, var(--a1-amber));
    background: color-mix(in srgb, var(--tint, #ffcf6b) 14%, #0b1120);
    border: 1px solid color-mix(in srgb, var(--tint, #ffcf6b) 30%, transparent);
}
.a1-bench-face img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.a1-bench-said { min-width: 0; font-size: 14px; line-height: 1.62; }
.a1-bench-said b {
    display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: color-mix(in srgb, var(--tint, #ffcf6b) 78%, #ffffff);
    margin-bottom: 3px;
}
.a1-bench-said span { color: var(--a1-ink-2); }

/* Shut by default. Someone who has finally started doing the thing should not
   be looking at an empty box asking them to talk about it instead. */
.a1-bench-open {
    margin: 9px 0 0 41px;
    font-family: inherit; font-size: 12.5px; cursor: pointer;
    color: var(--a1-ink-3); background: none;
    border: 0; border-bottom: 1px dashed #2a3a5c;
    padding: 2px 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.a1-bench-open:hover { color: var(--a1-ink); border-color: var(--a1-cyan); }

.a1-bench .a1-scene-lines { margin: 10px 0 0; max-height: 260px; }
.a1-bench .a1-scene-lines:empty { display: none; }
.a1-bench .a1-scene-say { margin-top: 10px; }
.a1-bench .a1-scene-say.shut { display: none; }
.a1-bench .a1-scene-note { margin-top: 9px; }

@media (max-width: 560px) {
    .a1-scene { padding: 14px 13px 12px; }
    /* Two names side by side stop being names at 390px. */
    .a1-scene-cast { grid-template-columns: 1fr; }
    .a1-line-said { font-size: 14.5px; }
    .a1-scene-send { padding: 12px 14px; }
    .a1-bench { padding-left: 12px; }
    .a1-bench-open { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .a1-line .a1-cursor,
    .a1-line.waiting .a1-line-said::after { animation: none; }
}