/* Focus / code workspace polish while preserving each workspace's theme controls. */
.code-library{max-width:1180px}
.code-library>small{letter-spacing:2px;color:var(--power-accent)}
.clyde-starters{margin:25px 0 30px}
.clyde-starter-title>span{color:var(--power-accent);font-size:10px;font-weight:700;letter-spacing:1.6px}
.clyde-starter-title h2{font-size:24px;letter-spacing:-.9px;font-weight:700;margin:8px 0}
.clyde-starter-title p{font-size:12px;color:var(--muted);margin:0 0 15px}
.clyde-starter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clyde-starter-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:22px;min-width:0;min-height:172px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);transition:transform .2s,border-color .2s;color:var(--ink)}
.clyde-starter-grid button:hover:not(:disabled){transform:translateY(-3px);border-color:var(--power-accent);filter:none}
.clyde-starter-grid button:disabled{opacity:.6;cursor:wait}
.clyde-starter-grid button>span{display:grid;place-items:center;font-size:21px;width:38px;height:38px;border-radius:11px;background:var(--soft);color:var(--power-accent)}
.clyde-starter-grid button b{font-size:14px}
.clyde-starter-grid button small{font-size:11px;color:var(--muted)}
.clyde-starter-grid button em{margin-top:auto;font-size:11px;color:var(--power-accent);font-style:normal}

@media(max-width:700px){.clyde-starter-grid{grid-template-columns:1fr}.clyde-starter-grid button{min-height:130px}}

