/* Application layout. All colors inherit the selected room theme. */
.loading { padding: 70px 24px; text-align: center; font-family: var(--serif); color: var(--muted); }
#main { min-width: 0; }
#main:focus { outline: none; }
#save-warning {
  padding: 12px 24px; border-bottom: 1px solid var(--red);
  background: var(--danger-soft, var(--panel)); color: var(--red);
  font-size: 12px; line-height: 1.8; text-align: center; overflow-wrap: anywhere;
}
.theme-trigger { flex-shrink: 0; padding: 0 10px; font-size: 11px; color: var(--gold); white-space: nowrap; }
.theme-trigger:hover { background: var(--green-soft); border-radius: 3px; }
.site-header > .model-button { min-width: 0; }
.toolbar-wrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.toolbar-wrap .button { font-size: 11px; padding: 8px 12px; }
.link-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0;
  color: var(--gold); text-align: left; font-size: 11px; line-height: 1.65;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent;
  overflow-wrap: anywhere;
}
.link-button:hover { text-decoration-color: currentColor; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.book-card .tag { overflow-wrap: anywhere; line-height: 1.65; }
.book-card .book-meta p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.lore-card p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 330px; overflow-y: auto; }
.desk-topbar-actions > .button { white-space: nowrap; }
.editor-toolbar-actions { flex-wrap: wrap; }
.assistant-pane .assistant-heading { gap: 8px; }
.assistant-pane .assistant-heading h2 { font-size: 21px; letter-spacing: 1px; }
.assistant-pane .assistant-heading .link-button { flex-shrink: 0; }
.assistant-pane .form-input { font-size: 12px; padding: 10px; }
.assistant-pane .form-hint { min-height: 34px; }
.assistant-pane .run-button { margin-top: 15px; }
.assistant-pane .pipeline { margin-top: 20px; }
.assistant-pane .pending-card > .button { width: 100%; margin-top: 10px; }
.assistant-pane > .button.text { margin-top: 12px; line-height: 1.8; }
.run-progress {
  margin-top: 17px; padding: 13px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--subtle, var(--panel)); color: var(--gold); font-size: 12px; line-height: 1.8;
  border-radius: 3px; overflow-wrap: anywhere;
}
.run-progress + .button { margin-top: 10px; width: 100%; }
.editor-bottom .link-button { font-family: var(--sans); letter-spacing: 0; }

/* Story seed: temperament is the brief; the AI action sits directly below it. */
.seed-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 8px; }
.seed-actions > .button { flex: 0 1 auto; }
.seed-actions > .link-button { max-width: 100%; min-width: 0; padding-inline: 1px; }
#seed-feedback { font-size: 11px; color: var(--gold); line-height: 1.8; overflow-wrap: anywhere; }
#seed-feedback:not(:empty) { padding: 10px 13px; border: 1px solid var(--line); background: var(--panel); border-radius: 3px; margin: 10px 0 16px; }
#seed-feedback .link-button { min-height: 30px; padding: 0 5px; }
#seed-suggestion .pending-card { margin: 12px 0 19px; }
#seed-suggestion .pending-card .button { margin-top: 12px; }
#new-book-form > .mode-cards { margin-bottom: 24px; }
#new-idea { min-height: 112px; }
.modal-header { position: sticky; top: 0; z-index: 3; background: var(--paper); }
.modal-header > div { min-width: 0; }
.modal-header h2 { overflow-wrap: anywhere; }
.modal-body { min-width: 0; }
.modal-actions .button { white-space: normal; }
.compare-block pre, .result-text, .step-record pre {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-family: var(--serif); font-size: 14px; line-height: 2; color: var(--ink); margin: 0;
}
.compare-block pre { max-height: 58vh; overflow-y: auto; }
.result-text { padding: 8px 2px; }

