/* Keep every tab readable while wheel scrolling continues onto the page. */
.feature-chips .feature-brand { width:14px; height:14px; object-fit:contain; flex-shrink:0; }
.feature-brand-ollama { filter:invert(1); }
[data-theme="light"] .feature-brand-ollama { filter:none; }
.current-app:has(#vicode-ai-tab[aria-selected="true"],#vicode-demo-tab[aria-selected="true"]) .app-tab-surface { border-top-left-radius:28px; }
.current-app .app-tabs { gap:16px; }
.current-app .app-tabs button { flex:1 1 0; padding-inline:16px; }
.current-app .app-tabs button:last-child[aria-selected="true"]::after { display:none; }
.has-fixed-panels .app-tab-surface { position:relative; box-sizing:border-box; overflow:hidden; }
.current-app.has-fixed-panels .app-tab-surface > [role="tabpanel"] { min-height:0; min-width:0; align-self:stretch; overflow:visible; overscroll-behavior:auto; }
.current-app.has-fixed-panels .app-tab-surface > .vicode-purpose { display:flex; flex-direction:column; gap:16px; }
.current-app.has-fixed-panels .app-tab-surface > #vicode-ai-view { gap:10px; }
.current-app.has-fixed-panels .app-tab-surface > .current-app-layout { align-items:center; }
#portfolio .vicode-purpose-intro > p:last-child { margin-bottom:0; }
#portfolio .vicode-purpose-status { margin:0; font-size:13px; }
.vicode-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.vicode-feature { padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-0); min-width:0; }
#portfolio .vicode-feature h4 { font-size:20px; line-height:1.3; margin:10px 0 8px; font-weight:500; }
#portfolio .vicode-feature p { font-size:17px; line-height:1.5; margin:0; }
.feature-evidence { display:flex; gap:10px; align-items:center; font:12px/1.5 var(--font-mono); color:var(--text-2); }
.feature-evidence i { color:var(--accent-secondary); font-size:20px; }
.feature-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.feature-chips span { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--border); border-radius:8px; color:var(--text-1); font:12px/1.3 var(--font-mono); }
.learning-pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; color:var(--text-2); font:13px/1.5 var(--font-mono); }
.learning-pager > div { display:flex; gap:8px; }
.learning-pager button { width:44px; height:44px; background:var(--surface-0); color:var(--text-0); border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.learning-pager button:disabled { opacity:.3; cursor:default; }
.learning-pager button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.current-app.has-fixed-panels .app-tab-surface > #vicode-demo-view { overflow:hidden; }
.vicode-demo { min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; border:1px solid #3c3c3b; border-radius:10px; background:#191918; color:#ededed; }
.demo-titlebar { display:flex; align-items:center; gap:10px; height:32px; flex-shrink:0; padding:0 10px; background:#1e1e1d; border-bottom:1px solid #30302f; font-size:11px; }
.demo-titlebar img { width:22px; height:18px; object-fit:contain; }
.demo-breadcrumb { margin:auto; padding:3px 10px; background:#272726; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-reset { border:0; background:transparent; color:#aaa; font-size:11px; cursor:pointer; }
.demo-layout { display:grid; grid-template-columns:minmax(210px,30%) minmax(0,1fr); flex:1; min-height:0; gap:6px; padding:6px; }
.demo-sidebar { display:flex; flex-direction:column; min-width:0; background:#232322; border:1px solid #343433; border-radius:9px; overflow:hidden; }
.demo-search { margin:6px; width:calc(100% - 12px); background:#1f1f1e; border:1px solid #353534; border-radius:7px; padding:7px; color:#ccc; font:12px var(--font-primary); }
.demo-browser { display:grid; grid-template-columns:40% 60%; flex:1; min-height:0; }
.demo-library { background:#30302e; padding:6px; display:flex; flex-direction:column; border-right:1px solid #424240; overflow:auto; min-height:0; }
.demo-library small { color:#959593; font-size:9px; letter-spacing:1px; margin:4px; }
.vicode-demo button { font-family:var(--font-primary); }
.vicode-demo [hidden] { display:none !important; }
.demo-library button,.demo-list button { display:flex; flex-shrink:0; align-items:center; gap:7px; min-height:27px; padding:5px; border:0; border-radius:5px; background:transparent; color:#b5b5b3; font-size:11px; text-align:left; cursor:pointer; }
.demo-library button[aria-pressed="true"],.demo-list button[aria-pressed="true"] { background:#787876; color:#fff; }
.demo-library button:hover,.demo-list button:hover { background:#454544; }
.demo-context { margin-top:auto; color:#aaa; font-size:10px; padding:7px 3px; border-top:1px solid #424240; }
.demo-list { padding:6px; overflow:auto; }
.demo-list strong { display:block; padding:8px; background:#414140; border-radius:6px; font-size:12px; margin-bottom:8px; }
.demo-list button { width:100%; overflow-wrap:anywhere; }
.demo-list p { color:#999; font-size:11px; margin:8px; }
.demo-workspace { display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px 20px 10px; border:1px solid #30302f; border-radius:8px; gap:12px; }
.demo-messages { flex:1; min-height:70px; overflow:auto; overscroll-behavior:contain; }
#portfolio .demo-message p { font-size:13px; line-height:1.6; margin:0; color:#ddd; }
.demo-message { margin:0 auto 14px; max-width:620px; }
.demo-message-user { padding:10px 12px; background:#222221; border:1px solid #353534; border-radius:8px; }
.demo-tool-row { padding:6px 0; color:#aaa; font:11px/1.6 var(--font-mono); border-bottom:1px solid #2c2c2b; }
.demo-tool-row i { margin-right:8px; }
.demo-tool-row b { color:#ddd; font-weight:500; }
.demo-working { font-size:11px; color:#aaa; padding:6px 0; }
.demo-composer { flex-shrink:0; padding:10px; border:1px solid #454543; border-radius:16px; background:#2d2d2c; }
.demo-composer:focus-within { outline:2px solid #9fe8f1; outline-offset:2px; }
.demo-composer textarea { width:100%; min-height:40px; height:40px; resize:none; border:0; background:transparent; color:#eee; font:13px/1.5 var(--font-primary); }
.demo-composer-footer { display:flex; align-items:center; gap:8px; }
.demo-composer select { border:0; color:#ddd; background:#2d2d2c; min-width:0; max-width:75%; font-size:10px; padding:4px 0; }
.demo-auto { color:#edb748; font-size:10px; white-space:nowrap; }
.demo-composer button { width:32px; height:32px; flex-shrink:0; border:1px solid #454543; border-radius:50%; color:#ddd; background:#383837; cursor:pointer; }
.demo-voice { margin-left:auto; }
.demo-send { margin-left:0; }
.demo-composer button:disabled { opacity:.4; cursor:default; }
.demo-example-note { color:#aaa; font-size:11px; line-height:1.5; padding:6px 10px; border-top:1px solid #30302f; }
.vicode-demo :is(button,input,textarea,select):focus-visible { outline:2px solid #9fe8f1; outline-offset:1px; }
.vicode-demo .demo-composer textarea:focus { outline:none; box-shadow:none; }
.vicode-demo { color-scheme:dark; }
.vicode-demo, .vicode-demo :is(.demo-library,.demo-list,.demo-messages) { scrollbar-width:thin; scrollbar-color:transparent transparent; }
.vicode-demo:hover, .vicode-demo :is(.demo-library,.demo-list,.demo-messages):hover { scrollbar-color:#686866 transparent; }
.vicode-demo::-webkit-scrollbar, .vicode-demo :is(.demo-library,.demo-list,.demo-messages)::-webkit-scrollbar { width:6px; height:6px; }
.vicode-demo::-webkit-scrollbar-track, .vicode-demo :is(.demo-library,.demo-list,.demo-messages)::-webkit-scrollbar-track { background:transparent; }
.vicode-demo::-webkit-scrollbar-thumb, .vicode-demo :is(.demo-library,.demo-list,.demo-messages)::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
.vicode-demo:hover::-webkit-scrollbar-thumb, .vicode-demo :is(.demo-library,.demo-list,.demo-messages):hover::-webkit-scrollbar-thumb { background:#686866; }
@media(max-width:900px) { .demo-layout { grid-template-columns:210px minmax(0,1fr); } .demo-workspace { padding:12px; } }
@media(max-width:640px) {
 .current-app .app-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-bottom:10px; }
 .current-app .app-tabs button,.current-app .app-tabs button[aria-selected="true"] { min-height:52px; padding:10px 8px; border-radius:18px; font-size:14px; }
 .current-app .app-tabs button::before,.current-app .app-tabs button::after { display:none; }
 .current-app .app-tab-surface { border-radius:24px; }
 .vicode-feature-grid { grid-template-columns:1fr; }
 .vicode-feature { padding:16px; }
 .vicode-demo { flex:1; height:auto; overflow:auto; }
 .demo-layout { grid-template-columns:190px minmax(300px,1fr); min-width:510px; }
 .demo-titlebar { min-width:510px; }
 .demo-auto { display:none; }
}
/* Screenshot-aligned preview controls and library views. */
.demo-model-picker { position:relative; min-width:0; }
.vicode-demo .demo-composer #demo-model { display:flex; align-items:center; gap:8px; width:auto; max-width:220px; padding:5px 10px; height:32px; border-radius:18px; background:transparent; border-color:transparent; font-size:10px; white-space:nowrap; }
#demo-model span { overflow:hidden; text-overflow:ellipsis; }
.vicode-demo #demo-model:hover { background:#383837; }
#demo-model-options { position:absolute; bottom:calc(100% + 8px); left:0; width:245px; max-width:calc(100vw - 60px); padding:6px; border:1px solid #50504e; border-radius:14px; background:#282827; box-shadow:0 8px 24px #0005; z-index:5; }
.vicode-demo .demo-composer #demo-model-options button { display:block; width:100%; height:auto; min-height:36px; border:0; border-radius:9px; background:transparent; padding:8px 10px; text-align:left; font-size:11px; }
.vicode-demo #demo-model-options button:hover,.vicode-demo #demo-model-options button[aria-selected="true"] { background:#464645; }
.demo-list .demo-collection-heading { display:flex; align-items:center; gap:6px; line-height:1.4; }
.demo-collection-heading i { flex-shrink:0; font-size:8px; line-height:1; }
.demo-place { color:#aaa; font-size:11px; padding:8px 4px; }
.demo-list h5 { color:#a8a8a6; font-size:12px; margin:16px 8px 10px; font-weight:500; }
.demo-list button span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-list p { line-height:1.6; }
.demo-example-note.sr-only { padding:0; border:0; }
.demo-code { padding:12px; background:#232322; border:1px solid #3b3b39; border-radius:10px; color:#d3dfcf; overflow:auto; font:11px/1.7 var(--font-mono); white-space:pre; }
.demo-layout.is-browser-view { grid-template-columns:130px minmax(0,1fr); }
.is-browser-view .demo-search,.is-browser-view .demo-list { display:none; }
.is-browser-view .demo-browser { display:flex; }
.is-browser-view .demo-library { flex:1; border-right:0; }
.is-browser-view .demo-workspace { padding:14px; }
.demo-view-header { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #333; padding-bottom:12px; color:#eee; font-size:14px; }
.demo-view-header small { color:#aaa; margin-left:8px; font-weight:400; }
.demo-model-browser { display:grid; grid-template-columns:minmax(155px,33%) minmax(0,1fr); min-height:0; height:calc(100% - 34px); }
.demo-model-index { padding:12px 12px 12px 0; border-right:1px solid #363634; overflow:auto; }
.demo-model-detail { padding:20px; overflow:auto; }
.demo-model-detail > small { color:#999; font:10px var(--font-mono); }
#portfolio .demo-model-detail h4 { margin:12px 0 24px; font-size:22px; }
#portfolio .demo-model-detail p { font-size:12px; line-height:1.7; color:#aaa; margin:16px 0; }
.demo-model-detail h5,.demo-model-index h5,.demo-catalog-entries h5 { color:#999; font-size:10px; font-weight:500; margin:18px 0 8px; letter-spacing:.5px; }
.demo-view-tabs { display:flex; gap:4px; margin-bottom:12px; }
.demo-view-tabs button,.demo-model-actions button { border:1px solid #3f3f3d; border-radius:8px; background:#252524; color:#aaa; padding:8px 10px; font-size:11px; cursor:pointer; }
.demo-view-tabs button[aria-pressed="true"] { background:#464644; color:#fff; }
.demo-model-index input,.demo-catalog-search { width:100%; border:1px solid #444; border-radius:8px; background:#232322; color:#ddd; padding:9px; font:12px var(--font-primary); }
.demo-model-entries button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:#ddd; font-size:12px; text-align:left; cursor:pointer; }
.demo-model-entries button[aria-pressed="true"] { background:#30302e; border-color:#4d4d4b; }
.demo-model-metadata { display:grid; grid-template-columns:1fr 1fr; background:#30302f; border-radius:10px; margin-top:18px; }
.demo-model-metadata span { padding:12px; color:#999; font-size:10px; }
.demo-model-metadata b { display:block; color:#eee; font-size:12px; margin-top:6px; }
.demo-catalog-row { display:flex; align-items:center; gap:12px; padding:12px; width:100%; border:0; border-radius:8px; background:transparent; text-align:left; color:#eee; cursor:pointer; }
.demo-catalog-row > i { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; background:#30302e; border-radius:8px; color:#aaa; }
.demo-catalog-row b { display:block; font-size:13px; margin-bottom:5px; }
.demo-catalog-row small { display:block; font-size:12px; line-height:1.5; color:#aaa; }
.demo-catalog-row:hover,.demo-catalog-row[aria-pressed="true"] { background:#464644; }
.vicode-demo :is(.demo-model-index,.demo-model-detail,.demo-code) { scrollbar-width:thin; scrollbar-color:transparent transparent; }
.vicode-demo :is(.demo-model-index,.demo-model-detail,.demo-code):hover { scrollbar-color:#686866 transparent; }
@media(max-width:640px) { .demo-layout.is-browser-view { min-width:510px; grid-template-columns:110px minmax(0,1fr); } .demo-model-detail { padding:14px; } }
/* The desktop preview lives in a larger dialog, not an expanding project card. */
.current-app.has-fixed-panels .app-tab-surface > #vicode-app-view { overflow:hidden; }
.current-app:has(#vicode-demo-tab[aria-selected="true"]) .app-tab-surface { border-top-right-radius:0; }
.current-app .app-tabs button { min-width:0; }
.vicode-try-button,.current-app .app-preview-toggle.vicode-try-button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:12px 20px; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface-2); color:var(--text-0); font:600 16px var(--font-primary); cursor:pointer; }
.vicode-try-button,.current-app .app-preview-toggle.vicode-try-button { transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.vicode-try-button:is(:hover,:focus-visible),.current-app .app-preview-toggle.vicode-try-button:is(:hover,:focus-visible) { border-color:var(--accent-primary); background:color-mix(in srgb,var(--accent-primary) 10%,var(--surface-2)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-primary) 12%,transparent); }
.vicode-try-button i { transition:transform .2s ease; }
.vicode-try-button:is(:hover,:focus-visible) i { transform:translate(2px,-2px); }
@media(prefers-reduced-motion:reduce) { .vicode-try-button,.vicode-try-button i,.current-app .app-preview-toggle.vicode-try-button { transition:none; } .vicode-try-button:is(:hover,:focus-visible) i { transform:none; } }
.vicode-try-button i { color:var(--accent-primary); }
.vicode-try-button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:4px; }
.vicode-modal-launcher { position:relative; flex:1; min-height:0; display:grid; place-items:center; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface-0); }
.vicode-modal-launcher img { position:absolute; width:100%; height:100%; object-fit:contain; opacity:.38; }
.vicode-modal-launcher button { position:relative; z-index:1; background:var(--surface-1); box-shadow:0 8px 32px #0005; }
.vicode-demo-dialog { width:min(1400px,calc(100vw - 32px)); max-width:none; height:min(850px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:10px; margin:auto; border:1px solid var(--border-strong); border-radius:24px; background:var(--surface-0); color:var(--text-0); overflow:hidden; }
.vicode-demo-dialog[open] { display:flex; flex-direction:column; }
.vicode-demo-dialog::backdrop { background:#000c; }
.vicode-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px 18px; }
.vicode-modal-header strong { display:block; font-size:20px; }
.vicode-modal-header span { display:block; color:var(--text-2); font-size:12px; margin-top:5px; }
.vicode-scenarios { display:flex; gap:6px; }
.vicode-scenarios button,.vicode-modal-close { min-height:40px; border:1px solid var(--border); border-radius:10px; background:var(--surface-1); color:var(--text-1); padding:8px 14px; cursor:pointer; }
.vicode-scenarios button[aria-pressed="true"] { color:var(--text-0); border-color:var(--accent-primary); }
.vicode-modal-close { width:44px; height:44px; padding:0; font-size:26px; flex-shrink:0; }
.vicode-demo-dialog button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.vicode-modal-body { display:flex; min-height:0; flex:1; }
.vicode-modal-body .vicode-demo { width:100%; border-radius:14px; }
.vicode-demo[hidden] { display:none !important; }
.vicode-demo-dialog .demo-titlebar { height:38px; font-size:12px; }
.vicode-demo-dialog .demo-library button,.vicode-demo-dialog .demo-list button { min-height:36px; font-size:13px; }
.vicode-demo-dialog .demo-library small { font-size:10px; }
.vicode-demo-dialog .demo-list p { font-size:12px; }
.vicode-demo-dialog .demo-workspace { padding:24px; }
.vicode-demo-dialog .demo-message p { font-size:16px; line-height:1.7; margin:0; color:#ddd; }
.vicode-demo-dialog .demo-tool-row,.vicode-demo-dialog .demo-code { font-size:13px; }
.vicode-demo-dialog .demo-composer textarea { font-size:16px; height:64px; }
.vicode-demo-dialog .demo-composer #demo-model { font-size:12px; max-width:280px; }
@media(max-width:640px) { .vicode-demo-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); max-height:none; padding:6px; border-radius:18px; } .vicode-modal-header { flex-wrap:wrap; gap:8px; padding:8px; } .vicode-modal-header > div:first-child { flex:1; } .vicode-scenarios { order:3; width:100%; } .vicode-scenarios button { flex:1; font-size:12px; padding:8px; } .vicode-modal-close { width:40px; height:40px; } .vicode-demo-dialog .demo-workspace { padding:14px; } }
/* Keep selected-tab labels on the same baseline as their neighbours. */
.current-app .app-tabs button { display:flex; align-items:flex-start; justify-content:center; padding-top:24px; padding-bottom:0; line-height:24px; }
.vicode-demo-dialog { height:min(850px,calc(100dvh - 160px)); max-height:calc(100dvh - 160px); margin:auto; }
.vicode-screen-close { position:fixed; top:max(12px,env(safe-area-inset-top)); right:12px; z-index:10; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:8px; background:transparent; color:#d4d4dc; cursor:pointer; transition:color .18s ease,background .18s ease; }
.vicode-screen-close svg { width:34px; height:34px; }
.vicode-screen-close:hover { color:#fff; background:#ffffff14; }
.vicode-screen-close:focus-visible { color:#fff; outline:2px solid #a99aff; outline-offset:3px; }
.vicode-demo-dialog { padding:8px; }
@media(max-width:900px) { .current-app .app-tabs button { padding-top:19px; line-height:22px; } }
@media(max-width:640px) { .current-app .app-tabs button { align-items:center; padding:10px 8px; line-height:20px; } .vicode-demo-dialog { padding:6px; } }