/* Shared semantic colors for the original site and studio.
   Components use roles, never a light/dark-specific literal. See docs/theme-colors.md. */
:root {
  color-scheme: dark;
  --rf-color-canvas: #02050d;
  --rf-color-surface: #0b1019;
  --rf-color-raised: #111722;
  --rf-color-subtle: #151d2b;
  --rf-color-hover: #192b44;
  --rf-color-selected: #193352;
  --rf-color-text: #f3f5f8;
  --rf-color-secondary: #c4cad5;
  --rf-color-muted: #a3adbd;
  --rf-color-disabled-text: #a3adbd;
  --rf-color-disabled-bg: #19212e;
  --rf-color-border: #39475d;
  --rf-color-control-border: #71839f;
  --rf-color-accent: #81b6ff;
  --rf-color-accent-hover: #b3d4ff;
  --rf-color-accent-fill: #246bd2;
  --rf-color-accent-fill-hover: #1459b8;
  --rf-color-on-accent: #ffffff;
  --rf-color-focus: #81b6ff;
  --rf-color-success: #86d4aa;
  --rf-color-success-bg: #132d23;
  --rf-color-warning: #f3c977;
  --rf-color-warning-bg: #302817;
  --rf-color-danger: #f4a3a3;
  --rf-color-danger-bg: #331d25;
  --rf-color-info: #9fc6ff;
  --rf-color-info-bg: #152b46;
  --rf-color-danger-fill: #b52a40;
  --rf-color-danger-fill-hover: #972037;
  --rf-color-on-danger: #ffffff;
  --rf-color-backdrop: #00000099;
  --rf-shadow-floating: 0 12px 32px #00000066;
}
html[data-theme=light] {
  color-scheme: light;
  --rf-color-canvas: #f3f7fd;
  --rf-color-surface: #ffffff;
  --rf-color-raised: #ffffff;
  --rf-color-subtle: #f5f8fc;
  --rf-color-hover: #edf4ff;
  --rf-color-selected: #e2efff;
  --rf-color-text: #17263f;
  --rf-color-secondary: #40536f;
  --rf-color-muted: #52647f;
  --rf-color-disabled-text: #586b85;
  --rf-color-disabled-bg: #f0f3f8;
  --rf-color-border: #c7d5e7;
  --rf-color-control-border: #7489a5;
  --rf-color-accent: #1b58a3;
  --rf-color-accent-hover: #144c91;
  --rf-color-focus: #246bd2;
  --rf-color-success: #21633f;
  --rf-color-success-bg: #e8f6ef;
  --rf-color-warning: #805400;
  --rf-color-warning-bg: #fff3d6;
  --rf-color-danger: #a22d3a;
  --rf-color-danger-bg: #fff0f2;
  --rf-color-info: #205ba6;
  --rf-color-info-bg: #eaf2ff;
  --rf-color-backdrop: #142d4d55;
  --rf-shadow-floating: 0 12px 32px #29476824;
}

