﻿.account-settings-form{display:grid;gap:12px;max-width:850px}.account-settings-form input:not([type=checkbox]),.account-settings-form textarea{width:100%;padding:12px;border:1px solid #454541;border-radius:9px;background:#111210;color:#f0eee8}.account-settings-form .check-field{display:flex;align-items:flex-start;gap:10px;padding:12px 0}.account-settings-form button{justify-self:start}.creator-stats-table{--bs-table-bg:transparent;--bs-table-color:#e8e5dc;--bs-table-border-color:#393b36;min-width:850px}.creator-stats-table th{color:#bab8ad;font-weight:600}.creator-stats-table td,.creator-stats-table th{padding:16px 12px;vertical-align:middle}.creator-stats-table a{color:#e2d196}.form-panel select,.form-panel textarea{max-width:100%}.nsfw-toggle:has(input:disabled){opacity:.55}

/* Image profiles and artwork controls share the site's form styling. */
#image-profiles form { display: grid; gap: 1rem; }
#image-profiles .parity-options-grid, #images .parity-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
#image-profiles label, #images label, label:has(> [data-image-profile]) { display: grid; gap: .4rem; min-width: 0; }
#image-profiles label:has(input[type=checkbox]), #images label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; }
#image-profiles input:not([type=checkbox]):not([type=hidden]), #image-profiles select,
#images input:not([type=checkbox]):not([type=hidden]), #images select, #images textarea,
.scenario-artwork-generator select, .scenario-artwork-generator textarea, select[data-image-profile] {
  width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 7px;
  background: #15121c; color: var(--paper); font: inherit; line-height: 1.5; padding: .7rem .8rem;
}
#image-profiles input:focus, #image-profiles select:focus, #images select:focus, #images textarea:focus,
.scenario-artwork-generator select:focus, .scenario-artwork-generator textarea:focus { outline: 2px solid #b77bc9; outline-offset: 2px; }
#image-profiles form > button { justify-self: start; }
#image-profiles .parity-beginning summary { margin-bottom: .8rem; cursor: pointer; }
#images form > label, #images form > small, #images form > button { margin-top: .8rem; }
#images small, .scenario-artwork-generator small { color: var(--muted); }

#connections form, .provider-api-options { display: grid; gap: 1rem; }
#connections .parity-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
#connections label { display: grid; gap: .4rem; min-width: 0; }
#connections label:has(input[type=checkbox]) { display: flex; align-items: center; gap: .5rem; }
#connections input:not([type=checkbox]):not([type=hidden]), #connections select, #connections textarea {
  width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 7px;
  background: #15121c; color: var(--paper); font: inherit; line-height: 1.5; padding: .7rem .8rem;
}
#connections form > button { justify-self: start; }
#connections summary { cursor: pointer; }
.provider-api-options { border-top: 1px solid var(--line-strong); padding-top: .8rem; }
.provider-api-options[open] summary { margin-bottom: .8rem; }

/* Message controls belong to their response, rather than overlaying the story. */
.play-message-actions { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:4px 0; }
.play-message-actions form { margin:0; }
.play-message-actions button { min-height:44px; border:1px solid #66616c; border-radius:8px; padding:6px 12px; background:#111015; color:#eee; font:inherit; font-size:13px; cursor:pointer; }
.play-message-actions button:hover { border-color:#cda8e8; background:#292131; }
.play-message-actions button:disabled { opacity:.55; cursor:wait; }
.play-message-actions .play-message-branch { margin-left:auto; }
.play-message-actions .play-branch-button { display:grid; place-items:center; width:44px; padding:9px; }
.play-branch-button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.play-thread { padding-top:18px; }
.play-chat-settings { width:min(660px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; box-sizing:border-box; padding:24px; border:1px solid #62536e; border-radius:15px; background:#15111b; color:#f2edf5; }
.play-chat-settings::backdrop { background:#000b; }
.chat-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.chat-settings-heading h2 { margin:0; }
.chat-settings-heading button { min-width:44px; min-height:44px; border:1px solid #777; border-radius:9px; background:#17131e; color:white; font-size:24px; cursor:pointer; }
.play-chat-settings section { border-top:1px solid #49404e; padding:18px 0; }
.play-chat-settings h3 { margin:0 0 12px; font-size:18px; }
.play-chat-settings form, .play-chat-settings label, .chat-appearance-fields label { display:grid; gap:8px; }
.play-chat-settings form { gap:14px; }
.play-chat-settings input:not([type=checkbox]):not([type=hidden]), .play-chat-settings select, .chat-appearance-fields input:not([type=checkbox]) { width:100%; min-width:0; box-sizing:border-box; border:1px solid #61586b; border-radius:8px; padding:10px 12px; background:#0c0b0e; color:#f3eff5; font:inherit; }
.play-chat-settings select:focus, .play-chat-settings input:focus { outline:2px solid #cda8e8; outline-offset:2px; }
.play-chat-settings > .button { display:flex; margin-top:12px; }
.chat-appearance-section { border:1px solid #564d60; border-radius:10px; padding:14px; margin:14px 0; }
.chat-appearance-section > summary { cursor:pointer; font-weight:600; }
.chat-appearance-section[open] > summary { margin-bottom:18px; }
.chat-appearance-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px; }
.chat-appearance-fields .chat-check { display:flex; gap:8px; align-items:center; }
.play-chat-settings form > .button { justify-self:start; }
.play-shell .beginning-picker { max-height:calc(100dvh - 80px); overflow:auto; }
@media(max-width:800px) {
  .saga-scroll-navigation { display:none!important; }
  .play-odeyu-toolbar { grid-template-columns:minmax(0,1fr) auto; height:64px; min-height:64px; gap:10px; padding:8px 12px; }
  .play-odeyu-toolbar > .play-odeyu-toolbar-side:not(.play-odeyu-toolbar-right) { display:none; }
  .play-odeyu-toolbar-right > a { display:none!important; }
  .play-odeyu-toolbar-right .play-chat-settings-button { display:grid!important; width:44px; height:44px; }
  .play-odeyu-identity { min-width:0; justify-content:flex-start; gap:10px; }
  .play-scenario-cover-link { display:block!important; flex:0 0 40px; width:40px; height:44px; }
  .play-scenario-cover-link img { display:block; width:40px; height:44px; object-fit:cover; border-radius:6px; }
  .play-scenario-heading { min-width:0; }
  .play-scenario-heading h1 { max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
  .play-thread { padding-top:12px; }
  .turn-narration { grid-template-columns:minmax(0,1fr); width:100%; }
  .play-turn-avatar { display:none; }
  .play-message-actions { gap:7px; }
  .play-chat-settings { max-height:calc(100dvh - 24px); width:calc(100% - 20px); padding:18px; }
  .play-home-stage { min-height:calc(100dvh - 64px); }
}
