/* Workspace layout: global rail (outside) · workspace sidebar · main · optional context panel. */
.ws-layout{--side-w:236px;--tool-w:412px;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.ws-layout:has(.ws-context){grid-template-columns:var(--side-w) minmax(0,1fr) 260px}
.ws-sidebar{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--space-4);max-height:calc(100dvh - var(--app-top,90px) - 44px);overflow:auto;padding:var(--space-2) 0 var(--space-3);}
.ws-main{min-width:0}
.ws-side-top{position:relative}
.ws-switch{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 8px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:16px;font-weight:600;letter-spacing:-.01em;text-align:left;cursor:pointer}
.ws-switch>span:not(.ws-switch-photo){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-switch svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-switch:hover{background:var(--raised)}
.ws-switch-photo{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--raised);color:var(--muted);font-size:10px;font-weight:600}
.ws-switch-photo img{width:100%;height:100%;object-fit:cover}
.ws-switch-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;display:flex;flex-direction:column;padding:6px;border-radius:14px;background:var(--popover-bg);border:1px solid var(--popover-line);box-shadow:var(--popover-shadow)}
.ws-switch-menu button{min-height:38px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
.ws-switch-menu button:hover,.ws-switch-menu button[aria-current]{background:var(--raised)}
.ws-switch-menu hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--line)}
.ws-new-chat{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px;cursor:pointer}
.ws-new-chat svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ws-new-chat:hover{background:var(--raised)}
.ws-side-nav{display:flex;flex-direction:column}
.ws-side-nav button,.ws-side-group li button,.ws-brand{display:flex;align-items:center;gap:9px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer;transition:background var(--motion-fast) ease}
.ws-side-nav button:hover,.ws-side-group li button:hover,.ws-brand:hover{background:var(--raised)}
.ws-side-nav button[aria-current],.ws-side-group li button[aria-current],.ws-brand[aria-current]{background:var(--raised);font-weight:500}
.ws-side-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px;margin-bottom:2px}
.ws-side-head h2{margin:0;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:0}
.ws-side-head button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.ws-side-head button:hover{background:var(--raised);color:var(--text)}
.ws-side-group ul{list-style:none;margin:0;padding:0}
.ws-side-group li button span,.ws-side-group li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-side-group li button span{flex:1}
.ws-brand>span:not(.ws-switch-photo){flex:1}
.ws-layout .home-needs{max-width:680px}
.ws-side-empty{padding:4px 10px;color:var(--muted);font-size:13px}
.ws-side-bottom{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line)}
/* Sidebar as a stack of cards: workspace, navigation, projects, chats, brand. */
.ws-sidebar{gap:8px;padding-top:0}
.ws-card{padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ws-card .ws-switch,.ws-card .ws-new-chat{border-radius:10px}
.ws-side-nav{gap:1px}
.ws-side-nav button svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.ws-side-nav button[aria-current] svg{color:var(--text)}
.ws-side-nav button[aria-current],.ws-side-group li button[aria-current],.ws-brand[aria-current]{background:var(--raised);font-weight:600}
.ws-side-group{padding-top:10px}
.ws-side-group .ws-side-head{margin-bottom:4px}
.ws-side-projects ul{max-height:none;overflow:visible}
.ws-side-group li button{min-height:40px}
.ws-side-group li button span{display:grid;line-height:1.25}
.ws-side-group li button small,.ws-brand small{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:11px;font-weight:400}
.ws-side-group li button.ws-side-more{min-height:32px;color:var(--muted);font-size:12px}
.ws-side-bottom{margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.ws-brand{min-height:46px}.ws-brand>span:not(.ws-switch-photo){display:grid;line-height:1.25}

:is(.ws-sidebar,.ws-switch-menu) button:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:-2px}
.ws-drawer-toggle{display:none}
.ws-scrim{display:none}
.ws-context{position:sticky;top:0;max-height:calc(100dvh - var(--app-top,90px) - 44px);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel)}
.ws-context h2{margin:0;font-size:13px;font-weight:500;color:var(--muted)}
.ws-context p{margin:0;font-size:14px;line-height:1.5}
.ws-context dl{display:grid;gap:8px;margin:0}
.ws-context dt{color:var(--muted);font-size:12px}
.ws-context dd{margin:0;font-size:13px;line-height:1.45}
.ws-context .quiet{align-self:flex-start;min-height:34px;border-radius:999px}
.ws-context-empty{color:var(--muted)}
/* The sidebar lists projects, so Home's Continue list only shows where the sidebar is hidden. */
.ws-layout .home-columns{grid-template-columns:minmax(0,1fr)}
.ws-layout .home-section[aria-labelledby="homeContinue"]{display:none}
#importsButton{display:none!important}
:root[data-theme="light"] .ws-context{background:rgba(255,255,255,.84);border-color:var(--glass-line)}

