/* Chat is the full-width workspace. Violet/pink marks conversation and selection;
   project proposals and billing retain the existing interaction contracts. */
#page-story-studio {
  --story-accent: #c49aff;
  --story-gradient: linear-gradient(115deg, #7637d3, #b72e85);
  --story-muted: #c5baca;
}
#page-story-studio .story-studio-header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
#page-story-studio .story-studio-workspace { display:flex; flex-direction:column; overflow:visible; }
#page-story-studio .story-studio-conversation {
  flex:1; border:1px solid #302935; border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#151119 0,#101014 38%);
}
#page-story-studio .story-studio-conversation-header { background:#19151e; border-color:#342b3b; padding:16px 24px; }
#page-story-studio .story-studio-message-scroll { scrollbar-color:#5b436a transparent; scrollbar-width:thin; }
#page-story-studio .story-studio-messages { gap:24px; padding:32px clamp(20px,4vw,64px); }
#page-story-studio .story-studio-message { gap:14px; }
#page-story-studio .story-studio-message-body { max-width:min(82%,74ch); }
#page-story-studio .story-studio-message.is-assistant .story-studio-message-body {
  padding:16px 20px; border:1px solid #39303f; border-radius:4px 16px 16px;
  background:#211d26; color:#f3edf6;
}
#page-story-studio .story-studio-message.is-user .story-studio-message-body {
  padding:14px 20px; border-radius:16px 4px 16px 16px;
  background:var(--story-gradient); color:#fff;
  box-shadow:0 8px 22px -12px #a43d9580;
}
#page-story-studio .story-studio-message.is-user.is-staged:empty { display:none; }
#page-story-studio .story-studio-message.has-plan .story-studio-message-body { max-width:100%; width:100%; }
#page-story-studio .story-studio-message-avatar { margin-top:8px; }
#page-story-studio .story-studio-message-text { font-size:14px; line-height:1.8; }
#page-story-studio .story-studio-composer { background:#151119; border-color:#342b3b; padding-top:16px; }
#page-story-studio .story-studio-composer:has(.story-studio-models[open]) { z-index:90; }
#page-story-studio #story-studio-composer-shell { background:#211b27; border-color:#624a72; }
#page-story-studio #story-studio-composer-shell::before {
  background:conic-gradient(from var(--moying-chat-beam-angle),transparent 0deg 225deg,#a071ec 265deg,#cf8cf5 293deg,#e48cbc 326deg,transparent 360deg);
}
#page-story-studio #story-studio-composer-shell:focus-within { background:#251d2c; border-color:#bd83de; box-shadow:0 0 0 3px #bc73d914; }
#page-story-studio .story-studio-send:not(.is-cancel):not(:disabled) { background:var(--story-gradient); color:white; }
#page-story-studio .story-studio-send:not(.is-cancel):not(:disabled):hover { background:linear-gradient(115deg,#8842e8,#c43894); }
#page-story-studio .story-studio-dialogue-button.is-active { background:#382441; color:#f6e4ff; }

/* History uses native details semantics and an anchored panel, without a rail. */
#page-story-studio .story-studio-history { position:relative; z-index:80; overflow:visible; height:auto; border:0; background:none; }
#page-story-studio .story-studio-history > summary {
  min-height:44px; gap:10px; padding:10px 16px; border:1px solid #52415e;
  border-radius:999px; color:#eadcf3; background:#201925; font-size:14px;
}
#page-story-studio .story-studio-history > summary:hover,
#page-story-studio .story-studio-history[open] > summary { background:#302039; border-color:#a17cb6; }
#page-story-studio .story-studio-history-body {
  position:absolute; top:calc(100% + 12px); right:0; left:auto;
  width:min(360px,calc(100vw - 24px)); height:auto; max-height:min(65dvh,600px);
  padding:16px; gap:16px; border:1px solid #604b6a; border-radius:16px; background:#201925;
  overflow:auto; box-shadow:0 20px 56px -16px #0009;
}
#page-story-studio .story-studio-history-actions { padding-top:14px; }
#page-story-studio .story-studio-dialogue-button { white-space:normal; height:auto; }