/* A visible roster of specialists, kept distinct from the live task log. */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.team-card {
  display: flex; flex-direction: column; min-width: 0; padding: 20px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel);
}
.team-card .tag { font-size: 9px; letter-spacing: .6px; color: var(--gold); margin-bottom: 12px; }
.team-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: 1px; margin-bottom: 9px; }
.team-card p { color: var(--muted); font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.team-card small { color: var(--muted); opacity: .8; font-size: 9px; letter-spacing: .5px; margin-top: auto; padding-top: 16px; overflow-wrap: anywhere; }

/* Journal: task headers, successive hand-offs, inspectable agent output. */
.history-page { max-width: 1160px; margin: auto; padding: 44px 5% 70px; }
.history-page > .section-header { align-items: flex-start; margin: 0 0 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.history-page .section-header > div { min-width: 0; }
.history-page .section-header > .button { flex-shrink: 0; margin-top: 21px; }
.history-page h1 { font-family: var(--serif); font-size: clamp(26px, 3vw, 37px); font-weight: 500; line-height: 1.55; letter-spacing: 1px; margin: 14px 0 12px; }
.history-page .section-header p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.history-page .history-filters { gap: 16px; align-items: end; }
.history-page .history-filters > label { font-size: 11px; color: var(--muted); }
.history-page .history-filters > label > select { margin-top: 8px; font-size: 13px; }
.history-page .history-filters > .button { flex: 0 0 auto; font-size: 11px; }
#history-list { display: grid; gap: 20px; min-width: 0; }
.empty-state { padding: 52px 30px; border: 1px dashed var(--line); background: var(--panel); border-radius: 4px; color: var(--muted); font-size: 13px; line-height: 2; text-align: center; }
.history-run { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; min-width: 0; box-shadow: var(--shadow); }
.history-run > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.history-run > header > div { min-width: 0; }
.history-run .eyebrow { display: block; font-size: 9px; line-height: 1.7; letter-spacing: 1.5px; overflow-wrap: anywhere; }
.history-run h2 { font-family: var(--serif); font-size: 24px; line-height: 1.5; font-weight: 500; letter-spacing: 1px; margin: 8px 0 0; overflow-wrap: anywhere; }
.run-meta { color: var(--muted); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.history-steps { display: grid; gap: 9px; margin: 18px 0 0; min-width: 0; }
.history-run > .button { margin-top: 17px; font-size: 11px; }
.step-record { min-width: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.step-record + .step-record { margin-top: 11px; }
.history-steps .step-record + .step-record { margin-top: 0; }
.step-record > summary {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 13px 17px 13px 35px; list-style: none; cursor: pointer;
  background: var(--panel); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere;
}
.step-record > summary::-webkit-details-marker { display: none; }
.step-record > summary::before { content: '›'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 19px; line-height: 1; transition: transform .15s; }
.step-record[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.step-record[open] > summary { border-bottom: 1px solid var(--line); }
.step-record > summary > span { min-width: 0; }
.step-record > summary > span:first-child { font-weight: 500; }
.step-record > summary > span:last-child { color: var(--muted); font-size: 10px; text-align: right; overflow-wrap: anywhere; }
.step-detail { padding: 17px; }
.step-detail h3 { margin: 17px 0 10px; font-size: 10px; font-weight: 600; color: var(--gold); letter-spacing: .7px; }
.step-detail pre { padding: 15px; background: var(--panel); border-radius: 3px; font-family: var(--sans); font-size: 12px; line-height: 1.9; max-height: 360px; overflow: auto; }
.step-record > pre { padding: 18px; max-height: 350px; overflow: auto; }
.step-record > .button { margin: 0 18px 18px; }
.history-page .status-badge { flex-shrink: 0; }

/* Model connection and advanced role assignments. */
#connection-panel > .toolbar-wrap { justify-content: flex-start; margin-top: 11px; }
#connection-panel .form-hint a { color: var(--gold); text-underline-offset: 4px; }
#login-form > .button { margin-top: 15px; }
#connection-message:not(:empty) { border-left: 2px solid var(--gold); background: var(--panel); padding: 10px 12px; margin-top: 18px; overflow-wrap: anywhere; }
.advanced-models { margin-top: 22px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.advanced-models > summary { cursor: pointer; padding: 14px 16px; font-size: 12px; line-height: 1.6; color: var(--ink); min-height: 48px; }
.advanced-models[open] { padding: 0 16px 17px; }
.advanced-models[open] > summary { margin: 0 -16px 12px; border-bottom: 1px solid var(--line); }
.advanced-models > .form-input { background: var(--paper); }

@media (max-width: 1150px) {
  .site-header > .model-button { max-width: 230px; }
  .site-header > .theme-trigger { padding-inline: 5px; }
  .shelf-page .section-header { align-items: flex-start; }
  .shelf-page .section-heading { flex-shrink: 0; padding-top: 10px; }
  .toolbar-wrap { gap: 6px; }
  .toolbar-wrap .button { padding-inline: 10px; }
}
@media (max-width: 920px) {
  .site-header .main-nav { display: none; }
  .site-header > .theme-trigger { margin-left: auto; }
  .history-page { padding: 34px 5% 48px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-pane .form-input { font-size: 16px; }
}
@media (max-width: 650px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .site-header > .brand { min-width: 0; }
  .site-header > .theme-trigger { margin-left: 0; min-height: 38px; padding-inline: 8px; }
  .site-header > .model-button { grid-column: 1 / -1; max-width: none; width: 100%; justify-content: flex-start; min-height: 42px; font-size: 11px; padding-inline: 12px; }
  .site-header > .model-button > :last-child { margin-left: auto; }
  .shelf-page .section-header { flex-wrap: wrap; margin-top: 25px; gap: 14px; }
  .shelf-page .section-heading { padding-top: 0; }
  .shelf-page .section-header .toolbar-wrap { width: 100%; justify-content: flex-start; }
  .shelf-page .section-header .toolbar-wrap .button { flex: 1 1 auto; font-size: 10px; padding: 7px 8px; }
  .desk-topbar { flex-wrap: wrap; }
  .desk-breadcrumb { flex: 1 1 100%; }
  .desk-topbar .desk-title { max-width: calc(100vw - 100px); }
  .desk-topbar-actions { margin-left: auto; gap: 8px; }
  .desk-topbar-actions .button { min-height: 40px; padding-block: 6px; }
  .editor-toolbar-actions { gap: 5px; }
  .editor-toolbar .tool-button { min-height: 40px; }
  .assistant-pane .assistant-heading h2 { font-size: 23px; }
  .seed-actions { align-items: stretch; gap: 5px; margin-top: 13px; }
  .seed-actions > .button { width: 100%; font-size: 12px; }
  .seed-actions > .link-button { width: 100%; justify-content: flex-start; font-size: 10px; }
  #new-book-form > .mode-cards { margin-bottom: 21px; }
  #new-book-form .mode-card strong { font-size: 21px; }
  #new-book-form .mode-card span { font-size: 10px; }
  #new-idea { min-height: 124px; }
  .modal-header h2 { font-size: 25px; }
  .team-grid { gap: 10px; }
  .team-card { padding: 15px; }
  .team-card h3 { font-size: 20px; }
  .team-card p { font-size: 11px; }
  .history-page { padding: 29px 22px 45px; }
  .history-page > .section-header { flex-wrap: wrap; gap: 12px; padding-bottom: 21px; margin-bottom: 22px; }
  .history-page .section-header > .button { margin-top: 0; font-size: 10px; }
  .history-page h1 { font-size: 27px; margin-top: 13px; }
  .history-page .section-header p { font-size: 11px; }
  .history-page .history-filters { gap: 13px; }
  .history-page .history-filters > .button { justify-self: start; }
  .history-page .history-filters > label > select { font-size: 16px; }
  .empty-state { padding: 36px 20px; font-size: 12px; }
  .history-run { padding: 17px; }
  .history-run > header { gap: 10px; }
  .history-run h2 { font-size: 22px; }
  .history-run .eyebrow { font-size: 8px; letter-spacing: .7px; }
  .step-record > summary { flex-wrap: wrap; justify-content: flex-start; gap: 5px; padding: 12px 12px 12px 29px; }
  .step-record > summary::before { left: 11px; }
  .step-record > summary > span { flex-basis: 100%; }
  .step-record > summary > span:last-child { text-align: left; }
  .step-detail { padding: 13px; }
  .step-detail pre { padding: 11px; font-size: 12px; }
  .compare-block pre { max-height: 42vh; font-size: 14px; }
  .result-text { font-size: 14px; }
}
@media (max-width: 440px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 19px; }
  .team-card p { font-size: 12px; }
  .team-card small { padding-top: 11px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button.text { padding-inline: 0; }
}
@media (max-width: 350px) {
  .site-header > .model-button { max-width: none; font-size: 11px; }
  .site-header > .theme-trigger { font-size: 10px; }
  .history-page { padding-inline: 16px; }
  .history-page h1 { font-size: 25px; }
  .history-run { padding: 14px; }
  .history-run h2 { font-size: 20px; }
  .modal-header h2 { font-size: 22px; letter-spacing: 1px; }
  .modal-header .close-dialog { margin-right: -6px; }
  .shelf-page .section-header .toolbar-wrap { gap: 5px; }
  .shelf-page .section-header .toolbar-wrap .button { padding-inline: 6px; font-size: 9px; }
  .step-detail { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-record > summary::before { transition: none; }
}

/* Complete chapters: one brief and one manuscript, with continuity in view. */
.creation-modes{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin:8px 0 23px;gap:6px}
.creation-modes button{min-height:45px;border-bottom:2px solid transparent;font-size:12px;color:var(--muted)}
.creation-modes button.active{color:var(--green);border-color:var(--gold);background:var(--green-soft)}
.whole-intro .eyebrow{font-size:8px;letter-spacing:1.8px}.whole-intro h3{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.7;margin:8px 0}
.whole-intro p{color:var(--muted);font-size:11px;line-height:1.9;margin-bottom:23px}
.word-target{display:flex;align-items:center;gap:10px}.word-target .form-input{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:1px;max-width:180px}.word-target>span{font-size:12px;white-space:nowrap;color:var(--muted)}
.word-presets{display:flex;gap:8px;margin:10px 0}.word-presets button{border:1px solid var(--line);background:var(--paper);font-size:10px;padding:7px 10px;border-radius:3px;min-height:32px}.word-presets button:hover{border-color:var(--gold);color:var(--gold)}
.form-label small{font-size:10px;color:var(--muted);float:right}.assistant-pane .chapter-brief{min-height:105px;font-size:12px;line-height:1.9;resize:vertical}
.continuity-note{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:20px 0 4px;font-size:11px;line-height:1.9}.continuity-note>div{display:flex;align-items:center;gap:8px}.continuity-note strong{font-weight:500}.continuity-note p{color:var(--muted);margin:8px 0}.continuity-note small{color:var(--gold);font-size:10px}.continuity-dot{width:6px;height:6px;display:inline-block;background:var(--gold);border-radius:50%}.continuity-note summary{cursor:pointer;min-height:35px;padding-top:9px;color:var(--green)}.continuity-note ul{padding-left:18px;color:var(--muted)}.continuity-note .continuity-alert{color:var(--red)}
.whole-live{padding:13px;border:1px solid var(--line);background:var(--paper);margin-top:16px}.whole-live>span{font-size:10px;color:var(--gold)}.whole-live p{font-family:var(--serif);font-size:12px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;margin-top:10px}
.chapter-result-stats{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:15px 18px;background:var(--panel);border:1px solid var(--line);margin:16px 0 20px;font-size:12px}.chapter-result-stats strong{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 4px}.chapter-result-stats .result-alert,.chapter-result-warning{color:var(--red)}.chapter-result-warning{font-size:12px;line-height:1.9;padding:12px;border-left:2px solid var(--red);background:var(--danger-soft);margin-bottom:16px}
.chapter-result-details{border:1px solid var(--line);margin-top:15px}.chapter-result-details summary{padding:15px;cursor:pointer;font-size:12px;background:var(--panel)}.chapter-result-details pre,.chapter-result-details>p{padding:17px;white-space:pre-wrap;font-size:12px;line-height:1.95;max-height:360px;overflow:auto;overflow-wrap:anywhere}.continuity-record{padding:16px;font-size:12px;line-height:1.9}.continuity-record h4{font-size:11px;font-weight:500;color:var(--gold);margin:16px 0 6px}.continuity-record h4:first-child{margin-top:0}.continuity-record p{white-space:pre-wrap;overflow-wrap:anywhere}.lore-card .continuity-record{padding:0}
@media(max-width:650px){.whole-intro h3{font-size:25px}.whole-intro p,.continuity-note{font-size:12px}.assistant-pane .chapter-brief{font-size:16px;min-height:120px}.word-presets button{font-size:12px;min-height:40px;padding:7px 14px}.chapter-result-stats{padding:12px;gap:8px 16px}.chapter-result-stats>span:last-child{width:100%}.whole-live p{font-size:14px}.chapter-result-details summary{font-size:13px}}