/* ── Story area ── */
.story-area {
    position: relative;
    grid-area: main;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Sits at the header/feed boundary, in fixed screen position — a sibling
   overlay against .story-area (which never scrolls), NOT a descendant of the
   scrolling .story-feed, so it stays put over the text regardless of scroll
   position instead of scrolling away with the content beneath it. Height
   matches .scene-header (25vh desktop, 18vh mobile — see media query below),
   toggled together with the header itself in scene.js's renderScene(). */
#sceneFeedFade {
    position: absolute;
    left: 0; right: 0;
    top: 25vh;
    height: 48px;
    /* .scene-header's own fade ends at TRUE 100% opacity var(--bg) exactly at
       this element's top edge — this has to start at that same full opacity,
       not some weaker one, or there's a real opacity jump at the seam (that
       was the actual bug, not a contrast/perception issue — proven by red,
       which also started at 100% opacity and had no such jump). Mirrors the
       bottom fade exactly, just upside down: solid at the seam, to transparent. */
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 2;
    display: none;
}
/* Reads further down the page on cream than on navy — same restraint as the
   scene bg blur. */
body.theme-cream #sceneFeedFade { height: 32px; }

.story-feed {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.story-feed::-webkit-scrollbar { width: 3px; }
.story-feed::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

.story-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--muted);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    pointer-events: none;
}

.post-player {
    align-self: flex-end;
    max-width: 60%;
    background: var(--player-bg);
    border: 1px solid var(--player-bdr);
    border-radius: 10px 10px 2px 10px;
    padding: 0.9rem 1.1rem;
    animation: fadeUp 0.35s ease;
    position: relative;
}
/* Editing needs the same room as writing a new post does — the 60% chat-bubble
   cap above is right for a resting message, not for a comfortable edit box. */
.post-player.editing { max-width: 100%; align-self: stretch; }
.post-player .who {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    opacity: 0.8;
}
.post-player .body { font-size: 0.92rem; line-height: 1.6; color: var(--cream); white-space: pre-wrap; }

.post-story {
    align-self: stretch;
    border-left: 2px solid var(--gold);
    padding-left: 1.5rem;
    position: relative;
    animation: fadeUp 0.5s ease;
}
.post-story .body {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--cream);
    font-weight: 300;
    white-space: pre-wrap;
}
.post-story .body em { font-style: italic; color: var(--em-ink); }

.post-loading {
    align-self: stretch;
    border-left: 2px solid var(--border-strong);
    padding-left: 1.5rem;
    color: var(--muted);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
}

.dot-anim::after { content: ''; animation: dots 1.4s infinite; }

.post-regen-btn {
    display: none;
    width: fit-content; margin-inline-start: auto; margin-top: 0.7rem;
    background: none; border: 1px solid var(--border-strong); border-radius: 5px;
    color: var(--muted); cursor: pointer; padding: 0.3rem 0.7rem;
    font-family: 'Cormorant Garamond', serif; font-size: 0.78rem;
    letter-spacing: 0.06em;
    opacity: 0; transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.post-regen-btn.show { display: block; }
.post-story:hover .post-regen-btn { opacity: 1; }
.post-regen-btn:hover { border-color: var(--gold); color: var(--gold); }

.post-edit-prompt-btn {
    display: none;
    position: absolute; bottom: 6px; right: 8px;
    background: none; border: none;
    color: var(--muted); cursor: pointer;
    font-size: 0.75rem; padding: 2px 4px;
    opacity: 0; transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}
.post-player:hover .post-edit-prompt-btn { opacity: 0.5; }
.post-edit-prompt-btn:hover { opacity: 1 !important; color: var(--accent); }

.post-edit-ta {
    width: 100%; background: var(--panel2); border: 1px solid var(--accent);
    border-radius: 5px; color: var(--cream); font-size: 0.92rem; line-height: 1.6;
    padding: 0.5rem 0.6rem; font-family: inherit; resize: vertical;
    min-height: 120px; outline: none; margin-top: 0.3rem;
}
.post-edit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; align-items: center; }
.post-edit-warning { font-size: 0.72rem; color: var(--danger); font-style: italic; width: 100%; margin-bottom: 0.1rem; }
.post-edit-save   { background: var(--accent); border: none; border-radius: 5px; color: #000;
    cursor: pointer; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-family: inherit; }
.post-edit-cancel { background: none; border: 1px solid var(--border-strong); border-radius: 5px;
    color: var(--muted); cursor: pointer; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-family: inherit; }

