/* Roleplays in play (src/roleplay/play-ui.mjs): the story fills the page in
   place of the top bar, the adventure and the bottom bar. The storyteller's
   messages sit left under the face and name of who speaks; the player's
   are warm bubbles on the right. *Actions* read upright in the dimmer
   text, "speech" in the body white; a Texts story is phone bubbles. The chat bar is the
   adventure's (styles/app.css .composer), with its own Send and Stop, and
   a tools sheet of two tabs. Also the Start a story and Replies dialogs.
   Loaded after every other stylesheet. Tokens from tokens.css. */
#app.roleplaying>.topbar,#app.roleplaying>.app-layout,#app.roleplaying>.mobile-nav{display:none}
.roleplay-view{display:flex;flex-direction:column;height:100%;min-height:0}
.roleplay-view[hidden]{display:none}
.rp-topbar{flex:none}
.rp-adult{padding:3px 6px;border:1px solid var(--nsfw-400);border-radius:var(--ledger-radius,2px);background:var(--nsfw-900);color:var(--nsfw-200);font:700 var(--size-caption)/1.2 var(--head)}

/* The transcript. */
.rp-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--space-9);padding:18px max(16px,5vw) 14px;font-family:var(--read-font);font-size:calc(var(--read-scale) * 1em);line-height:var(--read-leading)}
.rp-chat>*{width:100%;max-width:var(--read-measure);margin-inline:auto}
.rp-intro{text-align:center;color:var(--muted);font:var(--size-caption)/1.5 var(--head)}
.rp-intro p{margin:0}
.rp-msg{display:flex;align-items:flex-start;gap:var(--space-5)}
.rp-face{flex:none;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border:1px solid var(--accent-750);border-radius:var(--radius-round);background:var(--accent-950);color:var(--accent-350);font:600 var(--size-label)/1 var(--head)}
.rp-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.rp-face.small{width:22px;height:22px;font-size:var(--size-micro)}
button.rp-face{padding:0;cursor:zoom-in}
button.rp-face:hover{border-color:var(--accent)}button.rp-face:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.rp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.rp-who{margin:0;font:600 var(--size-label)/1.5 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-350)}
.rp-words{overflow-wrap:anywhere}
.rp-words p{margin:0 0 .55em;color:var(--text-dim)}
.rp-words p:last-child{margin-bottom:0}
.rp-action{color:var(--text-dim)}
.rp-say{color:var(--text)}
.rp-ooc{color:var(--muted);font:var(--size-small)/1.45 var(--head)}
.rp-words strong{color:var(--text)}

/* The player's own messages: a warm bubble on the right. */
.rp-mine{flex-direction:row-reverse}
.rp-mine .rp-body{align-items:flex-end}
.rp-mine .rp-who{color:var(--muted)}
.rp-mine .rp-words{max-width:88%;padding:9px 13px;border:1px solid var(--stone-800);border-radius:14px 14px 4px 14px;background:var(--surface-warm)}
.rp-mine .rp-words p{color:var(--text-warm)}
.rp-mine .rp-say{color:var(--text)}

/* A Texts story: the storyteller's lines as bubbles under each sender. */
.rp-theirs.rp-texting .rp-words{display:flex;flex-direction:column;gap:var(--space-2)}
.rp-text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.rp-text-name{display:inline-flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);font:600 var(--size-caption)/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-350)}
.rp-bubble{max-width:85%;margin:0;padding:8px 13px;border-radius:16px 16px 16px 4px;background:var(--surface-raised);color:var(--text)}
.rp-mine.rp-texting .rp-words{border-color:var(--accent-800);border-radius:16px 16px 4px 16px;background:var(--accent-950)}