/* Small movements for existing controls, not another page or dashboard. */
@keyframes clyde-panel-enter{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
@keyframes clyde-reply-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes clyde-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes clyde-backdrop-enter{from{opacity:0}to{opacity:1}}
#mode-menu:not(.hidden),#account-menu:not(.hidden),#creation-mention-menu:not(.hidden){transform-origin:bottom left;animation:clyde-panel-enter 180ms cubic-bezier(.2,.8,.2,1) both}
#mode-menu:not(.hidden){transform-origin:top left}
dialog[open]{animation:clyde-dialog-enter 200ms cubic-bezier(.2,.8,.2,1) both}
dialog[open]::backdrop{animation:clyde-backdrop-enter 180ms ease both}
.message.new-message{animation:clyde-reply-enter 200ms ease-out both}
.sidebar{transition:width 200ms cubic-bezier(.2,.8,.2,1),transform 200ms cubic-bezier(.2,.8,.2,1),background-color 200ms ease}
.sidebar :is(nav button,.session-row,.new,.profile),.composer :is(button,textarea),.code-tabs button{transition:background-color 160ms ease,color 160ms ease,opacity 160ms ease,transform 160ms ease}
.composer{transition:box-shadow 200ms ease,border-color 200ms ease,background-color 200ms ease}
@media(hover:hover){.sidebar :is(nav button,.new):hover svg{transform:translateX(1px)}.sidebar svg{transition:transform 180ms ease}.composer button:not(:disabled):active{transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){#mode-menu,#account-menu,#creation-mention-menu,dialog,dialog::backdrop,.message.new-message,.sidebar,.sidebar *,.composer,.composer *, .clyde-starter-grid button{animation:none!important;transition:none!important}}
html.clyde-reduce-motion :is(#mode-menu,#account-menu,#creation-mention-menu,dialog,.message.new-message,.sidebar,.sidebar *,.composer,.composer *,.clyde-starter-grid button){animation:none!important;transition:none!important}
html.clyde-reduce-motion dialog::backdrop{animation:none!important}

/* Reference-video power control. One track, one level, no meter or label row. */
#composer-strength-panel{--slider-accent:#4498ff;--slider-panel:#2d2e30;--slider-track:#454649;--slider-text:#f4f4f5;--slider-muted:#b9babf;--slider-flow-duration:5s;position:absolute;width:292px;padding:12px 12px 14px;border:1px solid #ffffff0d;border-radius:18px;background:var(--slider-panel);color:var(--slider-text);box-shadow:0 12px 36px #0004;text-align:center;isolation:isolate;transition:box-shadow 200ms ease,border-color 200ms ease}
html[data-theme=light] #composer-strength-panel{--slider-panel:#f4f4f5;--slider-track:#dcdde1;--slider-text:#24252a;--slider-muted:#666970;border-color:#00000010;box-shadow:0 12px 36px #0002}
#composer-strength-panel[data-level='4']{--slider-flow-duration:3.5s}
#composer-strength-panel[data-level='5']{--slider-accent:#b77aff;--slider-flow-duration:2.6s}
.strength-heading{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;gap:4px;align-items:start;margin-bottom:16px}
.strength-bolt{width:18px;height:18px;margin:3px auto;color:var(--slider-muted)}
.strength-heading-copy{min-width:0;display:grid;justify-items:center;gap:2px}
#composer-strength-title{font-size:20px;font-weight:650;letter-spacing:-.5px;line-height:1.2;color:var(--slider-accent);transition:color 200ms ease}
#composer-model-picker{display:flex;align-items:center;justify-content:center;width:auto;max-width:100%;gap:2px;min-height:24px;padding:0 3px;border-radius:5px;color:var(--slider-text);text-align:center}
#composer-strength-panel #composer-strength-model{font-size:12px;font-weight:550;color:inherit;line-height:1.4;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#composer-model-picker>svg{width:13px;height:13px;flex:none;color:var(--slider-muted)}
#composer-strength-reset{display:grid;place-items:center;width:28px;height:28px;padding:5px;color:var(--slider-muted);border-radius:9px;transition:background-color 160ms ease,color 160ms ease}
#composer-strength-reset svg{width:19px;height:19px}
#composer-strength-reset:hover,#composer-model-picker:hover{background:color-mix(in srgb,var(--slider-text) 8%,transparent);color:var(--slider-text)}
#composer-strength-panel .composer-strength-rail{height:32px;border-radius:999px;background:var(--slider-track);box-shadow:inset 0 0 0 1px #ffffff0d;position:relative;isolation:isolate}
#composer-strength-panel .composer-strength-rail:before,#composer-strength-panel .composer-strength-rail:after,#composer-strength-panel:not(.hidden) .composer-strength-rail:before{content:none;animation:none;box-shadow:none}
.strength-track-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--strength-progress) + 18px - var(--strength-thumb-offset,0px));height:100%;border-radius:inherit;background:#3986f8;overflow:hidden;pointer-events:none;transition:width 90ms linear,background-color 180ms ease}
#composer-strength-panel[data-level='5'] .strength-track-fill{background:linear-gradient(100deg,#3986f8 4%,#8855f8 62%,#b385ff)}
.strength-track-light{position:absolute;inset:-10% -40%;background:linear-gradient(100deg,transparent 38%,#ffffff70 50%,transparent 62%);opacity:0;transform:translateX(-60%);pointer-events:none}
.strength-track-particles{position:absolute;inset:0;opacity:0;pointer-events:none}
.strength-track-particles i{position:absolute;left:var(--particle-x);top:var(--particle-y);width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff7;opacity:.4}
#composer-strength-panel .composer-strength-dots{inset:0 16px;z-index:2}
#composer-strength-panel .composer-strength-dots i{width:4px;height:4px;background:#ffffff38;box-shadow:none;transform:none}
#composer-strength-panel .composer-strength-rail input{height:44px;width:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:grab;z-index:4;overflow:visible;border:0;outline:none;touch-action:none}
#composer-strength-panel .composer-strength-rail input:active{cursor:grabbing}
#composer-strength-panel .composer-strength-rail input::-webkit-slider-runnable-track{height:32px;background:transparent;border:0}
#composer-strength-panel .composer-strength-rail input::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:36px;height:36px;margin-top:-2px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transition:transform 160ms ease,box-shadow 180ms ease}
#composer-strength-panel .composer-strength-rail input::-moz-range-track{height:32px;background:transparent;border:0}
#composer-strength-panel .composer-strength-rail input::-moz-range-progress{background:transparent}
#composer-strength-panel .composer-strength-rail input::-moz-range-thumb{box-sizing:border-box;width:36px;height:36px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 5px #0003;transition:transform 160ms ease,box-shadow 180ms ease}
#composer-strength-panel .composer-strength-rail input:active::-webkit-slider-thumb{transform:scale(1.06)}
#composer-strength-panel .composer-strength-rail input:active::-moz-range-thumb{transform:scale(1.06)}
#composer-strength-panel .composer-strength-rail:focus-within{outline:2px solid color-mix(in srgb,var(--slider-accent) 80%,white);outline-offset:5px}
#composer-strength-cost.strength-accessible-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Only High and above animate. Hidden popovers and reduced motion never loop. */
#composer-strength-panel:not(.hidden):is([data-level='3'],[data-level='4'],[data-level='5']) .strength-track-light{animation:strength-video-flow var(--slider-flow-duration) ease-in-out infinite}
#composer-strength-panel[data-level='3'] .strength-track-fill{box-shadow:0 0 10px #3986f822}
#composer-strength-panel[data-level='4'] .strength-track-fill{box-shadow:0 0 15px #3986f838}
#composer-strength-panel[data-level='4'] .strength-track-particles{opacity:.4}
#composer-strength-panel[data-level='5'] .strength-track-fill{box-shadow:0 0 18px #a86aff44}
#composer-strength-panel[data-level='5'] .strength-track-particles{opacity:.8}
#composer-strength-panel:not(.hidden):is([data-level='4'],[data-level='5']) .strength-track-particles i{animation:strength-video-drift 2.8s ease-in-out infinite;animation-delay:calc(var(--particle)*-330ms)}
@keyframes strength-video-flow{0%,15%{transform:translateX(-60%);opacity:0}35%{opacity:.36}70%,100%{transform:translateX(60%);opacity:0}}
@keyframes strength-video-drift{0%,100%{transform:translate(0,1px);opacity:.2}50%{transform:translate(5px,-2px);opacity:.85}}
@media(max-width:700px){#composer-strength-panel{position:fixed;left:auto;right:12px;width:min(292px,calc(100vw - 24px));max-width:none;margin:0;bottom:max(91px,calc(env(safe-area-inset-bottom) + 82px));padding-bottom:18px}.strength-heading{grid-template-columns:32px minmax(0,1fr) 32px}#composer-strength-reset{width:32px;height:32px}#composer-model-picker{min-height:28px}}
@media(prefers-reduced-motion:reduce){#composer-strength-panel,#composer-strength-panel *,#composer-strength-panel :before,#composer-strength-panel :after{animation:none!important;transition:none!important}}
html.clyde-reduce-motion #composer-strength-panel,html.clyde-reduce-motion #composer-strength-panel *,html.clyde-reduce-motion #composer-strength-panel :before,html.clyde-reduce-motion #composer-strength-panel :after{animation:none!important;transition:none!important}

/* Reading, typography and Work viewport fit. */
body,button,input,textarea,select{font-family:var(--clyde-font,system-ui)}
.message,.message-content,.welcome h2,.settings-app{font-family:var(--clyde-font,system-ui)}
pre,code,#code-source,#code-highlight{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important}
.message-content :is(ol,ul){margin:12px 0;padding-left:26px;list-style-position:outside}
.message-content ol{list-style-type:decimal}.message-content ul{list-style-type:disc}
.message-content li{display:list-item;padding-left:4px;margin:8px 0;line-height:1.7}
.message-content li::marker{color:var(--muted);font-weight:600}
.message-content .md-spacer{height:10px}.message-content blockquote{margin:14px 0;padding:8px 16px;border-left:2px solid var(--power-accent);color:var(--muted)}
.message-content hr{border:0;border-top:1px solid var(--line);margin:20px 0}
@media(min-width:701px){html.inline-site-active #study-view>.workspace-grid{width:100%;max-width:100%;min-width:0;height:calc(100dvh - 112px);min-height:0}html.inline-site-active .workspace-grid>.inline-site-panel,html.inline-site-active .workspace-grid>.chat-panel{height:100%;min-height:0;max-width:100%;overflow:hidden}html.inline-site-active .inline-site-stage{min-height:0;overflow:auto}html.inline-site-active .inline-site-stage iframe{min-height:0}html.inline-site-active .chat-panel .conversation{min-height:0;overflow-y:auto}html.inline-site-active .composer-wrap{flex-shrink:0}.code-app{min-height:0;height:calc(100dvh - 112px)}.code-layout,.code-work,.code-edit,.code-preview{min-height:0;min-width:0}.code-work,.code-preview{overflow:auto}}
.inline-site-panel>header{flex-wrap:wrap}.inline-site-actions{flex-wrap:wrap;gap:4px}
@media(max-width:700px){html.inline-site-active .workspace-grid>.inline-site-panel{height:48dvh;min-height:240px}html.inline-site-active .inline-site-stage iframe{min-height:0}html.inline-site-active .workspace-grid>.chat-panel{height:calc(100dvh - 80px);min-height:0}.code-app{height:auto;min-height:0}}

/* Compact power popover, anchored to the trigger rather than the viewport edge. */
#composer-strength-panel{width:246px;padding:10px 10px 12px;right:0;bottom:calc(100% + 10px);border-radius:15px}
.strength-heading{margin-bottom:12px;grid-template-columns:24px minmax(0,1fr) 24px}
#composer-strength-title{font-size:18px}
#composer-strength-panel #composer-strength-model{font-size:11px}
#composer-strength-reset{width:24px;height:24px;padding:3px}
#composer-strength-panel .composer-strength-rail{height:28px}
#composer-strength-panel .composer-strength-rail input::-webkit-slider-runnable-track{height:28px}
#composer-strength-panel .composer-strength-rail input::-webkit-slider-thumb{margin-top:-4px}
#composer-strength-panel .composer-strength-rail input::-moz-range-track{height:28px}
@media(max-width:700px){#composer-strength-panel{position:absolute;left:auto;right:-48px;bottom:calc(100% + 12px);width:min(246px,calc(100vw - 24px));margin:0}.strength-heading{grid-template-columns:24px minmax(0,1fr) 24px}#composer-model-picker{min-height:24px}#composer-strength-reset{width:24px;height:24px}}

/* Plugin artwork is hosted with Clyde; no visitor requests to logo services. */
.plugin-card .plugin-logo{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border:1px solid var(--line);border-radius:13px;background:#fff;flex-shrink:0}
.plugin-card .plugin-logo img{display:block;width:32px;height:32px;object-fit:contain}
.plugin-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.plugin-card h2{font-size:19px;line-height:1.3;margin:8px 0}
.plugin-card>p{line-height:1.65}.plugin-card>button:last-child{margin-top:auto}
.plugin-connection-status{font-size:11px;padding:5px 8px;border-radius:6px;background:var(--soft);margin:4px 0 8px}
/* Work uses the available screen; chat and preview scroll independently. */
@media (min-width:701px) {
 html[data-workspace-mode=work]:not(.mobile-chat) main > #study-view { flex:1; min-height:0; padding:8px 16px 12px; gap:8px; overflow:hidden; }
 html[data-workspace-mode=work]:not(.mobile-chat) #study-view > :is(.intro,.study-strip,.ad-rewards,footer) { display:none!important; }
 html[data-workspace-mode=work]:not(.mobile-chat) .workspace-modes { flex:none; width:100%; max-width:none; margin:0; padding:0!important; }
 html[data-workspace-mode=work]:not(.mobile-chat) .workspace-modes > :is(.mode-buttons,p) { display:none; }
 html[data-workspace-mode=work]:not(.mobile-chat) #work-options { margin:0; padding:4px 8px; }
 html[data-workspace-mode=work]:not(.mobile-chat) .workspace-toolbar { margin:0; max-width:none; flex:none; flex-wrap:wrap; }
 html[data-workspace-mode=work]:not(.mobile-chat) #study-view > .workspace-grid { display:flex!important; flex:1; width:100%; max-width:none!important; min-height:0; height:auto!important; margin:0; overflow:hidden; }
 html[data-workspace-mode=work]:not(.mobile-chat) .workspace-grid > .chat-panel { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; height:100%!important; max-height:100%; overflow:hidden; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel > .panel-header { flex:none; min-height:40px; height:40px; padding:4px 16px; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel > .conversation { flex:1 1 0; width:100%; min-height:0!important; height:auto!important; overflow:auto; padding:20px max(16px,calc((100% - 820px)/2))!important; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel > .composer-wrap { flex:none; width:100%; max-width:860px; padding:8px 16px; margin:0 auto; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel .composer { margin:0; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel #prompt { max-height: min(160px,23dvh); overflow-y:auto; }
 html[data-workspace-mode=work]:not(.mobile-chat) .chat-panel .composer-tools { min-width:0; flex-wrap:wrap; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) #study-view > .workspace-grid { display:grid!important; grid-template-columns:minmax(0,var(--inline-site-left,calc((100% - 8px)*.6))) 8px minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; gap:0!important; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .workspace-grid > .inline-site-panel { display:flex; flex-direction:column; grid-column:1; grid-row:1; height:100%!important; min-width:0; min-height:0; overflow:hidden; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .workspace-grid > #inline-site-resizer { display:block; grid-column:2; grid-row:1; height:100%; touch-action:none; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .workspace-grid > .chat-panel { grid-column:3; grid-row:1; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .inline-site-stage { flex:1; min-height:0; overflow:auto; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .inline-site-stage iframe { height:100%; min-height:0; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .inline-site-panel > :is(header,footer) { flex:none; }
 html[data-workspace-mode=work].inline-site-active:not(.mobile-chat) .inline-site-actions { flex-wrap:wrap; }
}
.auto-switch-control { display:flex; align-items:center; gap:12px; position:relative; padding:12px 0 0; margin-top:10px; border-top:1px solid #8884; cursor:pointer; }
.auto-switch-control > span { flex:1; min-width:0; }
.auto-switch-control b { display:block; font-size:12px; font-weight:600; }
.auto-switch-control small { display:block; margin-top:3px; font-size:10px; opacity:.75; }
.auto-switch-control input { position:absolute; right:0; width:38px; height:28px; opacity:0; cursor:pointer; }
.auto-switch-control i { width:34px; height:20px; border-radius:20px; background:#7775; pointer-events:none; transition:background-color .18s; }
.auto-switch-control i:before { content:''; display:block; width:14px; height:14px; margin:3px; border-radius:50%; background:#fff; transition:transform .18s; }
.auto-switch-control input:checked + i { background:var(--strength-end,var(--power-accent)); }
.auto-switch-control input:checked + i:before { transform:translateX(14px); }
.auto-switch-control input:focus-visible + i { outline:2px solid var(--ink); outline-offset:4px; }
.routing-notice { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font-size:11px; line-height:1.5; }
.routing-notice span { flex:1; min-width:0; overflow-wrap:anywhere; }
.routing-notice button { flex:none; width:28px; height:28px; border-radius:8px; font-size:18px; }
.provider-card.selected { border-color:var(--power-accent); box-shadow:inset 0 0 0 1px var(--power-accent); }
@media(prefers-reduced-motion:reduce) { .auto-switch-control i,.auto-switch-control i:before { transition:none; } }
html.clyde-reduce-motion .auto-switch-control i,html.clyde-reduce-motion .auto-switch-control i:before { transition:none; }