/* ── Task drag handle ── */
.task-drag-handle {
    cursor: grab; color: var(--muted); font-size: 0.75rem;
    padding: 1px 3px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s;
    user-select: none; margin-top: 2px;
}
.task-item:hover .task-drag-handle { opacity: 0.4; }
.task-item.dragging { opacity: 0.4; }
@keyframes dots {
    0%  { content: ''; }  25% { content: '.'; }
    50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Post input ── */
.post-input-area {
    position: relative;
    padding: 1rem 2.5rem 1.25rem;
    background: var(--bg);
}
/* Fades the story feed's last visible line into the post area's background,
   instead of a hard seam between the two panels. */
.post-input-area::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}
.post-compose { position: relative; }

#postTextarea {
    display: block;
    width: 100%;
    background: var(--input-dark);
    border: none;
    border-radius: 10px;
    padding: 0.7rem 3rem 0.7rem 0.9rem;
    color: var(--cream);
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    outline: none;
    resize: none;
    min-height: 80px;
    max-height: 480px;
    overflow-y: auto;
    transition: background 0.18s;
    line-height: 1.55;
}
#postTextarea:focus { background: var(--panel); }
#postTextarea::-webkit-scrollbar { width: 3px; }
#postTextarea::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }
#postTextarea::placeholder { color: var(--muted); font-style: italic; }
/* Dimmed, but the placeholder is carrying the reason the box is dead now, so it
   has to stay readable — 0.35 was fair for an empty field and far too faint for
   a sentence. */
#postTextarea:disabled { opacity: 0.7; cursor: not-allowed; }

#postBtn {
    position: absolute;
    right: 0.7rem;
    bottom: 0.4rem;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
#postBtn svg { width: 15px; height: 15px; }
#postBtn:hover:not(:disabled) {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent);
}
#postBtn:disabled { opacity: 0.28; cursor: not-allowed; }

/* ── Choices ── the composer's other input mode. */

/* Over the top-right of the empty box, on the placeholder's line. Shown only
   while the box is empty (choices.js), which both keeps it clear of the text and
   makes it an offer rather than a permanent control. */
.post-choices-btn {
    display: none;
    position: absolute;
    top: 0.5rem; inset-inline-end: 0.6rem;
    background: none; border: none; border-radius: 4px;
    color: var(--muted); cursor: pointer;
    padding: 0.15rem 0.4rem;
    font-family: 'Nunito', sans-serif; font-size: 0.7rem;
    letter-spacing: 0.04em;
    /* No token is fainter than --muted and each theme mixes its own, so the offer
       is dimmed from whichever is live rather than given a colour of its own. */
    opacity: 0.65;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.post-choices-btn.show  { display: block; }
.post-choices-btn:hover { color: var(--accent); background: var(--accent-wash); opacity: 1; }

/* The mode swap: the box gives way to the list rather than sitting above it, so
   the bar keeps its height and the reader is never offered both at once. */
.post-choices { display: none; }
.post-compose.choosing #postTextarea,
.post-compose.choosing #postBtn { display: none; }
.post-compose.choosing .post-choices {
    display: flex; flex-direction: column; gap: 0.35rem;
    min-height: 80px;
}

.post-choice {
    text-align: start;
    background: var(--input-dark);
    border: 1px solid transparent; border-radius: 10px;
    color: var(--cream); cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-family: 'Nunito', sans-serif; font-size: 0.9rem; line-height: 1.4;
    animation: fadeUp 0.3s ease both;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.post-choice:nth-child(2) { animation-delay: 45ms; }
.post-choice:nth-child(3) { animation-delay: 90ms; }
.post-choice:hover {
    background: var(--panel);
    border-color: var(--border-strong);
    color: var(--accent);
}

/* Never styled as a fourth choice: taking it is leaving, not choosing. */
.post-choice-own {
    align-self: flex-start;
    background: none; border: none;
    color: var(--muted); cursor: pointer;
    padding: 0.3rem 0.15rem;
    font-family: 'Nunito', sans-serif; font-size: 0.7rem; font-style: italic;
    transition: color 0.15s;
}
.post-choice-own:hover { color: var(--accent); }

.post-choice-note {
    color: var(--muted);
    padding: 0.65rem 0.15rem;
    font-family: 'Nunito', sans-serif; font-size: 0.8rem;
}
.post-choice-failed { color: var(--danger); }