/* Under a message: versions, Regenerate and Continue on the newest reply, and ⋯. */
.rp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-top:var(--space-1)}
.rp-mine .rp-tools{justify-content:flex-end}
.rp-tools button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-width:36px;min-height:36px;padding:6px 8px;border:1px solid transparent;border-radius:var(--ledger-radius,2px);background:none;color:var(--muted);font:500 var(--size-caption)/1 var(--head);letter-spacing:.04em}
.rp-tools button:hover,.rp-tools button:focus-visible{border-color:var(--line);color:var(--accent)}
.rp-tools button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rp-tools button:disabled{opacity:.4;cursor:default;border-color:transparent;color:var(--muted)}
.rp-tools .action-glyph{width:18px;height:18px}
.rp-tools .entry-menu-button[aria-expanded=true]{border-color:var(--accent-600);color:var(--accent)}
.rp-version{min-width:30px;color:var(--muted);font:500 var(--size-caption)/1 var(--head);text-align:center}
@media(hover:hover){.rp-msg:not(:last-of-type) .rp-tools .entry-menu-button{opacity:.45}.rp-msg:hover .rp-tools .entry-menu-button,.rp-tools .entry-menu-button:focus-visible{opacity:1}}
@media(max-width:800px),(pointer:coarse){.rp-tools button{min-width:44px;min-height:44px}}

/* The storyteller writing, and the notes when a story waits on something. */
/* A reply's scene picture (app/painting.mjs), under its words. */
.rp-scene{margin:var(--space-2) 0 0;max-width:min(100%,560px);aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:var(--well)}
.rp-scene button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.rp-scene img{display:block;width:100%;height:100%;object-fit:cover}
.rp-scene button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rp-typing{display:flex;align-items:center;gap:var(--space-4);margin:4px 0 0;color:var(--muted);font:var(--size-small)/1.4 var(--head)}
.rp-dots{display:inline-flex;gap:3px}
.rp-dots i{width:6px;height:6px;border-radius:var(--radius-round);background:var(--accent-450);animation:rp-dot 1.2s infinite ease-in-out}
.rp-dots i:nth-child(2){animation-delay:.15s}
.rp-dots i:nth-child(3){animation-delay:.3s}
@keyframes rp-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.rp-dots i{animation:none;opacity:.7}}
.rp-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-5);padding:14px;border:1px dashed var(--stone-700);color:var(--muted);font:var(--size-small)/1.45 var(--head);text-align:center}
.rp-notice p{margin:0}

/* Editing a message in place. */
.rp-edit{display:flex;flex-direction:column;gap:var(--space-4);width:100%}
.rp-edit textarea{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--accent-600);border-radius:var(--ledger-radius,2px);background:var(--field);color:var(--text);font:inherit;line-height:1.5;resize:vertical}
.rp-edit textarea:focus{outline:none;border-color:var(--accent-450);box-shadow:0 0 0 2px rgb(var(--accent-450-rgb) / .14)}
.rp-edit-actions{display:flex;justify-content:flex-end;gap:var(--space-4)}

/* The chat bar: the adventure's, with the story's own Send and Stop. */
.rp-composer{flex:none}
.rp-composer .tools-button .action-glyph{width:22px;height:22px}
.rp-send{grid-column:3;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--accent);border-radius:var(--ledger-radius,2px);background:var(--accent);color:var(--on-accent)}
.rp-send .action-glyph{width:22px;height:22px}
.rp-send:hover,.rp-send:focus-visible{border-color:var(--accent-200);background:var(--accent-300)}
.rp-send:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rp-send.rp-stop{border-color:var(--accent-600);background:var(--surface-warm);color:var(--accent)}
.rp-composer[data-nsfw=true] .rp-send.rp-stop{border-color:var(--nsfw-400);background:var(--nsfw-900);color:var(--nsfw-200)}
/* Ages, asked once in an NSFW story (play-ui.mjs renderAges). */
.rp-ages{grid-column:1/-1;display:grid;gap:var(--space-4);padding:10px 12px;border:1px solid var(--accent-700);border-radius:var(--radius-sm);background:var(--surface-low);font:var(--size-label)/1.45 var(--head)}
.rp-ages p{margin:0}
.rp-ages-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.rp-ages-fields label{display:grid;gap:4px;color:var(--text);font:var(--size-label)/1.3 var(--head)}
.rp-ages-fields input{min-height:40px;padding:0 10px;border:1px solid var(--stone-700);border-radius:var(--radius-sm);background:var(--field);color:var(--text);font:var(--size-ui) var(--head)}
.rp-ages-error{color:var(--danger);font-size:var(--size-caption)}
.rp-ages-error:empty{display:none}
.rp-ages button{justify-self:start;min-height:40px}
.rp-status{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-4);color:var(--muted);font:var(--size-caption)/1.4 var(--head)}
.rp-status button{flex:none;min-width:44px;height:44px;padding:0 5px;border:0;background:none;color:var(--accent);font:var(--size-caption) var(--head);text-decoration:underline}