/* Existing business modules keep their layout and consume the same roles. */
.rf-workspace-tabs{display:flex;gap:20px;align-items:center;flex-shrink:0;min-height:48px;padding:8px 22px;border-bottom:1px solid var(--line);overflow-x:auto}
.rf-workspace-tabs button{color:var(--muted);background:none;border:0;padding:8px 0;white-space:nowrap;font-size:13px;border-bottom:2px solid transparent}
.rf-workspace-tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
.studio-main.rf-module-main{display:flex;overflow:auto;min-height:0;flex:1;container:rf-production/inline-size}.rf-module-main>#production-workspace{padding:20px;min-width:0}
.rf-business{--border:var(--line);color:inherit;line-height:1.6;text-align:left;font-size:14px;min-width:0}
.rf-business h1{font-size:30px;line-height:1.25}.rf-business h2{font-size:19px;line-height:1.4;margin:0 0 16px}.rf-business h3{font-size:15px;line-height:1.5;margin:0 0 10px}.rf-business h4{font-size:14px}.rf-business p{margin:8px 0 14px}
.rf-business .section-head,.rf-business .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}.rf-business .section-head h2,.rf-business .section-head h3{margin:0}
.rf-business .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin:0 0 16px;min-width:0;box-shadow:none}
.rf-business .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rf-business .grow{flex:1;min-width:0}.rf-business .muted{color:var(--muted)}.rf-business .small{font-size:12px}.rf-business .wrap{flex-wrap:wrap}
.rf-business button,.rf-business .actions>a{color:inherit;background:transparent;border:1px solid var(--line);border-radius:7px;font-size:13px;padding:7px 12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.rf-business button:hover{background:color-mix(in srgb,var(--blue) 10%,transparent);border-color:var(--blue)}.rf-business button.primary{background:var(--blue);border-color:var(--blue);color:white}.rf-business button.quiet{border-color:transparent}.rf-business button.danger{color:var(--rf-color-danger)}.rf-business button.active,.rf-business .story-select.active{background:color-mix(in srgb,var(--blue) 15%,var(--panel));border-color:var(--blue);color:var(--blue)}
.rf-business label,.rf-business .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}.rf-business .field{margin-bottom:16px}.rf-business input,.rf-business select,.rf-business textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:inherit;border-radius:7px;padding:9px 11px;box-sizing:border-box;min-width:0;max-width:100%;font:inherit}
.rf-business input[type=checkbox],.rf-business input[type=radio]{width:auto;flex:none}.rf-business textarea{min-height:110px;resize:vertical;line-height:1.7}.rf-business option{background:var(--panel);color:inherit}.rf-business .story-checkbox{display:flex;align-items:center;gap:8px}.rf-business .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rf-business .form-grid>.field{margin-bottom:0}
.rf-business .badge{display:inline-flex;padding:2px 8px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;white-space:nowrap}.rf-business .badge.success{color:var(--rf-color-success);border-color:var(--rf-color-success)}.rf-business .badge.failed,.rf-business .error{color:var(--rf-color-danger)}.rf-business .badge.warning,.rf-business .warning{color:var(--rf-color-warning)}
.rf-business .error,.rf-business .banner{padding:12px 14px;margin:12px 0;background:color-mix(in srgb,#ac7741 10%,var(--panel));border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}.rf-business .error:empty{display:none}.rf-business .empty{padding:35px 18px;text-align:center;color:var(--muted)}
.rf-business .tabs{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line)}.rf-business .tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:9px 3px}.rf-business .tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
.rf-business .details{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:14px;max-height:400px;overflow:auto;font-family:inherit;font-size:13px;line-height:1.75}.rf-business .table-wrap{overflow:auto}.rf-business table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}.rf-business td,.rf-business th{padding:12px 9px;border-bottom:1px solid var(--line);vertical-align:top}.rf-business th{color:var(--muted);font-weight:500;white-space:nowrap}
.rf-business .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 20px}.rf-business .metric{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}.rf-business .metric strong,.rf-business .metric .value{display:block;font-size:22px;overflow-wrap:anywhere}.rf-business .metric small,.rf-business .metric .label{color:var(--muted);font-size:12px}
.rf-business .asset-item{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0;flex-wrap:wrap}.rf-business .asset-item:last-child{border-bottom:0}.rf-business .media-preview{display:block;max-width:100%;max-height:50vh;margin:auto;border-radius:8px}.rf-business audio{width:100%;max-width:100%}.rf-business .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.rf-business .dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.rf-business .knowledge-source{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}.rf-business .knowledge-source input{margin-top:5px}.rf-business .knowledge-source-meta,.rf-business .knowledge-digest{overflow-wrap:anywhere}.rf-business .knowledge-request{padding:14px 0;border-top:1px solid var(--line)}.rf-business .knowledge-evidence{margin-top:20px}.rf-business details>summary{cursor:pointer;overflow-wrap:anywhere}.rf-business .story-step{background:color-mix(in srgb,var(--blue) 15%,var(--panel))}
#legacy-dialog.rf-business{background:var(--panel);color:inherit;border:1px solid var(--line);border-radius:14px;padding:24px;max-width:90vw}.conversation-toolbar{overflow-x:auto}.chat-output-inner .studio-tabs[hidden]{display:none!important}
@media(max-width:1100px){.rf-module-main>#production-workspace{padding:14px}.rf-business .story-columns{grid-template-columns:1fr}.rf-business .story-list{display:flex;flex-wrap:wrap;gap:8px}.rf-business .story-list>.story-select,.rf-business .story-episode-row{flex:1;min-width:150px}.rf-business .story-list h3{width:100%}.rf-business .story-paths{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.rf-workspace-tabs{padding:8px 14px;gap:16px}.rf-business .form-grid,.rf-business .two-cols,.rf-business .story-paths{grid-template-columns:1fr}.rf-business h1{font-size:25px}.rf-business .panel{padding:13px}.rf-business .metrics{grid-template-columns:1fr 1fr}.rf-business .metric .value{font-size:17px}.rf-business .story-entity-grid{grid-template-columns:1fr}.chat-page .chat-desk-nav-mobile{display:flex;min-height:42px;flex:none}.rf-business .story-list>.story-select{min-width:120px}.project-tools{flex-wrap:wrap}}

.chat-desk-nav-mobile button.active{color:var(--rf-color-accent);background:var(--rf-color-selected);border-color:var(--rf-color-accent)}

/* Hosted modules keep the original studio content and tab containers. */
.studio-empty.rf-module-workspace{display:block;flex:1;width:100%;min-width:0;text-align:left;color:inherit}
.studio-empty.rf-module-workspace h2{font-size:19px;line-height:1.4;margin:0 0 16px;color:inherit}
.studio-empty.rf-module-workspace .section-head h2{margin:0}
.studio-main.rf-module-main>.studio-tree[hidden],.studio-tabs>.studio-tab-list[hidden],.studio-tabs>.output-tools[hidden]{display:none!important}
.studio-tabs>.rf-workspace-tabs{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;gap:8px}
.studio-tabs>.rf-workspace-tabs button{height:100%;padding:0 8px}

/* Limit content typography and form fixes to the mounted workspace and its dialog. */
:is(#production-workspace,#legacy-dialog).rf-business .story-issues{color:var(--rf-color-warning)}
:is(#production-workspace,#legacy-dialog).rf-business .editing-fields>label:not(.story-checkbox){display:flex;flex-direction:column;gap:6px;font-size:12px}
:is(#production-workspace,#legacy-dialog).rf-business input[type=checkbox],:is(#production-workspace,#legacy-dialog).rf-business input[type=radio]{accent-color:var(--blue)}
#legacy-dialog.rf-business .rf-dialog-actions .btn{min-height:38px;padding:8px 17px;font-size:13px}
#legacy-dialog.rf-business .rf-dialog-actions .btn:hover{transform:none}

/* The right studio pane can be narrow on a wide screen after the user resizes it. */
@container rf-production (max-width:640px){
  .rf-module-main>#production-workspace{padding:14px}
  #production-workspace.rf-business :is(.story-columns,.form-grid,.two-cols,.story-paths,.story-entity-grid){grid-template-columns:minmax(0,1fr)}
  #production-workspace.rf-business .story-list{display:flex;flex-wrap:wrap;gap:8px}
  #production-workspace.rf-business .story-list h3{width:100%}
  #production-workspace.rf-business :is(.story-list>.story-select,.story-episode-row){flex:1;min-width:min(150px,100%)}
}
@container rf-production (max-width:420px){
  #production-workspace.rf-business .panel{padding:13px}
  #production-workspace.rf-business .editing-fields{grid-template-columns:minmax(0,1fr)}
}

/* Original prod-storyboard tree, cards and detail layout, backed by project records. */
#production-workspace .storyboard-page{display:flex;flex-direction:column;gap:10px}
.storyboard-page .asset-library-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#production-workspace .storyboard-page .asset-library-title h2{font-size:16px;margin:0}
.storyboard-page .storyboard-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
#production-workspace .storyboard-tools .storyboard-search{width:190px;margin:0;min-width:120px}
#production-workspace .storyboard-tools input,#production-workspace .storyboard-tools>select{height:30px;padding:3px 8px;font-size:12px;border-radius:4px}
#production-workspace .storyboard-tools>select{width:140px}
#production-workspace .storyboard-tools button{padding:3px 8px;font-size:12px;border-radius:4px}
.storyboard-page .view-switch{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:4px}
.storyboard-page .story-tree{display:flex;flex-direction:column;gap:10px}
.storyboard-page .story-episode-block{border:1px solid var(--line);border-radius:4px;background:var(--panel);overflow:hidden}
.storyboard-page .story-episode-toolbar{display:flex;align-items:center;gap:8px;padding-right:10px;border-bottom:1px solid var(--line)}
#production-workspace .storyboard-page .story-episode-head,#production-workspace .storyboard-page .story-scene-head{display:flex;align-items:center;gap:7px;min-height:30px;padding:6px 10px;border:0;border-radius:0;background:transparent;text-align:left}
.storyboard-page .story-episode-head{flex:1;font-size:14px;font-weight:500}
.storyboard-page .story-episode-head small,.storyboard-page .story-scene-head small{margin-left:auto;color:var(--muted);font-size:11px;font-weight:400}
#production-workspace .storyboard-page .story-scene-head{width:100%;font-size:12px;color:var(--blue)}
.storyboard-page .story-scene-groups{display:flex;flex-direction:column;gap:3px;padding-top:3px}
.storyboard-page .story-scene-groups[hidden],.storyboard-page .prompt-card-grid[hidden]{display:none}
.storyboard-page .prompt-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:9px;padding:8px 10px 12px;align-items:stretch}
.storyboard-page .prompt-card{display:flex;flex-direction:column;min-width:0;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);transition:border-color .16s}
.storyboard-page .prompt-card:hover{border-color:var(--blue)}
.storyboard-page .pc-ident>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.storyboard-page .prompt-kind{font-size:11px;color:var(--blue);overflow-wrap:anywhere}
#production-workspace .storyboard-page .prompt-card h3{margin:9px 0 10px;font-size:14px;line-height:1.4;font-weight:500}
.storyboard-page .prompt-stats{display:flex;gap:14px;color:var(--muted);font-size:11px}.storyboard-page .prompt-stats b{color:var(--text);font-weight:500}
#production-workspace .storyboard-page .prompt-change{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0}
.storyboard-page .pc-ops{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.storyboard-page .prompt-version{font-size:11px;color:var(--muted)}.storyboard-page .prompt-card-actions{display:flex;gap:5px}
#production-workspace .storyboard-page .pd-op{min-height:28px;padding:3px 9px;font-size:12px;border-radius:4px}
.storyboard-page .prompt-card-grid.list{grid-template-columns:minmax(0,1fr)}
.storyboard-page .prompt-card-grid.list .prompt-card{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,1.3fr);gap:10px}
.storyboard-page .prompt-card-grid.list .pc-ops{grid-column:1/-1;padding-top:0}
.storyboard-detail .asset-detail-heading small{color:var(--muted);font-size:12px}
.storyboard-detail .prompt-detail-scroll{display:grid;gap:16px;max-height:65vh;overflow-y:auto;padding:4px 0 16px}
.storyboard-detail .prompt-detail-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.storyboard-detail .prompt-basic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.storyboard-detail .prompt-basic-item{display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid var(--line);border-radius:4px;overflow-wrap:anywhere}
.storyboard-detail .prompt-basic-item small{color:var(--muted);font-size:11px}.storyboard-detail .prompt-basic-item strong{font-size:13px;font-weight:500}
.storyboard-detail .prompt-detail-layout{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:10px;min-height:260px}
.storyboard-detail .prompt-detail-nav{display:flex;flex-direction:column;gap:4px;padding-right:8px;border-right:1px solid var(--line)}
.storyboard-detail .prompt-detail-nav-item{text-align:left;border-color:transparent;border-radius:4px;padding:8px 9px}
.storyboard-detail .prompt-detail-content-card{height:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.storyboard-detail .prompt-detail-content-card p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;font-size:13px}
.storyboard-detail .dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
@container rf-production (max-width:640px){.storyboard-page .prompt-card-grid.list .prompt-card{grid-template-columns:minmax(0,1fr)}.storyboard-page .storyboard-tools{justify-content:flex-start}.storyboard-page .storyboard-search{flex:1}}
@media(max-width:640px){.storyboard-detail .prompt-basic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.storyboard-detail .prompt-detail-layout{grid-template-columns:minmax(0,1fr)}.storyboard-detail .prompt-detail-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}}

#legacy-dialog:has(>.storyboard-detail){width:min(960px,90vw)}

/* Original writing desk: document classification, outline and reader columns. */
.studio-main.document-browser{display:grid;grid-template-columns:minmax(118px,160px) minmax(0,1fr);min-height:0;overflow:hidden;container:rf-documents/inline-size}
.studio-main.document-browser.has-toc{grid-template-columns:minmax(118px,150px) minmax(130px,170px) minmax(0,1fr)}
.document-browser>.document-index{width:auto!important;min-width:0;max-width:none;border-right:1px solid var(--line);overflow:auto;padding:0}
.document-browser .document-list{display:flex;flex-direction:column;gap:3px;padding:6px}
.document-browser .document-list .document-item{display:block;min-height:30px;width:100%;margin:0;padding:6px 8px;text-align:left;font-size:13px;line-height:1.45;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.document-browser .document-list .document-item:hover{border-color:var(--line);color:inherit}
.document-browser .document-list .document-item.active{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 18%,transparent);color:inherit}
.document-browser>.outline-toc{display:none;min-width:0;border-right:1px solid var(--line);overflow:auto;padding:6px}
.document-browser.has-toc>.outline-toc{display:block}
.outline-toc .toc-list{display:flex;flex-direction:column;gap:2px}
.outline-toc .toc-list button{display:block;width:100%;padding:6px 7px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted);font-size:12px;line-height:1.5;text-align:left;white-space:normal;overflow-wrap:anywhere}
.outline-toc .toc-list button:is(:hover,.active){color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,transparent)}
.outline-toc .toc-list button[data-level="2"]{padding-left:14px}.outline-toc .toc-list button:is([data-level="3"],[data-level="4"],[data-level="5"],[data-level="6"]){padding-left:22px}
.studio-empty.document-reader{display:block;padding:18px 22px;min-width:0;overflow:auto;text-align:left;color:inherit}
.document-reader .rf-version-body{height:100%;display:flex;flex-direction:column;min-height:0}
.document-reader .rf-version-header{flex:none;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.document-reader .rf-version-header :is(button,a){min-height:28px;padding:4px 8px;font-size:12px}
.document-reader .rf-version-body>h3{font-size:14px;margin:0 0 10px;overflow-wrap:anywhere}
.document-reader .reader-scroll{flex:1;min-height:0;overflow:auto;padding:4px 6px 24px 0;scroll-behavior:smooth}
.document-reader .markdown-body{max-width:900px;margin:0 auto;font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.document-reader .markdown-body :is(h1,h2,h3,h4,h5,h6){color:inherit;line-height:1.5;scroll-margin-top:14px;margin:20px 0 10px;font-weight:600}
.document-reader .markdown-body h1{font-size:23px}.document-reader .markdown-body h2{font-size:19px}.document-reader .markdown-body h3{font-size:16px}
.document-reader .markdown-body p{margin:10px 0 16px}.document-reader .markdown-body :is(ul,ol){padding-left:24px}.document-reader .markdown-body li{margin:5px 0}
.document-reader .markdown-body pre{white-space:pre-wrap;padding:12px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.document-reader .markdown-body code{font-size:.92em}.document-reader .markdown-body blockquote{margin:12px 0;padding:4px 14px;border-left:3px solid var(--blue);color:var(--muted)}
.document-reader .document-table{max-width:100%;overflow-x:auto;margin:14px 0}.document-reader .document-table table{width:100%;border-collapse:collapse;text-align:left}.document-reader .document-table :is(th,td){padding:7px 10px;border:1px solid var(--line);vertical-align:top}.document-reader .document-table th{font-weight:600;background:color-mix(in srgb,var(--blue) 8%,transparent)}
.document-reader .rf-text-editor{flex:1;min-height:45vh;font-family:inherit;font-size:14px;line-height:1.8}
@container rf-documents (max-width:620px){.document-browser.has-toc>.outline-toc{display:none}.document-browser.has-toc>.document-reader{grid-column:2/-1}.document-reader .rf-version-header{align-items:flex-start}.document-reader .rf-version-header label{width:100%}}
@media(max-width:760px){.studio-main.document-browser,.studio-main.document-browser.has-toc{grid-template-columns:minmax(100px,120px) minmax(0,1fr)}.document-browser.has-toc>.outline-toc{display:none}.studio-empty.document-reader{padding:14px}}

/* Shared component color contracts. Geometry and original business controls stay intact.
   html:root gives these roles precedence over the delivered light-theme selectors. */
html:root[data-theme] body :is(.chat-choice>small,.rf-compose-note,.rf-task-dialog-meta,.rf-task-dialog-empty){color:var(--rf-color-secondary)}
html:root[data-theme] body .chat-choice{border-color:var(--rf-color-accent)}
html:root[data-theme] body .chat-choice>small::before{background:var(--rf-color-selected);color:var(--rf-color-accent)}
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-small-button,.rf-task-chip,.rf-choice){
  color:var(--rf-color-text);background:var(--rf-color-surface);border-color:var(--rf-color-control-border)
}
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-small-button,.rf-task-chip,.rf-choice):hover:not(:disabled):not([aria-disabled=true]){
  color:var(--rf-color-accent-hover);background:var(--rf-color-hover);border-color:var(--rf-color-accent)
}
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-choice)::before{
  color:var(--rf-color-accent);background:var(--rf-color-selected)
}
/* Completed choices are a readable decision record even though their buttons are disabled. */
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-choice):is(:disabled,[aria-disabled=true]){
  opacity:1;color:var(--rf-color-disabled-text);background:var(--rf-color-disabled-bg);cursor:not-allowed
}
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-choice):is([aria-pressed=true],[aria-checked=true]){
  opacity:1;color:var(--rf-color-accent);background:var(--rf-color-selected);border-color:var(--rf-color-accent);border-style:solid
}
html:root[data-theme] body :is(.inline-action,.rf-annotation-jump,.rf-task-dialog a){color:var(--rf-color-accent)}
html:root[data-theme] body :is(.chat .insight,.rf-notice){
  color:var(--rf-color-info);background:var(--rf-color-info-bg);border-color:var(--rf-color-border)
}
html:root[data-theme] body .chat .insight :is(span,svg){color:inherit}
html:root[data-theme] body .chat-deliver span{
  color:var(--rf-color-text);background:var(--rf-color-subtle);border-color:var(--rf-color-border)
}
html:root[data-theme] body .chat-deliver :is(b,strong){color:var(--rf-color-text)}
html:root[data-theme] body .chat-deliver :is(i,small){color:var(--rf-color-muted)}