@media (max-width:1280px){.ws-layout:has(.ws-context){grid-template-columns:var(--side-w) minmax(0,1fr)}.ws-context{display:none}}
@media (max-width:960px){
 .ws-layout,.ws-layout:has(.ws-context){grid-template-columns:minmax(0,1fr)}
 .ws-sidebar{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(300px,86vw);max-height:none;padding:var(--space-4);background:var(--popover-bg);border-right:1px solid var(--popover-line);box-shadow:var(--popover-shadow);transform:translateX(-105%);transition:transform var(--motion-standard) var(--motion-ease);visibility:hidden}
 .ws-sidebar.is-open{transform:none;visibility:visible}
 .ws-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.35)}
 .ws-drawer-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-bottom:var(--space-3);padding:0 12px 0 8px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:14px;font-weight:500;cursor:pointer}
 .ws-drawer-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
 .ws-layout .home-section[aria-labelledby="homeContinue"]{display:block}
}
@media (prefers-reduced-motion:reduce){.ws-sidebar{transition:none}.ws-side-nav button,.ws-side-group li button,.ws-brand{transition:none}}
/* Home right panel: brand at a glance, then each project's next step. */
@media (min-width:1281px){.ws-layout:has(.ws-context){grid-template-columns:var(--side-w) minmax(0,1fr) 280px;gap:clamp(28px,3.2vw,48px)}}
/* Home centres its chat; project pages stay left-aligned so the header never moves between tabs. */
.ws-layout:has(.ws-context:not(.ws-project-context)) .ws-main>#brandSurface,.ws-layout:has(.ws-context:not(.ws-project-context)) .home-greeting{max-width:760px;margin-inline:auto;width:100%}
.ws-context{padding:0;border:0;background:transparent;gap:10px}
.ws-glance,.ws-upnext{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.ws-glance-line{font-size:15px!important;font-weight:600;line-height:1.35!important}
.ws-upnext ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.ws-upnext li button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:6px 8px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.ws-upnext li button:hover{background:var(--raised)}
.ws-upnext li button span{display:grid;min-width:0;font-size:14px;line-height:1.3}
.ws-upnext li button small{color:var(--muted);font-size:12px}
.ws-upnext li button:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:1px}
/* Sidebar titles fade out at the card edge instead of being cut off. */
.ws-side-group li button[data-side-project],.ws-side-group li .ws-chat-title{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.ws-side-group li button[data-side-project] span,.ws-side-group li .ws-chat-title{text-overflow:clip!important}
.ws-upnext li button span,.ws-upnext li button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Project rows with a chats dropdown. */
.ws-project-row{display:flex;align-items:center;gap:2px}
.ws-project-row>button[data-side-project]{flex:1;min-width:0}
.ws-side-group li .ws-project-toggle{flex:none;display:grid;min-height:28px;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.ws-project-toggle:hover{background:var(--raised);color:var(--text)}
.ws-project-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast,.15s) ease}
.ws-project-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.ws-project-toggle[hidden]{display:none}
.ws-project-chats{margin:0 0 4px 22px!important;padding:0 0 0 8px!important;border-left:1px solid var(--line)}
.ws-project-chats[hidden]{display:none}
.ws-project-chats .ws-chat-title{min-height:32px!important;font-size:13px!important;color:var(--muted)!important}
.ws-project-chats .ws-chat-title:hover{color:var(--text)!important}
@media (prefers-reduced-motion:reduce){.ws-project-toggle svg{transition:none}}
/* Chat rows: title plus a ⋯ menu (rename, archive, delete); the menu is an opaque popover like the others. */
.ws-chat{position:relative;display:flex;align-items:center}
.ws-chat>.ws-chat-title{flex:1;min-width:0}
.ws-side-group li .ws-chat-more{min-height:26px;}
.ws-chat-more{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px!important;height:26px;padding:0!important;border:0;border-radius:8px;background:var(--raised);color:var(--muted);opacity:0;cursor:pointer;transition:opacity var(--motion-fast,.15s) ease}
.ws-chat-more svg{width:16px;height:16px;fill:currentColor}
.ws-chat:hover .ws-chat-more,.ws-chat:focus-within .ws-chat-more,.ws-chat-more[aria-expanded="true"]{opacity:1}
.ws-chat-more:hover{color:var(--text)}
@media (hover:none){.ws-chat-more{opacity:1;background:transparent}}
.ws-chat-rename{flex:1;min-width:0;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.ws-chat-menu{position:fixed;z-index:80;display:grid;gap:2px;min-width:180px;max-width:260px;padding:6px;border:1px solid var(--popover-line);border-radius:14px;background:var(--popover-bg);box-shadow:var(--popover-shadow)}
.ws-chat-menu button{min-height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font-size:14px;text-align:left;cursor:pointer}
.ws-chat-menu button:hover,.ws-chat-menu button:focus-visible{background:var(--raised);outline:none}
.ws-chat-menu .is-danger{color:var(--danger)}
.ws-chat-menu p{margin:4px 8px 8px;font-size:13px;line-height:1.4;color:var(--muted)}
.ws-chat-confirm{display:flex;justify-content:flex-end;gap:4px}
.ws-chat-confirm .is-danger{background:color-mix(in srgb,var(--danger) 14%,transparent)}
@media (prefers-reduced-motion:reduce){.ws-chat-more{transition:none}}
/* Project Talk right panel: brief at a glance, latest render, files. */
.ws-project-context .ws-glance-line{font-size:14px!important;font-weight:500}
.ws-panel-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.ws-panel-links{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ws-project-context .text-button{min-height:0;padding:0;font-size:13px}
.ws-render{margin:0;display:grid;gap:6px}
.ws-render video{width:100%;max-height:340px;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#000}
.ws-render figcaption{font-size:12px;color:var(--muted)}
.ws-main .project-room-header{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:14px}
.ws-main .project-room-header>.project-views{align-self:flex-start}
/* Compact project header (same on every tab): smaller title with the type beside it, tabs on their own row. */
.ws-main .project-room-header{gap:10px;margin-bottom:14px}
.ws-main .project-room-header>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.ws-main .project-room-header>div:first-child>.project-back{flex-basis:100%;justify-content:flex-start;text-align:left}
.ws-main .project-room-header h1{margin:6px 0 0;font-size:28px;line-height:1.15;letter-spacing:-.01em}
.ws-main .project-room-header>div:first-child>p{margin:0;font-size:13px;color:var(--muted)}
.ws-main .project-room-header .project-views button{min-height:34px;padding:6px 14px}
/* Pipeline: one row — steps, the next action, and the Flow pill. */
.ws-main .pipeline{max-width:none;margin:0 0 10px}
.ws-main .pipeline-top{flex-wrap:nowrap;gap:14px;margin:0}
.ws-main .pipeline-top .pipeline-line{flex:1;min-width:0;row-gap:2px}
.pipeline-next{display:flex;align-items:center;gap:10px;flex:none}
.pipeline-next-label{font-size:12px;color:var(--muted);white-space:nowrap}
.pipeline-next .primary,.pipeline-next .quiet{min-height:32px;padding:5px 14px;font-size:13px}
.ws-main .pipeline-error{margin:8px 0 0;font-size:13px}
.ws-main .pipeline-render{margin-top:12px}
#projectRoomSurface:has(#projectTalk .assist-docked)>#pipelineNext{padding-bottom:8px}
#pipelineNext.is-compact .pipeline{margin-bottom:14px}
@media (max-width:900px){.ws-main .pipeline-top{flex-wrap:wrap}.ws-main .pipeline-top .pipeline-line{flex-basis:100%}}
.ws-main .project-room-header h1{font-weight:650}
.ws-main .pipeline-top .pipeline-line{column-gap:10px;font-size:11.5px}
/* Drag a Home chat onto a project (or back onto Chats). */
.ws-chat[draggable="true"]{cursor:grab}
.ws-chat[draggable="true"]:active{cursor:grabbing}
/* Drop targets are drawn inside each element (tint + inset ring), so the scrolling sidebar can't clip their sides. */
.ws-project,.ws-side-group{transition:background .15s ease,box-shadow .15s ease,border-color .15s ease}
.is-dragging-chat .ws-project{border-radius:10px;background:color-mix(in srgb,var(--focus,#0a84ff) 5%,transparent)}
.ws-project.is-drop{background:color-mix(in srgb,var(--focus,#0a84ff) 12%,transparent);box-shadow:inset 0 0 0 1.5px var(--focus,#0a84ff)}
.ws-side-group.is-drop{border-color:var(--focus,#0a84ff);box-shadow:inset 0 0 0 1px var(--focus,#0a84ff);background:color-mix(in srgb,var(--focus,#0a84ff) 8%,var(--panel))}
@media (prefers-reduced-motion:reduce){.ws-project,.ws-side-group{transition:none}}
.ws-chat-menu [data-move-to][aria-current]::after{content:" ✓";color:var(--muted)}

/* The workspace panel doesn't scroll on desktop: lists are capped (5 projects, 5 chats) instead. The phone drawer keeps scrolling. */
@media (min-width:761px){.ws-sidebar,html:has(.assist-docked) .ws-sidebar{overflow:visible;max-height:none}}
.ws-switch-menu hr{margin:4px 0}
/* Ideas kept from chat, in Home's right panel. */
.ws-ideas-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ws-ideas-head .text-button{font-size:12px}
.ws-ideas{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ws-ideas li{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 8px;margin:0 -8px;border-radius:10px;font-size:13px;line-height:1.35}
.ws-ideas li:hover,.ws-ideas li:focus-within{background:var(--raised)}
.ws-ideas li span{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ws-ideas .ws-idea-start,.ws-ideas .ws-idea-linked{width:auto;display:inline-flex;align-items:center}
.ws-idea-start{flex:none;min-height:26px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s ease}
.ws-ideas li:hover .ws-idea-start,.ws-idea-start:focus-visible{opacity:1}
@media (hover:none){.ws-idea-start{opacity:1}}
.ws-idea-linked{flex:none;font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis}
/* Notes page (list + one open note) and the project panel card. */
.notes-page{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;padding:8px 0 48px}
.notes-side{display:grid;gap:10px}
.notes-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.notes-side-head h1{margin:0;font-size:22px;letter-spacing:-.02em}
.notes-new{min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:13px;cursor:pointer}
.notes-new:hover{background:var(--raised)}
.notes-side input[type=search]{appearance:none;width:100%;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px}
.notes-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:calc(100vh - var(--app-top,90px) - 180px);overflow:auto}
.notes-list button{display:grid;gap:2px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.notes-list button:hover{background:var(--raised)}
.notes-list button[aria-current]{background:var(--raised)}
.notes-list strong{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-list small{font-size:12px;color:var(--muted)}
.notes-empty{padding:8px 10px;font-size:13px;color:var(--muted)}
.notes-doc{min-width:0;max-width:760px}
.notes-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.notes-tools button{min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:13px;cursor:pointer}
.notes-tools button:hover,.notes-tools button[aria-pressed="true"]{background:var(--raised)}
.notes-tools .notes-danger{color:var(--danger,#d4574a)}
.notes-tools select{width:auto;min-height:32px;padding:4px 10px;border-radius:999px;font-size:13px}
.notes-spacer{flex:1}
.notes-doc input.notes-title{width:100%;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.025em;outline:none}
.notes-meta{margin:6px 0 20px;font-size:12px;color:var(--muted)}
.notes-doc textarea.notes-body{width:100%;height:auto;min-height:50vh;field-sizing:content;resize:none;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;line-height:1.7;outline:none}
.notes-read{font-size:15px;line-height:1.7}
.notes-read p{margin:0 0 10px;color:var(--text)}
.note-lines{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:2px}
.note-lines li{position:relative;display:flex;align-items:baseline;gap:12px;padding:7px 10px 7px 26px;border-radius:10px}
.note-lines li::before{content:'';position:absolute;left:11px;top:1.05em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.note-lines li:hover,.note-lines li:focus-within{background:var(--raised)}
.note-lines li span{flex:1;min-width:0}
.note-start,.note-linked{flex:none;min-height:26px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:12px;cursor:pointer}
.note-start{opacity:0;transition:opacity .15s ease}
.note-lines li:hover .note-start,.note-start:focus-visible{opacity:1}
@media (hover:none){.note-start{opacity:1}}
.note-linked{border-color:transparent;background:transparent;color:var(--muted)}
.note-linked:hover{color:var(--text)}
.notes-blank{max-width:460px;padding:48px 0}
.notes-blank h2{margin:0 0 8px;font-size:22px}
.notes-blank p{margin:0 0 18px;font-size:14px;line-height:1.6}
.project-preset-idea{font-size:13px;line-height:1.5;color:var(--muted)}
.ws-panel-notes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ws-panel-notes .text-button{font-size:13px;text-align:left;white-space:normal;color:var(--text)}
@media (max-width:760px){.notes-page{grid-template-columns:1fr}.notes-side{position:static}.notes-list{max-height:220px}.notes-tools .notes-spacer{display:none}}

/* Tabs: one glider slides under the selected tab (placed by tabs.js). */
.brand-views.has-glider{position:relative;isolation:isolate}
.tab-glider{position:absolute;top:3px;bottom:3px;left:0;z-index:0;width:var(--glide-w,0);transform:translateX(var(--glide-x,0));border-radius:999px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .28s cubic-bezier(.3,.7,.2,1),width .28s cubic-bezier(.3,.7,.2,1);pointer-events:none}
:root[data-theme="light"] .tab-glider{background:#fff;box-shadow:0 1px 3px rgba(40,52,70,.12)}
.tab-glider.is-still{transition:none}
.brand-views.has-glider>button{position:relative;z-index:1}
:root .brand-views.has-glider>button[aria-selected="true"],:root[data-theme] .brand-views.has-glider>button[aria-selected="true"]{background:transparent;box-shadow:none}

/* Brief: “Ask in Talk” and “Write it” as pills. */
.brief-part .book-empty{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.brief-part .book-empty>span{color:var(--muted);font-size:14px;margin-right:2px}
.brief-pill{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border:1px solid transparent;border-radius:999px;background:var(--raised);color:var(--text);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.brief-pill:hover{background:color-mix(in srgb,var(--text) 12%,var(--raised))}
.brief-pill.is-outline{background:transparent;border-color:var(--line)}
.brief-pill.is-outline:hover{background:var(--raised)}
.brief-pill:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}

/* Project type pill next to the title, and its dialog. */
.type-pill{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 8px 2px 10px;border:0;border-radius:999px;background:var(--raised);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;transition:color .15s ease,background .15s ease}
.type-pill:hover{color:var(--text)}
.type-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.type-dialog{display:grid;gap:14px}
.type-dialog p{margin:0}
.type-dialog-note{font-size:13px;color:var(--muted)}
.type-dialog .primary{justify-self:start}

/* “How does it start?”: opens and closes smoothly; the three cards rise in one after another. */
.reel-start-field{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .26s ease,opacity .2s ease,margin .26s ease}
.reel-start-field:not(.is-open){margin-top:0!important;margin-bottom:0!important}
.reel-start-field.is-open{grid-template-rows:1fr;opacity:1}
.reel-start-inner{min-height:0;overflow:hidden;display:grid;gap:8px;padding:1px 1px 3px}
.reel-start-inner>span{font-size:13px;color:var(--muted)}
.reel-start-field .reel-starts{margin:0}
.reel-start-field .reel-start{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;text-align:left;transition:border-color .15s ease,background .15s ease}
.reel-start-field .reel-start input{width:16px;height:16px;min-height:0;margin:2px 0 0;padding:0;justify-self:start}
.reel-start-field.is-open .reel-start{animation:reel-card-in .34s cubic-bezier(.2,.7,.2,1) both}
.reel-start-field.is-open .reel-start:nth-child(2){animation-delay:.05s}
.reel-start-field.is-open .reel-start:nth-child(3){animation-delay:.1s}
@keyframes reel-card-in{from{opacity:0;transform:translateY(8px)}}

/* Library: where a file is still used. */
.asset-links p{margin:6px 0 0;font-size:14px}
.asset-links ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.asset-links li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--raised)}
.asset-links li>span:first-child{display:grid;gap:2px;min-width:0}
.asset-links strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-links small{font-size:12px;color:var(--muted)}
.asset-link-actions{display:flex;align-items:center;gap:10px;flex:none}
@media (prefers-reduced-motion:reduce){.tab-glider,.reel-start-field,.reel-start-field .reel-start,.brief-pill,.type-pill{transition:none!important;animation:none!important}}

/* Chat link pills under a reply (where things are in FuelStorm). */
.assist-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.assist-link{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:4px 10px 4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .15s ease}
.assist-link:hover{background:var(--raised)}
.assist-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.assist-review-script small{display:block;margin:2px 0 6px;color:var(--muted)}
.assist-script-full{margin:4px 0 10px;font-size:13px}
.assist-script-full summary{cursor:pointer;color:var(--text);font-weight:500}
.assist-script-full h5{margin:10px 0 2px;font-size:12px;color:var(--muted);font-weight:500}
.assist-script-full p{margin:0;white-space:pre-wrap;line-height:1.5}

/* Brief: the Script section and a highlight when a link opens a section. */
.brief-script-label{margin:12px 0 2px;font-size:12px;font-weight:500;color:var(--muted)}
.brief-script-label:first-of-type{margin-top:6px}
.brief-script.is-editing .project-field{margin:10px 0 0}
/* Hook Check (public/hook-check.js) under a short video's Script */
.brief-script .brief-head [data-hook-check]{margin-left:auto;margin-right:14px}
.hook-check{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.hook-check-head{display:flex;align-items:baseline;gap:10px}.hook-check-head h4{margin:0;font-size:14px}.hook-check-head .text-button{margin-left:auto}
.hook-check h5{margin:12px 0 4px;font-size:12px;font-weight:500;color:var(--muted)}
.hook-check-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.hook-check-row{display:flex;gap:8px;align-items:flex-start;font-size:13px}.hook-check-row strong{font-weight:500}
.hook-check-row q,.hook-check-row small{display:block;color:var(--muted);font-size:12px}.hook-check-row small{color:var(--text)}
.hook-check-mark{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.hook-check-row.is-weak .hook-check-mark{background:color-mix(in srgb,#f5a524 30%,transparent)}
.hook-check-stack{display:flex;flex-wrap:wrap;gap:6px;margin:0}.hook-check-stack span{padding:2px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--muted)}.hook-check-stack span.is-on{color:var(--text);border-color:color-mix(in srgb,var(--text) 35%,transparent)}
.hook-check-rewrite p{margin:6px 0;font-size:13px}.hook-check-rewrite small{display:block;color:var(--muted);font-size:11px}.hook-check-rewrite .brief-pill{min-height:26px;padding:2px 10px;margin-left:6px}
.brief-part{scroll-margin-top:calc(var(--app-top,90px) + 16px);transition:background .6s ease;border-radius:12px}
.brief-part.is-flash{background:color-mix(in srgb,var(--focus,#0a84ff) 8%,transparent)}

/* Talk right panel: Documents. */
.ws-docs{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ws-docs li{display:flex;align-items:center;gap:8px;min-height:32px;font-size:13px}
.ws-docs li>i{width:7px;height:7px;flex:none;border-radius:50%;border:1.5px solid var(--muted)}
.ws-docs li[data-filled="true"]>i{background:var(--text);border-color:var(--text)}
.ws-docs li>span:nth-of-type(1){flex:1}
.ws-doc-actions{display:flex;gap:10px}
.ws-doc-actions .text-button{min-height:0;padding:0;font-size:12px}

/* The step row: every step is a button; one line that scrolls sideways when narrow. */
.ws-main .pipeline-top .pipeline-line{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;column-gap:2px}
.ws-main .pipeline-top .pipeline-line::-webkit-scrollbar{display:none}
.pipeline-line li{position:relative;flex:none}
.pipeline-line li+li::before{content:"";width:10px;height:1px;margin-right:2px;background:var(--line)}
.pipeline-line li>button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 8px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .15s ease,color .15s ease}
.pipeline-line li>button:hover{background:var(--raised);color:var(--text)}
.pipeline-line li[data-status="done"]>button i{display:grid;place-items:center;width:12px;height:12px;border:0;background:var(--text);color:var(--panel)}
.pipeline-line li[data-status="done"]>button i::after{content:"";width:5px;height:3px;margin-top:-1px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.pipeline-line li[aria-current="step"]>button{background:var(--raised)}
@media (max-width:900px){.ws-main .pipeline-top .pipeline-line{flex-basis:100%}}

/* Workspaces page: content lines up with the header's content; compact cards. */
#brandHub>.brand-intro,#platformMain>.brand-intro,#brandHub>.client-search,#brandHub>.workspace-groups,#brandHub>details.unassigned{padding-inline:26px}
#brandHub>.brand-intro h1,#platformMain>.brand-intro h1{font-size:clamp(32px,3.6vw,52px)}
#brandHub .client-grid{grid-template-columns:repeat(auto-fill,minmax(230px,290px));gap:12px}
#brandHub .client-directory-card .brand-project{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;min-height:0;height:auto;padding:14px 92px 14px 14px;border-radius:16px;text-align:left}
#brandHub .client-directory-card .client-directory-photo{grid-column:1;grid-row:1/3;width:44px;height:44px;font-size:14px}
#brandHub .client-directory-card .brand-project strong{grid-column:2;font-size:17px;line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#brandHub .client-directory-card .brand-project>span:not(.client-directory-photo){grid-column:2;font-size:12.5px;color:var(--muted)}
#brandHub .client-directory-card .brand-project span:last-child{display:none}
#brandHub .client-manage-card{left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%);min-height:30px;padding:4px 12px;border-radius:999px}
@media (max-width:760px){#platformMain>.brand-intro,#brandHub>.brand-intro,#brandHub>.client-search,#brandHub>.workspace-groups,#brandHub>details.unassigned{padding-inline:0}#brandHub .client-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.brief-part,.pipeline-line li>button,.assist-link{transition:none}}
/* Steps get the full first line; “Next” and its button sit beneath, “How it’s made” on the right. */
.ws-main .pipeline-top{flex-wrap:wrap;row-gap:6px}
.ws-main .pipeline-top .pipeline-line{flex:1 1 100%}
.ws-main .pipeline-top .pipeline-next{margin-right:auto}

/* Next row: clear space from the steps above and the content below. */
.ws-main .pipeline-top{row-gap:12px}
.ws-main .pipeline{padding-bottom:16px}
.ws-main .pipeline-top .pipeline-next{display:flex;align-items:center;gap:10px;min-height:36px}
.ws-main .pipeline-top .pipeline-flow{display:flex;align-items:center;min-height:36px}
.brief #pipelineNext .pipeline{margin-bottom:20px;border-bottom:1px solid var(--line)}
@media (max-width:900px){.ws-main .pipeline-top .pipeline-flow{margin-left:auto}}

/* Document reader: a pop-up over a blurred page. */
.doc-reader{width:min(680px,calc(100vw - 32px));max-height:80vh;padding:0;border:1px solid var(--popover-line);border-radius:22px;background:var(--popover-bg);color:var(--text);box-shadow:var(--popover-shadow);overflow:hidden}
.doc-reader[open]{animation:doc-reader-in .2s cubic-bezier(.2,.7,.2,1)}
.doc-reader::backdrop{background:rgba(0,0,0,.45)}
@supports (backdrop-filter:blur(1px)){.doc-reader::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(10px)}}
:root[data-theme="light"] .doc-reader::backdrop{background:rgba(20,24,32,.22)}
@keyframes doc-reader-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
.doc-reader-panel{display:flex;flex-direction:column;max-height:80vh}
.doc-reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 12px}
.doc-reader-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.doc-reader-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.doc-reader-body{flex:1;min-height:0;overflow-y:auto;padding:4px 24px 20px;}
.doc-reader-body section+section{margin-top:18px}
.doc-reader-body h3{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}
.doc-reader-body p{margin:0;font-size:16px;line-height:1.65;color:var(--text)}
.doc-reader-empty{color:var(--muted)!important}
.doc-reader-actions{display:flex;align-items:center;gap:8px;padding:14px 24px 18px;border-top:1px solid var(--line)}
.doc-reader-spacer{flex:1}
@media (prefers-reduced-motion:reduce){.doc-reader[open]{animation:none}}

/* Settings: OpenRouter fallback switch. */
.router-fallback{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:13px;color:var(--text);cursor:pointer}
.router-fallback input{flex:none;margin-top:2px}
.router-fallback span{display:grid;gap:2px}
.router-fallback small{font-size:12px;color:var(--muted)}

/* Project header: title and settings pill on one line. */
.project-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.project-title-row h1{margin:0}
.project-title-row .type-pill{transform:translateY(2px)}

/* Next-step card, just above the Talk chat box. */
.step-card{margin:0 0 10px;border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;animation:step-card-in .22s ease both}
@keyframes step-card-in{from{opacity:0;transform:translateY(6px)}}
.step-card-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.step-card-kicker{padding:1px 8px;border-radius:999px;background:var(--raised);font-size:11px;font-weight:600;color:var(--muted)}
.step-card[data-view="done"] .step-card-kicker{background:color-mix(in srgb,#2fb36b 20%,transparent);color:#2fb36b}
.step-card-head strong{font-size:14px;font-weight:600;white-space:nowrap}
.step-card-hint{min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-card-head svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.step-card.is-collapsed .step-card-head svg{transform:rotate(-90deg)}
.step-card-body{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 14px 12px}
.step-card-body>.primary,.step-actions .primary{min-height:34px;padding:6px 16px;border-radius:999px}
.step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.step-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.step-chip{min-height:30px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;transition:background .15s ease}
.step-chip:hover{background:var(--raised)}
.step-chip.is-quiet{color:var(--muted)}
.step-chip-sep{width:1px;height:18px;background:var(--line);margin:0 2px}
.step-note{width:100%;margin:0;font-size:12.5px;color:var(--muted)}
.step-progress{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.step-progress i{width:8px;height:8px;border-radius:50%;background:var(--text);animation:gen-pulse 1.2s ease-in-out infinite}
.step-video{width:100%;margin:0}
.step-video video{display:block;max-height:320px;max-width:100%;border-radius:12px;background:#000}
.step-schedule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,160px);gap:8px 12px;width:100%}
.step-schedule label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.step-schedule input,.step-schedule select,.step-schedule textarea{width:100%;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--text);font:inherit;font-size:13px}
.step-schedule-caption{grid-column:1/-1}
.step-schedule textarea{resize:vertical;min-height:52px}
.step-schedule .step-actions{grid-column:1/-1}
@media (max-width:760px){.step-card-hint{display:none}.step-schedule{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.step-card{animation:none}.step-card-head svg{transition:none}.step-progress i{animation:none}}
.assist.assist-docked>.step-card:not(.assist-thread){order:2;flex:none}
.step-card[data-view="review"] .step-card-body{flex-wrap:nowrap;align-items:flex-end}
.step-card[data-view="review"] .step-video{width:auto;flex:none}
.step-video video{max-height:220px}
@media (max-width:760px){.step-card[data-view="review"] .step-card-body{flex-wrap:wrap}}
/* Project settings buttons, and renaming the title in place. */
.type-dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:4px}
.type-dialog-actions button{min-height:40px;padding:0 20px;border-radius:999px;font-weight:600}
.type-dialog-actions .quiet{border:1px solid var(--line);background:transparent;color:var(--text)}
.type-dialog .type-dialog-note{margin:0}
.type-dialog .reel-start-field.is-open{margin:0}
.project-title-row h1{cursor:text}
.project-title-edit{font:inherit;font-size:clamp(28px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;padding:2px 8px;margin:-2px -8px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--text);min-width:min(520px,100%)}
.step-note-inline{font-size:12.5px;color:var(--muted)}
.step-chip:disabled{opacity:.55;cursor:default}

/* Planner: where each project stands. */
.planner-stage{display:flex;align-items:center;gap:8px;margin:4px 0 2px;font-size:11.5px;color:var(--muted);--stage:var(--muted)}
.planner-stage.is-loading{height:14px}
.planner-stage.is-planning{--stage:#8a8f98}.planner-stage.is-footage,.planner-stage.is-edit{--stage:#3b82f6}.planner-stage.is-review{--stage:#f5a524}.planner-stage.is-ready{--stage:#22c55e;color:#22c55e}
.planner-stage-bar{display:flex;gap:2px}
.planner-stage-bar i{width:10px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--stage) 22%,transparent)}
.planner-stage-bar i.is-done{background:var(--stage)}
.planner-stage-bar i.is-now{background:color-mix(in srgb,var(--stage) 60%,transparent)}
.planner-stage-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.planner-stage-filters button{min-height:30px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}
.planner-stage-filters button[aria-pressed="true"]{background:var(--text);color:var(--panel);border-color:var(--text)}

/* Project pages: the page in the middle, the project chat as a panel on the right (collapsible to a rail). */
.ws-layout.has-chat{grid-template-columns:var(--side-w) minmax(0,1fr) var(--tool-w);gap:clamp(20px,2.4vw,36px)}
/* Widths come from variables so a panel can shrink before its content switches to the icon layout (see setSideCollapsed). */
.ws-layout.side-collapsed,.ws-layout.side-closing{--side-w:52px}
.ws-layout.chat-collapsed,.ws-layout.chat-closing{--tool-w:52px}
.ws-layout{transition:grid-template-columns .22s ease}
.ws-chat-panel{position:sticky;top:0;align-self:stretch;min-height:0;max-height:calc(100dvh - var(--app-top,90px) - 44px);display:flex;flex-direction:row;justify-content:flex-end;border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
/* Tool body (the active tool) and the rail of tools on the panel's outer edge. */
.tool-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.chat-panel-head{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 6px 4px 16px;border-bottom:1px solid var(--line)}
.tool-title{flex:1;margin:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.tool-close:hover{background:var(--raised);color:var(--text)}
.tool-close svg,.tool-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool-rail{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:50px;padding:7px 0}
.tool-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease}
.tool-btn:hover{background:var(--raised);color:var(--text)}
.tool-btn[aria-expanded="true"]{background:var(--raised);color:var(--text)}
.tool-btn:focus-visible,.tool-close:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
.tool-btn svg{width:18px;height:18px}
.ws-chat-panel #projectTalk{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:0 12px}
.ws-chat-panel #projectTalk .assist-docked .assist-thread{padding-right:2px}
.ws-chat-panel #projectTalk .assist-docked .assist-composer{margin:8px 0 12px}
.ws-chat-panel .step-card{margin-top:8px}
.chat-collapsed .ws-chat-panel{border-radius:16px}
.chat-collapsed .tool-body{display:none}
/* While the panel shrinks or grows, the body keeps its width and is clipped instead of reflowing. */
.chat-closing .tool-body,.chat-opening .tool-body{flex:none;width:calc(var(--tool-open-w,412px) - 52px)}
.chat-closing .tool-body{opacity:0;transition:opacity .14s ease}
.chat-opening .tool-body{animation:tool-fade-in .26s ease both}
@keyframes tool-fade-in{from{opacity:0}40%{opacity:0}to{opacity:1}}
/* The project page itself keeps a comfortable width next to the chat. */
.has-chat .ws-main #projectRoomSurface{max-width:none}
/* Brief: its documents as a compact row at the top. */
.brief-docs{margin:0 0 16px}
.brief-docs h2{display:none}
.brief-docs .ws-docs{display:flex;flex-wrap:wrap;gap:8px}
.brief-docs .ws-docs li{min-height:34px;padding:2px 12px;border:1px solid var(--line);border-radius:999px}

/* Workspace panel collapsed to an icon rail. */
.ws-collapse{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.ws-collapse:hover{background:var(--raised);color:var(--text)}
.ws-collapse svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
/* Collapsed keeps every padding and icon position of the open panel; only the column narrows (52px, like the chat
   rail) and the labels go, so collapsing and expanding never shift the icons. Labels stay readable to screen readers. */
.side-collapsed .ws-sidebar{width:52px}
.side-collapsed .ws-switch>span:not(.ws-switch-photo),.side-collapsed .ws-switch>svg{display:none}
.side-collapsed :is(.ws-side-nav button span,.ws-new-chat span){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.side-collapsed .ws-side-group{display:none}
/* Left panel closing/opening: the column animates while labels and the project/chat cards fade; nothing wraps. */
.side-closing .ws-sidebar *,.side-opening .ws-sidebar *{white-space:nowrap}
.side-closing :is(.ws-side-nav button span,.ws-new-chat span,.ws-side-group){opacity:0;transition:opacity .12s ease}
.side-opening :is(.ws-side-nav button span,.ws-new-chat span,.ws-side-group){animation:tool-fade-in .28s ease both}
.side-closing .ws-side-group,.side-opening .ws-side-group{min-width:0}
/* The sidebar itself never switches clipping on and off while it animates (that repainted the column, and the pencil
   flickered); each button and card clips its own label instead, in every state. */
.ws-new-chat,.ws-side-nav button{overflow:hidden;white-space:nowrap}
.ws-side-group{overflow:hidden}
/* The collapse button's hint sits beside it, never over New chat; it hides the moment you click. */
.ws-collapse{position:relative}
.ws-collapse::after{content:attr(data-tip);position:absolute;z-index:70;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:5px 9px;border:1px solid var(--popover-line,var(--line));border-radius:8px;background:var(--popover-bg,var(--panel));box-shadow:var(--popover-shadow,0 8px 24px rgba(0,0,0,.12));color:var(--text);font-size:12px;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease}
.ws-collapse:hover::after{opacity:1;transition-delay:.5s}
.ws-collapse:focus-visible::after{opacity:1;transition-delay:0s}
.ws-collapse:active::after{opacity:0;transition-delay:0s;transition-duration:0s}
@media (prefers-reduced-motion:reduce){.ws-collapse::after{transition:none}}
@media (prefers-reduced-motion:reduce){.ws-layout,.tool-btn{transition:none}}

/* Narrower screens: the chat slides over the page; collapsed, it's a floating chat button. */
@media (max-width:1100px){
 .ws-layout.has-chat{grid-template-columns:var(--side-w) minmax(0,1fr)}
 .ws-chat-panel{position:fixed;z-index:65;top:calc(var(--app-top,90px) + 8px);right:12px;bottom:14px;max-height:none;width:min(390px,calc(100vw - 24px));box-shadow:var(--popover-shadow)}
 .chat-collapsed .ws-chat-panel{top:auto;bottom:18px;width:auto;border-radius:999px}
 .chat-collapsed .tool-rail{padding:4px}
}
@media (max-width:760px){
 .ws-layout.has-chat,.ws-layout.has-chat.chat-collapsed,.ws-layout.side-collapsed,.ws-layout.side-collapsed.has-chat{grid-template-columns:minmax(0,1fr)}
 .ws-chat-panel{bottom:96px}.chat-collapsed .ws-chat-panel{bottom:100px}
 .ws-collapse{display:none}
}

/* Board focus mode: everything but the board steps aside; the board fills the app window. */
html.board-focus .ws-sidebar,html.board-focus .ws-chat-panel,html.board-focus .project-room-header,html.board-focus #pipelineNext,html.board-focus .ws-drawer-toggle,html.board-focus .project-file-tools,html.board-focus .brand-page-head{display:none!important}
html.board-focus .ws-layout,html.board-focus .ws-layout.has-chat,html.board-focus .ws-layout.side-collapsed{grid-template-columns:minmax(0,1fr)!important}
html.board-focus .board-surface.is-focus{position:fixed;z-index:70;inset:calc(var(--app-top,90px) + 6px) 12px 12px 12px;border-radius:20px;box-shadow:var(--popover-shadow)}
html.board-focus .board-surface.is-focus .board-heading{display:none}
.board-focus-btn[aria-pressed="true"]{background:var(--text);color:var(--panel);border-radius:999px}
html.board-focus .board-surface.is-focus .board-viewport{height:100%;min-height:0}
.type-dialog-actions .primary,.type-dialog-actions .quiet{margin:0}
.type-dialog .project-field{margin:0}
html.board-focus #projectRoomSurface,html.board-focus #brandSurface{transform:none!important;animation:none!important}
html.board-focus .project-room-heading{display:none!important}
/* Left panel top: collapse and New chat on one row. */
.ws-side-top-card .ws-side-top{display:flex;align-items:center;gap:6px}
.ws-side-top-card .ws-new-chat{flex:1;margin:0}
.brand-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-title-row h1{margin:0}
.brand-manage{min-height:32px;padding:4px 14px;border-radius:999px;font-size:13px}
/* Sidebar project rows: a ⋯ menu (rename, settings, delete) and in-place rename. */
.ws-side-head h2 button{display:inline;width:auto;height:auto;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ws-side-head h2 button:hover{color:var(--text)}
.ws-side-group li .ws-project-row .ws-project-more{display:grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.ws-side-group li .ws-project-row:hover .ws-project-more,.ws-side-group li .ws-project-row .ws-project-more:focus-visible,.ws-side-group li .ws-project-row .ws-project-more[aria-expanded="true"]{opacity:1}
.ws-side-group li .ws-project-row .ws-project-more:hover{background:var(--raised);color:var(--text)}
@media (hover:none){.ws-side-group li .ws-project-row .ws-project-more{opacity:1}}
.ws-project-menu{position:fixed;z-index:90;left:calc(var(--x) - 190px);top:var(--y);display:grid;gap:2px;width:190px;padding:6px;border:1px solid var(--popover-line);border-radius:14px;background:var(--popover-bg);box-shadow:var(--popover-shadow);animation:create-menu-down .16s ease both}
.ws-project-menu button{min-height:36px;padding:6px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.ws-project-menu button:hover,.ws-project-menu button:focus-visible{background:var(--raised)}
.ws-project-menu .is-danger,.text-button.is-danger{color:var(--danger,#e5484d)}
.ws-rename{width:100%;min-height:34px;padding:4px 10px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--text);font:inherit;font-size:14px}
.primary.is-danger{background:var(--danger,#e5484d);color:#fff}
.primary.is-danger:disabled{opacity:.4}
.type-dialog-delete{margin-right:auto;font-size:13px}
@keyframes create-menu-down{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.ws-project-menu{animation:none}.ws-project-more{transition:none}}
/* Media shelf: videos show a still frame with a small play badge. */
.board-shelf-video{position:relative;width:48px;height:48px;flex-shrink:0;overflow:hidden;background:#000}
.board-shelf-video video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.board-shelf-video i{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-style:normal;text-shadow:0 1px 4px #000a}
/* Project board: save status sits in the heading row, not a row of its own. */
.board-head-tools{display:flex;align-items:center;gap:14px;flex:none}
.board-head-tools .board-status{font-size:12px;color:var(--muted);white-space:nowrap}
.board-head-tools .board-status.project-save-error{color:var(--danger,#d64545)}
/* Home right panel: Up next keeps its size (up to half), Ideas fills the rest and scrolls in its card. */
.ws-context{overflow:hidden}
.ws-context>[data-card="upnext"]{flex:0 1 auto;min-height:0;overflow-y:auto;}
.ws-context>[data-card="upnext"]:not(:only-of-type){max-height:50%}
.ws-context>#wsIdeas{flex:1 1 auto;min-height:0;overflow:hidden}
#wsIdeas .ws-ideas{min-height:0;overflow-y:auto;padding-right:2px}
.ws-ideas li{position:relative}
.ws-ideas li span{-webkit-line-clamp:2}
.ws-ideas .ws-idea-start{position:absolute;right:6px;top:50%;transform:translateY(-50%);box-shadow:0 0 0 6px var(--raised)}
/* Left panel: a column the height of the window that never scrolls itself; the Projects and Chats lists
   scroll inside their cards, and the panel ends where the page (and the Home chat box) ends. */
@media (min-width:961px){
 .ws-sidebar,html:has(.assist-docked) .ws-sidebar{height:var(--side-h,calc(100dvh - var(--app-top,90px) - 44px));max-height:none;overflow:visible;flex-wrap:nowrap}
 .ws-sidebar>.ws-card:not(.ws-side-group){flex:none}
 .ws-sidebar>.ws-side-group{flex:0 1 auto;min-height:112px;display:flex;flex-direction:column;overflow:hidden}
 .ws-sidebar>.ws-side-group .ws-side-head{flex:none}
 .ws-side-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0}
 .side-collapsed .ws-sidebar>.ws-side-group{display:none}
}
#wsIdeas .ws-ideas{flex:1 1 auto}
/* Brand moodboard: the save status sits at the end of the page description. */
.brand-board-status{margin-left:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.brand-board-status:not(:empty)::before{content:"· ";}
.brand-board-status.project-save-error{color:var(--danger,#d64545)}
/* Board tool strip: between the top buttons and the zoom bar, never over them. */
.board-side-tools{top:76px;bottom:76px;height:fit-content;margin-block:auto;transform:none}

/* Chats page */
.chats-page{max-width:760px}
.chats-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.chats-head h1{margin:0;font-size:var(--type-title,34px);letter-spacing:-.03em}
.chats-search{display:flex;align-items:center;gap:8px;flex:1 1 280px;max-width:380px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.chats-search:focus-within{border-color:color-mix(in srgb,var(--text) 30%,var(--line))}
.chats-search svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.chats-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:14px;outline:none;box-shadow:none;padding:0}
.chats-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.chats-row{display:grid;gap:4px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.chats-row:hover,.chats-row:focus-visible{background:var(--raised)}
.chats-row-top{display:flex;align-items:center;gap:10px;min-width:0}
.chats-row-top strong{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500}
.chats-row-top small{margin-left:auto;flex:none;color:var(--muted);font-size:12px}
.chats-chip{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11.5px}
.chats-meta,.chats-snippet{color:var(--muted);font-size:13px;line-height:1.45}
.chats-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chats-snippet mark{background:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text);border-radius:3px;padding:0 1px}
.chats-group{margin:24px 14px 6px;font-size:12px;font-weight:500;color:var(--muted)}
.chats-empty{margin:24px 14px;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.chats-row{transition:none}}
/* Home with the docked chat: the grid row is exactly the visible height, so a tall side column can never push the
   chat box below the window (at any zoom). Side columns fill that row; their lists scroll inside their cards. */
html:has(.assist-docked) .ws-layout{grid-template-rows:minmax(0,1fr)}
@media (min-width:961px){
 html:has(.assist-docked) .ws-sidebar{height:100%;align-self:stretch;box-sizing:border-box;padding-bottom:16px}
 html:has(.assist-docked) .ws-context{max-height:100%;align-self:start}
}
/* Home card controls: a quiet ⋯ per card (shown on hover/focus) and "+ Add a card" when fewer than two show. */
.ws-context .ws-ideas-head{align-items:center}
.ws-context .ws-ideas-head h2{flex:1}
.ws-card-more{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.ws-upnext:hover .ws-card-more,.ws-card-more:focus-visible,.ws-card-more[aria-expanded="true"]{opacity:1}
.ws-card-more:hover{background:var(--raised);color:var(--text)}
@media (hover:none){.ws-card-more{opacity:1}}
.ws-card-add{align-self:stretch;min-height:36px;border:1px dashed var(--line);border-radius:14px;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.ws-card-add:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,var(--line))}
.ws-project-menu [role="menuitemradio"][aria-checked="false"]{padding-left:22px}
/* Left panel lists: a hairline between rows, hidden next to the highlighted row. */
.ws-side-list>li+li{position:relative}
.ws-side-list>li+li::before{content:"";position:absolute;top:0;left:10px;right:10px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);pointer-events:none}
.ws-side-list>li:hover::before,.ws-side-list>li:hover+li::before,.ws-side-list>li:has([aria-current])::before,.ws-side-list>li:has([aria-current])+li::before{border-top-color:transparent}
.ws-side-list .ws-chat-title{padding-block:2px}
@media (prefers-reduced-motion:reduce){.ws-card-more{transition:none}}
/* Ideas card title opens Notes. */
.ws-ideas-head h2 button{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.ws-ideas-head h2 button:hover{color:var(--text)}
/* Projects page: grid/list toggle and the list view. */
.view-toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px}
.view-toggle button{display:grid;place-items:center;width:32px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer}
.view-toggle button[aria-pressed="true"]{background:var(--raised);color:var(--text)}
.view-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.project-list{display:grid;margin-top:8px}
.project-list-head,.project-list-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr) 56px 80px;gap:16px;align-items:center;padding:0 14px}
.project-list-head{padding-block:8px;color:var(--muted);font-size:12px}
.project-list-row{width:100%;min-height:52px;border:0;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:background .15s ease}
.project-list-row:hover,.project-list-row:focus-visible{background:var(--raised);border-radius:12px}
.project-list-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-list-name{display:flex;align-items:center;gap:10px}
.project-list-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:15px;font-weight:500}
@media (max-width:720px){.project-list-head{display:none}.project-list-row{grid-template-columns:1fr auto;row-gap:2px;padding-block:10px}.project-list-row>span:nth-child(n+2){grid-column:1;font-size:12px}.project-list-row>span:nth-child(4),.project-list-row>span:nth-child(5){display:none}}
@media (prefers-reduced-motion:reduce){.project-list-row{transition:none}}
/* Studio settings: tabs over panels of a steady height. */
.settings-tabs{margin:12px 0 18px;align-self:flex-start}
.settings-panels{min-height:min(560px,62vh)}
.settings-panel>.settings-info:first-child{margin-top:0}
/* Local model picker (dev build). */
.assist-local-tag{margin-left:4px;padding:1px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10.5px;font-style:normal}
.assist-local-head{margin:4px 8px 6px;color:var(--muted);font-size:12px}
/* Effort slider, Apple/ChatGPT style: a thick pill track with the knob riding inside it on the coloured fill.
   Low graphite · Medium green · High amber with a slow sweep · XHigh orange-red, quicker sweep, flame glyph ·
   Max/Ultra violet-to-blue sheen, tight glow, sparkle glyph. Nothing spills outside the track. */
.assist-effort.has-pos{--track:24px;--knob:18px;padding:6px 10px 8px}
.assist-effort.has-pos .assist-effort-rail{position:relative;height:var(--track);display:block;margin:6px 0 2px}
.assist-effort.has-pos .assist-effort-track{position:absolute;inset:0;top:0;height:var(--track);transform:none;border-radius:999px;overflow:hidden;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s ease}
.assist-effort.has-pos[data-level] .assist-effort-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--track) + (100% - var(--track)) * var(--pos,0));border-radius:999px;background:color-mix(in srgb,var(--text) 38%,var(--raised));box-shadow:none;animation:none;overflow:hidden;transition:width .28s cubic-bezier(.3,1.3,.5,1),background .3s ease}
/* Each fill layer carries its own level (data-fill), so an outgoing colour keeps its look while the new one sweeps in.
   Older level rules keyed on the wrapper must not leak onto a layer showing another level. */
.assist-effort.has-pos .assist-effort-fill{animation:none;box-shadow:none}
.assist-effort.has-pos .assist-effort-fill::after{animation:none}
.assist-effort.has-pos .assist-effort-fill::before{content:none}
.assist-effort.has-pos .assist-effort-fill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 35%,#ffffff59 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;opacity:0;animation:none}
.assist-effort-stops{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--track) / 2 - 2px);pointer-events:none}
.assist-effort-stops i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--text) 20%,transparent)}
.assist-effort.has-pos .assist-effort-fx{display:grid;place-items:center;position:absolute;z-index:1;left:calc((var(--track) - var(--knob)) / 2 + (100% - var(--track)) * var(--pos,0));top:calc((var(--track) - var(--knob)) / 2);width:var(--knob);height:var(--knob);border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003,0 2px 6px #0000001f;color:#8e8e93;pointer-events:none;transition:left .28s cubic-bezier(.3,1.3,.5,1),color .3s ease}
.assist-effort.has-pos .assist-effort-fx svg{display:none;width:11px;height:11px;fill:currentColor}
.assist-effort.has-pos .assist-effort-rail input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:var(--track);margin:0;opacity:0;cursor:pointer}
.assist-effort.has-pos input[type=range]::-webkit-slider-thumb{width:var(--track);height:var(--track);margin-top:0;border:0;background:transparent;box-shadow:none;animation:none}
.assist-effort.has-pos input[type=range]::-moz-range-thumb{width:var(--track);height:var(--track);border:0;background:transparent;box-shadow:none}
.assist-effort.has-pos input[type=range]:focus-visible+*{outline:none}
.assist-effort.has-pos:has(input:focus-visible) .assist-effort-track{box-shadow:inset 0 0 0 1px var(--line),0 0 0 3px color-mix(in srgb,var(--text) 18%,transparent)}
.assist-effort.has-pos:has(input:disabled){opacity:.5}
.assist-effort.has-pos.is-surge .assist-effort-track{animation:none}
.assist-effort.has-pos.is-surge .assist-effort-fx{animation:knob-pulse .34s ease}
.assist-effort.has-pos[data-level] .assist-effort-head strong{background:none;-webkit-text-fill-color:currentColor;color:var(--text);animation:none;transition:color .3s ease}
/* Colours per level */
.assist-effort.has-pos .assist-effort-fill[data-fill="medium"]{background:linear-gradient(90deg,#28b463,#34c759)}
.assist-effort.has-pos[data-level="medium"] .assist-effort-head strong{color:#1f9d55}
.assist-effort.has-pos .assist-effort-fill[data-fill="high"]{background:linear-gradient(90deg,#ffb020,#ff8a00)}
.assist-effort.has-pos .assist-effort-fill[data-fill="high"]::after{opacity:1;animation:effort-sweep 4s ease-in-out infinite}
.assist-effort.has-pos[data-level="high"] .assist-effort-head strong{color:#e67700}
.assist-effort.has-pos .assist-effort-fill[data-fill="xhigh"]{background:linear-gradient(90deg,#ff8a00,#ff453a)}
.assist-effort.has-pos .assist-effort-fill[data-fill="xhigh"]::after{opacity:1;animation:effort-sweep 1.1s ease-in-out infinite;background-image:linear-gradient(100deg,transparent 35%,#ffffff80 50%,transparent 65%)}
.assist-effort.has-pos[data-level="xhigh"] .assist-effort-track{animation:glow-xhigh 1.1s ease-in-out infinite}
.assist-effort.has-pos[data-level="xhigh"] .assist-effort-fx svg{animation:glyph-beat 1.1s ease-in-out infinite}
.assist-effort.has-pos[data-level="xhigh"] .assist-effort-fx{color:#ff453a}
.assist-effort.has-pos[data-level="xhigh"] .assist-effort-fx .g-flame{display:block}
.assist-effort.has-pos[data-level="xhigh"] .assist-effort-head strong{color:#e8412c}
.assist-effort.has-pos .assist-effort-fill:is([data-fill="max"],[data-fill="ultra"]){background:linear-gradient(90deg,#7c3aed,#5e5ce6,#0a84ff,#5e5ce6,#7c3aed);background-size:220% 100%;animation:effort-sheen 1.6s linear infinite}
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-track{box-shadow:inset 0 0 0 1px var(--line)}
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-fx{color:#6d3ae6}
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-fx .g-spark{display:block}
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-head strong{color:#6d3ae6}
.assist-effort.has-pos .assist-effort-fill~.assist-effort-stops i{background:color-mix(in srgb,var(--text) 20%,transparent)}
.assist-effort.has-pos .assist-effort-scale{display:flex;justify-content:space-between;padding:0 calc(var(--track) / 2)}
.assist-effort.has-pos .assist-effort-scale span,.assist-effort.has-pos .assist-effort-scale span:first-child,.assist-effort.has-pos .assist-effort-scale span:last-child{flex:0 0 0;width:0;display:flex;justify-content:center;white-space:nowrap;text-align:center}
/* Max and Ultra flow on a seamless, GPU-smooth loop: a double-width repeating gradient layer slides by exactly one
   period (transform only), and every pulse (glow, ring, glyph) shares one steady beat, animating opacity/scale only. */
.assist-effort.has-pos .assist-effort-fill:is([data-fill="max"],[data-fill="ultra"]){animation:none;background:#6d3ae6}
.assist-effort.has-pos .assist-effort-fill:is([data-fill="max"],[data-fill="ultra"])::before{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;will-change:transform;animation:flow-loop 2.4s linear infinite;
 background:repeating-linear-gradient(90deg,#0a84ff 0,#5e5ce6 20%,#7c3aed 40%,#0a84ff 50%)}
.assist-effort.has-pos .assist-effort-fill[data-fill="ultra"]::before{animation-duration:1.6s;background:repeating-linear-gradient(90deg,#ff9f0a 0,#ff375f 13%,#bf5af2 26%,#5e5ce6 39%,#ff9f0a 50%)}
.assist-effort.has-pos .assist-effort-fill[data-fill="ultra"]::after{inset:0 auto 0 0;width:35%;opacity:1;background:linear-gradient(90deg,transparent,#ffffff80,transparent);background-size:auto;will-change:transform;animation:sweep-move 1.6s linear infinite}
/* Glow: a fixed halo whose opacity breathes (no box-shadow animation). */
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-track{animation:none}
.assist-effort.has-pos:is([data-level="max"],[data-level="ultra"]) .assist-effort-rail::before{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 14px #7c3aed80;opacity:.35;will-change:opacity;animation:beat-opacity 1.6s ease-in-out infinite;pointer-events:none}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-rail::before{box-shadow:0 0 16px #bf5af2a6,0 0 6px #ff375f59;animation-duration:1.6s}
.assist-effort.has-pos[data-level="max"] .assist-effort-rail::before{animation-duration:1.6s}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-fx{color:#bf5af2;animation:none}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-fx::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px #bf5af2b3;opacity:0;will-change:opacity;animation:beat-opacity 1.6s ease-in-out infinite}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-fx .g-spark{display:none}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-fx .g-bolt{display:block;animation:beat-scale 1.6s ease-in-out infinite}
.assist-effort.has-pos[data-level="max"] .assist-effort-fx svg{animation:beat-scale 1.6s ease-in-out infinite}
.assist-effort.has-pos[data-level="ultra"] .assist-effort-head strong{color:#bf5af2}
@keyframes flow-loop{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes sweep-move{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@keyframes beat-opacity{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes beat-scale{0%,100%{scale:1}50%{scale:1.18}}
@keyframes glow-xhigh{0%,100%{box-shadow:inset 0 0 0 1px var(--line),0 0 0 #ff453a00}50%{box-shadow:inset 0 0 0 1px var(--line),0 0 9px #ff453a59}}
@keyframes glyph-beat{0%,100%{scale:1}50%{scale:1.22}}
@keyframes effort-sweep{0%{background-position:150% 0}60%,100%{background-position:-50% 0}}
@keyframes effort-sheen{to{background-position:-220% 0}}
@keyframes knob-pulse{0%,100%{scale:1}45%{scale:1.14}}
@media (prefers-reduced-motion:reduce){.assist-effort.has-pos .assist-effort-fill::before,.assist-effort.has-pos .assist-effort-rail::before,.assist-effort.has-pos .assist-effort-fx::after,.assist-effort.has-pos .assist-effort-fx svg.g-bolt,.assist-effort.has-pos .assist-effort-fill,.assist-effort.has-pos .assist-effort-fill::after,.assist-effort.has-pos .assist-effort-fx,.assist-effort.has-pos .assist-effort-fx svg,.assist-effort.has-pos .assist-effort-track{animation:none!important;transition:none!important}}
/* Brand interview: docked like Home, so the chat box stays pinned at the bottom as answers come in;
   the Brand book progress chips stay above the conversation. */
.ws-main:has(.assist-brand.assist-docked) :is(.brand-shell,.brand-view,#brandTalk){flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
.assist.assist-brand.assist-docked>.assist-progress{order:-1}
/* Home Brand card: synopsis and color swatches. */
.ws-brand-synopsis{margin:0;font-size:13.5px;line-height:1.5;color:var(--text)}
.ws-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.ws-swatch{display:block;width:22px;height:22px;border-radius:50%;background:var(--swatch,transparent);box-shadow:0 0 0 1px var(--line);cursor:default}
.ws-swatch:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.ws-brand-card .quiet{align-self:flex-start;min-height:32px;border-radius:999px}
/* "Next question" / "First question": clear space from the card or reply above it. */
.assist-reply>.assist-next{margin-top:22px}
.assist-reply>.assist-next:first-child{margin-top:0}
/* Dev mode: the chat's notes about improving FuelStorm, and skill drafts to approve. */
.assist-devnote{margin:10px 0 0;padding:8px 12px;border-left:2px solid color-mix(in srgb,#8b5cf6 55%,var(--line));border-radius:0 10px 10px 0;background:color-mix(in srgb,#8b5cf6 6%,transparent);color:var(--muted);font-size:12.5px;line-height:1.5;max-width:68ch}
.assist-devnote span{display:block;margin-bottom:2px;font-size:11px;font-weight:600;color:#7c3aed}
.assist-devnote p{margin:0;line-height:1.45}
.assist-devnote p+p{margin-top:4px}
.assist-skill{margin-top:12px}
.assist-skill-head{display:grid;gap:2px}
.assist-skill-head small{color:var(--muted);font-size:12px}
.assist-skill-preview{margin:8px 0}
.assist-skill-preview summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.assist-skill-preview pre{max-height:260px;overflow:auto;margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--raised);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
/* Chat scrolls up under a soft fade instead of a hard cut. The fade grows in over the first 40px of scrolling,
   so the top of the page isn't faded at rest (scroll-driven animation; a fixed small fade where unsupported). */
@property --fade{syntax:'<length>';inherits:false;initial-value:0px}
html:has(.assist-docked) .ws-main,#projectTalk .assist-docked .assist-thread{--fade:20px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade));mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade))}
/* The project page's scroll column clips sideways; a 12px inner gutter (pulled back by the same margin, so nothing moves)
   keeps shadows, focus rings and selected outlines at the content's left edge from being cut off. */
html:has(.assist-docked) .ws-main{padding-left:12px;margin-left:-12px}
/* Home/Brand: a solid page-colour shadow shifted below the pinned chat box fills the 16px gap under it,
   so scrolled text never peeks out beneath the box (drawn behind the box, so its own edges stay intact). */
html:has(.assist-docked) .ws-main>*:not(#projectTalk) .assist-docked .assist-composer,html:has(.assist-docked) .ws-main .assist-home.assist-docked .assist-composer,html:has(.assist-docked) .ws-main .assist-brand.assist-docked .assist-composer{box-shadow:0 -14px 22px 6px var(--bg),0 10px 30px #0000001a,0 20px 0 0 var(--bg)}
html:has(.assist-docked) .ws-main :is(.assist-home,.assist-brand).assist-docked .assist-composer:focus-within{box-shadow:0 -14px 22px 6px var(--bg),0 14px 44px rgba(40,52,70,.09),0 1px 3px rgba(40,52,70,.05),0 20px 0 0 var(--bg)}
@supports (animation-timeline:scroll()){
 html:has(.assist-docked) .ws-main,#projectTalk .assist-docked .assist-thread{--fade:0px;animation:chat-fade linear both;animation-timeline:scroll(self);animation-range:0 40px}
}
@keyframes chat-fade{from{--fade:0px}to{--fade:36px}}
/* The page column itself only gets a 6px soft edge, so content leaves view at the side panels' top line, not 36px below it. */
html:has(.assist-docked) .ws-main{--fade:6px}
@supports (animation-timeline:scroll()){html:has(.assist-docked) .ws-main{--fade:0px;animation-name:main-fade}}
@keyframes main-fade{from{--fade:0px}to{--fade:6px}}
/* Images attached in the chat box, and shown on your sent message. */
.assist-attachments{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.assist-attach{position:relative;display:block;width:52px;height:52px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);background:var(--raised)}
.assist-attach img{display:block;width:100%;height:100%;object-fit:cover}
.assist-attach button{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#000000a6;color:#fff;font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.assist-attach:hover button,.assist-attach button:focus-visible{opacity:1}
@media (hover:none){.assist-attach button{opacity:1}}
.assist-you-images{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-bottom:6px}
.assist-you-images img{width:120px;height:120px;object-fit:cover;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.assist-item-swatch{flex:none;width:22px;height:22px;border-radius:7px;background:var(--swatch,transparent);box-shadow:inset 0 0 0 1px #0000001f}
.assist-item-thumb{flex:none;width:34px;height:34px;border-radius:8px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--line)}
.assist-item{gap:10px}
.assist-attach.is-video video{display:block;width:100%;height:100%;object-fit:cover}
.assist-attach.is-video em{position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:5px;background:#000000a6;color:#fff;font-size:9.5px;font-style:normal;font-weight:600}
.assist-you-images video{width:200px;max-height:140px;border-radius:12px;background:#000;object-fit:cover}
.assist-attach.is-video video{display:block;width:100%;height:100%;object-fit:cover}
.assist-attach.is-video em{position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:5px;background:#000000a6;color:#fff;font-size:9.5px;font-style:normal;font-weight:600}
.assist-you-images video{width:200px;max-height:140px;border-radius:12px;background:#000;object-fit:cover}
/* Documents attached to a message: file cards (chat box and sent message), next to image thumbnails. */
.assist-file-card{position:relative;display:inline-flex;align-items:center;gap:10px;width:210px;max-width:100%;height:52px;padding:0 12px 0 8px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);text-align:left;vertical-align:top}
.assist-file-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.assist-file-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assist-file-card[data-kind="pdf"] .assist-file-icon{background:#ff3b301a;color:#d92d20}
.assist-file-card[data-kind="web"] .assist-file-icon{background:#0a84ff1a;color:#0a6fd6}
.assist-file-card[data-kind="md"] .assist-file-icon{background:color-mix(in srgb,var(--text) 10%,transparent)}
.assist-file-text{display:grid;min-width:0;line-height:1.25}
.assist-file-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;color:var(--text)}
.assist-file-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--muted)}
.assist-file-card:is([data-state="failed"],[data-state="unsupported"]) small{color:var(--danger,#d64545)}
.assist-file-card button{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--text);color:var(--panel);font-size:12px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.assist-file-card:hover button,.assist-file-card button:focus-visible{opacity:1}
@media (hover:none){.assist-file-card button{opacity:1}}
.assist-attachments{align-items:center}
.assist-you-files{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-bottom:8px}
.assist-you .assist-file-card{background:var(--panel)}
/* Suggestion rows: full text, clamped to two lines until "Show all". "Now" / "New" when text would be replaced. */
.assist-item-text small.assist-item-detail,.assist-item-text small.assist-item-now{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.assist-item.is-open .assist-item-text small{display:block;-webkit-line-clamp:unset;overflow:visible}
.assist-item-text small>span{display:inline-block;margin-right:6px;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.assist-item-now{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.assist-item-now>span{text-decoration:none}
.assist-more{align-self:flex-start;margin-top:2px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:12px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--text) 30%,transparent)}

/* Typed local path: point to the file picker instead. */
.assist-path-hint{display:flex;align-items:center;gap:10px;margin:2px 4px 6px;padding:7px 10px;border-radius:10px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);font-size:12.5px;line-height:1.35;color:var(--muted,#999)}
.assist-path-hint[hidden]{display:none}
.assist-path-hint span{flex:1}
.assist-path-hint button{flex:none;font-size:12.5px;padding:4px 10px}

/* Links in chat messages: clearly clickable, with a soft glow on hover and focus. (:is(#brandSurface) outranks "#brandSurface a".) */
:is(#brandSurface,.assist-thread) a.assist-url{--link:#2f6bff;color:var(--link);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--link) 45%,transparent);text-underline-offset:3px;overflow-wrap:anywhere;border-radius:4px;transition:text-shadow .2s ease,text-decoration-color .2s ease,background-color .2s ease}
:is(#brandSurface,.assist-thread) a.assist-url:hover,:is(#brandSurface,.assist-thread) a.assist-url:focus-visible{text-decoration-color:var(--link);text-shadow:0 0 12px color-mix(in srgb,var(--link) 55%,transparent);background:color-mix(in srgb,var(--link) 8%,transparent);outline:none}
:root:not([data-theme="light"]) :is(#brandSurface,.assist-thread) a.assist-url{--link:#7aa7ff}
@media (prefers-reduced-motion:reduce){:is(#brandSurface,.assist-thread) a.assist-url{transition:none}}

/* Chat mode pill: Ask first (paused: dashed, quiet) or Auto (fast-forward: warm yellow glow). Same height as the model picker. */
.assist-mode{--auto:#e5b400;display:inline-flex;align-items:center;align-self:center;gap:5px;height:32px;padding:0 11px 0 9px;border:1px dashed color-mix(in srgb,var(--text) 32%,var(--line));border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.assist-mode:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 50%,var(--line))}
.assist-mode svg{flex:none;width:13px;height:13px;fill:currentColor;stroke:none}
.assist-mode[data-mode="auto"]{border-style:solid;border-color:color-mix(in srgb,var(--auto) 55%,transparent);background:color-mix(in srgb,var(--auto) 10%,transparent);color:var(--text);box-shadow:0 0 0 1px color-mix(in srgb,var(--auto) 25%,transparent),0 0 14px color-mix(in srgb,var(--auto) 30%,transparent)}
.assist-mode[data-mode="auto"] svg{color:color-mix(in srgb,var(--auto) 80%,var(--text))}
.assist-mode:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.assist-mode{transition:none}}

/* Workspace settings page */
.ws-set{max-width:760px;margin:0 auto;padding:8px 4px 48px}
.ws-set-top h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em}
.ws-set-top p{margin:4px 0 0;color:var(--muted);font-size:14px}
.ws-set-panel{display:grid;gap:14px}
.ws-set-card{padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.ws-set-card h3{margin:0 0 4px;font-size:16px;font-weight:600}
.ws-set-card h4{margin:18px 0 8px;font-size:14px;font-weight:600}
.ws-set-card p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5}
.ws-set-identity{display:flex;align-items:center;gap:14px}
.ws-set-identity img,.ws-set-initials{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}
.ws-set-initials{display:grid;place-items:center;background:var(--raised);font-weight:600}
.ws-set-identity>div{flex:1;min-width:0}.ws-set-identity p{margin:2px 0 0}
.ws-set-choices{display:grid;gap:8px}
.ws-set-choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;background:transparent;color:inherit;font:inherit;transition:border-color .15s ease,background-color .15s ease}
.ws-set-choice:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--line))}
.ws-set-choice:has(input:checked){border-color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent)}
.ws-set-choice input{margin-top:3px}
.ws-set-choice span,.ws-set-toggle span{display:grid;gap:3px}
.ws-set-choice small,.ws-set-toggle small{color:var(--muted);font-size:13px;line-height:1.45}
.ws-set-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.ws-set-head p{margin:2px 0 0}
.ws-set-mark{--size:28px;flex:none;display:grid;place-items:center;width:var(--size);height:var(--size);border-radius:8px;background:var(--mark-bg);color:var(--mark-ink)}
.ws-set-mark.is-large{--size:44px;border-radius:12px}
.ws-set-mark svg{width:58%;height:58%;fill:currentColor}.ws-set-mark b{font-size:12px;font-weight:700}
.ws-set-key label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.ws-set-key>div{display:flex;gap:8px}.ws-set-key input{flex:1;min-width:0}
.ws-set-key small,.ws-set-note{display:block;margin-top:8px;color:var(--muted);font-size:12.5px}
.ws-set-reuse{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:13px}
.ws-set-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ws-set-accounts{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ws-set-accounts li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ws-set-accounts li:first-child{border-top:0}
.ws-set-account{flex:1;min-width:0;display:grid}.ws-set-account small{color:var(--muted);font-size:12.5px}
.ws-set-status{font-size:12.5px;white-space:nowrap}
.ws-set-status.is-ok{color:var(--muted)}.ws-set-status.is-warn{color:var(--danger,#c2410c)}
.ws-set-platforms{display:flex;flex-wrap:wrap;gap:8px}
.ws-set-platforms button{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px}
.ws-set-platforms .ws-set-mark{--size:24px;border-radius:7px}
.ws-set-empty{font-style:normal}
.ws-set-danger{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ws-set-danger .text-button{color:var(--danger,#c2410c)}
.ws-set-defaults{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ws-set-check{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.ws-set-check:has(input:checked){border-color:var(--text)}
.ws-set-check .ws-set-mark{--size:22px;border-radius:999px}
.ws-set-check input{position:absolute;opacity:0;pointer-events:none}
.ws-set-check:focus-within{outline:2px solid var(--text);outline-offset:2px}
.ws-set-field{display:grid;gap:6px;font-size:13px}.ws-set-field span{font-weight:600}
.ws-set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ws-set-toggle{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.ws-set-toggle input{margin-top:3px}
@media (max-width:700px){.ws-set-grid{grid-template-columns:1fr}.ws-set-identity{flex-wrap:wrap}.ws-set-key>div{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.ws-set-choice{transition:none}}

/* Members and permissions */
.ws-set-members{display:grid;gap:8px;margin-bottom:6px}
.ws-set-member{border:1px solid var(--line);border-radius:12px;padding:0}
.ws-set-member>summary{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none}
.ws-set-member>summary::-webkit-details-marker{display:none}
.ws-set-member[open]>summary{border-bottom:1px solid var(--line)}
.ws-set-initials.is-small{width:32px;height:32px;border-radius:10px;font-size:12px}
.ws-set-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 18px;padding:14px}
.ws-set-perms fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.ws-set-perms legend{font-size:12.5px;font-weight:600;margin-bottom:4px}
.ws-set-perm{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;cursor:pointer}
.ws-set-perm input{margin-top:2px}
.ws-set-member-actions{display:flex;gap:10px;align-items:center;padding:0 14px 14px}
.ws-set-remove{margin-left:auto;color:var(--danger,#c2410c)}
.ws-set-add{margin-top:18px}.ws-set-add>div{display:flex;gap:8px;flex-wrap:wrap}.ws-set-add input{flex:1 1 180px;min-width:0}
.preview-banner{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 16px;background:var(--text);color:var(--bg,#fff);font-size:13.5px}
.preview-banner .quiet{color:inherit;border-color:color-mix(in srgb,var(--bg,#fff) 40%,transparent);background:transparent}
.bible-locked{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--muted);font-size:13.5px}

/* Boards without a heading (the Brand board shows its status in the page header): toolbar at the top of the board. */
.board-surface:not(:has(.board-heading)) .board-toolbar{top:16px}

/* Home Brand card: colours in one row along the bottom, the synopsis gets the width above. */
.ws-brand-card{display:flex;flex-direction:column}
.ws-brand-card .ws-swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:auto 0 0;padding:12px 0 0}
.ws-brand-card .ws-swatches>li{display:block;flex:none;margin:0;padding:0;border:0}

/* Jump arrow: points down to the latest message, or up to the start once you're there. It never sits over the thread:
   beside the chat box in the gutter (is-gutter), inside the chat box's bar when there's no gutter (is-inline),
   or in the side panel's rail (.chat-jump). */
.assist-top{position:absolute;right:-50px;top:0;z-index:2;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);box-shadow:none;cursor:pointer;transition:color .15s ease,transform .15s ease}
.assist-top.is-inline{position:static;flex:none;width:32px;height:32px}
.assist-top[hidden],.chat-jump[hidden],.chat-collapsed .chat-jump{display:none}
.assist-top:hover{color:var(--text);transform:translateY(-1px)}
.assist-top.is-inline:hover{transform:none;background:var(--raised)}
.assist-top svg,.chat-jump svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
:is(.assist-top,.chat-jump).is-down svg{transform:rotate(180deg)}
.chat-jump{margin-top:auto;margin-bottom:26px}
.chat-jump.is-idle{opacity:.35;cursor:default}
.chat-jump.is-idle:hover{background:transparent;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.assist-top,.assist-top svg,.chat-jump svg{transition:none}.assist-top:hover{transform:none}}

/* Compact panel chat: controls on one centred line; no "local" tag; the mode pill shows only its icon. */
.ws-chat-panel .assist-bar{flex-wrap:nowrap;gap:4px}
.ws-chat-panel .assist-bar>*{flex:none}
.ws-chat-panel .assist-local-tag{display:none}
.ws-chat-panel .assist-model{min-width:0;flex:0 1 auto;align-self:center}
.ws-chat-panel .assist-model>summary{height:32px;min-height:32px;padding:0 6px 0 8px;max-width:100%}
.ws-chat-panel .assist-model>summary>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-chat-panel .assist-mode{width:32px;padding:0;justify-content:center}
.ws-chat-panel .assist-mode span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ws-chat-panel .assist-add>summary,.ws-chat-panel .assist-send{align-self:center}

/* The chat bar's menus are <details>; the old global "details{margin-top:18px}" pushed the model picker down. */
.assist-bar>details{margin:0;align-self:center}

/* Menus with an icon: the icon stands alone in the narrow panel (the label is still read out). */
.assist-meta>summary>svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-chat-panel .assist-meta-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ws-chat-panel .assist-meta>summary{padding:0 9px;height:32px;min-height:32px}
.ws-chat-panel .assist-spacer{flex:1 1 0;min-width:0}

/* The right panel only takes a column when it's on; otherwise it would push a second grid row under the sidebar. */
.ws-layout:not(.has-chat)>.ws-chat-panel{display:none}
/* Brand Talk: the interview is centred like Home; the page header stays left so it doesn't move between tabs. */
.brand-view #brandTalk{width:100%}
.brand-view #brandTalk>.assist-brand{margin-inline:auto}
.brand-view .brand-earlier{max-width:760px;margin:0 auto 16px}

/* Model picker: the effort is its own part of the label, so the model name is never the part that gets cut. */
.assist-model-effort{flex:none;font-size:inherit;color:inherit;white-space:pre}
.ws-chat-panel .assist-model-effort{display:none}
@container (max-width:520px){.assist-model-effort{display:none}}
/* In the narrow panel the picker menu hangs from the chat box, full width, so the panel's rounded frame never clips it. */
.ws-chat-panel #projectTalk .assist-composer{padding-left:16px}
.ws-chat-panel .assist-bar>details{position:static}
.ws-chat-panel .assist-bar .assist-model .assist-menu.assist-picker,.ws-chat-panel .assist-bar details .assist-menu{left:8px;right:8px;width:auto;min-width:0;max-width:none;transform-origin:bottom center;max-height:min(60vh,460px)}

/* Left panel top: the collapse button has its own row above New chat in both states, so the menu below never moves. */
.ws-side-top-card .ws-side-top,.side-collapsed .ws-side-top-card .ws-side-top{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.ws-side-top-card .ws-collapse{align-self:flex-start;margin-left:3.5px}
.ws-side-top-card .ws-new-chat{flex:none;margin:0}

/* The sweep's leading edge: a soft light riding the front of the incoming colour. */
.assist-effort-edge{position:absolute;z-index:2;top:0;bottom:0;left:0;width:26px;margin-left:-26px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75));filter:blur(1.5px);border-radius:999px}
@media (prefers-reduced-motion:reduce){.assist-effort-edge{display:none}}

/* Phones: the Talk-column rules (#projectTalk … overflow:visible) also matched the side panel, which then couldn't scroll. */
.ws-chat-panel #projectTalk .assist-docked{flex:1 1 0;min-height:0}
.ws-chat-panel #projectTalk .assist-docked .assist-thread{flex:1 1 0;min-height:0;overflow-y:auto}
/* Moodboard status in the header row: no leading "·" (that was for when it followed the page description). */
.brand-view-actions .brand-board-status{margin-left:0}
.brand-view-actions .brand-board-status::before{content:none}

/* All-workspaces Planner and Analyze: no workspace sidebar, just the page and the same chat panel as inside a workspace. */
.ws-layout.has-chat.platform-layout{grid-template-columns:minmax(0,1fr) var(--tool-w)}
@media (max-width:1100px){.ws-layout.has-chat.platform-layout{grid-template-columns:minmax(0,1fr)}}
.assist-card-workspace{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}

/* The Home right column is one calm panel: its cards are sections split by hairlines. (The left sidebar keeps its
   separate cards.) */
.ws-context{gap:0;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.ws-context>.ws-upnext{padding:16px;border:0;border-radius:0;background:transparent}
.ws-context>.ws-upnext+.ws-upnext{border-top:1px solid var(--line)}
.ws-context>.ws-card-add{margin:0 12px 12px;border-radius:12px}
.ws-context>.ws-upnext+.ws-card-add{margin-top:4px}

/* Ideas: rows sit inside the list (which only scrolls up and down); Start project is a quiet button that appears
   at the row's end on hover or focus, fading over the end of the title instead of floating past the card. */
#wsIdeas .ws-ideas{margin:0 -8px;overflow-x:hidden}
.ws-ideas li{margin:0;overflow:hidden}
.ws-ideas .ws-idea-start{right:4px;min-height:26px;padding:2px 10px;border:0;border-radius:8px;background:var(--raised);box-shadow:-18px 0 14px -4px var(--raised);color:var(--text);font-weight:500}
.ws-ideas .ws-idea-start:hover{background:color-mix(in srgb,var(--text) 9%,var(--raised))}
.ws-ideas .ws-idea-start:focus-visible{outline:2px solid var(--focus,#0a84ff);outline-offset:-2px}

/* Chat card → workspace: the pill that flies from the card to where the thing now lives, and the soft glow it lands with. */
.fly-pill{position:fixed;left:0;top:0;z-index:120;max-width:220px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.14);color:var(--text);font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;will-change:transform,opacity}
@keyframes landed-glow{from{background-color:var(--raised);box-shadow:0 0 0 3px var(--raised)}to{box-shadow:0 0 0 0 transparent}}
.is-landed{animation:landed-glow .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.is-landed{animation:landed-glow .7s linear}}

/* The Next card steps aside while the chat works on the step you pressed. */
.step-card.is-away{display:none}

/* Generation in chat: default models in the model menu, and the generation card (settings, prompt, cost, result). */
.assist-gen-defaults{display:grid;gap:6px;padding:2px 4px}
.assist-gen-title{margin:0 0 2px;font-size:12px;font-weight:600;color:var(--text)}
.assist-gen-title small{font-weight:400;color:var(--muted)}
.assist-gen-defaults label{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.assist-gen-defaults select,.assist-gen-change select{min-height:30px;padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:12.5px}
.assist-gen{display:grid;gap:10px;margin-top:8px}
.assist-gen-specs{margin:0;font-size:13px;font-weight:500;color:var(--text)}
.assist-gen-refs{display:flex;gap:6px;flex-wrap:wrap}.assist-gen-refs img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.assist-gen-prompt textarea{width:100%;min-height:72px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;line-height:1.45;resize:vertical}
.assist-gen-change summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none}.assist-gen-change summary::-webkit-details-marker{display:none}
.assist-gen-change>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.assist-gen-change label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.assist-gen-result{display:grid;gap:6px}
.assist-gen-result img,.assist-gen-result video{width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:var(--raised);cursor:grab}
.assist-gen-status{margin:0;font-size:13px;color:var(--muted)}.assist-gen-status.is-error{color:var(--danger,#e5484d)}
.ws-set-fields{display:grid;gap:10px;max-width:420px}.ws-set-fields label{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px}

/* A take rendering into its frame: the take's shape, a slow light sweeping down it, a gentle pulse; then the result
   comes into focus in the same frame. */
.assist-gen-frame{position:relative;width:100%;max-height:420px;overflow:hidden;border-radius:14px;background:var(--raised);display:grid;place-items:center}
.assist-gen-frame.is-rendering{background:linear-gradient(135deg,color-mix(in srgb,var(--raised) 100%,transparent),color-mix(in srgb,var(--text) 7%,var(--raised)));animation:gen-pulse 2.4s ease-in-out infinite}
.assist-gen-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,#fff 55%,transparent) 48%,transparent 56%);background-size:100% 220%;animation:gen-scan 2.2s cubic-bezier(.45,0,.2,1) infinite;mix-blend-mode:soft-light}
@keyframes gen-scan{from{background-position:0 -120%}to{background-position:0 120%}}
@keyframes gen-pulse{0%,100%{opacity:1}50%{opacity:.82}}
.assist-gen-frame.is-ready img,.assist-gen-frame.is-ready video{width:100%;height:100%;object-fit:contain;cursor:grab;display:block}
.assist-gen-frame.is-revealing img,.assist-gen-frame.is-revealing video{animation:gen-reveal .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes gen-reveal{from{filter:blur(14px);transform:scale(1.03);opacity:.5}to{filter:none;transform:none;opacity:1}}
.assist-gen-frame.is-failed{padding:16px;text-align:center}.assist-gen-frame.is-failed p{margin:0;font-size:13px;color:var(--danger,#e5484d)}
.assist-gen-clock{font-variant-numeric:tabular-nums;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.assist-gen-frame.is-rendering,.assist-gen-scan,.assist-gen-frame.is-revealing img,.assist-gen-frame.is-revealing video{animation:none}}
/* Areas: planned ones are quiet and tagged; Settings sits apart at the end. */
.ws-side-nav button.is-planned{color:var(--muted)}
.ws-side-nav button.is-planned svg{opacity:.6}
.ws-side-nav button.is-planned small{margin-left:auto;font-size:10.5px;letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
/* Settings sits in the list with the same spacing as the other items. */
.side-collapsed .ws-side-nav button.is-planned small{display:none}
/* Sidebar panels: a quiet ⋯ on each card, compact rows, and Add a panel. */
.ws-side-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ws-panel-more{flex:none;width:24px;height:24px;min-height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:16px;line-height:1;opacity:0;margin:0}
.ws-side-group:hover .ws-panel-more,.ws-panel-more:focus-visible,.ws-panel-more[aria-expanded=true]{opacity:1}
.ws-panel-more:hover{background:var(--raised);color:var(--text)}
@media(hover:none){.ws-panel-more{opacity:1}}
.ws-panel-row button span{display:grid;gap:1px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-panel-row button small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-panel-row.has-check{display:flex;align-items:center;gap:8px}.ws-panel-row.has-check input{flex:none;width:16px;height:16px;margin:0 0 0 10px}
.ws-panel-row.has-check button{padding-left:0}
.ws-panel-add{align-self:flex-start;border:0;background:transparent;color:var(--muted);font-size:12.5px;padding:4px 10px;min-height:0;height:auto;margin:0}
.ws-panel-add:hover{color:var(--text)}
.side-collapsed .ws-panel-add,.side-collapsed .ws-panel-more{display:none}
.ws-set-reset{margin:14px 0 0;font-size:13px;color:var(--muted)}
.ws-panel-more{cursor:grab;touch-action:none}
/* Pop-up menus stay inside the window (menu-place.js sets left, top and, when needed, a height cap). */
.ws-project-menu{left:0;top:0;max-width:calc(100vw - 16px);overflow-y:auto;overscroll-behavior:contain}
.ws-project-menu.is-capped{mask-image:linear-gradient(#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);padding-bottom:18px}
.ws-project-menu.is-above{animation-name:none}
/* The shared menu (menu.js): section labels, dividers, a tick column and an optional second line. */
.ws-project-menu{width:auto;min-width:200px;max-width:min(320px,calc(100vw - 16px));gap:0;padding:6px}
.ws-project-menu button{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:36px;padding:8px 10px 8px 6px}
.ws-project-menu [role="menuitemradio"][aria-checked="false"]{padding-left:6px}
.ws-project-menu .menu-tick{flex:none;width:14px;font-size:12px;line-height:20px;color:var(--text)}
.ws-project-menu .menu-text{display:grid;gap:1px;min-width:0}.ws-project-menu .menu-text>span{line-height:20px}
.ws-project-menu .menu-text small{font-size:12px;line-height:1.35;color:var(--muted)}
.ws-project-menu .menu-head{margin:6px 10px 4px 28px;font-size:11.5px;font-weight:500;color:var(--muted)}
.ws-project-menu hr{margin:4px 6px;border:0;border-top:1px solid var(--line)}
.ws-project-menu hr:first-child,.ws-project-menu hr:last-child{display:none}
/* The left panel's height comes from pinSidebar (window, its top and the footer), so it never scrolls with the page;
   its panel cards shrink and scroll inside when there isn't room for all of them. */
@media (min-width:961px){.ws-sidebar>.ws-side-group{min-height:88px}.ws-sidebar>.ws-panel-add{flex:none}}
.ws-project-menu .menu-icon{flex:none;width:20px;height:20px;display:grid;place-items:center}
/* Add a panel: a quiet round plus under the panels. */
.ws-panel-add{align-self:center;display:grid;place-items:center;width:28px;height:28px;min-height:28px;padding:0;border-radius:50%}
.ws-panel-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ws-panel-add:hover{background:var(--raised)}
.ws-panel-add:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 22%,transparent)}