/* The tools sheet: Narrator and This story. */
.rp-sheet .tools-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.rp-sheet .tools-hint{padding:0 4px;border-top:0}
.rp-sheet-button{display:flex;align-items:center;gap:var(--space-4);min-height:44px;padding:8px 12px;border-radius:var(--ledger-radius,2px);text-align:left;font:600 var(--size-label) var(--head)}
.rp-sheet-button .action-glyph{width:18px;height:18px;color:var(--accent)}
.rp-sheet-button:disabled{opacity:.5;cursor:default}
.rp-memory{display:flex;flex-direction:column;gap:var(--space-3)}
.rp-composer .rp-memory textarea{grid-column:auto;width:100%;min-height:130px;max-height:none;padding:10px 12px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--field);color:var(--text);font:var(--size-small)/1.5 var(--body);resize:vertical}
.rp-composer[data-nsfw=true] .tools-tabs [data-rp-tab=narrator]{border-color:var(--nsfw-650);background:var(--nsfw-950);color:var(--nsfw-200)}

/* Start a story. */
.story-start{width:min(560px,calc(100vw - 24px))}
.story-start .hint{margin:0}
.story-opening{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:8px 12px 10px;border:1px solid var(--stone-750);border-radius:var(--ledger-radius,2px)}
.story-opening legend{padding:0 4px;color:var(--muted);font:var(--size-label) var(--head)}
.catalog-editor .story-opening label{display:flex;flex-direction:row;align-items:center;gap:var(--space-5);min-height:40px;margin:0;color:var(--text)}
.catalog-editor .story-opening label:has(input:disabled){color:var(--disabled);cursor:not-allowed}
.catalog-editor .story-opening input{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;flex:none;width:18px;height:18px;min-height:0;margin:0;padding:0;border:1px solid var(--stone-600);border-radius:var(--radius-round);background:var(--field);cursor:pointer}
.catalog-editor .story-opening input::after{content:"";width:8px;height:8px;border-radius:var(--radius-round);background:var(--on-accent);opacity:0}
.catalog-editor .story-opening input:checked{border-color:var(--accent);background:var(--accent)}
.catalog-editor .story-opening input:checked::after{opacity:1}
.catalog-editor .story-opening input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.catalog-editor .story-opening input:disabled{opacity:.45;cursor:not-allowed}
.story-missing[hidden]{display:none}
.story-missing{display:flex;flex-direction:column;gap:var(--space-5);padding:12px;border:1px dashed var(--stone-700);color:var(--text-dim)}
.story-missing p{margin:0}
.story-missing-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.story-missing [hidden],.story-start [data-story-pick][hidden]{display:none}
.form-error{margin:0;color:var(--danger);font:var(--size-small)/1.4 var(--head)}
.form-error:empty{display:none}

@media(max-width:800px){
  .rp-chat{padding:14px 12px 10px;gap:var(--space-8)}
  .rp-face{width:32px;height:32px}
  .rp-mine .rp-words{max-width:92%}
}