/* Both notification implementations share the same surface and semantic state colors. */
html:root[data-theme] body :is(.toast,#legacy-toast,.rf-toast){
  color:var(--rf-color-text);background:var(--rf-color-raised);border:1px solid var(--rf-color-border);box-shadow:var(--rf-shadow-floating)
}
html:root[data-theme] body :is(.toast,#legacy-toast,.rf-toast) svg{color:var(--rf-color-success)}
html:root[data-theme] body :is(.toast,#legacy-toast,.rf-toast)[data-tone=error]{
  color:var(--rf-color-danger);background:var(--rf-color-danger-bg)
}
html:root[data-theme] body :is(.toast,#legacy-toast,.rf-toast)[data-tone=warning]{
  color:var(--rf-color-warning);background:var(--rf-color-warning-bg)
}
html:root[data-theme] body :is(.toast,#legacy-toast,.rf-toast):is([data-tone=error],[data-tone=warning]) svg{color:inherit}

/* Floating surfaces, including components added through the original dialogs. */
html:root[data-theme] body :is(#legacy-dialog,.account-dialog,.rf-task-dialog,.style-detail-dialog,.shot-detail-dialog,.rf-surface){
  color:var(--rf-color-text);background:var(--rf-color-raised);border-color:var(--rf-color-border)
}
html:root[data-theme] body :is(.account-menu,.language-menu,.project-action-menu,.composer-popover,.rf-compose-panel,.rf-annotation-popover){
  color:var(--rf-color-text);background:var(--rf-color-raised);border-color:var(--rf-color-border);box-shadow:var(--rf-shadow-floating)
}
html:root[data-theme] body :is(dialog,.account-dialog)::backdrop{background:var(--rf-color-backdrop)}
html:root[data-theme] body :is(.account-menu,.language-menu,.project-action-menu,.rf-compose-panel) :is(button,a,.account-item){
  color:var(--rf-color-secondary)
}
html:root[data-theme] body :is(.account-menu,.language-menu,.project-action-menu,.rf-compose-panel) :is(button,a,.account-item):hover{
  color:var(--rf-color-accent);background:var(--rf-color-hover)
}
/* Project menus share one contract in My Projects and Continue Creating. */
html:root[data-theme] body .project-more{
  color:var(--rf-color-secondary);background:var(--rf-color-surface);border-color:var(--rf-color-control-border)
}
html:root[data-theme] body .project-more:is(:hover,[aria-expanded=true]):not(:disabled){
  color:var(--rf-color-accent);background:var(--rf-color-hover);border-color:var(--rf-color-accent)
}
html:root[data-theme] body .project-more:disabled{
  opacity:1;color:var(--rf-color-disabled-text);background:var(--rf-color-disabled-bg);border-color:var(--rf-color-border);cursor:wait
}
html:root[data-theme] body .project-action-menu :is(button,a):focus-visible{
  color:var(--rf-color-accent);background:var(--rf-color-hover)
}
html:root[data-theme] body .project-action-menu :is([data-action=trash],[data-action=permanent-delete]){
  color:var(--rf-color-danger)
}
html:root[data-theme] body .project-action-menu :is([data-action=trash],[data-action=permanent-delete]):is(:hover,:focus-visible){
  color:var(--rf-color-danger);background:var(--rf-color-danger-bg)
}
html:root[data-theme] body .project-more:focus-visible,
html:root[data-theme] body .project-action-menu :is(button,a):focus-visible{
  outline:2px solid var(--rf-color-focus);outline-offset:2px
}
html:root[data-theme] body :is(.rf-form,.rf-business,.preference-list) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  color:var(--rf-color-text);background:var(--rf-color-surface);border-color:var(--rf-color-control-border)
}
html:root[data-theme] body :is(.rf-form,.rf-business,.preference-list) :is(input,textarea)::placeholder{color:var(--rf-color-muted);opacity:1}
html:root[data-theme] body :is(.rf-form,.rf-business,.preference-list) option{color:var(--rf-color-text);background:var(--rf-color-surface)}
html:root[data-theme] body :is(.rf-form,.rf-business,.preference-list) :is(input,select,textarea):disabled{
  color:var(--rf-color-disabled-text);background:var(--rf-color-disabled-bg);opacity:1
}
html:root[data-theme] body :is(.rf-business,.rf-dialog-actions) button:not(.primary):not(.light):not([type=submit]){
  color:var(--rf-color-secondary);border-color:var(--rf-color-control-border)
}
html:root[data-theme] body :is(.rf-business,.rf-dialog-actions) button:hover:not(:disabled):not(.primary):not(.light):not([type=submit]){
  color:var(--rf-color-accent);background:var(--rf-color-hover)
}
html:root[data-theme] body :is(.rf-business button.primary,.rf-dialog-actions .btn.light,.rf-dialog-actions .btn.primary,.rf-dialog-actions button[type=submit],.rf-button-primary){
  background:var(--rf-color-accent-fill);border-color:var(--rf-color-accent-fill);color:var(--rf-color-on-accent)
}
html:root[data-theme] body :is(.rf-business button.primary,.rf-dialog-actions .btn.light,.rf-dialog-actions .btn.primary,.rf-dialog-actions button[type=submit],.rf-button-primary):hover:not(:disabled){
  background:var(--rf-color-accent-fill-hover);border-color:var(--rf-color-accent-fill-hover)
}
html:root[data-theme] body :is(.rf-business button,.rf-dialog-actions .btn.primary,.rf-dialog-actions button,.rf-button-primary):disabled{
  color:var(--rf-color-disabled-text);background:var(--rf-color-disabled-bg);border-color:var(--rf-color-border);opacity:1
}
html:root[data-theme] body :is(.chat-opt,.quick-reply-btn,.rf-small-button,.rf-task-chip,.rf-choice,.rf-button-primary):focus-visible,
html:root[data-theme] body :is(.rf-business,.rf-form,.rf-dialog-actions) :is(button,input,select,textarea,a):focus-visible{
  outline:2px solid var(--rf-color-focus);outline-offset:2px
}

/* Status foregrounds are theme-specific; pale dark-mode status colors cannot leak into light mode. */
html:root[data-theme] body :is(.rf-status-succeeded,.rf-status-confirmed,.rf-status-accepted,.rf-business .badge.success){
  color:var(--rf-color-success);border-color:var(--rf-color-success);background:var(--rf-color-success-bg)
}
html:root[data-theme] body :is(.rf-status-failed,.rf-status-invalid,.rf-business .badge.failed,.rf-business .error,.rf-form-error){
  color:var(--rf-color-danger);border-color:var(--rf-color-danger);background:var(--rf-color-danger-bg)
}
html:root[data-theme] body :is(.rf-status-uncertain,.rf-business .badge.warning,.rf-business .warning,.rf-business .story-issues,.rf-legacy-notice){
  color:var(--rf-color-warning);border-color:var(--rf-color-warning);background:var(--rf-color-warning-bg)
}
html:root[data-theme] body .rf-business button.danger{color:var(--rf-color-danger)}
html:root[data-theme] body .rf-business button.danger:hover:not(:disabled){background:var(--rf-color-danger-bg)}
/* Conversation choices are staged with attachments; workflow actions live on the right. */
#composerAttachments .rf-choice-progress{display:flex;align-items:center;gap:10px;flex-basis:100%;padding:3px 1px;font-size:12px;color:var(--rf-color-secondary,#8d9bb0)}
#composerAttachments .rf-choice-progress strong{flex-shrink:0;color:var(--rf-color-accent,#8bb9ff);font-weight:600}
#composerAttachments .rf-choice-chip{max-width:100%;min-width:0;flex-shrink:0;border-color:var(--rf-color-accent,#638fc9);background:var(--rf-color-selected,#253448)}
#composerAttachments .rf-choice-chip span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#composerAttachments .rf-choice-chip span:last-child{flex-shrink:0}
#composer .send-btn:disabled{cursor:default;opacity:.4;transform:none}
.rf-right-actions{scroll-margin-top:18px;outline:none}
.rf-right-actions:focus-visible{outline:2px solid var(--rf-color-accent,#8bb9ff);outline-offset:3px}
.rf-right-action-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--rf-color-border,#394150)}
.rf-right-action-row>div{display:grid;gap:5px;min-width:0}
.rf-right-action-row strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.rf-right-action-row small,.rf-action-empty{color:var(--rf-color-secondary,#8d9bb0);font-size:12px}
.rf-right-action-row .inline-action{flex-shrink:0;margin:0}
.rf-action-empty{padding:0 18px 16px}
.rf-run-action{padding-top:8px;padding-bottom:8px}
#legacy-dialog[data-placement=right]{position:fixed;inset:76px 18px auto auto;margin:0;width:min(640px,calc(100vw - 440px));min-width:min(360px,calc(100vw - 36px));max-width:calc(100vw - 36px);max-height:calc(100dvh - 100px)}
@media(max-width:760px){#legacy-dialog[data-placement=right]{inset:20px 12px auto auto;width:calc(100vw - 24px);min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 40px)}.rf-right-action-row{gap:8px;padding:12px}.rf-right-actions .panel-head{flex-wrap:wrap}}

/* Keep each custom-answer entry beside its question, with one composer hint. */
html:root[data-theme] body .rf-staged-choice>small{display:flex;align-items:flex-start;gap:10px}
html:root[data-theme] body .rf-staged-choice>small>span{flex:1;min-width:0}
html:root[data-theme] body .rf-staged-choice>small::before,
html:root[data-theme] body .rf-staged-choice .chat-opt::before{display:none}
html:root[data-theme] body .rf-choice-edit{flex-shrink:0;padding:0;border:0;background:none;color:var(--rf-color-accent);font:inherit;font-size:11px;line-height:1.6;cursor:pointer;text-decoration:none}
html:root[data-theme] body .rf-choice-edit:hover{text-decoration:underline}
html:root[data-theme] body .rf-choice-edit:focus-visible{outline:2px solid var(--rf-color-focus);outline-offset:3px}
html:root[data-theme] body .rf-staged-choice>p{margin:7px 0 0;font-size:12px;color:var(--rf-color-secondary)}
#composerAttachments .rf-choice-progress{gap:0;font-size:12px;line-height:1.6}
#composerAttachments .rf-choice-progress span::before{content:' · ';white-space:pre}
#composerAttachments .rf-choice-chip{max-width:100%;font-size:11px}

/* Component template states; application theme is the only source of appearance. */
html:root[data-theme] body .rf-notice[data-tone=success]{color:var(--rf-color-success);background:var(--rf-color-success-bg)}
html:root[data-theme] body .rf-notice[data-tone=warning]{color:var(--rf-color-warning);background:var(--rf-color-warning-bg)}
html:root[data-theme] body .rf-notice[data-tone=error]{color:var(--rf-color-danger);background:var(--rf-color-danger-bg)}
html:root[data-theme] body .quality-gate.ok .quality-gate-status{color:var(--rf-color-success)}
html:root[data-theme] body .quality-gate.mid .quality-gate-status{color:var(--rf-color-warning)}
html:root[data-theme] body .quality-gate-dot{background:var(--rf-color-muted)}
html:root[data-theme] body .quality-gate.ok .quality-gate-dot{background:var(--rf-color-success)}
html:root[data-theme] body .quality-gate.mid .quality-gate-dot{background:var(--rf-color-warning)}
.mobile-workspace-switch{display:none}
/* On phones, both destinations stay outside the scrolling/hidden panels. */
@media(max-width:960px){
 html:root body.rf-studio:not(.rf-embedded) #appShell{zoom:1!important;transform:none!important;width:100%!important;height:100dvh!important;min-height:0!important;max-width:100%;padding:0}
 html:root body.rf-studio:not(.rf-embedded) .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:0;gap:6px 8px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
 html:root body.rf-studio:not(.rf-embedded) .topbar>.brand{display:none}
 html:root body.rf-studio:not(.rf-embedded) .topbar>.project-title{grid-column:1;grid-row:1;display:flex;min-width:0;width:auto;margin:0}
 html:root body.rf-studio:not(.rf-embedded) .project-title>div{min-width:0}
 html:root body.rf-studio:not(.rf-embedded) .project-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html:root body.rf-studio:not(.rf-embedded) .topbar>.top-actions{grid-column:2;grid-row:1;position:static;display:flex;gap:6px;margin:0;min-width:0}
 html:root body.rf-studio:not(.rf-embedded) .top-actions .ws-account{display:block}
 html:root body.rf-studio:not(.rf-embedded) .ws-account>.avatar{display:flex;align-items:center;justify-content:center;min-width:32px;min-height:36px}
 html:root body.rf-studio:not(.rf-embedded) #appShell[data-mobile-panel=chat] .topbar>.domain-nav{display:none!important}
 html:root body.rf-studio:not(.rf-embedded) .ws-account .account-menu{max-width:calc(100vw - 20px);max-height:70dvh;overflow:auto}
 html:root body.rf-studio:not(.rf-embedded) .topbar .return-projects{min-height:36px}
 html:root body.rf-studio:not(.rf-embedded) .topbar>.domain-nav{position:static!important;transform:none!important;grid-column:1/-1;grid-row:2;display:flex;width:100%;height:auto;min-height:40px;margin:0;padding:0;overflow-x:auto;justify-content:flex-start;gap:4px}
 html:root body.rf-studio:not(.rf-embedded) .domain-nav button{flex:1 0 auto;min-width:0;min-height:40px;height:auto;padding:8px;font-size:13px}
 html:root body.rf-studio:not(.rf-embedded) #mobileAiToggle{display:none!important}
 html:root body.rf-studio:not(.rf-embedded) .mobile-workspace-switch{display:flex;flex:none;gap:8px;padding:6px 10px;border-bottom:1px solid var(--rf-color-border);background:var(--rf-color-surface)}
 .mobile-workspace-switch button{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--rf-color-control-border);border-radius:6px;font:inherit;font-size:14px;cursor:pointer}
 html:root body.rf-studio:not(.rf-embedded) #appShell>.workspace{display:flex!important;flex:1;min-width:0;min-height:0;padding:0;gap:0;overflow:clip}
 html:root body.rf-studio:not(.rf-embedded) .workspace>.ai-panel,
 html:root body.rf-studio:not(.rf-embedded) .workspace>.content-area{position:relative!important;inset:auto!important;flex:1 1 100%;width:100%!important;max-width:100%;min-width:0;min-height:0;height:100%;margin:0;transform:none!important;transition:none;border:0;border-radius:0;z-index:auto!important}
 html:root body.rf-studio:not(.rf-embedded) .workspace>.resize-handle,
 html:root body.rf-studio:not(.rf-embedded) .workspace>.ai-backdrop,
 html:root body.rf-studio:not(.rf-embedded) #appShell:not([data-mobile-panel=chat]) .workspace>.ai-panel,
 html:root body.rf-studio:not(.rf-embedded) #appShell[data-mobile-panel=chat] .workspace>.content-area{display:none!important}
 html:root body.rf-studio:not(.rf-embedded) #appShell[data-mobile-panel=chat] .workspace>.ai-panel{display:flex!important}
 html:root body.rf-studio:not(.rf-embedded) .ai-panel .chat{flex:1;min-height:0;min-width:0;width:100%;padding:12px;overflow:auto;overscroll-behavior:contain;font-size:14px}
 html:root body.rf-studio:not(.rf-embedded) .chat :is(.message,.chat-choice){min-width:0;max-width:100%;overflow-wrap:anywhere}
 html:root body.rf-studio:not(.rf-embedded) .chat .chat-choice>div{display:grid;grid-template-columns:minmax(0,1fr)}
 html:root body.rf-studio:not(.rf-embedded) .chat .chat-opt{min-width:0;max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
 html:root body.rf-studio:not(.rf-embedded) .ai-panel .composer{flex:none;margin:0 12px max(12px,env(safe-area-inset-bottom));padding:10px;max-height:45dvh;overflow:auto}
 html:root body.rf-studio:not(.rf-embedded) #prompt{min-height:40px;max-height:20dvh;font-size:16px}
 html:root body.rf-studio:not(.rf-embedded) #composerResizeHandle{display:none}
 html:root body.rf-studio:not(.rf-embedded) #composer{grid-template-columns:repeat(4,minmax(0,1fr))}
 html:root body.rf-studio:not(.rf-embedded) #composerAttachments{order:-1}
 html:root body.rf-studio:not(.rf-embedded) #composer .composer-tools{display:contents}
 html:root body.rf-studio:not(.rf-embedded) #composer .rf-composer-model-row{order:1;grid-column:1/3;min-width:0;padding:0}
 html:root body.rf-studio:not(.rf-embedded) #composer .rf-project-model{min-height:44px;height:auto;max-width:100%}
 html:root body.rf-studio:not(.rf-embedded) #composer .composer-tools>.composer-shortcuts{order:1;grid-column:3/-1;min-width:0;flex-wrap:nowrap;justify-content:flex-end}
 html:root body.rf-studio:not(.rf-embedded) #composer .composer-tools>:is(.tool-icon,.send-btn){order:2;justify-self:end;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px}
 html:root body.rf-studio:not(.rf-embedded) #composer .composer-tools>[data-upload]{justify-self:start}
 html:root body.rf-studio:not(.rf-embedded) #composer .composer-shortcuts .composer-chip{min-height:44px;padding-inline:6px;font-size:12px;white-space:normal}
 html:root body.rf-studio:not(.rf-embedded) #composerAssist{max-height:25dvh;overflow:auto}
 html:root body.rf-studio:not(.rf-embedded) .content-area>.subnav{flex:none;max-width:100%;overflow-x:auto}
 html:root body.rf-studio:not(.rf-embedded) .content-area>.view-stage{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}
}
/* Landscape and the software keyboard leave too little room for two scrollers. */
@media(max-width:960px) and (max-height:500px){
 html:root body.rf-studio:not(.rf-embedded) #appShell[data-mobile-panel=chat] .workspace>.ai-panel{display:block!important;overflow-y:auto!important;overscroll-behavior:contain}
 html:root body.rf-studio:not(.rf-embedded) .ai-panel .chat{height:auto!important;min-height:0;max-height:none;overflow:visible}
 html:root body.rf-studio:not(.rf-embedded) .ai-panel .composer{max-height:none;overflow:visible}
}

/* V4 account, project status and introduction controls. */
.rf-onboarding{max-width:700px;margin:5vh auto;padding:28px;line-height:1.7}
.rf-onboarding h1{font-size:clamp(26px,4vw,38px);line-height:1.3}
.rf-onboarding-progress{color:var(--rf-color-secondary)}
.rf-onboarding-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0}
.rf-onboarding-options label{display:flex;align-items:center;gap:12px;padding:18px;min-height:64px;cursor:pointer}
.rf-onboarding-options label:has(:checked){border-color:var(--rf-color-accent);background:var(--rf-color-selected);color:var(--rf-color-text)}
.rf-onboarding-options input{accent-color:var(--rf-color-accent-fill)}
.rf-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px}
.rf-help-grid section,.rf-help-article{padding:28px;border:1px solid var(--rf-color-border);border-radius:16px;background:var(--rf-color-surface);line-height:1.8;max-width:80ch}
.rf-help-grid h2{font-size:22px;margin:0 0 12px}.rf-help-grid p{margin:0 0 20px;color:var(--rf-color-secondary)}
.rf-support>h1{margin-bottom:28px}
.rf-project-status{font-size:12px;color:var(--rf-color-secondary)}
.rf-project-status[data-status=review]{color:var(--rf-color-warning)}
.rf-project-status[data-status=completed]{color:var(--rf-color-success)}
.rf-project-status[data-status=attention]{color:var(--rf-color-danger)}
.rf-task-activity{border-top:1px solid var(--rf-color-border);padding-block:16px}
.rf-task-activity ol{list-style:none;max-height:240px;overflow:auto;padding:0;overscroll-behavior:contain}
.rf-task-activity li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:13px}
.rf-task-activity li span{overflow-wrap:anywhere}.rf-task-activity time{flex-shrink:0;color:var(--rf-color-secondary)}
.rf-task-activity small{color:var(--rf-color-secondary)}
#profile-preview{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--rf-color-hover);flex-shrink:0}
#profile-preview img,.account-id-avatar img,.ws-account>.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.profile-avatar-field{display:flex;align-items:center;gap:20px;margin:20px 0}.profile-avatar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.profile-avatar-actions small{flex-basis:100%;color:var(--rf-color-secondary)}
.profile-avatar-button{cursor:pointer;padding:9px 14px;border:1px solid var(--rf-color-control-border);border-radius:8px}
@media(max-width:650px){.rf-onboarding{margin:0;padding:8px}.rf-onboarding-options{grid-template-columns:1fr}.rf-help-grid{grid-template-columns:1fr;gap:20px}.rf-help-grid section,.rf-help-article{padding:20px}.profile-avatar-field{gap:12px}}