/* Model settings is a searchable library with a stable selection summary/footer. */
#page-story-studio .story-studio-model-library {
  position:fixed; z-index:100; display:flex; flex-direction:column; gap:0;
  padding:0; overflow:hidden; border:1px solid #644d72; border-radius:16px;
  color:#f5edf8; background:#201a26; box-shadow:0 22px 64px -18px #000b;
}
#page-story-studio .story-model-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 16px; flex-shrink:0; }
#page-story-studio .story-model-heading strong { font-size:18px; }
#page-story-studio .story-model-heading p { color:#cdb9df; margin:7px 0 0; font-size:12px; }
#page-story-studio .story-model-close { width:36px; min-height:36px; height:36px; border:0; border-radius:50%; background:#382c42; color:#f7eafa; font-size:24px; cursor:pointer; }
#page-story-studio .story-model-search { display:flex; align-items:center; gap:10px; margin:0 24px; padding:0 12px; min-height:42px; border:1px solid #594461; border-radius:10px; background:#16111c; }
#page-story-studio .story-model-search svg { width:17px; height:17px; flex-shrink:0; color:#d0b3e3; }
#page-story-studio #story-studio-model-search { width:100%; min-width:0; padding:10px 0; border:0!important; outline:0!important; color:#f7f0fb; background:transparent!important; box-shadow:none!important; font-size:13px; }
#page-story-studio .story-model-search input::placeholder { color:#c0aaca; }
#page-story-studio .story-model-search:focus-within { outline:2px solid #be89f2; outline-offset:2px; }
#page-story-studio .story-model-providers { display:flex; gap:8px; padding:12px 24px; flex-wrap:wrap; flex-shrink:0; }
#page-story-studio .story-model-provider { min-height:32px; height:auto; padding:6px 13px; border:1px solid transparent; border-radius:999px; background:none; color:#cbb8d6; font-size:12px; cursor:pointer; }
#page-story-studio .story-model-provider[aria-pressed=true] { border-color:#a178bb; background:#433050; color:#f7e8ff; }
#page-story-studio .story-model-list { overflow:auto; min-height:60px; flex:1; padding:0 24px 20px; scrollbar-width:thin; scrollbar-color:#785089 transparent; }
#page-story-studio .story-model-group + .story-model-group { margin-top:20px; }
#page-story-studio .story-model-group h3 { font-size:12px; color:#d9bee7; margin:6px 0 10px; font-weight:600; }
#page-story-studio .story-model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:stretch; }
#page-story-studio .story-model-choice {
  display:flex; flex-direction:column; min-width:0; min-height:130px; height:auto; max-height:none;
  padding:14px; gap:10px; text-align:left; white-space:normal; overflow-wrap:anywhere;
  border:1px solid #4a3b53; border-radius:12px; color:#f2eaf7; background:#2a2231; cursor:pointer;
}
#page-story-studio .story-model-choice:hover:not(:disabled) { border-color:#aa79c3; background:#33253e; }
#page-story-studio .story-model-choice[aria-pressed=true] { background:linear-gradient(120deg,#402663,#502439); border-color:#d098ec; }
#page-story-studio .story-model-choice-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
#page-story-studio .story-model-choice-heading strong { font-size:13px; line-height:1.5; }
#page-story-studio .story-model-check { width:18px; height:18px; flex-shrink:0; border-radius:50%; border:1px solid #9a79ac; text-align:center; line-height:16px; font-size:12px; }
#page-story-studio .story-model-choice[aria-pressed=true] .story-model-check { background:#d9a5f1; border-color:#d9a5f1; color:#39164b; }
#page-story-studio .story-model-description { font-size:12px; color:#d3bfdc; line-height:1.6; }
#page-story-studio .story-model-tags { display:flex; flex-wrap:wrap; gap:12px; font-size:11px; color:#e1baf2; margin-top:auto; }
#page-story-studio .story-model-choice.is-unavailable { opacity:1; border-style:dashed; background:#251f2a; cursor:not-allowed; }
#page-story-studio .story-model-unavailable { font-size:11px; line-height:1.6; color:#cdb9cb; }
#page-story-studio .story-model-empty { margin:28px 0; color:#ddc8e7; }
#page-story-studio .story-model-footer { padding:16px 24px; border-top:1px solid #4a3855; flex-shrink:0; background:#1b1521; }
#page-story-studio .story-model-image { display:flex; align-items:center; gap:16px; }
#page-story-studio .story-model-image label { color:#dfcde8; font-size:12px; white-space:nowrap; }
#page-story-studio .story-model-image select { flex:1; width:0; min-width:0; min-height:38px; margin:0; padding:8px 12px; border:1px solid #60476e; border-radius:8px; font-size:12px; color:#f5e9fc; background:#2a2032; }
#page-story-studio .story-model-footer .story-studio-hint { margin:10px 0 0; line-height:1.55; font-size:11px; }
#page-story-studio #story-studio-apply-models { margin-top:12px; width:100%; background:var(--story-gradient)!important; color:white!important; border:0; min-height:40px; }
#page-story-studio :is(.story-model-choice,.story-model-provider,.story-model-close,.story-studio-history>summary):focus-visible { outline:2px solid #e7b3f5; outline-offset:3px; }
@media (max-width:820px) {
  #page-story-studio .story-studio-header { flex-wrap:wrap; gap:8px; }
  #page-story-studio .story-studio-header-actions { margin-left:auto; gap:8px; }
  #page-story-studio .story-studio-history-body { position:fixed; top:132px; right:12px; }
  #page-story-studio .story-studio-conversation { min-height:0; width:100%; }
  #page-story-studio .story-studio-messages { padding:24px 16px; gap:20px; }
  #page-story-studio .story-studio-message-body { max-width:calc(100% - 42px); }
  #page-story-studio .story-studio-message.is-assistant .story-studio-message-body { padding:12px 14px; }
  #page-story-studio .story-studio-message.is-user .story-studio-message-body { padding:12px 16px; }
}
@media (max-width:560px) {
  #page-story-studio .story-model-heading { padding:14px 16px 12px; }
  #page-story-studio .story-model-heading strong { font-size:16px; }
  #page-story-studio .story-model-search { margin-inline:16px; }
  #page-story-studio .story-model-providers { padding:10px 16px; gap:4px; }
  #page-story-studio .story-model-list { padding:0 16px 16px; }
  #page-story-studio .story-model-grid { grid-template-columns:minmax(0,1fr); }
  #page-story-studio .story-model-choice { min-height:112px; }
  #page-story-studio .story-model-footer { padding:12px 16px; }
  #page-story-studio .story-studio-history > summary { min-height:40px; padding:8px 12px; }
  #page-story-studio .story-studio-conversation-header { padding:12px 16px; }
}