:root{color-scheme:light;--bg:#faf9f6;--sidebar:#faf9f6;--surface:#fff;--surface-soft:#f6f5f2;--line:#e7e5e0;--line-strong:#d8d5ce;--text:#262522;--muted:#6e6b65;--subtle:#939088;--accent:#d76f50;--accent-strong:#c65b3e;--accent-soft:#f9eee8;--good:#25835d;--warn:#a66e19;--radius:13px;--shadow:0 12px 36px rgba(35,31,25,.08)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#1d1c1a;--sidebar:#1d1c1a;--surface:#242320;--surface-soft:#2a2926;--line:#3a3934;--line-strong:#4b4943;--text:#f2f0eb;--muted:#b2aea5;--subtle:#88847c;--accent:#ef9678;--accent-strong:#ffad8d;--accent-soft:#3a2a24;--good:#7fd1a5;--warn:#e2ba70;--shadow:0 12px 36px rgba(0,0,0,.2)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:14px}body{transition:background .18s,color .18s}button,textarea{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.55;cursor:not-allowed}.app-shell{display:flex;min-height:100vh}.sidebar{width:252px;min-width:252px;background:var(--sidebar);border-right:1px solid var(--line);padding:19px 13px 13px;display:flex;flex-direction:column;position:relative;z-index:30}.brand{display:flex;align-items:center;gap:9px;padding:2px 9px 22px;text-decoration:none;color:var(--text)}.brand-mark{width:29px;height:29px}.brand-wordmark{font:800 16px Manrope,sans-serif;letter-spacing:-.6px;white-space:nowrap}.brand-wordmark b{color:var(--accent);font-weight:800}.new-chat{display:flex;align-items:center;gap:9px;width:100%;height:40px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);text-align:left;font-weight:600;color:var(--text)}.new-chat:hover,.icon-button:hover,.suggestion-card:hover,.connect-button:hover,.model-option:hover{background:var(--surface-soft)}.plus-icon{font-size:20px;color:var(--accent);line-height:1}.new-chat kbd{margin-left:auto;font-size:10px;color:var(--subtle);border:1px solid var(--line);border-radius:4px;padding:3px 5px;font-family:inherit}.nav-caption{font:700 10px Manrope,sans-serif;letter-spacing:1.1px;color:var(--subtle);margin:24px 10px 9px}.side-nav{display:grid;gap:3px}.nav-item{border:1px solid transparent;background:transparent;display:flex;align-items:center;text-align:left;gap:10px;padding:9px 10px;border-radius:8px;color:var(--muted);font-size:13px}.nav-item:hover{background:var(--surface-soft);color:var(--text)}.nav-item.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text)}.nav-icon{width:17px;text-align:center;color:var(--muted);font-size:16px}.nav-item.active .nav-icon{color:var(--accent)}.nav-count{margin-left:auto;font-size:10px;border-radius:5px;background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:2px 6px}.recent-caption{margin-top:26px}.recent-list{display:grid;gap:2px}.recent-empty{color:var(--subtle);font-size:11px;line-height:1.6;padding:5px 10px}.recent-chat{padding:8px 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:none;border:0;border-radius:7px;text-align:left;font-size:12px;color:var(--muted)}.recent-chat:hover{background:var(--surface);color:var(--text)}.sidebar-spacer{flex:1;min-height:30px}.sidebar-note{display:flex;gap:9px;padding:10px;margin-bottom:10px;border:1px solid var(--line);background:var(--surface);border-radius:9px}.note-pulse{width:7px;height:7px;flex:none;border-radius:50%;background:var(--warn);margin-top:5px}.sidebar-note strong,.sidebar-note small{display:block}.sidebar-note strong{font-size:11px;font-weight:600;color:var(--text)}.sidebar-note small{font-size:10px;color:var(--muted);margin-top:4px}.profile-button{border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--surface);display:flex;align-items:center;gap:9px;text-align:left}.avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f0d9cf;color:#8f4933;font-size:10px;font-weight:700}.profile-copy{min-width:0;display:grid;gap:3px}.profile-copy strong{font-size:11px;font-weight:600}.profile-copy small{color:var(--muted);font-size:10px}.profile-menu{margin-left:auto;color:var(--subtle);letter-spacing:1px}.main-area{min-width:0;flex:1;display:flex;flex-direction:column;position:relative}.topbar{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:var(--bg)}.breadcrumb{color:var(--muted);font-size:12px}.breadcrumb span{padding:0 8px;color:var(--subtle)}.breadcrumb strong{font-weight:500;color:var(--text)}.topbar-actions{display:flex;align-items:center;gap:8px}.preview-pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line);color:var(--muted);background:var(--surface);padding:6px 9px;border-radius:18px;font-size:10px}.preview-pill i{width:5px;height:5px;background:var(--warn);border-radius:50%}.icon-button,.mobile-menu{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted)}.mobile-menu{display:none}.view{display:none;flex:1;min-height:0}.view.active-view{display:flex;flex-direction:column}.chat-scroll{min-height:0;flex:1;overflow:auto;padding:30px 24px 20px}.welcome{width:min(700px,100%);margin:10px auto 0;text-align:center;animation:fadeIn .25s ease both}.welcome-mark-wrap{width:48px;height:48px;margin:0 auto 15px;display:grid;place-items:center}.welcome-mark{width:43px;height:43px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);letter-spacing:1.3px;font:700 9px Manrope,sans-serif}.welcome h1{font:600 clamp(27px,3vw,35px) Manrope,sans-serif;letter-spacing:-1.2px;margin:13px 0 8px;color:var(--text)}.welcome h1 em,.page-heading h1 em{font-style:normal;color:var(--accent)}.welcome-subtitle{font-size:13px;color:var(--muted);line-height:1.7;margin:0 auto 24px;max-width:540px}.suggestion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;text-align:left}.suggestion-card{display:flex;align-items:center;gap:11px;padding:14px 13px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-align:left;transition:background .15s,border-color .15s;min-width:0}.suggestion-card:hover{border-color:var(--line-strong)}.suggestion-icon{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:15px;font-weight:600;background:var(--surface-soft);color:var(--accent)}.suggestion-card strong,.suggestion-card small{display:block}.suggestion-card strong{font-size:12px;font-weight:600;color:var(--text)}.suggestion-card small{font-size:10px;color:var(--muted);margin-top:4px}.card-arrow{margin-left:auto;color:var(--subtle);font-size:14px}.home-connections{margin-top:19px;padding:15px;border:1px solid var(--line);background:var(--surface);border-radius:10px;text-align:left}.home-connections-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.home-connections-heading strong{font-size:12px;font-weight:600}.home-connections-heading p{font-size:10px;color:var(--muted);margin:4px 0 0}.text-link{border:0;background:none;color:var(--accent);font-size:11px;white-space:nowrap}.text-link:hover{text-decoration:underline}.text-link span{padding-left:4px}.mini-integrations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.mini-integration{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px;text-align:left}.platform-mark{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:7px;font-weight:700;font-size:13px;letter-spacing:-.3px}.platform-mark.github{color:#242424;background:#efefed}.platform-mark.youtube{color:#d93444;background:#fff0f0}.platform-mark.instagram{color:#bd387e;background:#fff0f7}.platform-mark.facebook{color:#2462c4;background:#eff5ff}.platform-mark.gemini{color:#3972ca;background:#edf4ff}.platform-mark.cloudflare{color:#bd633f;background:#fff0e8}.mini-integration-copy{min-width:0}.mini-integration-copy strong,.mini-integration-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-integration-copy strong{font-size:10px;font-weight:600;color:var(--text)}.mini-integration-copy small{font-size:9px;color:var(--muted);margin-top:4px}.messages{width:min(700px,100%);margin:0 auto;display:flex;flex-direction:column;gap:20px}.messages:not(:empty){padding:14px 0 10px}.welcome.hidden{display:none}.message{display:flex;gap:10px;animation:fadeIn .18s ease both}.message.user{justify-content:flex-end}.message-avatar{width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);border:1px solid var(--line);color:var(--accent);font-size:12px}.message-content{min-width:0;max-width:min(610px,90%)}.message-label{font-size:10px;color:var(--muted);margin:1px 0 6px}.message-text{color:var(--text);line-height:1.8;font-size:15px;overflow-wrap:anywhere;white-space:pre-wrap}.message.user .message-content{background:var(--surface-soft);border:1px solid var(--line);border-radius:13px 4px 13px 13px;padding:10px 13px}.demo-warning{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);font-size:10px;color:var(--muted);line-height:1.5}.message-actions{display:flex;gap:8px;margin-top:8px}.small-action{border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--muted);font-size:10px;padding:5px 8px}.small-action:hover{color:var(--text)}.composer-zone{width:min(730px,calc(100% - 40px));margin:0 auto;padding:10px 0 14px}.composer{background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;padding:11px 12px 9px;box-shadow:0 2px 10px rgba(30,25,18,.03)}.composer:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-strong))}.composer textarea{display:block;width:100%;resize:none;border:0;outline:0;min-height:35px;max-height:160px;line-height:1.6;background:transparent;color:var(--text);padding:1px 1px 7px}.composer textarea::placeholder{color:var(--subtle)}.composer textarea:focus-visible{outline:0}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.composer-tools,.composer-right{display:flex;align-items:center;gap:8px}.composer-tool{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-size:19px;line-height:1}.model-chip{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);border-radius:7px;color:var(--muted);font-size:10px}.model-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.chevron{color:var(--subtle)}.composer-hint{font-size:9px;color:var(--subtle)}.send-button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:var(--accent);color:white}.send-button:hover{background:var(--accent-strong)}.send-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.disclaimer{text-align:center;color:var(--subtle);font-size:10px;margin-top:8px}.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:30px auto 18px;width:min(980px,calc(100% - 48px))}.page-heading h1{font:600 clamp(26px,3vw,32px) Manrope,sans-serif;letter-spacing:-.9px;margin:7px 0 7px}.page-heading p{color:var(--muted);font-size:12px;line-height:1.65;max-width:590px;margin:0}.left-eyebrow{justify-content:flex-start;letter-spacing:1.3px}.connection-summary{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);white-space:nowrap}.summary-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:7px;background:var(--surface-soft);color:var(--accent);font-size:16px}.connection-summary strong,.connection-summary small{display:block}.connection-summary strong{font-size:11px}.connection-summary small{font-size:10px;color:var(--muted);margin-top:4px}.connection-banner,.info-panel{display:flex;align-items:center;gap:12px;width:min(980px,calc(100% - 48px));margin:0 auto 16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.banner-orb,.info-symbol{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent)}.connection-banner strong,.info-panel strong{display:block;font-size:12px}.connection-banner p,.info-panel p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.6}.secure-tag{margin-left:auto;color:var(--good);font-size:10px;white-space:nowrap}.integration-grid,.models-grid{width:min(980px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.integration-card,.model-card,.settings-card,.coming-card{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:15px;min-width:0}.integration-top{display:flex;align-items:center;gap:10px}.integration-title{min-width:0;flex:1}.integration-title h3,.model-info h3{font-size:13px;margin:0 0 4px;font-weight:600}.integration-title p,.model-info p{font-size:10px;color:var(--muted);margin:0;line-height:1.5}.integration-status{font-size:10px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:5px}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--subtle)}.integration-detail{font-size:11px;line-height:1.65;color:var(--muted);margin:13px 0}.integration-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--line)}.integration-permission{font-size:9px;color:var(--subtle)}.connect-button{border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);padding:7px 9px;font-size:10px;white-space:nowrap}.connect-button span{color:var(--accent);margin-left:4px}.coming-card{width:min(980px,calc(100% - 48px));margin:14px auto 25px;display:flex;align-items:center;gap:10px}.coming-spark{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--accent)}.coming-card strong{font-size:11px}.coming-card p{margin:4px 0 0;font-size:10px;color:var(--muted)}.coming-label{margin-left:auto;font-size:9px;color:var(--subtle);letter-spacing:1px}.model-card{display:flex;align-items:flex-start;gap:12px}.model-info{flex:1;min-width:0}.model-info p{line-height:1.6}.model-badge{display:inline-block;font-size:9px;color:var(--muted);background:var(--surface-soft);border:1px solid var(--line);border-radius:5px;padding:4px 6px;margin-top:10px}.info-panel{margin-top:14px;margin-bottom:25px;align-items:flex-start}.settings-stack{width:min(980px,calc(100% - 48px));margin:0 auto;display:grid;gap:10px}.settings-card{display:flex;align-items:flex-start;gap:12px}.settings-card-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--surface-soft);border-radius:8px;color:var(--accent);flex:none}.settings-card-copy{flex:1;min-width:0}.settings-card-copy strong{font-size:12px}.settings-card-copy p{font-size:11px;color:var(--muted);margin:5px 0}.settings-card-copy small{font-size:10px;color:var(--subtle);line-height:1.55}.status-tag{font-size:9px;white-space:nowrap;border:1px solid var(--line);border-radius:5px;padding:4px 6px;color:var(--muted)}.status-tag.ready{color:var(--good)}.status-tag.pending{color:var(--warn)}.app-footer{display:flex;gap:14px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:11px 24px;color:var(--subtle);font-size:10px}.app-footer span:first-child{color:var(--muted);font-weight:600}.footer-version{letter-spacing:.7px}.modal-backdrop{position:fixed;inset:0;background:rgba(24,22,19,.34);z-index:100;display:grid;place-items:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal{position:relative;width:min(470px,100%);max-height:min(85vh,730px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:25px}.modal-close{position:absolute;top:12px;right:12px;width:29px;height:29px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:20px;color:var(--muted)}.modal-brand-mark img{width:32px;height:32px;margin-bottom:13px}.modal h2{font:600 22px Manrope,sans-serif;letter-spacing:-.5px;margin:8px 0}.modal-description{font-size:12px;line-height:1.65;color:var(--muted)}.modal-body{font-size:12px;line-height:1.7;color:var(--text)}.modal-body ul{padding-left:19px;color:var(--muted)}.modal-body li{margin:6px 0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:19px;padding-top:14px;border-top:1px solid var(--line)}.button-primary,.button-secondary{border-radius:7px;padding:9px 12px;font-size:11px}.button-primary{border:1px solid var(--accent);background:var(--accent);color:white}.button-secondary{border:1px solid var(--line-strong);background:var(--surface);color:var(--text)}.modal-body .demo-warning{color:var(--muted)}.model-option{color:var(--text)!important}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:200;padding:10px 14px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);box-shadow:var(--shadow);font-size:12px;color:var(--text);transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.sidebar{width:225px;min-width:225px}.mini-integrations{grid-template-columns:repeat(2,minmax(0,1fr))}.composer-hint{display:none}}
@media(max-width:720px){.sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-101%);transition:transform .18s;width:260px;min-width:260px;box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:var(--shadow)}.mobile-menu{display:grid}.topbar{padding:0 13px;gap:10px;height:53px}.breadcrumb{font-size:11px;margin-right:auto}.preview-pill{display:none}.chat-scroll{padding:20px 14px}.welcome{margin-top:4px}.welcome h1{font-size:28px}.welcome-subtitle{font-size:12px}.suggestion-grid{gap:7px}.suggestion-card{padding:11px 9px;gap:8px}.suggestion-icon{width:30px;height:30px}.suggestion-card strong{font-size:11px}.suggestion-card small{font-size:9px}.home-connections{padding:12px}.home-connections-heading strong{font-size:11px}.mini-integrations{gap:6px}.mini-integration{padding:7px;gap:6px}.platform-mark{width:25px;height:25px}.composer-zone{width:calc(100% - 24px);padding-bottom:10px}.page-heading{width:calc(100% - 28px);margin-top:22px;display:block}.connection-summary{margin-top:13px;width:max-content}.connection-banner,.info-panel,.integration-grid,.models-grid,.settings-stack,.coming-card{width:calc(100% - 28px)}.connection-banner{align-items:flex-start}.secure-tag{display:none}.integration-grid,.models-grid{grid-template-columns:1fr}.app-footer{padding:11px 14px;gap:8px;flex-wrap:wrap}.footer-version{display:none}.modal{padding:21px}.composer-bottom{gap:6px}.model-chip{max-width:165px}.model-chip #selectedModel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:400px){.suggestion-grid{grid-template-columns:1fr}.suggestion-card{padding:11px}.welcome h1{font-size:25px}.composer-tool{display:none}.home-connections-heading{align-items:flex-start}.mini-integrations{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-button{display:grid}}


/* Chat-first layout: keep chat in the viewport and move app connections into the + menu. */
html,body{height:100%;min-height:100%;overflow:hidden}
.app-shell{width:100%;height:100dvh;min-height:100dvh;overflow:hidden}
.sidebar{height:100dvh;min-height:0;flex-shrink:0;transition:width .18s,min-width .18s,flex-basis .18s,padding .18s}
.main-area{height:100dvh;min-height:0;overflow:hidden}
.topbar{flex:none;gap:12px}
.sidebar-toggle{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted)}
.sidebar-toggle:hover{background:var(--surface-soft)}
.view{min-height:0;overflow:hidden}#chatView{min-height:0;overflow:hidden}
.chat-scroll{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 24px 14px;scroll-behavior:smooth}
.welcome{margin:auto;width:min(700px,100%);flex-shrink:0}.welcome-mark-wrap{margin-bottom:11px}.welcome h1{margin:7px 0 8px}.welcome-subtitle{margin-bottom:22px}
.suggestion-grid{gap:9px}.suggestion-card{min-height:62px;padding:11px 13px}.home-connections{display:none!important}
.chat-view.has-messages .chat-scroll{justify-content:flex-end;display:flex}.chat-view.has-messages .welcome{display:none}
.chat-view.has-messages .messages{display:flex;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 0 10px;margin:0 auto}.chat-view.has-messages .composer-zone{flex-shrink:0}
.composer-zone{position:relative;flex-shrink:0;width:min(730px,calc(100% - 40px));z-index:5;padding-top:7px}
.composer{border-radius:14px;padding:11px 12px 9px}.composer textarea{min-height:34px}
.composer-tool{width:31px;height:31px;font-size:21px;border-radius:9px}
.plus-menu-button[aria-expanded=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.plus-menu{position:absolute;z-index:50;bottom:calc(100% + 8px);left:0;width:268px;max-width:calc(100vw - 30px);padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(28,23,18,.15);max-height:min(440px,calc(100dvh - 115px));overflow-y:auto}
.plus-menu[hidden]{display:none!important}.plus-menu-heading{padding:8px 9px 7px;font:700 9px Manrope,sans-serif;letter-spacing:1.05px;color:var(--subtle)}
.plus-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 9px;border:0;border-radius:8px;background:transparent;text-align:left}
.plus-menu-item:hover{background:var(--surface-soft)}.plus-menu-item>span:nth-child(2){min-width:0;flex:1}
.plus-menu-item strong,.plus-menu-item small{display:block}.plus-menu-item strong{font-size:12px;font-weight:600;color:var(--text)}.plus-menu-item small{font-size:10px;color:var(--muted);margin-top:3px}
.plus-menu-item .platform-mark{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.plus-menu-item .platform-mark.github{background:#efefed;color:#242424}.plus-menu-item .platform-mark.youtube{background:#fff0f0;color:#d93444}.plus-menu-item .platform-mark.instagram{background:#fff0f7;color:#bd387e}.plus-menu-item .platform-mark.facebook{background:#eff5ff;color:#2462c4}
.menu-arrow{font-size:18px;color:var(--subtle)}.plus-menu-footer{border-top:1px solid var(--line);margin-top:5px;padding:9px 9px 3px;color:var(--subtle);font-size:10px}
.app-shell.sidebar-collapsed .sidebar{width:0;min-width:0;flex-basis:0;padding-left:0;padding-right:0;border-right:0;overflow:hidden}.app-shell.sidebar-collapsed .sidebar>*{visibility:hidden}
.app-footer{flex:none;padding-top:9px;padding-bottom:9px}.main-area:has(#chatView.active-view)>.app-footer{display:none}
@media(max-height:680px) and (min-width:761px){.chat-scroll{padding-top:10px;padding-bottom:7px}.welcome-mark-wrap{width:34px;height:34px;margin-bottom:7px}.welcome-mark{width:33px;height:33px}.welcome h1{font-size:28px}.welcome-subtitle{margin-bottom:15px}.suggestion-card{min-height:54px;padding:8px 11px}.composer textarea{min-height:29px}}
@media(max-width:760px){.app-shell{height:100dvh;min-height:100dvh}.sidebar{height:100dvh;position:fixed;z-index:60;top:0;bottom:0;left:0;transform:translateX(-105%);transition:transform .2s;width:260px;min-width:260px;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.app-shell.sidebar-collapsed .sidebar{width:260px;min-width:260px;flex-basis:260px;padding:19px 13px 13px;border-right:1px solid var(--line)}.app-shell.sidebar-collapsed .sidebar>*{visibility:visible}.topbar{padding:0 12px}.chat-scroll{padding:15px 13px 7px}.composer-zone{width:calc(100% - 24px);padding-top:5px;padding-bottom:9px}.welcome h1{font-size:27px}.welcome-subtitle{font-size:12px;margin-bottom:17px}.suggestion-card{min-height:58px;padding:10px}.composer-hint{display:none}.home-connections{display:none!important}.app-footer{display:none}.plus-menu{max-height:calc(100dvh - 145px)}}
@media(max-width:430px){.chat-scroll{padding:12px 10px 7px}.welcome-mark-wrap{width:35px;height:35px;margin-bottom:7px}.welcome-mark{width:33px;height:33px}.welcome h1{font-size:24px}.welcome-subtitle{font-size:11px}.suggestion-grid{gap:7px}.suggestion-card{gap:8px;padding:9px;min-height:54px}.suggestion-icon{width:29px;height:29px}.suggestion-card strong{font-size:11px}.suggestion-card small{font-size:9px}.composer-zone{width:calc(100% - 18px)}.composer{padding:9px 10px}.composer-tools{gap:6px}.model-chip{gap:6px;padding:6px 7px;max-width:180px}}


/* Correctly scope the chat-state layout to the #chatView section. */
#chatView.has-messages .chat-scroll{justify-content:flex-end;display:flex}
#chatView.has-messages #welcome{display:none}
#chatView.has-messages #messages{display:flex;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 0 10px;margin:0 auto}
#chatView.has-messages .composer-zone{flex-shrink:0}


/* Center the initial composer like a conversation landing page; dock it at the bottom once a chat begins. */
#chatView{position:relative}
#chatView:not(.has-messages) .chat-scroll{padding-bottom:150px}
#chatView:not(.has-messages) .composer-zone{position:absolute;left:50%;top:69%;transform:translate(-50%,-50%);width:min(730px,calc(100% - 40px));margin:0;padding:0}
#chatView.has-messages .composer-zone{position:relative;left:auto;top:auto;transform:none;margin:0 auto;padding:7px 0 14px}
@media(max-width:760px){
 #chatView:not(.has-messages) .chat-scroll{padding-bottom:145px}
 #chatView:not(.has-messages) .composer-zone{top:70%;width:calc(100% - 24px)}
 #chatView.has-messages .composer-zone{width:calc(100% - 24px);padding:5px 0 9px}
}
@media(max-width:430px){
 #chatView:not(.has-messages) .chat-scroll{padding-bottom:140px}
 #chatView:not(.has-messages) .composer-zone{width:calc(100% - 18px)}
 .composer-tool.plus-menu-button{display:grid!important}
}

/* Claude-style home */
#chatView:not(.has-messages){justify-content:center;padding-bottom:12vh}
#chatView:not(.has-messages) .chat-scroll{flex:0 0 auto;overflow:visible;padding-bottom:6px}
#chatView:not(.has-messages) .disclaimer{display:none}
#chatView.has-messages .quick-tags{display:none}
.hero-greeting{display:flex;align-items:center;justify-content:center;gap:14px;font:400 clamp(32px,4vw,44px)/1.1 'Instrument Serif','Libre Baskerville',Georgia,serif!important;letter-spacing:-.5px!important;margin:0 0 6px!important;color:var(--text)}
.hero-mark{width:40px;height:40px}
.composer{border-radius:18px;padding:14px 14px 10px;box-shadow:0 4px 20px rgba(30,25,18,.06)}
.composer textarea{min-height:48px;font-size:15px}
.connector-pills{display:flex;gap:6px;margin-left:4px}
.connector-pill{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);color:var(--muted);font-size:12px}
.connector-pill:hover{color:var(--text);border-color:var(--line-strong)}
.connector-pill .platform-mark{width:20px;height:20px;font-size:10px;border-radius:5px}
.quick-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.quick-tag{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);color:var(--text);font-size:13px}
.quick-tag:hover{border-color:var(--line-strong);background:var(--surface)}
.quick-tag span{color:var(--muted);font-size:12px}
@media (max-width:640px){.connector-pill{font-size:0;gap:0;padding:0 4px}}
#chatView:not(.has-messages) .chat-scroll{padding-top:0;padding-bottom:0}#chatView:not(.has-messages) .welcome{margin-top:0}

/* Account access and responsive profile controls */
[hidden] { display: none !important; }
.login-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 31px; padding: 0 13px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--surface); color: var(--text);
  font: 600 11px "DM Sans", sans-serif; cursor: pointer; white-space: nowrap;
}
.login-button:hover { border-color: var(--accent); color: var(--accent-strong); }
.auth-form { display: grid; gap: 8px; margin-top: 14px; }
.auth-label, .profile-label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; margin-top: 7px; }
.auth-input, .profile-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); padding: 10px 11px;
  font: 12px "DM Sans", sans-serif; outline: none;
}
.auth-input:focus, .profile-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-input::placeholder, .profile-input::placeholder { color: var(--subtle); }
.auth-feedback, .profile-save-feedback { min-height: 17px; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.auth-submit { width: 100%; min-height: 38px; margin-top: 4px; cursor: pointer; }
.auth-submit:disabled, #saveProfileButton:disabled { opacity: .6; cursor: wait; }
.auth-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-switch { padding: 5px 0; border: 0; background: transparent; color: var(--accent-strong); font: 500 11px "DM Sans", sans-serif; cursor: pointer; text-align: left; }
.auth-switch:hover { text-decoration: underline; }
.profile-settings { gap: 12px; margin-bottom: 28px; }
.profile-edit-card { align-items: flex-start; }
.profile-fields { min-width: 0; flex: 1; display: grid; gap: 5px; }
.profile-fields > strong { font-size: 12px; }
.profile-fields > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 1px 0 8px; }
.profile-fields .profile-label { margin-top: 6px; }
.profile-help { color: var(--subtle); font-size: 10px; line-height: 1.6; margin-top: 3px; }
.profile-form-actions { display: flex; justify-content: flex-start; gap: 9px; flex-wrap: wrap; }
.profile-form-actions button { min-height: 36px; cursor: pointer; }
.profile-button img, .avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar { overflow: hidden; flex-shrink: 0; }
.message-actions { opacity: 1; pointer-events: auto; }
.copy-icon-button { opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.message.response:hover .copy-icon-button,
.message.response:focus-within .copy-icon-button { opacity: 1; pointer-events: auto; }
.message-actions .copy-icon-button {
  display: inline-grid; place-items: center; width: 29px; height: 29px; padding: 0;
}
.copy-icon-button svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.copy-icon-button:hover { color: var(--accent-strong); }
.sidebar-note small { line-height: 1.55; }
@media (hover: none) {
  .copy-icon-button { opacity: 1; pointer-events: auto; }
}
@media (max-width: 520px) {
  .login-button { min-height: 30px; padding: 0 9px; }
  .auth-switch-row { align-items: flex-start; }
  .profile-edit-card { padding: 12px; }
  .profile-fields { width: 100%; }
  .profile-form-actions { width: 100%; }
  .profile-form-actions button { flex: 1; }
}


/* Chat attachments, Google Drive hand-off, and AI media creation */
.plus-menu-separator{height:1px;background:var(--line);margin:6px 8px}
.plus-menu-item .upload-mark{background:#edf5ff;color:#356cba}
.plus-menu-item .file-mark{background:#f1f0ff;color:#6555b5}
.plus-menu-item .drive-mark{background:#eef7ed;color:#2c8a43}
.plus-menu-item .image-mark{background:#fff2e8;color:#c45f2f}
.plus-menu-item .video-mark{background:#f9ebf3;color:#ad397a}
.attachment-tray{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:2px 1px}
.attachment-tray[hidden]{display:none!important}
.attachment-chip{position:relative;display:flex;align-items:center;gap:8px;max-width:min(270px,100%);min-width:0;padding:6px 28px 6px 7px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--text)}
.attachment-thumb{width:38px;height:38px;flex:0 0 38px;border-radius:6px;object-fit:cover;background:var(--surface);display:grid;place-items:center;font-size:15px;color:var(--muted)}
.attachment-file-info{min-width:0}
.attachment-file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:11px;font-weight:600}
.attachment-file-size{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.attachment-remove{position:absolute;right:5px;top:5px;width:19px;height:19px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer}
.attachment-remove:hover{background:var(--line);color:var(--text)}
.message-attachments{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.message-attachment{display:flex;align-items:center;gap:7px;max-width:260px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);font-size:11px;color:var(--muted)}
.message-attachment img{width:40px;height:40px;object-fit:cover;border-radius:5px}
.media-generator{display:flex;flex-direction:column;gap:12px}
.media-generator label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px}
.media-generator textarea,.media-generator select{box-sizing:border-box;width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:10px;background:var(--surface);color:var(--text);font:inherit;font-size:13px}
.media-generator textarea{min-height:98px;resize:vertical}
.media-generator-help{font-size:11px;line-height:1.6;color:var(--muted)}
.media-generator-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:10px 14px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.media-generator-submit:disabled{opacity:.6;cursor:wait}
.media-result{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.media-result img,.media-result video{display:block;width:100%;max-height:410px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#101010}
.media-result a{font-size:12px;color:var(--accent-strong);font-weight:600}
.media-status{font-size:12px;color:var(--muted);line-height:1.6;white-space:pre-wrap}
@media(max-width:640px){
  .plus-menu{left:0;right:auto;width:min(310px,calc(100vw - 32px))}
  .attachment-chip{max-width:calc(100vw - 92px)}
  .attachment-file-name{max-width:150px}
}

.attachment-note{flex:1 0 100%;font-size:10px;line-height:1.45;color:var(--muted);padding:3px 2px}


/* Responsive chat canvas: use more of the available width and make generated media easier to see. */
@media (min-width: 761px) {
  .messages {
    width: min(880px, 100%);
  }
  .message-content {
    max-width: min(790px, 94%);
  }
  .welcome {
    width: min(900px, 100%);
  }
  .composer-zone {
    width: min(920px, calc(100% - 40px));
  }
  .app-shell.sidebar-collapsed .messages {
    width: min(1180px, calc(100% - 12px));
  }
  .app-shell.sidebar-collapsed .message-content {
    max-width: min(1080px, 96%);
  }
  .app-shell.sidebar-collapsed .welcome {
    width: min(1120px, 100%);
  }
  .app-shell.sidebar-collapsed .composer-zone {
    width: min(1160px, calc(100% - 32px));
  }
  .media-result img,
  .media-result video {
    max-height: min(68dvh, 680px);
  }
}

@media (max-width: 760px) {
  .messages {
    width: 100%;
  }
  .message-content {
    max-width: min(90%, 760px);
  }
  .media-result img,
  .media-result video {
    max-height: min(58dvh, 460px);
  }
}


/* Keep both sides of the conversation inside a centered, readable message lane. */
@media (min-width: 761px) {
  #messages > .message {
    width: min(100%, 820px);
    margin-inline: auto;
  }
  .app-shell.sidebar-collapsed #messages > .message {
    width: min(100%, 1000px);
  }
}

@media (max-width: 760px) {
  #messages > .message {
    width: calc(100% - 12px);
    margin-inline: auto;
  }
}

/* Centered conversation lane: user bubble on the right, AI on the left, both close to center (Claude/ChatGPT style). */
#messages > .message { width: min(100%, 760px) !important; margin-inline: auto; }
.app-shell.sidebar-collapsed #messages > .message { width: min(100%, 800px) !important; }
.message.user { justify-content: flex-end; }
.message.user .message-content { max-width: 78%; border-radius: 16px 16px 4px 16px; }
.message.response .message-content { max-width: calc(100% - 40px); }
.cf-file-action { white-space: nowrap; }
.message-actions { flex-wrap: wrap; }


/* Clickable citations and product-image previews in assistant answers */
.message-text .assistant-source-link{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;vertical-align:baseline}
.message-text .assistant-source-link a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.message-text .source-copy-url{border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);color:var(--muted);font:inherit;font-size:11px;padding:3px 7px;cursor:pointer;white-space:nowrap}
.message-text .source-copy-url:hover{border-color:var(--accent);color:var(--text)}
.message-text .assistant-product-image{margin:10px 0 14px;display:flex;align-items:flex-start}
.message-text .assistant-image-link{display:inline-flex;max-width:min(100%,320px);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);padding:5px}
.message-text .assistant-inline-image{display:block;width:auto;max-width:100%;max-height:250px;object-fit:contain;border-radius:8px}
.message-text p{margin:0 0 10px}
.message-text h1,.message-text h2,.message-text h3{margin:14px 0 7px;line-height:1.3}
.message-text ul{margin:5px 0 12px;padding-left:22px}
.message-text li{margin:4px 0}

/* Legal links in account settings */
.legal-links-card{align-items:flex-start}.legal-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:12px}.legal-links a{color:var(--accent-strong);font-weight:600;text-decoration:none}.legal-links a:hover{text-decoration:underline}

/* Connected apps: layered, tactile cards with clear live status */
.integration-grid{gap:16px;padding-bottom:28px}.integration-card{position:relative;isolation:isolate;overflow:hidden;padding:19px;border-radius:18px;border:1px solid color-mix(in srgb,var(--line-strong) 65%,transparent);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-soft) 52%,var(--surface)));box-shadow:0 7px 0 color-mix(in srgb,var(--line) 55%,transparent),0 15px 30px rgba(20,25,45,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.integration-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 color-mix(in srgb,var(--line) 55%,transparent),0 22px 38px rgba(20,25,45,.11);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}.integration-card-glow{position:absolute;z-index:-1;right:-38px;top:-48px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%);pointer-events:none}.integration-card--youtube .integration-card-glow{background:radial-gradient(circle,rgba(255,55,70,.14),transparent 70%)}.integration-card--instagram .integration-card-glow{background:radial-gradient(circle,rgba(207,55,139,.15),transparent 70%)}.integration-card--facebook .integration-card-glow{background:radial-gradient(circle,rgba(45,111,230,.15),transparent 70%)}.integration-card--github .integration-card-glow{background:radial-gradient(circle,rgba(120,120,130,.13),transparent 70%)}.integration-card .platform-mark{width:43px;height:43px;border-radius:13px;font-size:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 9px rgba(20,20,30,.07)}.integration-title h3{font-size:14px;letter-spacing:-.2px}.integration-title p{font-size:11px}.integration-status{padding:6px 8px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:9px}.integration-status .status-dot{width:7px;height:7px}.integration-status.is-connected{color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--line));background:color-mix(in srgb,var(--good) 8%,var(--surface))}.integration-status.is-connected .status-dot{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 14%,transparent)}.integration-detail{min-height:55px;margin:17px 0;font-size:11px;line-height:1.75}.integration-bottom{padding-top:14px;gap:12px}.integration-permission{max-width:58%;line-height:1.6;font-size:10px}.connect-button{border-radius:10px;padding:9px 12px;font-weight:650;font-size:10px;box-shadow:0 2px 0 color-mix(in srgb,var(--line) 65%,transparent);transition:transform .15s ease,background .15s ease}.connect-button:active{transform:translateY(1px);box-shadow:none}.connect-button--active{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 9%,var(--surface));color:var(--good)}.connect-button--active span{color:var(--good)}@media(max-width:720px){.integration-grid{gap:13px}.integration-card{padding:16px;border-radius:15px}.integration-detail{min-height:0}.integration-card .platform-mark{width:38px;height:38px}.integration-status{font-size:8px;padding:5px 7px}}

/* Connected social account workspace */
.social-channel-panel{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-soft)}.social-channel-avatar{width:48px;height:48px;object-fit:cover;border-radius:50%;border:2px solid var(--surface);box-shadow:0 3px 12px rgba(0,0,0,.12)}.social-channel-panel strong{display:block;font-size:14px}.social-channel-panel p{margin:4px 0 0;color:var(--muted);font-size:11px}.social-metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 18px}.social-metrics-grid>div{padding:11px 9px;border:1px solid var(--line);border-radius:11px;background:var(--surface);min-width:0}.social-metrics-grid span,.social-metrics-grid strong{display:block}.social-metrics-grid span{font-size:9px;color:var(--muted);margin-bottom:7px}.social-metrics-grid strong{font-size:15px;letter-spacing:-.4px;overflow-wrap:anywhere}.social-modal-heading{font-size:12px;margin:16px 0 8px}.social-video-list{display:grid;gap:7px}.social-video-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--text);background:var(--surface)}.social-video-list a:hover{border-color:var(--accent)}.social-video-list a span{font-size:11px;line-height:1.45}.social-video-list a strong{flex:none;color:var(--muted);font-size:9px}.social-data-note{margin-top:12px;font-size:10px;line-height:1.55;color:var(--muted)}


/* CodeForge Live Action Timeline */
.cf-live-progress{margin:14px 0 4px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--text);max-width:760px}
.cf-live-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.cf-live-heading strong{font-size:13px}
.cf-live-current{flex-basis:100%;padding-left:16px;color:var(--muted);line-height:1.5}
.cf-live-pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:cf-live-pulse 1.8s ease-in-out infinite;flex:0 0 auto}
.cf-progress-steps{list-style:none;padding:0;margin:14px 0 10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.cf-progress-steps li{display:flex;align-items:flex-start;gap:6px;min-width:0;color:var(--muted);font-size:11px}
.cf-step-dot{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:50%;border:1px solid var(--line-strong);font-size:10px;font-weight:700;background:var(--surface)}
.cf-progress-steps li b{display:block;font-size:10px;line-height:1.3;font-weight:650;color:var(--text)}
.cf-progress-steps li small{display:block;margin-top:3px;font-size:9px;line-height:1.3;color:var(--muted)}
.cf-progress-steps li.is-active .cf-step-dot{background:var(--accent);border-color:var(--accent);color:white}
.cf-progress-steps li.is-done .cf-step-dot{background:var(--good);border-color:var(--good);color:white}
.cf-progress-steps li.is-done .cf-step-dot:before{content:"✓"}
.cf-progress-steps li.is-done .cf-step-dot{font-size:0}
.cf-progress-steps li.is-done .cf-step-dot:before{font-size:12px}
.cf-live-log{display:grid;gap:5px;padding-top:8px;border-top:1px solid var(--line)}
.cf-live-log-entry{display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.45;color:var(--muted)}
.cf-live-log-entry time{flex:0 0 58px;font-variant-numeric:tabular-nums;font-size:10px;color:var(--subtle)}
.cf-live-note{font-size:10px;line-height:1.4;color:var(--subtle);margin:9px 0 0}
.cf-live-progress.is-complete .cf-live-pulse{animation:none;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 15%,transparent)}
@keyframes cf-live-pulse{50%{opacity:.45;box-shadow:0 0 0 7px transparent}}
@media(max-width:560px){.cf-live-progress{padding:10px}.cf-progress-steps{grid-template-columns:1fr;gap:9px}.cf-progress-steps li{align-items:center}.cf-progress-steps li b{font-size:11px}.cf-progress-steps li small{margin-top:1px}.cf-live-current{font-size:11px}}

.cf-live-progress-meter{display:flex;align-items:center;gap:10px;margin:8px 0 10px;min-height:6px}
.cf-live-progress-bar{height:5px;max-width:100%;width:0;background:var(--accent);border-radius:99px;transition:width .25s ease}
.cf-live-progress-value{font-size:10px;color:var(--muted)}
.cf-live-preview{display:block;width:min(100%,360px);max-height:190px;object-fit:contain;object-position:left center;border:1px solid var(--line);border-radius:9px;margin:10px 0;background:var(--surface)}
.cf-live-preview[hidden],.cf-live-progress-bar[hidden]{display:none}


/* Minimal live activity feed: no cards, boxes, checkmarks, or duplicated updates. */
.cf-live-progress {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 8px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.cf-live-heading,
.cf-progress-steps,
.cf-live-progress-meter,
.cf-live-note { display: none !important; }
.cf-live-log {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  border: 0;
}
.cf-live-log-entry {
  display: block;
  min-width: 0;
  padding: 0 0 0 1px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: opacity .22s ease, filter .22s ease;
}
.cf-live-log-entry::before {
  content: "›";
  display: inline-block;
  width: 15px;
  color: var(--muted);
}
.cf-live-log-entry.is-current {
  opacity: .62;
  filter: blur(.35px);
}
.cf-live-log-entry.is-complete {
  opacity: 1;
  filter: none;
}
.cf-live-progress.is-complete .cf-live-log-entry.is-current {
  opacity: 1;
  filter: none;
}
.cf-live-preview {
  display: block;
  width: min(100%, 420px);
  max-height: 240px;
  object-fit: contain;
  object-position: left center;
  margin: 12px 0 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.cf-live-preview[hidden] { display: none !important; }
@media (max-width: 560px) {
  .cf-live-progress { margin-top: 6px; }
  .cf-live-log { gap: 6px; }
  .cf-live-log-entry { font-size: 12px; line-height: 1.6; }
  .cf-live-preview { max-height: 190px; }
}


/* Live action feed: contextual tool icons, active spinner, completed status, no cards. */
.cf-live-progress{display:block;width:100%;max-width:760px;margin:8px 0 2px;padding:0;border:0;border-radius:0;background:transparent;color:var(--text)}
.cf-live-heading,.cf-progress-steps,.cf-live-progress-meter,.cf-live-note{display:none!important}
.cf-live-log{display:grid;gap:7px;padding:0;margin:0;border:0}
.cf-live-log-entry{display:grid;grid-template-columns:17px minmax(0,1fr) 14px;align-items:start;column-gap:8px;min-width:0;padding:0;margin:0;border:0;background:transparent;color:var(--muted);font-size:13px;line-height:1.65;overflow-wrap:anywhere;white-space:normal;transition:opacity .22s ease,filter .22s ease}
.cf-live-action-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:20px;flex:none;color:var(--muted)}
.cf-live-action-icon svg,.cf-live-status svg{display:block;width:15px;height:15px}
.cf-live-action-icon.is-github{color:var(--text)}
.cf-live-action-icon.is-web{color:var(--accent)}
.cf-live-action-icon.is-code{color:var(--accent-strong)}
.cf-live-action-icon.is-video{color:#c65b51}
.cf-live-action-icon.is-image{color:#9b78d0}
.cf-live-line-text{min-width:0;overflow-wrap:anywhere;word-break:normal}
.cf-live-status{display:inline-flex;align-items:center;justify-content:center;width:14px;height:20px;color:var(--good)}
.cf-live-status.is-active{color:var(--accent)}
.cf-live-status.is-failed{color:var(--danger,#c65353)}
.cf-live-spinner{display:block;width:11px;height:11px;border:1.5px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:cf-live-spin .8s linear infinite}
.cf-live-log-entry.is-current{color:var(--text);opacity:.78;filter:blur(.2px)}
.cf-live-log-entry.is-current .cf-live-line-text{color:var(--text)}
.cf-live-log-entry.is-complete{color:var(--muted);opacity:.72;filter:blur(.15px)}
.cf-live-log-entry.is-complete .cf-live-status{opacity:1;filter:none}
.cf-live-log-entry.is-failed{color:var(--text);opacity:1;filter:none}
.cf-live-progress.is-complete .cf-live-log-entry.is-complete{opacity:1;filter:none}
.cf-live-preview{display:block;width:min(100%,420px);max-height:240px;object-fit:contain;object-position:left center;margin:12px 0 0;border:0;border-radius:4px;background:transparent}
.cf-live-preview[hidden]{display:none!important}
@keyframes cf-live-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.cf-live-progress{margin-top:6px}.cf-live-log{gap:6px}.cf-live-log-entry{grid-template-columns:16px minmax(0,1fr) 13px;column-gap:6px;font-size:12px;line-height:1.6}.cf-live-action-icon{width:15px}.cf-live-preview{max-height:190px}}
@media(prefers-reduced-motion:reduce){.cf-live-spinner{animation:none}.cf-live-log-entry{transition:none}}


/* CodeForge live progress: use a horizontal shimmer rail instead of shimmering text. */
.cf-live-spinner,
.cf-live-pulse,
.cf-live-status.is-active .cf-live-spinner {
  display: none !important;
  animation: none !important;
}
.cf-live-log-entry.is-current {
  opacity: 1;
  filter: none;
}
.cf-live-log-entry.is-current .cf-live-line-text {
  color: var(--text, #e5e7eb) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
.cf-live-progress:not(.is-complete)::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--muted, #8b95a7) 28%,
    #ffffff 50%,
    var(--accent, #7dd3fc) 58%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  animation: cf-live-horizontal-shimmer 1.8s ease-in-out infinite;
}
.cf-live-progress.is-complete::after {
  display: none !important;
}
@keyframes cf-live-horizontal-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: -120% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-live-progress:not(.is-complete)::after {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Critical chat wrapping fix: prevent flex/grid children from collapsing to character-width columns. */
#messages,
.messages,
#messages > .message,
.message,
.message-content,
.message-text,
.cf-live-progress,
.cf-live-log,
.cf-live-log-entry,
.cf-live-line-text {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
#messages,
.messages {
  width: 100%;
}
#messages > .message,
.messages > .message {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.message-content {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min( calc(100% - 40px), 100%);
}
.message-text {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  writing-mode: horizontal-tb;
}
.message.user .message-content {
  width: fit-content;
  min-width: 0;
  max-width: min(78%, 100%);
}
.message-text :where(p, li, blockquote, pre, code, a, span, strong, em) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.message-text pre,
.message-text code {
  white-space: pre-wrap;
}
.cf-live-progress {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.cf-live-log {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}
.cf-live-log-entry {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  writing-mode: horizontal-tb;
}
.cf-live-line-text {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  writing-mode: horizontal-tb;
}
@media (max-width: 760px) {
  #messages > .message,
  .messages > .message {
    width: 100% !important;
    max-width: 100%;
  }
  .message-content,
  .message.user .message-content,
  .message.response .message-content {
    min-width: 0;
    max-width: calc(100% - 38px);
  }
  .message.user .message-content {
    max-width: 88%;
  }
  .cf-live-log-entry {
    grid-template-columns: 16px minmax(0, 1fr) 13px;
    column-gap: 6px;
  }
}


/* Chat feed sizing: constrain vertical growth to the feed's own scroll area. */
#chatView,
#chatView.active-view,
#chatView .chat-scroll,
#chatView.has-messages .chat-scroll {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
}
#chatView.has-messages .chat-scroll {
  flex: 1 1 auto;
  height: 0;
  overflow-y: hidden;
}
#chatView.has-messages #messages {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  height: 0;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  contain: layout style;
  scroll-behavior: auto;
}
#chatView.has-messages #messages > .message {
  flex: 0 0 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#chatView.has-messages #messages > .message .message-content,
#chatView.has-messages #messages > .message .cf-live-progress,
#chatView.has-messages #messages > .message .cf-live-log {
  flex-shrink: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
#chatView.has-messages #messages > .message .cf-live-progress {
  height: auto;
  max-height: none;
  overflow-y: visible;
}
#chatView.has-messages .composer-zone {
  flex: 0 0 auto;
  min-height: 0;
}
@media (max-width: 760px) {
  #chatView.has-messages .chat-scroll {
    padding-left: 10px;
    padding-right: 10px;
  }
  #chatView.has-messages #messages {
    padding-top: 12px;
    padding-bottom: 10px;
  }
}


/* Hide the live task trace after completion so its animated activity rail cannot extend the finished chat. */
.cf-live-progress.is-complete {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* The live activity/debug log is intentionally disabled: it duplicated status text and could collapse into a vertical column. */
.cf-live-progress .cf-live-log,
.cf-live-progress .cf-live-log-entry,
.cf-live-progress .cf-live-log-entry::before {
  display: none !important;
  content: none !important;
}
.cf-live-progress {
  min-width: 0;
  max-width: 100%;
}
.cf-live-progress::after {
  max-width: 100%;
}


/* Chat response entrance polish: keep the text fade, but remove the blinking orange caret. */
.message.response.pending-message .message-text {
  animation: cf-answer-arrive 260ms ease-out both;
}
@keyframes cf-answer-arrive {
  from { opacity: .72; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .message.response.pending-message .message-text {
    animation: none;
  }
}

/* Minimal responsive header overflow menu */
.topbar{height:48px;padding:0 18px;gap:12px}.topbar-actions{gap:0}.topbar-menu-wrap{position:relative;display:flex;align-items:center}.topbar-menu-button{width:32px;height:32px;border-radius:9px;background:transparent;border-color:transparent;color:var(--muted)}.topbar-menu-button:hover,.topbar-menu-button[aria-expanded="true"]{background:var(--surface);border-color:var(--line)}.topbar-menu-button svg{width:18px;height:18px;fill:currentColor;stroke:none}.topbar-menu{position:absolute;z-index:90;top:calc(100% + 9px);right:0;width:218px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(28,25,20,.14);animation:topbarMenuIn .14s ease both}.topbar-menu[hidden]{display:none}.topbar-menu-item{width:100%;min-height:39px;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;font-size:12px}.topbar-menu-item:hover,.topbar-menu-item:focus-visible{background:var(--surface-soft)}.topbar-menu-icon{width:19px;flex:none;display:grid;place-items:center;color:var(--muted);font-size:16px}.topbar-menu-item kbd{margin-left:auto;padding:2px 5px;border:1px solid var(--line);border-radius:4px;color:var(--subtle);font-size:10px;font-family:inherit}.topbar-menu-divider{height:1px;margin:5px 4px;background:var(--line)}@keyframes topbarMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.topbar{height:43px;min-height:43px;padding:0 9px;gap:8px}.topbar-menu-button{width:30px;height:30px}.topbar-menu{right:0;top:calc(100% + 6px);width:min(218px,calc(100vw - 24px))}.breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}}@media(prefers-reduced-motion:reduce){.topbar-menu{animation:none}}

/* YouTube Studio-style channel workspace */
.modal:has(.youtube-studio){width:min(780px,100%);max-height:min(91vh,900px);padding:0;background:#f9fafb;border-color:#e5e7eb;color:#1f2937}
.modal:has(.youtube-studio)>.modal-brand-mark,.modal:has(.youtube-studio)>#modalEyebrow,.modal:has(.youtube-studio)>#modalTitle,.modal:has(.youtube-studio)>#modalDescription{display:none}
.modal:has(.youtube-studio)>.modal-close{z-index:3;top:13px;right:13px;background:#fff;color:#4b5563;border-color:#e5e7eb}
.modal:has(.youtube-studio)>.modal-body{padding:0;font-size:13px;line-height:1.55;color:#1f2937}
.modal:has(.youtube-studio)>.modal-actions{margin:0;padding:12px 20px;border-top:1px solid #e5e7eb;background:#fff}
.youtube-studio{font-family:'DM Sans',system-ui,sans-serif;background:#f8fafc;color:#1f2937;padding-bottom:2px}
.studio-brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid #e5e7eb;background:#fff}
.studio-brand-left{display:flex;align-items:center;gap:11px}.studio-brand-left strong,.studio-brand-left small{display:block}.studio-brand-left strong{font-size:16px;font-weight:800;letter-spacing:-.4px}.studio-brand-left small{font-size:10px;color:#6b7280;margin-top:3px}
.studio-youtube-mark{display:grid;place-items:center;width:34px;height:24px;border-radius:7px;background:#e62117;color:#fff;font-size:13px}
.studio-connection-state{font-size:10px;color:#15803d;white-space:nowrap}.studio-connection-state i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a34a;margin-right:5px}
.studio-channel-header{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;background:#fff}.studio-channel-header .social-channel-avatar{width:44px;height:44px;border:1px solid #e5e7eb;box-shadow:none}
.studio-channel-copy{min-width:0;flex:1}.studio-channel-copy strong,.studio-channel-copy small{display:block}.studio-channel-copy strong{font-size:14px;overflow-wrap:anywhere}.studio-channel-copy small{font-size:10px;color:#6b7280;margin-top:3px}
.studio-open-youtube{border:1px solid #d1d5db;border-radius:7px;padding:7px 9px;color:#374151;text-decoration:none;font-size:10px;white-space:nowrap;background:#fff}
.studio-tabs{display:flex;gap:22px;padding:0 20px;border-bottom:1px solid #e5e7eb;background:#fff;color:#6b7280;font-size:11px}.studio-tabs span{padding:12px 0}.studio-tabs .active{color:#2563eb;border-bottom:2px solid #2563eb;font-weight:700}
.studio-section{padding:19px 20px 21px}.studio-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.studio-section-head h3{margin:0;font-size:14px;font-weight:750;letter-spacing:-.2px}.studio-section-head p{margin:4px 0 0;color:#6b7280;font-size:10px;line-height:1.5}.studio-live-pill{border:1px solid #bbf7d0;background:#f0fdf4;color:#15803d;border-radius:20px;padding:4px 8px;font-size:9px;white-space:nowrap}
.studio-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 15px}.studio-metric{min-width:0;padding:12px;border:1px solid #e5e7eb;border-radius:9px;background:#fff}.studio-metric>span,.studio-metric>strong,.studio-metric>small{display:block}.studio-metric>span{font-size:10px;color:#6b7280;line-height:1.4;min-height:27px}.studio-metric>strong{font-size:20px;line-height:1.3;letter-spacing:-.7px;overflow-wrap:anywhere;margin:6px 0}.studio-metric>small{font-size:9px;color:#9ca3af;line-height:1.4}
.studio-chart-card{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:13px 13px 8px;margin-bottom:21px}.studio-chart-title{display:flex;justify-content:space-between;align-items:center;font-size:11px}.studio-chart-title span{color:#6b7280;font-size:9px}
.studio-chart{height:128px;display:flex;align-items:stretch;gap:3px;padding-top:15px;overflow:hidden}.studio-chart-column{flex:1;min-width:3px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.studio-chart-column span{width:100%;max-width:13px;min-height:2px;border-radius:3px 3px 0 0;background:#3b82f6}.studio-chart-column small{font-size:8px;color:#9ca3af;line-height:1}
.studio-top-head{margin-top:8px}.studio-top-list{display:grid;gap:0;border-top:1px solid #e5e7eb}.studio-top-video{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #e5e7eb;text-decoration:none;color:#1f2937;min-width:0}.studio-rank-thumb{width:58px;height:37px;flex:none;border-radius:5px;overflow:hidden;background:#e5e7eb;display:grid;place-items:center;color:#6b7280}.studio-rank-thumb img{width:100%;height:100%;object-fit:cover}.studio-top-copy{flex:1;min-width:0}.studio-top-copy strong,.studio-top-copy small,.studio-top-views small{display:block}.studio-top-copy strong{font-size:11px;line-height:1.45;font-weight:650;overflow-wrap:anywhere}.studio-top-copy small{font-size:9px;color:#6b7280;margin-top:3px}.studio-top-views{font-size:11px;font-weight:700;text-align:right;white-space:nowrap}.studio-top-views small{font-size:9px;font-weight:400;color:#6b7280;margin-top:2px}
.studio-video-list{display:grid;gap:7px}.studio-video-row{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#1f2937;text-decoration:none;min-width:0}.studio-video-row>img,.studio-thumb{width:60px;height:38px;flex:none;object-fit:cover;border-radius:5px;background:#e5e7eb}.studio-thumb{display:grid;place-items:center;color:#6b7280}.studio-video-copy{min-width:0;flex:1}.studio-video-copy strong,.studio-video-copy small,.studio-video-value small{display:block}.studio-video-copy strong{font-size:11px;line-height:1.4;overflow-wrap:anywhere}.studio-video-copy small{font-size:9px;color:#6b7280;margin-top:4px}.studio-video-value{font-size:11px;font-weight:700;text-align:right;white-space:nowrap}.studio-video-value small{font-size:9px;color:#6b7280;font-weight:400;margin-top:2px}
.studio-permission-panel{margin:17px 20px 0;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;padding:16px}.studio-permission-panel>p{color:#4b5563;font-size:11px;line-height:1.65;margin:8px 0 13px}.studio-lock{font-size:20px;color:#2563eb}.studio-reauthorize{border:0;border-radius:7px;background:#2563eb;color:#fff;font-weight:650;font-size:11px;padding:9px 12px}.studio-permission-panel>small{display:block;color:#6b7280;font-size:9px;margin-top:9px}
.studio-empty{color:#6b7280;font-size:11px;margin:10px 0}.studio-public-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.youtube-studio .social-data-note{margin:0;padding:0 20px 15px;color:#6b7280;font-size:9px}
@media(max-width:560px){.modal:has(.youtube-studio){max-height:93vh}.studio-brandbar{padding:14px}.studio-channel-header{padding:14px}.studio-tabs{padding:0 14px;gap:18px}.studio-section{padding:16px 14px}.studio-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-metric>strong{font-size:19px}.studio-chart{height:105px;gap:2px}.studio-chart-column small{font-size:7px}.studio-open-youtube{font-size:9px;padding:6px}.studio-permission-panel{margin:14px 14px 0}.youtube-studio .social-data-note{padding:0 14px 14px}.studio-rank-thumb{width:50px;height:34px}}

/* Compact CodeForge Studio channel card (not a YouTube Studio clone) */
.modal:has(.cf-studio){width:min(640px,100%);max-height:min(84vh,760px);padding:0;background:#fff;border-color:#e5e7eb;color:#202124}
.modal:has(.cf-studio)>.modal-brand-mark,.modal:has(.cf-studio)>#modalEyebrow,.modal:has(.cf-studio)>#modalTitle,.modal:has(.cf-studio)>#modalDescription{display:none}
.modal:has(.cf-studio)>.modal-close{z-index:3;top:12px;right:12px;background:#fff;color:#4b5563;border-color:#e5e7eb}
.modal:has(.cf-studio)>.modal-body{padding:0;font-size:13px;line-height:1.45;color:#202124}
.modal:has(.cf-studio)>.modal-actions{margin:0;padding:10px 16px;border-top:1px solid #eceff1;background:#fff}
.cf-studio{background:#fff;color:#202124;font-family:'DM Sans',system-ui,sans-serif}
.cf-studio-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid #eceff1}
.cf-studio-brand{display:flex;align-items:center;gap:10px;min-width:0}.cf-studio-brandmark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff1e9;color:#e66b45;font-size:27px;font-weight:800}.cf-studio-brand strong,.cf-studio-brand small{display:block}.cf-studio-brand strong{font-size:16px;letter-spacing:-.35px}.cf-studio-brand small{font-size:10px;color:#7b8087;margin-top:2px}
.cf-studio-connected{font-size:10px;color:#16834a;white-space:nowrap}.cf-studio-connected i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22a05a;margin-right:5px}
.cf-studio-channel{display:flex;align-items:center;gap:10px;padding:15px 18px 13px}.cf-studio-avatar{width:42px;height:42px;flex:none;object-fit:cover;border-radius:50%;border:1px solid #e5e7eb}.cf-studio-channel-copy{flex:1;min-width:0}.cf-studio-channel-copy strong,.cf-studio-channel-copy small{display:block}.cf-studio-channel-copy strong{font-size:13px;overflow-wrap:anywhere}.cf-studio-channel-copy small{font-size:10px;color:#80868b;margin-top:3px;overflow-wrap:anywhere}
.cf-studio-open{font-size:10px;white-space:nowrap;text-decoration:none;color:#3c4043;border:1px solid #dadce0;border-radius:7px;padding:8px 9px;background:#fff}
.cf-studio-summary{margin:0 18px;padding:13px;border:1px solid #e8eaed;border-radius:11px;background:#f8f9fa}.cf-studio-summary-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.cf-studio-summary-head strong{font-size:13px}.cf-studio-summary-head small{font-size:9px;color:#80868b}
.cf-studio-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cf-studio-stat{min-width:0;padding:10px 11px;border:1px solid #e8eaed;border-radius:8px;background:#fff}.cf-studio-stat>span,.cf-studio-stat>strong,.cf-studio-stat>small{display:block}.cf-studio-stat>span{font-size:10px;color:#73777d;line-height:1.35}.cf-studio-stat>strong{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:5px 0;overflow-wrap:anywhere}.cf-studio-stat>small{font-size:9px;color:#9aa0a6;line-height:1.3}
.cf-studio-content{padding:16px 18px 18px}.cf-studio-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.cf-studio-section-head strong{font-size:13px}.cf-studio-section-head>a{font-size:10px;color:#5f6368;text-decoration:none;white-space:nowrap}
.cf-studio-latest{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #e8eaed;border-radius:10px;text-decoration:none;color:#202124;background:#fff}.cf-studio-latest>img,.cf-studio-latest-placeholder{width:112px;height:66px;object-fit:cover;flex:none;border-radius:6px;background:#f1f3f4}.cf-studio-latest-placeholder{display:grid;place-items:center;color:#777}.cf-studio-latest-copy{min-width:0;flex:1}.cf-studio-latest-copy>span,.cf-studio-latest-copy>strong,.cf-studio-latest-copy>small{display:block}.cf-studio-eyebrow{font-size:8px;font-weight:800;letter-spacing:.8px;color:#e66b45;margin-bottom:4px}.cf-studio-latest-copy>strong{font-size:12px;line-height:1.45;overflow-wrap:anywhere}.cf-studio-latest-copy>small{font-size:10px;color:#73777d;margin-top:6px}
.cf-studio-other-videos{display:grid;margin-top:7px}.cf-studio-video-row{display:flex;align-items:center;gap:9px;padding:8px 1px;border-bottom:1px solid #f0f1f2;text-decoration:none;color:#202124;min-width:0}.cf-studio-video-row>img,.cf-studio-video-placeholder{width:56px;height:34px;object-fit:cover;border-radius:5px;background:#f1f3f4;flex:none}.cf-studio-video-placeholder{display:grid;place-items:center;color:#777}.cf-studio-video-row>span:nth-child(2){min-width:0;flex:1}.cf-studio-video-row strong,.cf-studio-video-row small{display:block}.cf-studio-video-row strong{font-size:10px;line-height:1.4;overflow-wrap:anywhere}.cf-studio-video-row small{font-size:9px;color:#80868b;margin-top:3px}.cf-studio-video-arrow{font-size:12px;color:#80868b}
.cf-studio-empty,.cf-studio-notice{font-size:10px;color:#777;line-height:1.5}.cf-studio-notice{margin:0 18px 14px;padding:9px 11px;border-radius:7px;background:#fff8e8;color:#856404}
@media(max-width:560px){.modal:has(.cf-studio){max-height:87vh}.cf-studio-topbar{padding:13px 14px}.cf-studio-channel{padding:12px 14px}.cf-studio-avatar{width:38px;height:38px}.cf-studio-open{font-size:9px;padding:7px}.cf-studio-summary{margin:0 14px;padding:10px}.cf-studio-stats{gap:6px}.cf-studio-stat{padding:9px 8px}.cf-studio-stat>strong{font-size:18px}.cf-studio-stat>span{font-size:9px}.cf-studio-content{padding:13px 14px 15px}.cf-studio-latest{gap:9px;padding:8px}.cf-studio-latest>img,.cf-studio-latest-placeholder{width:96px;height:58px}.cf-studio-latest-copy>strong{font-size:11px}.cf-studio-notice{margin:0 14px 12px}}


/* Refined, larger metric tiles for the mobile CodeForge Studio workspace */
.cf-studio-summary{margin:0 18px;padding:16px;border:1px solid #e4e7eb;border-radius:14px;background:linear-gradient(145deg,#fbfcff 0%,#f5f7fb 100%)}
.cf-studio-summary-head{margin-bottom:14px}
.cf-studio-summary-head strong{font-size:15px;letter-spacing:-.25px}
.cf-studio-summary-head small{font-size:10px;line-height:1.5}
.cf-studio-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cf-studio-stat{position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:142px;padding:13px 12px;border-radius:12px;border-color:#e3e7ee;box-shadow:0 2px 7px rgba(24,39,75,.035);overflow:hidden}
.cf-studio-stat:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:#e66b45}
.cf-studio-stat-views:before{background:#3478f6}
.cf-studio-stat-subs:before{background:#18a36b}
.cf-studio-stat-videos:before{background:#e66b45}
.cf-studio-stat-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff0e8;color:#d95e36;font-size:21px;font-weight:700;margin-bottom:11px}
.cf-studio-stat-views .cf-studio-stat-icon{background:#eaf2ff;color:#3478f6}
.cf-studio-stat-subs .cf-studio-stat-icon{background:#e7f8ef;color:#16834a}
.cf-studio-stat-label{font-size:10px!important;color:#626a75!important;min-height:0!important;line-height:1.35}
.cf-studio-stat>strong{font-size:25px;line-height:1.15;letter-spacing:-.7px;margin:6px 0 5px}
.cf-studio-stat>small{font-size:9px;line-height:1.4;color:#858c96}
.cf-studio-section-head{margin-bottom:12px}
.cf-studio-section-head>strong{font-size:15px}
.cf-studio-latest{padding:11px;border-radius:12px;box-shadow:0 2px 8px rgba(24,39,75,.035)}
.cf-studio-latest>img,.cf-studio-latest-placeholder{width:128px;height:76px;border-radius:8px}
.cf-studio-latest-copy>strong{font-size:12px;line-height:1.5}
.cf-studio-other-videos{margin-top:10px}
.cf-studio-video-row{padding:10px 2px}
@media(max-width:560px){
 .modal:has(.cf-studio){max-height:90vh}
 .cf-studio-summary{margin:0 14px;padding:13px}
 .cf-studio-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .cf-studio-stat{min-height:138px;padding:12px 8px}
 .cf-studio-stat-icon{width:30px;height:30px;margin-bottom:10px}
 .cf-studio-stat-label{font-size:9px!important}
 .cf-studio-stat>strong{font-size:22px;letter-spacing:-.5px}
 .cf-studio-stat>small{font-size:8px}
 .cf-studio-latest>img,.cf-studio-latest-placeholder{width:108px;height:66px}
}
@media(max-width:370px){
 .cf-studio-stats{gap:5px}
 .cf-studio-stat{padding:11px 6px;min-height:132px}
 .cf-studio-stat>strong{font-size:20px}
 .cf-studio-stat-label{overflow-wrap:anywhere}
}


/* Creator welcome and YouTube milestone celebration card */
.creator-celebration{position:relative;width:min(100%,590px);margin:17px auto 21px;padding:17px 18px 16px;border:1px solid #f1d9c9;border-radius:16px;background:radial-gradient(ellipse at 100% 0%,rgba(255,197,153,.25),transparent 42%),linear-gradient(135deg,var(--surface),var(--surface-soft));box-shadow:0 8px 26px rgba(31,35,40,.06);animation:creatorCardIn .35s ease both}
.creator-celebration.is-milestone{border-color:#f0c27b;background:radial-gradient(ellipse at 100% 0%,rgba(255,193,74,.25),transparent 44%),linear-gradient(135deg,var(--surface),var(--surface-soft))}
.creator-celebration-dismiss{position:absolute;right:10px;top:10px;width:27px;height:27px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:19px;line-height:1}
.creator-celebration-top{display:flex;align-items:center;gap:9px;padding-right:29px}
.creator-celebration-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:#fff0e5;color:#d95f32;font-size:22px;font-weight:800}
.creator-celebration.is-milestone .creator-celebration-icon{background:#fff1cb;color:#a76600}
.creator-celebration-kicker{font-size:9px;letter-spacing:1.3px;font-weight:800;color:var(--muted)}
.creator-celebration h2{font-size:18px;line-height:1.3;letter-spacing:-.45px;margin:12px 0 5px;color:var(--text)}
.creator-celebration>p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}
.creator-milestone-number{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(240,174,56,.12);border:1px solid rgba(218,158,52,.22)}
.creator-milestone-number strong{font-size:16px;letter-spacing:-.3px;color:var(--text)}
.creator-milestone-number small{font-size:10px;color:var(--muted);text-align:right}
.creator-celebration-video{display:flex;align-items:center;gap:11px;margin-top:12px;padding:9px;border:1px solid var(--line);border-radius:11px;background:var(--surface);text-decoration:none;color:var(--text);min-width:0}
.creator-celebration-thumb,.creator-celebration-play{width:88px;height:54px;flex:none;border-radius:7px;object-fit:cover;background:var(--surface-soft)}
.creator-celebration-play{display:grid;place-items:center;color:var(--accent);font-size:19px}
.creator-celebration-video>span:last-child{min-width:0;display:block}
.creator-celebration-video strong,.creator-celebration-video small{display:block}
.creator-celebration-video strong{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.creator-celebration-video small{font-size:10px;color:var(--muted);margin-top:5px}
@keyframes creatorCardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:430px){.creator-celebration{margin:12px auto 15px;padding:14px 13px;border-radius:13px}.creator-celebration h2{font-size:16px}.creator-celebration-kicker{font-size:8px}.creator-celebration-video{gap:9px}.creator-celebration-thumb,.creator-celebration-play{width:78px;height:49px}.creator-milestone-number strong{font-size:14px}.creator-milestone-number small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.creator-celebration{animation:none}}




/* Calm CodeForge AI connection state: a soft shimmer replaces the blinking cursor and loading rail. */
.message.response.pending-message.cf-connecting-state .cf-live-progress {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.message.response.pending-message .message-text.cf-ai-status-shimmer {
  display: inline-block;
  max-width: 100%;
  color: transparent !important;
  background-image: linear-gradient(100deg, var(--muted) 18%, var(--text) 42%, var(--muted) 66%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: cf-status-light-sweep 1.8s ease-in-out infinite;
  caret-color: transparent !important;
}
@keyframes cf-status-light-sweep {
  0% { background-position: 100% 50%; opacity: .62; }
  50% { background-position: 0% 50%; opacity: 1; }
  100% { background-position: -100% 50%; opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .message.response.pending-message .message-text.cf-ai-status-shimmer {
    animation: none;
    color: var(--text) !important;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Restore the compact, original CodeForge Studio layout on narrow screens. */
.cf-studio-channel{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px}
.cf-studio-channel-copy{min-width:0;width:auto;overflow:hidden}
.cf-studio-channel-copy strong,.cf-studio-channel-copy small{overflow-wrap:break-word;word-break:normal;white-space:normal}
.cf-studio-channel-copy strong{font-size:13px;line-height:1.4}
.cf-studio-channel-copy small{font-size:10px;line-height:1.4}
.cf-studio-open{grid-column:3;max-width:100%;white-space:normal;text-align:center;line-height:1.35}
.cf-studio-summary{margin:0 18px 16px;padding:14px;border:1px solid #e8eaed;border-radius:14px;background:#fff}
.cf-studio-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cf-studio-stat{min-width:0;overflow:hidden;border:1px solid #e8eaed;border-radius:11px;padding:12px 10px;background:#fff}
.cf-studio-stat>strong{display:block;font-size:21px;line-height:1.25;overflow-wrap:normal;word-break:normal}
.cf-studio-stat-label,.cf-studio-stat small{display:block;overflow-wrap:normal;word-break:normal}
@media(max-width:560px){
  .cf-studio-channel{grid-template-columns:38px minmax(0,1fr);padding:12px 14px;gap:9px}
  .cf-studio-channel-copy{grid-column:2;grid-row:1}
  .cf-studio-open{grid-column:1 / -1;justify-self:start;margin-left:47px}
  .cf-studio-summary{margin:0 14px 14px;padding:10px}
  .cf-studio-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cf-studio-stat{padding:9px 7px}
  .cf-studio-stat>strong{font-size:18px}
  .cf-studio-stat-label,.cf-studio-stat small{font-size:9px;line-height:1.4}
}

/* Mobile navigation dismissal */
.sidebar-close{display:none}
.sidebar-overlay{display:none}
.sidebar-overlay[hidden]{display:none}
@media(max-width:760px){
  .sidebar{padding-top:19px}
  .sidebar-close{display:grid;place-items:center;position:absolute;top:19px;right:12px;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:21px;line-height:1;z-index:2}
  .sidebar-overlay{display:block;position:fixed;inset:0;width:100%;height:100dvh;border:0;padding:0;background:rgba(20,20,20,.28);z-index:55;cursor:pointer}
  .sidebar-overlay[hidden]{display:none}
  .sidebar{z-index:60}
  .sidebar.open{box-shadow:var(--shadow)}
  #sidebarToggle[aria-expanded="true"]{background:var(--surface-soft);color:var(--text)}
}

/* Prominent subscription upgrade action beside New Chat */
.sidebar-upgrade{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 24px;padding:11px 13px;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:linear-gradient(115deg,#ffb347 0%,#ff7a45 48%,#e95746 100%);color:#fff;text-align:left;box-shadow:0 5px 16px rgba(235,91,58,.24),inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.sidebar-upgrade:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 7px 19px rgba(235,91,58,.32),inset 0 1px 0 rgba(255,255,255,.45)}
.sidebar-upgrade:focus-visible{outline:3px solid rgba(255,142,74,.4);outline-offset:2px}
.upgrade-sparkle{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.22);font-size:22px;color:#fff}
.upgrade-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.upgrade-copy strong{font-size:14px;font-weight:750;letter-spacing:.1px}
.upgrade-copy small{font-size:11px;color:rgba(255,255,255,.92);white-space:normal}
.upgrade-arrow{font-size:18px;font-weight:700;color:#fff}
@media(max-width:760px){.sidebar-upgrade{margin-top:10px;margin-bottom:24px;padding:12px 13px}.upgrade-copy strong{font-size:14px}.upgrade-copy small{font-size:11px}}


/* Subscription plans: balanced density, accessible contrast, and responsive layout */
.modal:has(.subscription-content){width:min(900px,calc(100vw - 32px));max-height:min(90vh,860px);padding:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px rgba(18,22,35,.2)}
.modal:has(.subscription-content)>.modal-brand-mark,.modal:has(.subscription-content)>#modalEyebrow{display:none}
.modal:has(.subscription-content)>#modalTitle{padding:22px 26px 0;margin:0;font-size:21px;letter-spacing:-.45px}
.modal:has(.subscription-content)>#modalDescription{padding:5px 26px 0;margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.modal:has(.subscription-content)>.modal-close{top:17px;right:18px;z-index:3;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.modal:has(.subscription-content)>.modal-body{padding:0 26px 18px;overflow-y:auto;font-size:13px;color:var(--text)}
.modal:has(.subscription-content)>.modal-actions{margin:0;padding:12px 26px;border-top:1px solid var(--line);background:var(--surface)}
.subscription-content{padding-top:20px}
.subscription-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px}
.subscription-eyebrow{display:block;color:var(--accent);font-size:9px;font-weight:800;letter-spacing:1.5px}
.subscription-intro h2{margin:6px 0 4px;font-size:24px;line-height:1.2;letter-spacing:-.8px;font-weight:750}
.subscription-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.subscription-lockup{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:14px;background:var(--accent-soft);color:var(--accent);font-size:22px}
.subscription-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
.subscription-plan{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--surface);transition:border-color .16s,box-shadow .16s,transform .16s}
.subscription-plan:hover{border-color:var(--line-strong);box-shadow:0 8px 24px rgba(25,25,25,.055);transform:translateY(-1px)}
.subscription-plan-featured{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));background:linear-gradient(145deg,var(--surface),var(--accent-soft))}
.subscription-plan-active{box-shadow:inset 0 0 0 1px var(--good)}
.subscription-plan-badge{position:absolute;top:12px;right:12px;padding:4px 7px;border-radius:5px;background:var(--accent);color:white;font-size:8px;font-weight:800;letter-spacing:.8px}
.subscription-plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-right:2px}
.subscription-plan-top h3{margin:0;font-size:15px;font-weight:750;letter-spacing:-.2px}
.subscription-plan-top p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.subscription-current-badge{flex:none;padding:4px 6px;border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));border-radius:5px;color:var(--good);font-size:8px;font-weight:800;letter-spacing:.5px}
.subscription-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:2px 0 10px;border-bottom:1px solid var(--line)}
.subscription-price strong{font-size:29px;line-height:1.1;letter-spacing:-1px;font-weight:800}
.subscription-price span{color:var(--muted);font-size:11px}
.subscription-features{display:grid;gap:8px;margin:0;padding:0;list-style:none;flex:1}
.subscription-features li{display:flex;align-items:flex-start;gap:8px;color:var(--text);font-size:11px;line-height:1.5}
.subscription-features li span{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800}
.subscription-plan-note{min-height:30px;margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.subscription-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:39px;padding:9px 12px;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:700;transition:background .15s,border-color .15s}
.subscription-action-primary{background:var(--accent);color:#fff}
.subscription-action-primary:hover{background:var(--accent-strong)}
.subscription-action-secondary{border-color:var(--line);background:var(--surface-soft);color:var(--muted)}
.subscription-status-note{display:flex;align-items:flex-start;gap:9px;margin-top:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:10px;line-height:1.55}
.subscription-status-note>span:first-child{flex:none;color:var(--accent)}
.subscription-footnote{margin:10px 0 0;color:var(--subtle);font-size:9px;line-height:1.55}
.subscription-loading{display:flex;align-items:center;justify-content:center;gap:11px;min-height:190px;color:var(--muted);font-size:12px}
.subscription-spinner{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:subscriptionSpin .8s linear infinite}
@keyframes subscriptionSpin{to{transform:rotate(360deg)}}
@media(max-width:620px){
 .modal:has(.subscription-content){width:calc(100vw - 20px);max-height:92vh;border-radius:16px}
 .modal:has(.subscription-content)>#modalTitle{padding:18px 17px 0;font-size:19px}
 .modal:has(.subscription-content)>#modalDescription{padding:4px 17px 0}
 .modal:has(.subscription-content)>.modal-body{padding:0 14px 14px}
 .modal:has(.subscription-content)>.modal-actions{padding:10px 14px}
 .subscription-content{padding-top:15px}
 .subscription-intro{margin-bottom:13px}
 .subscription-intro h2{font-size:21px}
 .subscription-lockup{width:38px;height:38px;border-radius:12px}
 .subscription-grid{grid-template-columns:minmax(0,1fr);gap:10px}
 .subscription-plan{padding:15px;gap:10px}
 .subscription-plan-note{min-height:0}
 .subscription-price strong{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.subscription-spinner{animation:none}.subscription-plan{transition:none}}


/* Monthly/yearly subscription selector */
.modal:has(.subscription-content){width:min(720px,calc(100vw - 24px))}
.subscription-billing-toggle{display:flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft)}
.subscription-billing-toggle button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;min-height:38px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}
.subscription-billing-toggle button:hover{color:var(--text)}
.subscription-billing-toggle button.is-selected{border-color:var(--line);background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.subscription-billing-toggle button span{padding:3px 5px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-size:8px;letter-spacing:.3px}
.subscription-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.subscription-plan{padding:17px 18px}
.subscription-plan-top h3{font-size:16px}
.subscription-features{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:8px}
.subscription-plan-note{min-height:0}
@media(max-width:620px){
 .modal:has(.subscription-content){width:calc(100vw - 20px)}
 .subscription-billing-toggle button{font-size:10px;padding:8px 5px}
 .subscription-billing-toggle button span{font-size:7px}
 .subscription-features{grid-template-columns:minmax(0,1fr)}
 .subscription-plan{padding:15px}
}


/* Focused, ChatGPT-inspired subscription upgrade modal */
.modal:has(.subscription-upgrade){width:min(470px,calc(100vw - 24px));max-height:min(88dvh,820px);padding:0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 28px 90px rgba(12,18,32,.24)}
.modal:has(.subscription-upgrade)>.modal-brand-mark,.modal:has(.subscription-upgrade)>#modalEyebrow{display:none}
.modal:has(.subscription-upgrade)>#modalTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal:has(.subscription-upgrade)>#modalDescription{display:none}
.modal:has(.subscription-upgrade)>.modal-close{top:14px;right:14px;z-index:4;width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:17px}
.modal:has(.subscription-upgrade)>.modal-body{padding:22px 22px 0;overflow-y:auto;overscroll-behavior:contain;max-height:calc(min(88dvh,820px) - 78px);font-size:13px;color:var(--text)}
.modal:has(.subscription-upgrade)>.modal-actions{display:none}
.subscription-upgrade{padding:2px 0 0}
.subscription-upgrade-header{display:flex;align-items:center;gap:14px;padding:3px 28px 18px 0}
.subscription-upgrade-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:16px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));color:var(--accent);font-size:25px;box-shadow:0 5px 20px color-mix(in srgb,var(--accent) 10%,transparent)}
.subscription-upgrade-header .subscription-eyebrow{font-size:9px;margin-bottom:4px}
.subscription-upgrade-header h2{margin:0 0 5px;font-size:21px;line-height:1.2;letter-spacing:-.65px;font-weight:800}
.subscription-upgrade-header p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.subscription-upgrade .subscription-billing-toggle{margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2,var(--surface))}
.subscription-upgrade .subscription-billing-toggle button{min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.subscription-upgrade .subscription-billing-toggle button.is-selected{background:var(--surface);color:var(--text);box-shadow:0 1px 5px rgba(0,0,0,.09)}
.subscription-upgrade .subscription-billing-toggle button span{margin-left:4px;color:var(--good);font-size:8px;font-weight:800}
.subscription-benefits-heading,.subscription-choice-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px}
.subscription-benefits-heading strong,.subscription-choice-heading strong{font-size:12px;font-weight:800}
.subscription-benefits-heading>span{font-size:10px;color:var(--muted)}
.subscription-upgrade-benefits{list-style:none!important;padding:0!important;margin:0 0 18px!important;display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.subscription-upgrade-benefits li{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin:0!important;font-size:12px;line-height:1.45;color:var(--text);border-bottom:1px solid var(--line)}
.subscription-upgrade-benefits li:last-child{border-bottom:0}
.subscription-check{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:900}
.subscription-choice-heading{margin-bottom:8px}
.subscription-choice-heading>span{font-size:9px;color:var(--muted)}
.subscription-options{display:grid;gap:7px;padding-bottom:15px}
.subscription-option{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.subscription-option:hover{border-color:var(--line-strong)}
.subscription-option.is-selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.subscription-option-radio{display:grid;place-items:center;flex:none;width:17px;height:17px;border:1.5px solid var(--line-strong);border-radius:50%}
.subscription-option.is-selected .subscription-option-radio{border-color:var(--accent)}
.subscription-option-radio span{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.subscription-option-copy{display:grid;gap:3px;min-width:0;flex:1}
.subscription-option-copy strong{font-size:12px;font-weight:800}
.subscription-option-copy small,.subscription-option-price small{font-size:10px;line-height:1.35;color:var(--muted)}
.subscription-option-copy em{font-size:9px;color:var(--good);font-style:normal;font-weight:700}
.subscription-option-price{display:grid;justify-items:end;gap:2px;flex:none}
.subscription-option-price strong{font-size:14px;letter-spacing:-.3px}
.subscription-upgrade-footer{position:sticky;bottom:0;margin:0 -22px;padding:13px 22px 16px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 18px rgba(15,23,42,.035)}
.subscription-main-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:13px;background:var(--accent);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.1px;cursor:pointer;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 22%,transparent);transition:transform .15s,filter .15s}
.subscription-main-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.subscription-main-cta:disabled{opacity:.65;cursor:not-allowed;transform:none}
.subscription-main-cta-current{background:var(--good)}
.subscription-terms{margin:9px 0 0;color:var(--muted);font-size:9px;line-height:1.5;text-align:center}
.subscription-upgrade-footer .subscription-status-note{margin-top:9px;font-size:10px}
@media(max-width:480px){.modal:has(.subscription-upgrade){width:calc(100vw - 16px);max-height:90dvh;border-radius:21px}.modal:has(.subscription-upgrade)>.modal-body{padding:18px 16px 0;max-height:calc(90dvh - 65px)}.subscription-upgrade-header{gap:11px;padding-bottom:15px}.subscription-upgrade-icon{width:42px;height:42px;border-radius:14px;font-size:22px}.subscription-upgrade-header h2{font-size:19px}.subscription-upgrade-footer{margin:0 -16px;padding:12px 16px 14px}.subscription-upgrade .subscription-billing-toggle{margin-bottom:15px}}

/* Subscription plan swipe carousel and larger billing switch */
.subscription-upgrade .subscription-billing-toggle{margin-top:4px!important;margin-bottom:14px!important;min-height:46px!important}
.subscription-upgrade .subscription-billing-toggle button{min-height:38px!important;font-size:13px!important}
.subscription-carousel-hint{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 1px 8px;color:var(--muted);font-size:10px}
.subscription-plan-carousel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.subscription-plan-slide{scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;min-width:0;box-sizing:border-box;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;align-items:stretch;gap:11px}
.subscription-plan-slide.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.subscription-plan-select{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.subscription-plan-select-radio{width:18px;height:18px;display:grid;place-items:center;border:1.5px solid var(--line-strong);border-radius:50%;flex:none}
.subscription-plan-slide.is-selected .subscription-plan-select-radio{border-color:var(--accent)}
.subscription-plan-select-radio span{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.subscription-plan-select-label{font-size:9px;letter-spacing:1px;font-weight:850;color:var(--accent)}
.subscription-plan-active-label{margin-left:auto;font-size:8px;color:var(--good);font-weight:800}
.subscription-plan-slide-heading h3{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.5px;font-weight:850}
.subscription-plan-slide-heading p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.subscription-plan-slide-price{display:flex;align-items:baseline;gap:7px;padding:10px 0;border-bottom:1px solid var(--line)}
.subscription-plan-slide-price strong{font-size:29px;line-height:1.1;letter-spacing:-1px;font-weight:850}
.subscription-plan-slide-price span{font-size:11px;color:var(--muted)}
.subscription-plan-detail-title{font-size:11px;font-weight:850}
.subscription-slide-benefits{margin:0!important;border:0!important;border-radius:0!important;overflow:visible!important;gap:0!important}
.subscription-slide-benefits li{padding:8px 0!important;border-bottom:1px solid var(--line);font-size:11px!important;line-height:1.45!important}
.subscription-slide-benefits li:last-child{border-bottom:0}
.subscription-plan-slide-note{margin:auto 0 0;padding-top:4px;color:var(--muted);font-size:9px;line-height:1.45}
.subscription-upgrade-footer{z-index:2}
@media(min-width:481px){.subscription-plan-slide{flex-basis:100%}}
@media(max-width:480px){.subscription-upgrade .subscription-billing-toggle{margin-top:5px!important;margin-bottom:12px!important}.subscription-plan-slide{padding:13px}.subscription-plan-slide-heading h3{font-size:19px}.subscription-plan-slide-price strong{font-size:27px}.subscription-carousel-hint{font-size:9px}}


/* Responsive subscription comparison: paired desktop cards, single mobile card */
.modal:has(.subscription-upgrade){width:min(1040px,calc(100vw - 40px));max-height:92dvh}
.modal:has(.subscription-upgrade)>.modal-body{max-height:calc(92dvh - 72px);padding:24px 28px 0}
.subscription-upgrade-header{padding-bottom:16px}
.subscription-upgrade-header h2{font-size:25px}
.subscription-upgrade .subscription-billing-toggle{max-width:420px;margin-left:auto;margin-right:auto}
.subscription-carousel-hint{font-size:11px;margin-bottom:10px}
.subscription-mobile-hint{display:none}
.subscription-plan-carousel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible;padding:0 0 4px;margin:0}
.subscription-plan-slide{width:auto;min-width:0;flex:initial;height:100%;padding:20px;gap:13px}
.subscription-plan-slide-heading h3{font-size:22px}
.subscription-plan-slide-heading p{font-size:12px}
.subscription-plan-slide-price strong{font-size:34px}
.subscription-slide-benefits li{font-size:12px!important;padding:9px 0!important}
.subscription-plan-slide-note{font-size:10px}
.subscription-comparison{margin:24px 0 0}
.subscription-comparison h3{margin:0 0 4px;font-size:17px;letter-spacing:-.3px}
.subscription-comparison>p{margin:0 0 12px;color:var(--muted);font-size:11px}
.subscription-comparison-scroll{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:13px}
.subscription-comparison table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:11px;background:var(--surface)}
.subscription-comparison th,.subscription-comparison td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.subscription-comparison thead th{background:var(--surface-2,var(--surface));font-weight:700}
.subscription-comparison thead th:first-child{text-align:left;min-width:150px}
.subscription-comparison thead th span{display:block;color:var(--muted);font-size:10px;font-weight:700;white-space:nowrap}
.subscription-comparison thead th strong{display:block;margin-top:5px;font-size:17px;letter-spacing:-.4px;color:var(--text)}
.subscription-comparison thead th strong span{display:inline;font-size:9px;font-weight:500}
.subscription-comparison tbody th{text-align:left;font-weight:650;white-space:nowrap}
.subscription-comparison tbody td{min-width:95px}
.subscription-comparison tbody tr:last-child th,.subscription-comparison tbody tr:last-child td{border-bottom:0}
.subscription-comparison td small{display:block;margin-top:3px;color:var(--muted);font-size:9px;white-space:nowrap}
.comparison-yes,.comparison-no{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;font-size:13px;font-weight:900}
.comparison-yes{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}
.comparison-no{background:var(--surface-2,var(--surface));color:var(--muted)}
.subscription-comparison-footnote{margin:9px 0 0!important;font-size:9px!important;line-height:1.5;color:var(--muted)}
.subscription-upgrade-footer{margin:18px -28px 0;padding:14px 28px 17px}
@media(max-width:700px){
 .modal:has(.subscription-upgrade){width:calc(100vw - 16px);max-height:92dvh;border-radius:20px}
 .modal:has(.subscription-upgrade)>.modal-body{padding:18px 16px 0;max-height:calc(92dvh - 64px)}
 .subscription-upgrade-header h2{font-size:21px}
 .subscription-desktop-hint{display:none}
 .subscription-mobile-hint{display:inline}
 .subscription-plan-carousel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
 .subscription-plan-slide{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:16px}
 .subscription-plan-slide-heading h3{font-size:20px}
 .subscription-plan-slide-price strong{font-size:29px}
 .subscription-comparison{margin-top:19px}
 .subscription-upgrade-footer{margin:0 -16px;padding:12px 16px 14px}
}
@media(prefers-reduced-motion:reduce){.subscription-plan-carousel{scroll-behavior:auto}}


/* CodeForge subscription is a dedicated, scrollable full-screen page. */
.modal-backdrop:has(.subscription-upgrade){
  position:fixed!important;inset:0!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;
  padding:0!important;overflow:hidden!important;background:var(--overlay,rgba(12,18,32,.62))!important;z-index:10000!important
}
.modal:has(.subscription-upgrade){
  position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;
  width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;
  box-shadow:none!important
}
.modal:has(.subscription-upgrade)>.modal-close{position:fixed!important;top:16px!important;right:20px!important;z-index:20!important}
.modal:has(.subscription-upgrade)>.modal-body{
  flex:1 1 auto!important;width:100%!important;max-width:1180px!important;box-sizing:border-box!important;
  max-height:none!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain!important;margin:0 auto!important;padding:30px clamp(18px,4vw,64px) 34px!important;
  scrollbar-gutter:stable
}
.subscription-upgrade{width:100%;max-width:1100px;margin:0 auto;padding:8px 0 28px}
.subscription-upgrade-header{align-items:center;gap:16px;padding:8px 52px 24px 0}
.subscription-upgrade-icon{overflow:hidden!important}
.subscription-upgrade-icon img{display:block;width:100%;height:100%;object-fit:contain;padding:7px;box-sizing:border-box}
.subscription-upgrade-header h2{font-size:clamp(26px,3vw,38px)!important;letter-spacing:-1px!important}
.subscription-upgrade-header p{font-size:14px!important}
.subscription-upgrade .subscription-billing-toggle{margin:0 auto 24px!important;min-height:48px;max-width:420px}
.subscription-upgrade .subscription-billing-toggle button{min-height:40px!important;cursor:pointer}
.subscription-carousel-hint{margin-bottom:12px}
.subscription-plan-slide{cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.subscription-plan-slide:hover{border-color:var(--accent)!important;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.subscription-plan-select,.subscription-main-cta,.modal:has(.subscription-upgrade)>.modal-close{cursor:pointer;pointer-events:auto}
.subscription-plan-carousel{align-items:stretch}
.subscription-plan-slide{min-height:300px}
.subscription-upgrade-footer{position:static!important;margin:24px 0 0!important;padding:20px 0 0!important;border-top:1px solid var(--line);box-shadow:none!important;background:transparent!important}
.subscription-main-cta{min-height:52px!important;width:100%;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px!important}
.subscription-terms,.subscription-status-note{max-width:760px;margin-left:auto!important;margin-right:auto!important;text-align:center}
.subscription-comparison{margin-top:32px!important}
.subscription-comparison h3{font-size:21px!important}
.subscription-comparison>p{font-size:13px!important}
.subscription-comparison table{font-size:13px!important}
.subscription-comparison th,.subscription-comparison td{padding:14px 16px!important}
.subscription-comparison thead th strong{font-size:20px!important}
@media(max-width:700px){
  .modal:has(.subscription-upgrade)>.modal-close{top:10px!important;right:10px!important}
  .modal:has(.subscription-upgrade)>.modal-body{padding:20px 16px 28px!important}
  .subscription-upgrade{padding-top:4px}
  .subscription-upgrade-header{padding-right:44px;gap:11px}
  .subscription-upgrade-icon{width:42px!important;height:42px!important;border-radius:12px!important}
  .subscription-upgrade-header h2{font-size:23px!important}
  .subscription-upgrade-header p{font-size:12px!important}
  .subscription-upgrade .subscription-billing-toggle{margin:0 0 18px!important;max-width:none}
  .subscription-plan-slide{min-height:0}
  .subscription-upgrade-footer{margin-top:18px!important;padding-top:16px!important}
  .subscription-comparison{margin-top:24px!important}
}


/* Branded loader for non-chat waits, account connections, and checkout preparation. */
.cf-global-brand-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(7px)}
.cf-global-brand-loader[hidden]{display:none}
.cf-global-brand-loader-card{display:flex;flex-direction:column;align-items:center;gap:15px;min-width:170px;padding:26px 30px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);color:var(--muted);font-size:12px;text-align:center}
.cf-global-brand-loader-logo{display:block;width:48px;height:48px;object-fit:contain;animation:cf-brand-loader-spin 1.15s linear infinite;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent))}
.cf-global-brand-loader-message{line-height:1.5}
.cf-button-loader-logo{display:inline-block;width:16px;height:16px;vertical-align:middle;margin-right:7px;animation:cf-brand-loader-spin 1.15s linear infinite}
@keyframes cf-brand-loader-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cf-global-brand-loader-logo,.cf-button-loader-logo{animation:none}}


/* Authentication: Google sign-in and first-login profile setup */
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:11px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.auth-google{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:9px;font-weight:600}
.auth-google:hover{background:var(--surface-soft);border-color:var(--line-strong)}
.google-g-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:800 16px Arial,sans-serif;color:#4285f4;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 75%,#ea4335 75% 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.profile-setup-form{gap:10px}
.profile-setup-form .auth-submit{margin-top:8px}


/* Sidebar layout and reliable independent scrolling */
.app-shell{height:100dvh;min-height:0;overflow:hidden}
.sidebar{height:100dvh;min-height:0;overflow:hidden;padding-top:13px}
.brand{padding-bottom:15px}
.sidebar-upgrade{margin-bottom:15px}
.nav-caption{margin-top:16px}
.recent-caption{margin-top:15px}
.recent-list{flex:1 1 auto;min-height:64px;overflow-y:auto;overscroll-behavior:contain;align-content:start;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.recent-list::-webkit-scrollbar,#connectionsView::-webkit-scrollbar,#modelsView::-webkit-scrollbar,#settingsView::-webkit-scrollbar{width:7px}
.recent-list::-webkit-scrollbar-thumb,#connectionsView::-webkit-scrollbar-thumb,#modelsView::-webkit-scrollbar-thumb,#settingsView::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px}
.sidebar-spacer{flex:0 1 8px;min-height:4px}
.sidebar-note{flex-shrink:0;margin-bottom:8px;padding:8px}
.sidebar-profile-wrap{flex:none;display:grid;gap:5px;padding-top:2px}
.profile-button{width:100%;min-width:0;min-height:52px;cursor:pointer;transition:background .15s,border-color .15s}
.profile-button:hover{background:var(--surface-soft);border-color:var(--line-strong)}
.profile-button .avatar{flex:0 0 30px;overflow:hidden}
.profile-button .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-button .profile-copy{flex:1}
.profile-button .profile-copy strong,.profile-button .profile-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-logout{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}
.sidebar-logout:hover{background:var(--surface-soft);color:var(--text)}
.view.active-view{min-height:0;overflow-y:auto;overscroll-behavior:contain}
#chatView.active-view{overflow:hidden}
#connectionsView,#modelsView,#settingsView{padding-bottom:24px}
@media(max-width:760px){
 .sidebar{height:100dvh;min-height:0;overflow:hidden;padding-top:13px}
 .app-shell.sidebar-collapsed .sidebar{height:100dvh;min-height:0;overflow:hidden;padding:13px 13px 10px}
 .recent-list{min-height:56px}
}

.sidebar-logout[hidden]{display:none}


/* Inline retailer product cards and per-prompt copy action */
.assistant-product-card{display:flex;align-items:center;gap:13px;max-width:620px;margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s;overflow:hidden}
.assistant-product-card:hover{border-color:var(--line-strong);background:var(--surface-soft)}
.assistant-product-thumb{width:112px;height:96px;flex:0 0 112px;display:grid;place-items:center;border-radius:8px;background:var(--surface-soft);overflow:hidden}
.assistant-product-thumb img{width:100%;height:100%;object-fit:contain}
.assistant-product-details{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.assistant-product-details strong{font-size:13px;line-height:1.4}
.assistant-product-price{font-size:12px;font-weight:700;color:var(--text)}
.assistant-product-specs{font-size:11px;line-height:1.45;color:var(--muted)}
.assistant-product-visit{font-size:11px;font-weight:600;color:var(--accent);margin-top:3px}
.user-message-actions{display:flex;justify-content:flex-end;margin-top:5px}
.user-copy-button{opacity:.7}
.user-copy-button:hover{opacity:1}
@media(max-width:560px){.assistant-product-card{gap:10px;padding:9px}.assistant-product-thumb{width:86px;height:82px;flex-basis:86px}.assistant-product-details strong{font-size:12px}}


/* Profile settings exit and complete, independently scrollable recent chats */
.profile-settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.profile-settings-heading>div{min-width:0}
.profile-settings-close{flex:0 0 34px;width:34px;height:34px;font-size:22px;line-height:1}
.profile-settings-close:hover{background:var(--surface-soft);color:var(--text)}
.recent-list{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-x:hidden;overflow-y:auto;gap:3px;align-content:stretch;overscroll-behavior:contain;scrollbar-gutter:stable}
.recent-chat{display:block;flex:0 0 auto;width:100%;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip;line-height:1.4;padding:8px 9px}
.sidebar{min-height:0}
@media(max-width:760px){.recent-list{min-height:0;flex:1 1 0}.profile-settings-heading{gap:10px}}


/* Voice chat and speech-to-text controls */
.composer-voice-button{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.composer-voice-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer-voice-button:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-soft)}
.composer-voice-button.is-active{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.composer-voice-button.is-active svg{animation:voice-button-pulse 1.35s ease-in-out infinite}
@keyframes voice-button-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(max-width:560px){.composer-right{gap:5px}.composer-voice-button{width:29px;height:29px;flex-basis:29px}.send-button{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){.composer-voice-button.is-active svg{animation:none}}


/* Voice choice dialog and live water-cloud visualizer */
.composer-voice-button#voiceChatButton svg{stroke-width:1.7}
.composer-voice-button#voiceChatButton.is-active{color:#347fe8;border-color:#75a9f7;background:color-mix(in srgb,#438df2 12%,var(--surface))}
.cf-voice-orb-wrap{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:3px 0 2px;min-height:0;overflow:hidden;background:transparent;opacity:.88;pointer-events:none;position:relative;z-index:0}
body.cf-voice-active .cf-voice-orb-wrap{display:flex;animation:cf-orb-arrive .4s ease-out both}
.cf-voice-orb{position:relative;width:76px;height:76px;border-radius:50%;isolation:isolate;display:grid;place-items:center;filter:drop-shadow(0 10px 24px rgba(73,137,242,.2));animation:cf-orb-float 3.2s ease-in-out infinite}
.cf-orb-core{position:absolute;inset:10px;border-radius:46% 54% 52% 48% / 48% 43% 57% 52%;background:radial-gradient(circle at 32% 27%,#e4fbff 0%,#91d8ff 16%,#5799ff 42%,#7169ed 70%,#b18bff 100%);box-shadow:inset -8px -10px 24px rgba(40,48,150,.28),inset 5px 5px 17px rgba(255,255,255,.7),0 0 28px rgba(90,140,255,.24);animation:cf-orb-jelly 4s ease-in-out infinite}
.cf-orb-ring{position:absolute;inset:3px;border:1px solid rgba(112,163,255,.48);border-radius:50%;animation:cf-orb-ring 2.8s ease-out infinite}
.cf-orb-ring-two{inset:-3px;animation-delay:1.4s}
.cf-orb-glow{position:absolute;inset:17px;border-radius:50%;background:radial-gradient(circle,rgba(119,232,239,.52),rgba(123,135,255,.18) 56%,transparent 75%);filter:blur(9px);animation:cf-orb-glow 1.8s ease-in-out infinite alternate}
body.cf-voice-listening .cf-orb-core{animation-duration:2.1s}
body.cf-voice-speaking .cf-orb-core{animation-duration:.72s}
body.cf-voice-speaking .cf-orb-ring{animation-duration:1.2s;border-color:rgba(164,130,255,.72)}
.cf-voice-orb-label{font-size:12px;letter-spacing:.01em;color:var(--muted)}
@keyframes cf-orb-jelly{0%,100%{border-radius:46% 54% 52% 48% / 48% 43% 57% 52%;transform:scale(1) rotate(0)}25%{border-radius:55% 45% 43% 57% / 43% 55% 45% 57%;transform:scale(1.035,.97) rotate(3deg)}50%{border-radius:43% 57% 56% 44% / 55% 46% 54% 45%;transform:scale(.98,1.035) rotate(-2deg)}75%{border-radius:52% 48% 46% 54% / 46% 57% 43% 54%;transform:scale(1.025,.99) rotate(1deg)}}
@keyframes cf-orb-ring{0%{transform:scale(.84);opacity:.7}100%{transform:scale(1.25);opacity:0}}
@keyframes cf-orb-glow{from{opacity:.45;transform:scale(.9)}to{opacity:.95;transform:scale(1.12)}}
@keyframes cf-orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:560px){.cf-voice-orb{width:68px;height:68px}.cf-voice-dialog{padding:24px 16px 17px;border-radius:18px}.cf-voice-option{padding:10px;gap:7px}.cf-voice-preview{padding:7px}}
@media(prefers-reduced-motion:reduce){.cf-voice-orb,.cf-orb-core,.cf-orb-ring,.cf-orb-glow,.cf-voice-orb-wrap{animation:none!important}}
@keyframes cf-cloud-drift{from{transform:translate3d(-4px,2px,0) scale(.94)}to{transform:translate3d(5px,-3px,0) scale(1.08)}}
@keyframes cf-orb-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.cf-voice-dialog-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;background:rgba(15,20,32,.48);backdrop-filter:blur(7px)}
.cf-voice-dialog{position:relative;width:min(440px,100%);max-height:min(86vh,680px);overflow:auto;padding:27px 24px 20px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.25);text-align:center}
.cf-voice-close{position:absolute;right:13px;top:12px;width:32px;height:32px;border:0;border-radius:10px;background:var(--surface-soft);font-size:22px;color:var(--muted)}
.cf-voice-dialog-icon{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 12px;border-radius:17px;background:linear-gradient(135deg,#dcecff,#eee2ff);color:#4c83e8;font-size:28px}
.cf-voice-dialog h2{margin:0 0 7px;font-size:22px;letter-spacing:-.03em}
.cf-voice-dialog>p{margin:0 auto 19px;max-width:330px;color:var(--muted);font-size:13px;line-height:1.6}
.cf-voice-options{display:grid;gap:9px;text-align:left}
.cf-voice-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px;cursor:pointer;transition:border-color .15s,background .15s}
.cf-voice-option.is-selected{border-color:#669cf3;background:color-mix(in srgb,#528df0 9%,var(--surface))}
.cf-voice-option-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.cf-voice-option-copy strong{font-size:13px;font-weight:650}
.cf-voice-option-copy small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.cf-voice-option input{accent-color:#528df0}
.cf-voice-preview{flex-shrink:0;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:7px 9px;font-size:11px;color:var(--text)}
.cf-voice-dialog-actions{display:flex;gap:9px;margin-top:18px}
.cf-voice-dialog-actions button{flex:1;padding:11px 10px;border-radius:11px;font-size:12px;font-weight:650}
.cf-voice-cancel{border:1px solid var(--line);background:var(--surface);color:var(--text)}
.cf-voice-confirm{border:1px solid #4f88eb;background:#4f88eb;color:#fff}
.cf-voice-note{display:block;margin-top:13px;color:var(--muted);font-size:10px;line-height:1.5}
.cf-voice-empty{color:var(--muted);font-size:12px;line-height:1.6;text-align:center}
@media(max-width:560px){.cf-voice-orb{transform:scale(.9)}.cf-voice-dialog{padding:24px 16px 17px;border-radius:18px}.cf-voice-option{padding:10px;gap:7px}.cf-voice-preview{padding:7px}}
@media(prefers-reduced-motion:reduce){.cf-voice-orb span,.cf-voice-orb:before,.cf-voice-orb:after,.cf-voice-orb-wrap{animation:none!important}}


/* Mobile chat layout stability: keep the composer in normal flow so the
   virtual keyboard/viewport changes cannot make it jump around. */
@media (max-width: 760px) {
  #chatView.active-view {
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 0;
    overflow-x: clip;
  }

  #chatView:not(.has-messages) .chat-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 8px;
  }

  #chatView:not(.has-messages) .composer-zone,
  #chatView.has-messages .composer-zone {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    width: min(730px, calc(100% - 20px));
    max-width: 730px;
    min-width: 0;
    margin: 0 auto;
    padding: 5px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #chatView:not(.has-messages) .composer-zone {
    z-index: 5;
  }

  #chatView.has-messages .chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 0;
    overflow: hidden;
  }

  #chatView.has-messages #messages {
    min-width: 0;
    min-height: 0;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  #chatView .composer-zone,
  #chatView .composer,
  #chatView .composer-bottom,
  #chatView .composer-tools,
  #chatView .composer-right {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  #chatView .composer-tools {
    flex: 1 1 200px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  #chatView .connector-pills {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    margin-left: 0;
  }

  #chatView .model-chip {
    min-width: 0;
    max-width: min(145px, 100%);
    flex-shrink: 1;
  }

  #chatView #selectedModel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #chatView .composer-bottom {
    flex-wrap: wrap;
    gap: 7px;
  }

  #chatView .composer-right {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* The voice visualizer floats above the composer instead of taking layout
   space, so activating voice mode doesn't push the chat feed around. */
#chatView .composer-zone > .cf-voice-orb-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 6;
  width: 100%;
  margin: 0;
}


/* Keep the live voice visualizer anchored just above the composer on mobile. */
@media (max-width: 760px) {
  #chatView.active-view .composer-zone {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  #chatView.active-view .composer-zone > .cf-voice-orb-wrap {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none;
    z-index: 6;
  }

  #chatView.active-view .cf-voice-orb {
    width: 60px;
    height: 60px;
  }

  #chatView.active-view .cf-voice-orb-label {
    font-size: 11px;
    line-height: 1.2;
  }
}


/* Mobile composer guard: keep the input and send control inside the viewport while typing. */
@media (max-width: 760px) {
  #chatView.active-view .composer-zone {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: 730px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #chatView.active-view .composer,
  #chatView.active-view .composer-bottom,
  #chatView.active-view .composer-tools,
  #chatView.active-view .composer-right {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #chatView.active-view .composer {
    width: 100% !important;
    overflow: hidden !important;
  }
  #chatView.active-view .composer-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #chatView.active-view .composer-tools {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    gap: 5px !important;
  }
  #chatView.active-view .composer-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 6px !important;
  }
  #chatView.active-view .composer textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  #chatView.active-view .send-button {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
}


/* Compact mobile composer controls so icons cannot force the send button off-screen. */
@media (max-width: 560px) {
  #chatView .composer-zone {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }
  #chatView .composer {
    padding: 8px !important;
    overflow: hidden !important;
  }
  #chatView .composer-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
  }
  #chatView .composer-tools {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    width: 0 !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  #chatView .composer-tools::-webkit-scrollbar {
    display: none !important;
  }
  #chatView .composer-tool,
  #chatView .composer-tools button,
  #chatView .composer-tools .model-chip {
    box-sizing: border-box !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    font-size: 16px !important;
  }
  #chatView .composer-tools .model-chip {
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 105px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
  }
  #chatView .composer-right {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    margin-left: auto !important;
    gap: 4px !important;
  }
  #chatView .composer-right > button:not(.send-button) {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
  }
  #chatView .send-button {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #chatView .composer-hint {
    display: none !important;
  }
}


/* Final mobile composer layout: reserve space for the action buttons and keep
   the send control visible while the on-screen keyboard is open. */
@media (max-width: 560px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }
  #chatView.active-view {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip !important;
  }
  #chatView.active-view .composer-zone {
    width: calc(100% - 16px) !important;
    max-width: 730px !important;
    min-width: 0 !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chatView.active-view .composer {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }
  #chatView.active-view .composer-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #chatView.active-view .composer-tools {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  #chatView.active-view .composer-tools::-webkit-scrollbar {
    display: none !important;
  }
  #chatView.active-view .composer-right {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  #chatView.active-view .composer-right > button:not(.send-button) {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 30px !important;
    padding: 0 !important;
  }
  #chatView.active-view .composer-right .composer-voice-button {
    flex-basis: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
  }
  #chatView.active-view .composer-right .send-button {
    display: grid !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
  }
  #chatView.active-view .composer textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}


/* Responsive composer fix: keep controls reachable on narrow screens without
   squeezing the message field or clipping the attachment menu. */
@media (max-width: 560px) {
  #chatView.active-view .composer-zone {
    width: calc(100% - 16px) !important;
    max-width: 730px !important;
    min-width: 0 !important;
  }
  #chatView.active-view .composer {
    min-width: 0 !important;
    overflow: visible !important;
  }
  #chatView.active-view .composer textarea {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #chatView.active-view .composer-bottom {
    min-width: 0 !important;
    gap: 6px !important;
  }
  #chatView.active-view .composer-tools {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
  }
  #chatView.active-view .composer-tools::-webkit-scrollbar {
    display: none !important;
  }
  #chatView.active-view .composer-tools > *,
  #chatView.active-view .composer-tools .composer-tool,
  #chatView.active-view .composer-tools button {
    flex-shrink: 0 !important;
  }
  #chatView.active-view .composer-tool {
    display: inline-grid !important;
    place-items: center;
  }
  #chatView.active-view .composer-right {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
  }
  #chatView.active-view .composer-right .send-button {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
  /* Keep the + menu above the composer instead of clipping it inside a row. */
  #chatView.active-view .plus-menu {
    position: fixed !important;
    left: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(268px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 125px) !important;
    z-index: 1000 !important;
  }
}


/* ChatGPT-style code blocks with a reliable, accessible copy control. */
.message-text .assistant-code-block {
  width: 100%;
  max-width: 100%;
  margin: 12px 0 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface-soft);
}
.message-text .assistant-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 5px 9px 5px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.message-text .assistant-code-language {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-text .assistant-code-copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.message-text .assistant-code-copy:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}
.message-text .assistant-code-copy.is-copied {
  border-color: color-mix(in srgb, var(--good) 45%, var(--line));
  color: var(--good);
}
.message-text .assistant-code-block pre {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--text);
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
}
.message-text .assistant-code-block pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 560px) {
  .message-text .assistant-code-block pre { padding: 11px; font-size: 11px; }
  .message-text .assistant-code-header { min-height: 36px; padding-left: 10px; }
  .message-text .assistant-code-copy { min-height: 27px; padding: 3px 8px; }
  #chatView.active-view .composer-tools { scroll-snap-type: x proximity; }
  #chatView.active-view .composer-tools > * { scroll-snap-align: start; }
  #chatView.active-view .composer-right { flex-shrink: 0 !important; }
}


/* Wan2.2 hosted video generator — free-only, locked by default */
.wan-video-studio{display:grid;gap:14px;min-width:0}
.wan-video-model{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.wan-video-model-mark{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#6458e8,#21a6a0);color:#fff;font-weight:800;font-size:18px}
.wan-video-model>div{display:grid;gap:3px;min-width:0;flex:1}
.wan-video-model strong{font-size:12px}
.wan-video-model small{font-size:10px;color:var(--muted)}
.wan-video-free-tag{font-size:9px;font-weight:800;letter-spacing:.6px;color:#087f5b;background:#d8f8e9;padding:5px 7px;border-radius:6px;white-space:nowrap}
.wan-video-label{display:grid;gap:7px;font-size:11px;font-weight:700;color:var(--text,var(--foreground))}
.wan-video-prompt,.wan-video-fields select{width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--text,var(--foreground));padding:10px 11px;font:inherit;font-size:12px;outline-offset:2px}
.wan-video-prompt{resize:vertical;line-height:1.5}
.wan-video-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wan-video-status{padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);font-size:11px;line-height:1.5;color:var(--muted)}
.wan-video-status.is-locked{border-color:#e9c98e;background:color-mix(in srgb,#f5c56a 12%,var(--surface));color:var(--text,var(--foreground))}
.wan-video-status.is-ready{border-color:#74c9a8;background:color-mix(in srgb,#36b37e 10%,var(--surface));color:var(--text,var(--foreground))}
.wan-video-footnote{margin:0;color:var(--muted);font-size:10px;line-height:1.55}
.wan-video-generate{width:100%;min-height:42px}
.wan-video-result{display:grid;gap:8px}
.wan-video-result[hidden]{display:none}
.wan-video-result video{width:100%;max-height:360px;background:#111;border-radius:10px}
.wan-video-result a{font-size:11px;color:var(--accent);overflow-wrap:anywhere}
@media(max-width:520px){.wan-video-fields{grid-template-columns:1fr}.wan-video-model{align-items:flex-start;flex-wrap:wrap}.wan-video-free-tag{margin-left:auto}}

/* Compact monthly usage panel */
.sidebar-usage{margin:14px 2px 4px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:grid;gap:10px}
.sidebar-usage-heading{display:flex;align-items:center;justify-content:space-between;color:var(--subtle);font:700 9px Manrope,sans-serif;letter-spacing:1px}
.sidebar-usage-plan{font-size:12px;font-weight:700;color:var(--text)}
.usage-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}
.usage-line strong{font-size:11px;font-weight:700;color:var(--text);text-align:right}
.usage-footnote{font-size:10px;line-height:1.5;color:var(--subtle)}


/* Privacy, refund and support page */
.legal-view{padding:28px 0 36px;overflow:auto}
.legal-heading,.legal-card,.legal-actions{width:min(900px,calc(100% - 40px));margin-left:auto;margin-right:auto}
.legal-heading{margin-top:8px;margin-bottom:18px}
.legal-heading h1{font:600 clamp(25px,3vw,32px) Manrope,sans-serif;letter-spacing:-.8px;margin:9px 0}
.legal-heading p{max-width:780px;color:var(--muted);font-size:12px;line-height:1.75;margin:8px 0}
.legal-heading .legal-updated{font-size:11px;color:var(--subtle)}
.legal-subheading{margin-top:30px}
.legal-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,3vw,28px);box-shadow:var(--shadow);color:var(--text)}
.legal-card h2{font:600 15px Manrope,sans-serif;letter-spacing:-.2px;margin:21px 0 8px}
.legal-card h2:first-child{margin-top:0}
.legal-card p,.legal-card li{font-size:12px;line-height:1.8;color:var(--muted)}
.legal-card p{margin:7px 0 13px}
.legal-card ul{padding-left:21px;margin:8px 0 17px}
.legal-card li{padding-left:3px;margin:5px 0}
.legal-card strong{color:var(--text)}
.legal-contact{display:flex;align-items:flex-start;gap:15px}
.legal-contact-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:20px}
.legal-contact h2{margin-top:0}
.legal-placeholder{display:inline-block;margin-top:6px;padding:7px 10px;border:1px dashed var(--line-strong);border-radius:7px;color:var(--subtle);font-size:11px}
.legal-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.legal-actions span{font-size:10px;color:var(--subtle)}
@media(max-width:600px){.legal-view{padding-top:20px}.legal-heading,.legal-card,.legal-actions{width:calc(100% - 28px)}.legal-card{padding:17px}.legal-contact{gap:10px}.legal-actions{align-items:flex-start;flex-direction:column}}


/* Answer-first chat: no identity or provider chrome in assistant message rows. */
.message.response .message-content { max-width: min(660px, 100%); }
@media (max-width: 760px) { .message.response .message-content { max-width: 100%; } }
.cf-typing-dots { display: inline-flex; align-items: center; gap: 5px; min-width: 34px; min-height: 22px; }
.cf-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: cf-typing-pulse 900ms ease-in-out infinite; }
.cf-typing-dots span:nth-child(2) { animation-delay: 120ms; }
.cf-typing-dots span:nth-child(3) { animation-delay: 240ms; }
@keyframes cf-typing-pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cf-typing-dots span { animation: none; opacity: .65; } }


/* Per-message actions: icon-only on hover for desktop and always compact on touch screens. */
.message-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease, visibility .14s ease; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; visibility: visible; pointer-events: auto; }
.message-action-icon { display: inline-grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); }
.message-action-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.message-action-icon:hover, .message-action-icon:focus-visible { border-color: var(--line); background: var(--surface); color: var(--accent-strong); }
.message.user .message-actions { margin-top: 6px; }
@media (hover: none), (max-width: 760px) { .message-actions { opacity: 1; visibility: visible; pointer-events: auto; } .message-action-icon { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) { .message-actions { transition: none; } }


/* Keep chat and voice transcripts in one readable, left-aligned column. */
#chatView #messages.messages {
  width: min(820px, calc(100% - 32px));
  flex-direction: column;
  align-items: stretch;
}
#chatView #messages .message {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}
#chatView #messages .message.response {
  justify-content: flex-start;
}
#chatView #messages .message.response .message-content {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  flex: 0 1 760px;
}
#chatView #messages .message.response .message-text {
  display: block;
  width: 100%;
  max-width: 100%;
  column-count: 1;
  column-width: auto;
  column-gap: normal;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
#chatView #messages .message.response .message-text p,
#chatView #messages .message.response .message-text ul {
  max-width: 100%;
}
@media (max-width: 760px) {
  #chatView #messages.messages {
    width: calc(100% - 24px);
  }
  #chatView #messages .message.response .message-content {
    max-width: 100%;
    flex-basis: 100%;
  }
}


/* CodeForge clean workspace refresh */
.topbar{position:relative;gap:12px}
.topbar-model-chip,.composer .model-chip{position:fixed;top:12px;right:78px;z-index:45;height:34px;display:inline-flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font-size:12px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.composer .connector-pills,.composer .connector-pill{display:none!important}
.composer-tools{gap:10px}
.composer-hint{font-size:11px;color:var(--subtle)}
.composer{border-radius:22px!important;padding:14px 16px 10px!important;box-shadow:0 5px 24px rgba(30,28,24,.055)}
.composer textarea,.composer textarea:focus{font-size:15px;line-height:1.6}
.composer-bottom{align-items:center}
.composer-tool{width:36px;height:36px;border-radius:50%}
.send-button{width:38px;height:38px;border-radius:50%}
.quick-tags{display:none!important}
.sidebar .side-nav{gap:5px}
.sidebar .nav-item{min-height:39px;border-radius:10px}
.sidebar .nav-item:not(.active):hover{background:var(--surface);color:var(--text)}
.topbar-model-chip:hover,.composer .model-chip:hover{background:var(--surface-soft)}
@media(max-width:760px){
 .topbar{padding:0 14px;gap:8px}
 .topbar-model-chip,.composer .model-chip{top:11px;right:58px;max-width:calc(100vw - 145px);font-size:11px;padding:0 9px}
 .topbar-model-chip #selectedModel,.composer .model-chip #selectedModel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .chat-scroll{padding:22px 14px 14px}
 .composer-zone{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
 .composer{padding:12px!important;border-radius:20px!important}
 .composer-hint{display:none}
}


/* Gemini-inspired single-row header and centered welcome state. */
.topbar{min-height:64px;padding:0 22px;display:flex;align-items:center;gap:14px}
.topbar .breadcrumb{display:none!important}
.topbar-menu-wrap,.topbar-menu-button{display:none!important}
.topbar-model-chip{position:static!important;top:auto!important;right:auto!important;z-index:2;margin:0;max-width:min(230px,48vw);height:38px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:none;font-size:13px}
.topbar-model-chip #selectedModel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center}
.header-profile-button{display:grid;place-items:center;width:38px;height:38px;padding:3px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer}
.header-profile-button .avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--accent-soft);color:var(--text);font-size:12px;font-weight:700}
.header-profile-button .avatar img{width:100%;height:100%;object-fit:cover}
.welcome{min-height:clamp(260px,48vh,520px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:32px 18px}
.hero-brand-mark{display:grid;place-items:center;width:58px;height:58px}
.hero-brand-mark .hero-mark{display:block;width:54px;height:54px;object-fit:contain}
.hero-greeting{margin:0!important;font-family:Inter,Geist,ui-sans-serif,system-ui,sans-serif!important;font-size:clamp(27px,4vw,38px)!important;font-weight:600!important;letter-spacing:-1.3px!important;text-align:center}
.composer-zone{padding:12px 20px calc(18px + env(safe-area-inset-bottom))}
.composer{width:min(820px,100%);margin:0 auto;border-radius:9999px!important;padding:9px 12px!important;background:#fff!important;border:1px solid rgba(100,110,125,.18)!important;box-shadow:0 5px 24px rgba(30,40,55,.10)!important;display:flex;align-items:center;gap:8px;min-height:62px}
.composer textarea{flex:1;min-width:0;min-height:40px!important;max-height:160px;padding:10px 4px!important;resize:none;background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important}
.composer-bottom{display:flex;align-items:center;flex:0 0 auto;gap:8px;margin:0!important}
.composer-tools{display:flex;align-items:center;gap:7px}
.composer-tools .plus-menu-button{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--surface-soft)}
.composer-right{display:flex;align-items:center;gap:6px}
.composer-right .send-button{width:38px;height:38px;flex:0 0 38px;border-radius:50%}
.composer .connector-pills,.composer .model-chip,.composer-hint,.quick-tags{display:none!important}
@media(max-width:760px){
 .topbar{min-height:58px;padding:0 14px;gap:10px}
 .topbar-model-chip{max-width:calc(100vw - 124px);height:35px;font-size:12px}
 .welcome{min-height:calc(54vh - 35px);padding:22px 12px}
 .composer-zone{padding:8px 12px calc(12px + env(safe-area-inset-bottom))}
 .composer{min-height:56px;padding:7px 9px!important;gap:5px}
 .composer textarea{font-size:14px!important;padding:8px 2px!important}
 .composer-tools .plus-menu-button,.composer-right .send-button{width:35px;height:35px;flex-basis:35px}
}

/* Compact, functional voice controls injected by the existing voice controller. */
.composer-voice-button{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--surface-soft);color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.composer-voice-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer-voice-button:hover,.composer-voice-button.is-active{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--line)}
@media(max-width:760px){.composer-voice-button{width:34px;height:34px;flex-basis:34px}.composer-voice-button svg{width:16px;height:16px}}


/* Repair composer row: attachment | flexible prompt | voice/send actions. */
#chatForm.composer{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
  width:min(820px,100%)!important;
  min-width:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#chatForm.composer .attachment-tray{width:100%;min-width:0;box-sizing:border-box}
#chatForm.composer .composer-bottom{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#chatForm.composer .composer-tools,
#chatForm.composer .composer-right{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
}
#chatForm.composer #promptInput{
  display:block!important;
  flex:1 1 0%!important;
  width:0!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:40px!important;
  max-height:140px!important;
  margin:0!important;
  padding:9px 2px!important;
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
  resize:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.45!important;
  box-sizing:border-box!important;
}
#chatForm.composer .plus-menu-button,
#chatForm.composer .send-button,
#chatForm.composer .composer-voice-button{
  display:grid;
  place-items:center;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}
#chatForm.composer .composer-right{margin-left:auto!important}
@media(max-width:520px){
 #chatForm.composer{padding:8px 10px!important}
 #chatForm.composer .composer-bottom{gap:7px!important}
 #chatForm.composer .plus-menu-button,
 #chatForm.composer .send-button,
 #chatForm.composer .composer-voice-button{flex-basis:34px!important;width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important}
 #chatForm.composer #promptInput{font-size:14px!important;padding:7px 1px!important}
}


/* Stable composer layout: fixed action columns + a genuinely flexible input. */
#chatForm.composer{
  display:block!important;
  width:min(820px,100%)!important;
  max-width:820px!important;
  min-width:0!important;
  padding:9px 12px!important;
  border-radius:999px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#chatForm.composer .composer-bottom{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  grid-template-rows:minmax(40px,auto)!important;
  align-items:center!important;
  justify-items:stretch!important;
  column-gap:10px!important;
  row-gap:0!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#chatForm.composer .composer-tools{
  grid-column:1!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  margin:0!important;
  padding:0!important;
}
#chatForm.composer #promptInput{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:none!important;
  margin:0!important;
  padding:9px 2px!important;
  height:auto!important;
  min-height:40px!important;
  max-height:140px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  resize:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  line-height:1.45!important;
  background:transparent!important;
  box-sizing:border-box!important;
}
#chatForm.composer .composer-right{
  grid-column:3!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
}
#chatForm.composer .plus-menu-button,
#chatForm.composer .composer-voice-button,
#chatForm.composer .send-button{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#chatForm.composer .attachment-tray{grid-column:1/-1;width:100%;min-width:0}
@media(max-width:520px){
  #chatForm.composer{padding:7px 9px!important}
  #chatForm.composer .composer-bottom{
    grid-template-columns:34px minmax(0,1fr) auto!important;
    column-gap:6px!important;
  }
  #chatForm.composer .composer-tools{
    width:34px!important;min-width:34px!important;max-width:34px!important;
  }
  #chatForm.composer .plus-menu-button,
  #chatForm.composer .composer-voice-button,
  #chatForm.composer .send-button{
    flex-basis:32px!important;width:32px!important;min-width:32px!important;max-width:32px!important;
    height:32px!important;min-height:32px!important;max-height:32px!important;
  }
  #chatForm.composer .composer-right{gap:3px!important}
  #chatForm.composer #promptInput{font-size:14px!important;padding:7px 1px!important}
}


/* On phones, keep chat scrolling touch-native without showing a desktop scrollbar.
   Desktop retains its visible scrollbar for precise pointer dragging. */
@media (max-width: 760px) {
  #chatView .chat-scroll,
  #chatView #messages {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  #chatView .chat-scroll::-webkit-scrollbar,
  #chatView #messages::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}


/* CodeForge Gemini-inspired chat refresh */
#chatView {
  background:
    radial-gradient(ellipse 80% 34% at 50% 0%, rgba(117, 151, 255, .13), transparent 74%),
    radial-gradient(ellipse 75% 24% at 50% 100%, rgba(170, 137, 255, .10), transparent 72%),
    linear-gradient(180deg, #f6f8ff 0%, #fbfbfd 34%, #ffffff 68%, #faf9ff 100%);
}
#chatView .chat-scroll { background: transparent; }
#chatView .composer-zone {
  width: min(820px, calc(100% - 36px));
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
}
#chatView .composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(110, 119, 145, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 30px rgba(40, 49, 78, .09), 0 1px 3px rgba(40, 49, 78, .05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#chatView .composer:focus-within {
  border-color: rgba(91, 112, 220, .38);
  box-shadow: 0 10px 34px rgba(57, 76, 151, .12), 0 0 0 3px rgba(91, 112, 220, .06);
}
#chatView .composer-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
#chatView .composer-tools,
#chatView .composer-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}
#chatView .composer-tool,
#chatView .composer-voice-button,
#chatView .send-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
}
#chatView .composer-tool {
  border: 0;
  background: #f1f3f9;
  color: #4c5670;
  font-size: 22px;
}
#chatView .composer-voice-button {
  border: 0;
  background: transparent;
  color: #66708a;
}
#chatView .composer-voice-button:hover,
#chatView .composer-tool:hover { background: #edf0fa; color: #354aab; }
#chatView .composer-voice-button.is-active {
  color: #425bd5;
  background: #edf0ff;
}
#chatView .composer-voice-button svg,
#chatView .send-button svg { width: 19px; height: 19px; }
#chatView .composer textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  max-height: 144px;
  margin: 0;
  padding: 9px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
  scrollbar-width: none;
}
#chatView .composer textarea::-webkit-scrollbar { display: none; }
#chatView .send-button {
  border: 0;
  background: #5269d8;
  color: #fff;
  box-shadow: 0 3px 9px rgba(82, 105, 216, .22);
}
#chatView .send-button:hover { background: #4058c8; }
#chatView .attachment-tray:not([hidden]) {
  max-width: 100%;
  padding: 4px 7px 7px;
  overflow-x: auto;
}
#chatView .message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  opacity: .72;
}
#chatView .message-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  opacity: .72;
  transition: background .16s ease, opacity .16s ease, color .16s ease;
}
#chatView .message-action-icon svg { width: 14px; height: 14px; }
#chatView .message-action-icon:hover {
  opacity: 1;
  color: var(--text);
  background: rgba(115, 126, 158, .10);
}
.sidebar .sidebar-usage { order: 9; }
.sidebar .sidebar-upgrade { order: 10; margin-top: 8px; }
.sidebar .sidebar-spacer { order: 11; min-height: 12px; }
.sidebar .sidebar-profile-wrap { order: 12; }
.sidebar .sidebar-upgrade {
  border: 1px solid rgba(119, 135, 220, .20);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(234, 239, 255, .96), rgba(246, 239, 255, .96));
  box-shadow: 0 5px 18px rgba(71, 82, 140, .06);
}
.sidebar .recent-list {
  min-height: 72px;
  max-height: min(32vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar .recent-chat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-view { width: min(960px, 100%); margin: 0 auto; padding: 34px 28px; }
.library-empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 620px;
  margin-top: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 32px rgba(30, 40, 80, .05);
}
.library-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #eef1ff;
  color: #5368cc;
  font-size: 24px;
}
.library-empty-card h2 { margin: 4px 0 0; font-size: 20px; }
.library-empty-card p { max-width: 490px; margin: 0; color: var(--muted); line-height: 1.65; }
.library-empty-card .button-primary { min-height: 42px; padding: 0 17px; border-radius: 999px; }
@media (max-width: 760px) {
  #chatView .composer-zone { width: calc(100% - 20px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #chatView .composer { padding: 7px 8px; }
  #chatView .composer-tools, #chatView .composer-right { gap: 3px; }
  #chatView .composer-tool, #chatView .composer-voice-button, #chatView .send-button {
    width: 34px; height: 34px; min-width: 34px;
  }
  #chatView .composer textarea { min-height: 36px; padding: 8px 1px; font-size: 15px; }
  #chatView .message-actions { gap: 3px; }
  .library-view { padding: 24px 16px; }
  .library-empty-card { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #chatView .message-action-icon { transition: none; }
}

/* Keep the primary navigation focused on the four workspace destinations. */
.sidebar .side-nav [data-view="chat"] { display: none; }


/* CodeForge workspace polish — Gemini-inspired, using the existing CodeForge palette. */
.app-shell { --cf-nav-accent: #596bd4; }
.sidebar { display:flex; flex-direction:column; gap:0; padding:20px 14px 14px; background:var(--sidebar,#f7f8fc); border-right:1px solid var(--line,rgba(82,94,130,.12)); }
.sidebar .brand { margin:0 8px 24px; min-height:34px; }
.sidebar .new-chat { width:100%; min-height:44px; margin:0 0 24px; justify-content:flex-start; border-radius:14px; background:linear-gradient(110deg,rgba(88,109,214,.12),rgba(128,111,205,.09)); border:1px solid rgba(92,108,202,.14); color:var(--text); box-shadow:none; }
.sidebar .new-chat:hover { background:linear-gradient(110deg,rgba(88,109,214,.18),rgba(128,111,205,.13)); }
.sidebar .nav-caption { margin:0 10px 9px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.12em; }
.sidebar .side-nav { display:grid; gap:4px; margin:0 0 22px; }
.sidebar .side-nav .nav-item { display:flex; align-items:center; gap:13px; width:100%; min-height:42px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--muted); text-align:left; font-size:13px; font-weight:560; transition:background .16s ease,color .16s ease; }
.sidebar .side-nav .nav-item:hover { background:rgba(91,108,205,.08); color:var(--text); }
.sidebar .side-nav .nav-item.active { background:rgba(91,108,205,.12); color:var(--cf-nav-accent); font-weight:700; }
.sidebar .nav-icon { display:inline-grid; place-items:center; width:19px; font-size:17px; }
.sidebar .recent-caption { margin-top:2px; }
.sidebar .recent-list { flex:1 1 auto; min-height:72px; max-height:none; margin:0 2px; padding:2px 0 10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.sidebar .recent-chat { width:100%; min-height:36px; padding:7px 10px; border-radius:9px; color:var(--muted); text-align:left; font-size:12px; }
.sidebar .recent-chat:hover { background:rgba(91,108,205,.07); color:var(--text); }
.sidebar .sidebar-usage { order:20; margin:8px 0 0; }
.sidebar .sidebar-upgrade { order:21; display:flex; align-items:center; min-height:62px; margin:10px 0; padding:10px 12px; border:1px solid rgba(112,122,207,.18); border-radius:15px; background:linear-gradient(120deg,rgba(229,235,255,.96),rgba(245,235,255,.96)); box-shadow:0 5px 18px rgba(70,80,135,.06); }
.sidebar .sidebar-spacer { order:22; flex:0 0 0; min-height:0; }
.sidebar .sidebar-profile-wrap { order:23; margin-top:auto; padding-top:10px; border-top:1px solid var(--line,rgba(82,94,130,.12)); }
.sidebar .profile-button { min-width:0; width:100%; padding:9px 7px; border-radius:12px; }
.sidebar .profile-copy { min-width:0; }
.sidebar .profile-copy strong,.sidebar .profile-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#chatView { background:radial-gradient(ellipse 76% 38% at 50% 100%,rgba(109,126,226,.13),transparent 72%),radial-gradient(ellipse 80% 28% at 50% 0%,rgba(134,171,235,.10),transparent 74%),linear-gradient(180deg,#fbfcff 0%,#f8f9ff 52%,#f5f6ff 100%); }
#chatView .chat-scroll { background:transparent; }
#chatView .composer-zone { width:min(820px,calc(100% - 36px)); }
#chatView .composer { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px solid rgba(103,115,153,.20); border-radius:999px; background:rgba(255,255,255,.97); box-shadow:0 8px 28px rgba(48,58,103,.09),0 1px 3px rgba(48,58,103,.04); }
#chatView .composer-bottom { display:flex; align-items:center; gap:8px; min-width:0; }
#chatView .composer-tools,#chatView .composer-right { display:flex; flex:0 0 auto; align-items:center; gap:5px; }
#chatView .composer-tool,#chatView .composer-voice-button,#chatView .send-button { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; border-radius:50%; }
#chatView .composer textarea { flex:1 1 auto; width:100%; min-width:0; min-height:38px; max-height:120px; margin:0; padding:9px 3px; border:0; border-radius:0; background:transparent; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow-x:hidden; scrollbar-width:none; }
#chatView .composer textarea:focus { outline:none; box-shadow:none; }
#chatView .message-actions { gap:4px; margin-top:8px; opacity:.58; }
#chatView .message-action-icon { width:27px; height:27px; min-width:27px; opacity:.68; }
#chatView .message-action-icon:hover,#chatView .message-action-icon:focus-visible { opacity:1; }
@media(max-width:760px) {
 .sidebar { padding:18px 13px max(14px,env(safe-area-inset-bottom)); }
 .sidebar .recent-list { max-height:28vh; flex:1 1 auto; }
 .sidebar .sidebar-usage { display:none; }
 .sidebar .sidebar-upgrade { min-height:56px; margin:8px 0; }
 #chatView .composer-zone { width:calc(100% - 20px); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
 #chatView .composer { padding:7px 8px; }
 #chatView .composer-tools,#chatView .composer-right { gap:3px; }
 #chatView .composer-tool,#chatView .composer-voice-button,#chatView .send-button { width:34px; height:34px; min-width:34px; }
}
@media(prefers-reduced-motion:reduce) { .sidebar .side-nav .nav-item { transition:none; } }

/* User message actions appear only after a deliberate long-press. */
.user-copy-menu{display:flex;justify-content:flex-end;margin-top:6px}
.user-copy-menu[hidden]{display:none!important}
.user-copy-button,.user-copy-menu .message-action-icon{font-size:11px;padding:4px 9px;width:auto;height:27px;border:1px solid var(--line);background:var(--surface);border-radius:7px;color:var(--muted)}
.message.user .user-copy-menu{opacity:0;visibility:hidden;pointer-events:none}
.message.user.user-copy-visible .user-copy-menu{opacity:1;visibility:visible;pointer-events:auto}


/* Gemini-inspired drawer footer and scrollable navigation layout */
.sidebar{display:flex;flex-direction:column;gap:0;height:100dvh;min-height:0;overflow:hidden;padding:16px 13px max(12px,env(safe-area-inset-bottom));background:var(--sidebar);border-right:1px solid var(--line)}
.sidebar .brand{flex:0 0 auto;margin:0 7px 18px;padding:2px 8px 8px;min-height:34px}
.sidebar .new-chat{flex:0 0 auto;min-height:42px;margin:0 0 14px;border-radius:22px;padding:0 15px;background:var(--surface-soft);border:1px solid var(--line);box-shadow:none}
.sidebar .new-chat:hover{background:var(--surface)}
.sidebar-scroll-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 1px 10px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.sidebar-scroll-content>.sidebar-usage{flex:0 0 auto;margin:2px 1px 14px}
.sidebar-scroll-content>.nav-caption{flex:0 0 auto;margin:8px 10px}
.sidebar-scroll-content>.side-nav{flex:0 0 auto;display:grid;gap:3px;margin:0 0 14px}
.sidebar-scroll-content .nav-item{min-height:40px;padding:0 12px;border:0;border-radius:20px;font-size:13px;gap:13px}
.sidebar-scroll-content .nav-item:hover{background:var(--surface-soft)}
.sidebar-scroll-content .nav-item.active{background:var(--accent-soft)}
.sidebar-scroll-content .recent-caption{margin:12px 10px 7px}
.sidebar-scroll-content .recent-list{display:flex;flex:1 1 auto;flex-direction:column;min-height:50px;max-height:none;gap:2px;overflow-y:auto;padding:2px 2px 12px}
.sidebar-scroll-content .recent-chat{width:100%;min-height:37px;padding:8px 11px;border-radius:18px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer{display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:8px;flex:0 0 auto;margin-top:8px;padding:10px 1px 0;border-top:1px solid var(--line);background:var(--sidebar)}
.sidebar-footer .profile-button{display:flex;min-width:0;width:100%;min-height:42px;padding:4px 5px;border:0;background:transparent;gap:8px;border-radius:22px}
.sidebar-footer .profile-button:hover{background:var(--surface-soft)}
.sidebar-footer .profile-button .avatar{width:31px;height:31px;flex:0 0 31px}
.sidebar-footer .profile-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sidebar-footer .profile-copy strong{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer .profile-copy small{display:none}
.sidebar-footer .sidebar-upgrade{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:82px;min-height:35px;margin:0;padding:0 13px;border:0;border-radius:999px;background:linear-gradient(110deg,#8ec5ff 0%,#6aa8f5 55%,#7c91f4 100%);box-shadow:0 3px 10px rgba(85,145,230,.18);color:#123b69;font-size:12px;font-weight:700;white-space:nowrap}
.sidebar-footer .sidebar-upgrade:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 5px 13px rgba(85,145,230,.24)}
.sidebar-settings-button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);transition:background .16s,color .16s}
.sidebar-settings-button:hover{background:var(--surface-soft);color:var(--text)}
.sidebar-settings-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.sidebar{width:min(310px,88vw);min-width:min(310px,88vw);padding:17px 14px max(13px,env(safe-area-inset-bottom))}.sidebar .brand{margin-bottom:17px}.sidebar-footer{grid-template-columns:minmax(0,1fr) auto 38px;gap:7px}.sidebar-footer .profile-copy strong{font-size:11px}.sidebar-footer .sidebar-upgrade{min-height:35px;min-width:78px;padding:0 11px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar .new-chat,.sidebar-footer .sidebar-upgrade,.sidebar-settings-button{transition:none!important}}


/* Final mobile drawer sizing and footer alignment refinements */
@media(max-width:760px){
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;
    width:min(85vw,24rem);max-width:24rem;min-width:0;
    height:100dvh;max-height:100dvh;box-sizing:border-box;
    padding:16px 14px max(12px,env(safe-area-inset-bottom));
    overflow:hidden;transform:translateX(-105%);
    z-index:60;flex:0 0 auto;
  }
  .sidebar.open{transform:translateX(0)}
  .app-shell.sidebar-collapsed .sidebar{width:min(85vw,24rem);min-width:0;flex-basis:auto}
  .sidebar-scroll-content{
    flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;
    overscroll-behavior:contain;scrollbar-gutter:stable;
    padding:0 2px 14px;
  }
  .sidebar-scroll-content .recent-list{
    flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;
    padding-bottom:16px;
  }
  .sidebar-footer{
    width:100%;min-width:0;box-sizing:border-box;
    grid-template-columns:minmax(0,1fr) auto 36px;
    gap:6px;padding:9px 0 0;margin-top:6px;
  }
  .sidebar-footer .profile-button{min-width:0;overflow:hidden}
  .sidebar-footer .profile-copy{min-width:0;overflow:hidden}
  .sidebar-footer .profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar-footer .sidebar-upgrade{min-width:76px;max-width:94px;padding-inline:10px}
  .sidebar-settings-button{width:36px;height:36px;min-width:36px;padding:0;box-sizing:border-box}
  .sidebar-settings-button svg{display:block;width:20px;height:20px;overflow:visible}
  .sidebar-overlay{position:fixed;inset:0;width:100%;height:100dvh;z-index:55}
}
@media(max-width:360px){
  .sidebar{padding-inline:11px}
  .sidebar-footer{grid-template-columns:minmax(0,1fr) auto 34px;gap:4px}
  .sidebar-footer .sidebar-upgrade{min-width:70px;padding-inline:8px;font-size:11px}
  .sidebar-settings-button{width:34px;height:34px;min-width:34px}
}


/* CodeForge clean chat refresh — visual-only overrides; preserve all existing controls and behavior */
:root{
  --bg:#ffffff;--sidebar:#ffffff;--surface:#ffffff;--surface-soft:#f7f8fc;
  --line:#eceef3;--line-strong:#e2e5ed;--text:#171923;--muted:#686d7a;--subtle:#9a9eaa;
  --accent:#4d6fe8;--accent-strong:#3f5fd0;--accent-soft:#eef2ff;
  --radius:18px;--shadow:0 10px 34px rgba(25,35,70,.07);
}
:root[data-theme="dark"]{
  --bg:#111318;--sidebar:#111318;--surface:#191c24;--surface-soft:#202430;
  --line:#2a2e3a;--line-strong:#363b49;--text:#f4f5f8;--muted:#b2b7c4;--subtle:#858b99;
  --accent:#7892ff;--accent-strong:#91a5ff;--accent-soft:#252e4c;--shadow:0 10px 34px rgba(0,0,0,.24);
}
html,body{background:var(--bg);color:var(--text)}
.sidebar{background:var(--sidebar);border-right-color:var(--line)}
.brand{padding-bottom:24px}
.brand-wordmark{letter-spacing:-.7px}
.new-chat{height:43px;border-radius:13px;border-color:var(--line);box-shadow:0 2px 8px rgba(20,30,60,.025)}
.nav-item{border-radius:11px;padding:10px 11px}
.nav-item.active{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.nav-item.active .nav-icon{color:var(--accent)}
.topbar{height:64px;padding:0 26px;background:var(--bg);border-bottom-color:var(--line)}
.icon-button,.sidebar-toggle,.header-profile-button{border-radius:50%;border-color:transparent;background:transparent}
.icon-button:hover,.sidebar-toggle:hover,.header-profile-button:hover{background:var(--surface-soft)}
.model-chip{border-radius:999px;padding:8px 12px;border-color:var(--line);background:var(--surface);font-size:12px}
.model-dot{background:var(--accent)}
.chat-scroll{padding:24px 24px 12px}
.hero-greeting{font-family:'Manrope',system-ui,sans-serif!important;font-weight:750!important;font-size:clamp(27px,3vw,36px)!important;letter-spacing:-1.15px!important}
.hero-mark{width:48px;height:48px}
.composer-zone{width:min(790px,calc(100% - 40px));padding:12px 0 16px}
.composer{border:1px solid var(--line);border-radius:28px;padding:17px 18px 13px;box-shadow:0 8px 30px rgba(24,34,65,.075);background:var(--surface)}
.composer:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.composer textarea{min-height:42px;padding:1px 2px 9px;font-size:15px;line-height:1.55}
.composer textarea::placeholder{color:#a5a8b2}
.composer-bottom{align-items:center;gap:10px}
.composer-tools,.composer-right{gap:9px}
.composer-tool{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);font-size:24px;color:var(--text);background:var(--surface)}
.composer-tool:hover{background:var(--surface-soft);border-color:var(--line-strong)}
.send-button{width:42px;height:42px;border-radius:50%;background:var(--accent)}
.send-button:hover{background:var(--accent-strong)}
.send-button svg{width:19px;height:19px}
.connector-pills{gap:8px;margin-left:2px}
.connector-pill{height:38px;padding:0 13px;border-radius:999px;border-color:var(--line);background:var(--surface-soft);font-size:12px}
.connector-pill:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft)}
.quick-tags{gap:8px;margin-top:11px}
.quick-tag{border-radius:999px;border-color:var(--line);background:var(--surface);padding:8px 12px;color:var(--muted)}
.quick-tag:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft);color:var(--accent)}
.disclaimer{font-size:10px;color:var(--subtle);margin-top:10px}
.plus-menu{border-radius:18px;border-color:var(--line);box-shadow:0 12px 36px rgba(25,35,70,.12)}
.modal,.settings-card,.connection-banner,.coming-card,.info-panel{border-radius:18px}
.button-primary{background:var(--accent);border-color:var(--accent);border-radius:999px}
.button-secondary{border-radius:999px}
.toast{border-radius:999px}
@media(max-width:720px){
  .topbar{height:58px;padding:0 16px;border-bottom-color:transparent}
  .breadcrumb{display:none}
  .topbar-actions{margin-left:auto}
  .chat-scroll{padding:12px 18px 8px}
  .hero-greeting{font-size:27px!important;letter-spacing:-.8px!important}
  .hero-mark{width:44px;height:44px}
  .composer-zone{width:calc(100% - 28px);padding:8px 0 max(12px,env(safe-area-inset-bottom))}
  .composer{border-radius:27px;padding:15px 15px 12px;box-shadow:0 8px 28px rgba(24,34,65,.09)}
  .composer textarea{min-height:39px;font-size:15px}
  .composer-bottom{gap:8px}
  .composer-tool,.send-button{width:40px;height:40px}
  .connector-pills{gap:6px}
  .connector-pill{height:36px;padding:0 11px 0 8px;font-size:12px}
  .quick-tags{gap:7px;margin-top:9px;overflow-x:auto;flex-wrap:nowrap;padding:1px 1px 3px;scrollbar-width:none}
  .quick-tags::-webkit-scrollbar{display:none}
  .quick-tag{white-space:nowrap;flex:0 0 auto;padding:8px 11px;font-size:11px}
  .disclaimer{font-size:9px;margin-top:8px}
  .sidebar{box-shadow:12px 0 35px rgba(20,30,60,.08)}
}

/* Composer follows the reference's two-level search/chat field layout */
.composer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:9px}
.composer textarea{grid-column:1 / -1;grid-row:1;width:100%}
.composer-tools{grid-column:1;grid-row:2;min-width:0;flex-wrap:wrap}
.composer-right{grid-column:2;grid-row:2;justify-self:end}
@media(max-width:720px){
  .composer-bottom{grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px}
  .composer-tools{overflow:visible}
}


/* Mobile drawer: keep every footer action fully inside the drawer */
@media(max-width:760px){
  .sidebar{
    width:min(90vw,26rem)!important;
    min-width:0!important;
    max-width:26rem!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .sidebar-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 36px max-content!important;
    align-items:center!important;
    column-gap:8px!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-inline:0!important;
  }
  .sidebar-footer .profile-button{
    grid-column:1;min-width:0!important;width:100%!important;
    overflow:hidden!important;
  }
  .sidebar-footer .sidebar-settings-button{
    grid-column:2;justify-self:center;width:36px!important;
    min-width:36px!important;
  }
  .sidebar-footer .sidebar-upgrade{
    grid-column:3;justify-self:end;
    width:max-content!important;min-width:0!important;max-width:100%!important;
    padding-inline:12px!important;white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}
@media(max-width:380px){
  .sidebar{width:94vw!important}
  .sidebar-footer{column-gap:5px!important;grid-template-columns:minmax(0,1fr) 32px max-content!important}
  .sidebar-footer .sidebar-settings-button{width:32px!important;min-width:32px!important}
  .sidebar-footer .sidebar-upgrade{padding-inline:9px!important;font-size:10px!important}
}

.project-zip-result{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:380px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:0 5px 20px rgba(20,25,35,.06)}
.project-zip-result strong{font-size:13px;font-weight:700;color:var(--text)}
.project-zip-result span{font-size:11px;color:var(--muted)}
.project-zip-result a{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-size:12px;font-weight:600}
.project-zip-result a:hover{filter:brightness(.96)}
@media(max-width:520px){.project-zip-result{max-width:100%;width:100%}}


/* CodeForge chat UI refresh — clean white canvas, with existing controls preserved. */
html, body {
  height: 100%;
  background: #fff;
}
.app-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: #fff;
}
.sidebar {
  height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  padding: 19px 14px max(13px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: #fff;
  border-right: 1px solid #eceef1;
}
.sidebar .brand {
  flex: 0 0 auto;
  margin: 0 7px 18px;
  padding: 2px 8px 8px;
}
.sidebar-scroll-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 2px 12px;
}
.sidebar-scroll-content .recent-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-bottom: 14px;
}
.sidebar-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px max-content;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: auto;
  padding: 10px 0 0;
  border-top: 1px solid #eceef1;
  background: #fff;
}
.sidebar-footer .profile-button {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.sidebar-footer .profile-copy,
.sidebar-footer .profile-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-footer .sidebar-settings-button {
  grid-column: 2;
  justify-self: center;
  width: 36px;
  min-width: 36px;
}
.sidebar-footer .sidebar-upgrade {
  grid-column: 3;
  justify-self: end;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-inline: 12px;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #e8eaf0;
  border-radius: 999px;
  background: #f7f8fa;
  color: #343842;
  box-shadow: none;
}
.sidebar-footer .sidebar-upgrade:hover {
  background: #f0f2f5;
  transform: none;
  box-shadow: none;
}
.main-area {
  height: 100dvh;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: #fff;
}
.main-area:has(#chatView.active-view) {
  background: #fff;
}
.main-area:has(#chatView.active-view) .topbar {
  background: #fff;
  border-bottom: 1px solid #f0f1f3;
}
#chatView.active-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: #fff;
  color: #202124;
  --bg: #fff;
  --surface: #fff;
  --surface-soft: #f6f7f9;
  --line: #e8eaee;
  --line-strong: #dfe3e8;
  --text: #202124;
  --muted: #5f6368;
  --subtle: #8a9099;
  --accent: #5369d8;
  --accent-strong: #4058c8;
  --accent-soft: #f1f3f8;
}
#chatView .chat-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 24px 12px;
  background: #fff;
  overscroll-behavior: contain;
}
#chatView:not(.has-messages) .chat-scroll {
  padding-bottom: 145px;
}
#chatView .welcome {
  width: min(900px, 100%);
  min-height: clamp(250px, 47vh, 470px);
  margin: 0 auto;
  padding: 24px 18px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
}
#chatView .hero-brand-mark {
  width: 48px;
  height: 48px;
  margin: 0;
}
#chatView .hero-mark {
  width: 46px;
  height: 46px;
}
#chatView .hero-greeting {
  margin: 0 !important;
  color: #202124 !important;
  font-family: 'Manrope', 'DM Sans', system-ui, sans-serif !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -1.1px !important;
  line-height: 1.18 !important;
}
#chatView .composer-zone {
  z-index: 5;
  width: min(790px, calc(100% - 40px));
  padding: 12px 0 16px;
}
#chatView:not(.has-messages) .composer-zone {
  position: absolute;
  top: 70%;
  left: 50%;
  width: min(790px, calc(100% - 40px));
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
}
#chatView.has-messages .chat-scroll {
  justify-content: flex-end;
}
#chatView.has-messages #messages {
  width: min(900px, 100%);
  max-width: 100%;
  margin-inline: auto;
  padding: 16px 0 10px;
}
#chatView.has-messages .composer-zone {
  position: relative;
  top: auto;
  left: auto;
  width: min(790px, calc(100% - 40px));
  margin: 0 auto;
  padding: 8px 0 max(14px, env(safe-area-inset-bottom));
  transform: none;
}
#chatView .composer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 13px 15px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(18, 24, 40, .055);
}
#chatView .composer:focus-within {
  border-color: #cfd4df;
  box-shadow: 0 8px 27px rgba(18, 24, 40, .075);
}
#chatView .composer textarea {
  min-height: 38px;
  max-height: 150px;
  padding: 7px 2px 9px;
  color: #202124;
  font-size: 15px;
  line-height: 1.55;
}
#chatView .composer textarea::placeholder {
  color: #9297a1;
}
#chatView .composer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  row-gap: 8px;
  min-width: 0;
}
#chatView .composer-tools,
#chatView .composer-right {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
#chatView .composer-tool {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border: 1px solid #e8eaee;
  border-radius: 50%;
  background: #fff;
  color: #454a54;
}
#chatView .composer-tool:hover {
  background: #f6f7f9;
  border-color: #dfe3e8;
}
#chatView .send-button {
  width: 39px;
  height: 39px;
  min-width: 39px;
  border: 0;
  border-radius: 50%;
  background: #252932;
  color: #fff;
  box-shadow: none;
}
#chatView .send-button:hover {
  background: #11151c;
}
#chatView .send-button svg {
  width: 18px;
  height: 18px;
}
#chatView .quick-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
}
#chatView .quick-tag {
  padding: 7px 11px;
  border: 1px solid #eceef1;
  border-radius: 999px;
  background: #fff;
  color: #626873;
  font-size: 11px;
  box-shadow: none;
}
#chatView .quick-tag:hover {
  border-color: #dfe3e8;
  background: #f7f8fa;
  color: #30343b;
}
#chatView .disclaimer {
  display: none;
}
#chatView .message-content {
  max-width: min(790px, 94%);
}
#chatView .message-text {
  color: #272a30;
  font-size: 15px;
  line-height: 1.75;
}
#chatView .message.user .message-content {
  border: 1px solid #eceef1;
  border-radius: 17px 17px 5px 17px;
  background: #f5f6f8;
  color: #202124;
}
#chatView .message-avatar {
  border: 1px solid #eceef1;
  background: #f7f8fa;
  color: #626873;
}
#chatView .message-actions {
  opacity: .7;
}
#chatView .message-action-icon {
  color: #717783;
}
#chatView .message-action-icon:hover {
  background: #f1f2f4;
  color: #252932;
}
#chatView .plus-menu {
  border: 1px solid #e8eaee;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 24, 40, .12);
}
#chatView .attachment-tray:not([hidden]) {
  max-width: 100%;
  overflow-x: auto;
}
@media (max-width: 760px) {
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 26rem) !important;
    max-width: 26rem !important;
    min-width: 0 !important;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 16px 13px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
    z-index: 60;
    transform: translateX(-105%);
    background: #fff;
    box-shadow: 12px 0 32px rgba(25, 32, 48, .10);
  }
  .sidebar.open,
  .app-shell.sidebar-collapsed .sidebar.open {
    transform: translateX(0);
  }
  .app-shell.sidebar-collapsed .sidebar > * {
    visibility: visible;
  }
  .sidebar-scroll-content {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 2px 14px;
  }
  .sidebar-scroll-content .recent-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-bottom: 14px;
  }
  .sidebar-footer {
    grid-template-columns: minmax(0, 1fr) 34px max-content !important;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 9px 0 max(1px, env(safe-area-inset-bottom));
    margin-top: auto;
  }
  .sidebar-footer .sidebar-settings-button {
    width: 34px;
    min-width: 34px;
    height: 36px;
  }
  .sidebar-footer .sidebar-upgrade {
    max-width: 94px;
    padding-inline: 9px;
    font-size: 11px;
  }
  #chatView .chat-scroll {
    padding: 12px 16px 8px;
  }
  #chatView:not(.has-messages) .chat-scroll {
    padding-bottom: 140px;
  }
  #chatView .welcome {
    min-height: clamp(220px, 42vh, 390px);
    padding: 18px 10px;
    gap: 13px;
  }
  #chatView .hero-greeting {
    font-size: clamp(25px, 6vw, 30px) !important;
    letter-spacing: -.8px !important;
  }
  #chatView .composer-zone,
  #chatView:not(.has-messages) .composer-zone {
    width: calc(100% - 28px);
  }
  #chatView:not(.has-messages) .composer-zone {
    top: 71%;
  }
  #chatView.has-messages .composer-zone {
    width: calc(100% - 20px);
    padding: 6px 0 max(12px, env(safe-area-inset-bottom));
  }
  #chatView .composer {
    padding: 10px 11px 9px;
    border-radius: 21px;
  }
  #chatView .composer textarea {
    min-height: 36px;
    font-size: 15px;
  }
  #chatView .composer-tools,
  #chatView .composer-right {
    gap: 5px;
  }
  #chatView .composer-tool,
  #chatView .send-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  #chatView .quick-tags {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: none;
  }
  #chatView .quick-tags::-webkit-scrollbar {
    display: none;
  }
  #chatView .quick-tag {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .sidebar-footer {
    grid-template-columns: minmax(0, 1fr) 32px max-content !important;
    gap: 4px;
  }
  .sidebar-footer .sidebar-settings-button {
    width: 32px;
    min-width: 32px;
  }
  #chatView .composer {
    padding: 9px 9px 8px;
  }
  #chatView .composer-tools,
  #chatView .composer-right {
    gap: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  #chatView .message-action-icon {
    transition: none !important;
  }
}


/* Warm CodeForge finish — white workspace, copper send action and a compact account menu. */
:root {
  --accent: #c96e43;
  --accent-strong: #b85d35;
  --accent-soft: #fbf1eb;
}
:root[data-theme="dark"] {
  --accent: #dc8a60;
  --accent-strong: #eba17a;
  --accent-soft: #3b2b25;
}
.sidebar,
.sidebar-footer {
  background: #fff;
  border-color: #eee9e3;
}
.sidebar .brand-wordmark b {
  color: #c96e43;
}
.sidebar .nav-caption,
.sidebar-scroll-content .recent-caption,
.profile-menu-section-label {
  color: #a87838;
  font-weight: 750;
  letter-spacing: .13em;
}
.sidebar .side-nav .nav-item {
  color: #74624e;
}
.sidebar .side-nav .nav-icon {
  color: #ad8755;
}
.sidebar .side-nav .nav-item:hover {
  background: #faf6f1;
  color: #5b4935;
}
.sidebar .side-nav .nav-item.active {
  background: #fbf1e8;
  color: #9b632e;
}
.sidebar .side-nav .nav-item.active .nav-icon {
  color: #bb753c;
}
.sidebar-scroll-content .recent-caption {
  display: block;
  flex: 0 0 auto;
  margin: 15px 10px 8px;
}
.sidebar-scroll-content #recentChats,
.sidebar-scroll-content .recent-list {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column;
  gap: 3px;
  min-height: 92px !important;
  max-height: min(36vh, 330px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 2px 12px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.sidebar-scroll-content .recent-chat {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-height: 35px;
  padding: 8px 11px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #5f5549;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.sidebar-scroll-content .recent-chat:hover,
.sidebar-scroll-content .recent-chat:focus-visible {
  background: #faf6f1;
  color: #9b632e;
}
.sidebar-scroll-content .recent-empty {
  display: block;
  min-height: 56px;
  padding: 8px 10px;
  color: #979087;
  font-size: 11px;
  line-height: 1.55;
}
.sidebar-footer .profile-button {
  border-radius: 13px;
  color: #55493c;
}
.sidebar-footer .profile-button:hover {
  background: #faf6f1;
}
.sidebar-footer .profile-button .avatar {
  background: #fbf1e8;
  color: #a65e35;
  border: 1px solid #f0dfd1;
}
.sidebar-footer .sidebar-upgrade {
  border-color: #f0e1d4;
  background: #fff8f2;
  color: #a75f32;
}
.sidebar-footer .sidebar-upgrade:hover {
  background: #fff0e4;
}
.profile-menu-panel {
  position: absolute;
  z-index: 90;
  left: 10px;
  right: 10px;
  bottom: calc(65px + env(safe-area-inset-bottom));
  max-height: min(68vh, 590px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee7df;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(51, 38, 25, .15), 0 2px 8px rgba(51, 38, 25, .05);
  scrollbar-width: thin;
}
.profile-menu-panel[hidden] {
  display: none !important;
}
.profile-menu-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 8px 12px;
  border-bottom: 1px solid #f0ebe5;
}
.profile-menu-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #f0dfd1;
  border-radius: 50%;
  background: #fff5ec;
  color: #a85f36;
  font-size: 12px;
  font-weight: 750;
}
.profile-menu-account-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.profile-menu-account-copy strong {
  overflow: hidden;
  color: #2f2a25;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu-account-copy small {
  overflow: hidden;
  color: #8a8177;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu-plan {
  flex: 0 0 auto;
  max-width: 90px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid #f0e3d5;
  border-radius: 999px;
  background: #fff9f2;
  color: #9a6a36;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu-section-label {
  margin: 11px 9px 5px;
  font-size: 9px;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 37px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #554a3e;
  text-align: left;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}
.profile-menu-item:hover,
.profile-menu-item:focus-visible {
  background: #faf5ee;
  color: #a26032;
}
.profile-menu-icon {
  display: inline-grid;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  color: #b17b43;
  font-size: 15px;
}
.profile-menu-divider {
  height: 1px;
  margin: 7px 4px;
  background: #f0ebe5;
}
.profile-menu-login {
  justify-content: center;
  margin-top: 7px;
  border: 1px solid #f0e0d1;
  background: #fff8f2;
  color: #a85f36;
  font-weight: 700;
}
.profile-menu-login:hover {
  background: #fff0e4;
}
.profile-menu-logout {
  margin-top: 4px;
  color: #91523a;
}
#chatView.active-view {
  background: #fff;
  --accent: #c96e43;
  --accent-strong: #b85d35;
  --accent-soft: #fbf1eb;
}
#chatView .send-button {
  background: #c96e43;
  color: #fff;
  box-shadow: 0 3px 10px rgba(201, 110, 67, .20);
}
#chatView .send-button:hover {
  background: #b85d35;
  box-shadow: 0 4px 13px rgba(184, 93, 53, .25);
}
#chatView .composer:focus-within {
  border-color: #e3c9b8;
  box-shadow: 0 8px 27px rgba(83, 57, 36, .07);
}
#chatView .quick-tag:hover {
  border-color: #edcfbb;
  background: #fff9f5;
  color: #a75f38;
}
@media (max-width: 760px) {
  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    background: #fff;
  }
  .sidebar-scroll-content {
    min-height: 0;
  }
  .sidebar-scroll-content #recentChats,
  .sidebar-scroll-content .recent-list {
    min-height: 92px !important;
    max-height: 32vh !important;
  }
  .profile-menu-panel {
    left: 10px;
    right: 10px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    max-height: min(66dvh, 540px);
    padding: 9px;
  }
  .profile-menu-item {
    min-height: 36px;
  }
}
@media (max-width: 380px) {
  .profile-menu-panel {
    left: 8px;
    right: 8px;
    max-height: 64dvh;
  }
  .profile-menu-account {
    gap: 8px;
    padding-inline: 5px;
  }
  .profile-menu-plan {
    max-width: 76px;
    padding-inline: 6px;
  }
}


/* Keep small warm accent labels readable on the white canvas. */
:root {
  --accent: #b4542d;
  --accent-strong: #9f4726;
  --accent-soft: #fbf0e8;
}
.sidebar .nav-caption,
.sidebar-scroll-content .recent-caption,
.profile-menu-section-label {
  color: #976521;
}
#chatView.active-view {
  --accent: #b4542d;
  --accent-strong: #9f4726;
  --accent-soft: #fbf0e8;
}
#chatView .send-button {
  background: #b4542d;
}
#chatView .send-button:hover {
  background: #9f4726;
}


/* Single top-right control: account login when signed out, one three-dot chat menu at all times. */
.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.topbar-actions .login-button {
  margin-right: 3px;
  border-color: #ead9cc;
  background: #fffaf6;
  color: #9f542f;
}
.topbar-actions .login-button:hover {
  border-color: #d6ae95;
  background: #fff4ec;
  color: #8f4928;
}
.topbar-menu {
  width: 244px;
  max-width: min(244px, calc(100vw - 24px));
  max-height: min(76dvh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 7px;
}
.topbar-menu-item {
  min-height: 40px;
  gap: 11px;
  border-radius: 9px;
  font-size: 12px;
}
.topbar-menu-item .topbar-menu-icon {
  color: #a87543;
}
.topbar-menu-item[data-header-action="delete-chat"] .topbar-menu-icon {
  color: #a34e3f;
}
.topbar-menu-item[data-header-action="delete-chat"]:hover:not(:disabled) {
  background: #fff3ef;
  color: #913d31;
}
.topbar-menu-item[data-chat-action]:disabled {
  opacity: .38;
  cursor: not-allowed;
  background: transparent;
}
.topbar-menu-divider {
  margin: 7px 5px;
  background: #eee8e1;
}
@media (max-width: 760px) {
  .topbar-actions {
    gap: 6px;
  }
  .topbar-actions .login-button {
    min-height: 30px;
    padding-inline: 11px;
    font-size: 11px;
  }
  .topbar-menu {
    width: min(244px, calc(100vw - 20px));
    max-height: min(74dvh, 520px);
  }
}


/* Chat readability: a modest font-size increase with the existing line rhythm. */
#messages .message-text {
  font-size: 16px;
  line-height: 1.82;
}

/* Subtle, truthful work status shown while a request is being processed. */
.cf-activity-card {
  width: min(100%, 520px);
  margin: 0 0 11px;
  padding: 11px 13px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}
.cf-activity-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cf-activity-heading strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: .76;
}
.cf-activity-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.cf-activity-card p {
  margin: 4px 0 9px 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  opacity: .78;
}
.cf-activity-rail {
  height: 3px;
  margin-left: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line-strong) 75%, transparent);
}
.cf-activity-rail span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 45%, var(--surface)) 28%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 45%, var(--surface)) 72%,
    transparent 100%);
  animation: cf-activity-shimmer 1.55s ease-in-out infinite;
}
.cf-activity-card.is-complete {
  padding-bottom: 9px;
  background: transparent;
  border-color: transparent;
  opacity: .68;
}
.cf-activity-card.is-complete p {
  margin-bottom: 0;
}
.cf-activity-card.is-complete .cf-activity-dot {
  background: #659477;
  box-shadow: 0 0 0 3px rgba(101, 148, 119, .12);
}
.cf-activity-card.is-complete .cf-activity-rail {
  display: none;
}
@keyframes cf-activity-shimmer {
  from { transform: translateX(-115%); }
  to { transform: translateX(310%); }
}

/* In-chat account authorization card. */
.cf-connector-card {
  width: min(100%, 540px);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 5px 20px rgba(30, 25, 18, .045);
}
.cf-connector-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
  opacity: .75;
}
.cf-connector-title {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 750;
}
.cf-connector-description {
  margin: 6px 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.cf-connector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-connector-connect {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.cf-connector-connect:hover:not(:disabled) {
  opacity: .88;
}
.cf-connector-connect:disabled {
  opacity: .55;
  cursor: wait;
}
.cf-connector-footnote {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  opacity: .78;
}
.cf-connector-not-now {
  margin-top: 10px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.cf-connector-not-now:hover {
  color: var(--text);
}
.cf-connector-card.is-dismissed {
  background: var(--surface-soft);
  box-shadow: none;
}
@media (max-width: 520px) {
  #messages .message-text { font-size: 16px; }
  .cf-activity-card { padding: 10px 11px; }
  .cf-connector-card { padding: 13px; }
  .cf-connector-connect { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-activity-rail span { animation: none; width: 100%; opacity: .55; }
}


/* Claude-inspired connector directory: quiet service rows instead of promo cards. */
.connectors-page-heading {
  width: min(980px, calc(100% - 48px));
  margin: 34px auto 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}
.connectors-page-heading h1 {
  margin: 3px 0 6px;
  color: var(--text);
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 750;
  letter-spacing: -.85px;
}
.connectors-page-heading p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.connector-overview {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.connector-overview-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 17px;
}
.connector-overview strong,
.connector-overview small {
  display: block;
}
.connector-overview strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.connector-overview small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.connector-privacy-note {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  opacity: .82;
}
.connector-privacy-note span:first-child {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--good);
  font-size: 12px;
}
.connector-groups {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto 34px;
  display: grid;
  gap: 24px;
}
.connector-directory-group {
  min-width: 0;
}
.connector-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.connector-group-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.15px;
}
.connector-group-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.connector-group-heading>span {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.connector-row-list {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.connector-row {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  transition: background .16s ease;
}
.connector-row:last-child { border-bottom: 0; }
.connector-row:hover { background: var(--surface-soft); }
.connector-row .platform-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 17px;
  box-shadow: none;
}
.connector-row .platform-mark.github {
  color: #292929;
  background: #f0efed;
}
.connector-row-copy { min-width: 0; }
.connector-row-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.connector-row-title-line>strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.connector-row-copy>p {
  margin: 3px 0 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.connector-row-copy>small {
  color: var(--subtle);
  font-size: 9px;
  line-height: 1.4;
}
.connector-row-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
}
.connector-row-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--subtle);
}
.connector-row-status.is-connected { color: var(--good); }
.connector-row-status.is-connected i { background: var(--good); }
.connector-row-status.is-ready i { background: var(--accent); }
.connector-row-trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.connector-row-action {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.connector-row-action:hover {
  background: var(--surface-soft);
  border-color: var(--subtle);
}
.connector-row-action span { margin-left: 4px; color: var(--muted); }
.connector-row-action.is-manage {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
.connector-row-action.is-manage:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}
.connector-row-soon {
  color: var(--subtle);
  font-size: 9px;
  white-space: nowrap;
}
.connector-empty {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.connector-empty-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 16px;
}
.connector-empty strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.connector-empty p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.connector-row-list--upcoming .connector-row {
  opacity: .72;
}
.connector-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 2px;
  color: var(--muted);
  font-size: 11px;
}
.connector-loading-line {
  width: 24px;
  height: 3px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--line);
}
.connector-loading-line::after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  background: var(--accent);
  animation: cf-activity-shimmer 1.2s ease-in-out infinite;
}

/* A compact, conversational connector request rather than a large content card. */
.cf-connect-request {
  width: min(100%, 510px);
  margin: 3px 0 8px;
  padding: 12px 13px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
}
.cf-connect-request-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cf-connect-request-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
.cf-connect-request-eyebrow {
  display: block;
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .11em;
  opacity: .8;
}
.cf-connect-request-title {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 750;
}
.cf-connect-request-description {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.cf-connect-service-list {
  margin: 10px 0 0 39px;
  border-top: 1px solid var(--line);
}
.cf-connect-service {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.cf-connect-service:last-child { border-bottom: 0; }
.cf-connect-service .platform-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}
.cf-connect-service-copy { min-width: 0; }
.cf-connect-service-copy strong,
.cf-connect-service-copy small {
  display: block;
}
.cf-connect-service-copy strong {
  color: var(--text);
  font-size: 10px;
  font-weight: 750;
}
.cf-connect-service-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-connect-service-button {
  min-height: 29px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--text);
  color: var(--surface);
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}
.cf-connect-service-button:hover:not(:disabled) { opacity: .88; }
.cf-connect-service-button:disabled { opacity: .5; cursor: wait; }
.cf-connect-request-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0 0 39px;
}
.cf-connect-request-footer>span {
  min-width: 0;
  color: var(--subtle);
  font-size: 8px;
  line-height: 1.45;
}
.cf-connect-not-now {
  flex: 0 0 auto;
  padding: 4px 0 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.cf-connect-not-now:hover { color: var(--text); }
.cf-connect-request.is-dismissed {
  background: transparent;
  box-shadow: none;
}
@media (max-width: 620px) {
  .connectors-page-heading {
    width: calc(100% - 30px);
    align-items: flex-start;
    margin-top: 22px;
  }
  .connector-overview { padding: 7px 9px; }
  .connector-overview-mark { display: none; }
  .connector-privacy-note,.connector-groups { width: calc(100% - 30px); }
  .connector-row { grid-template-columns: 36px minmax(0,1fr); gap: 10px; padding: 12px 10px; }
  .connector-row .platform-mark { width: 35px; height: 35px; }
  .connector-row-trailing { grid-column: 2; justify-content: flex-start; margin-top: -3px; }
  .cf-connect-request { padding: 11px; }
  .cf-connect-service-list,.cf-connect-request-footer { margin-left: 0; }
}
@media (max-width: 420px) {
  .connectors-page-heading { flex-direction: column; }
  .connector-overview { align-self: flex-start; }
  .cf-connect-service { grid-template-columns: 26px minmax(0,1fr) auto; gap: 7px; }
  .cf-connect-service-button { padding: 0 9px; }
}


/* Minimal live typing feedback while CodeForge AI prepares a reply. */
#messages .cf-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin: 2px 0 12px;
  padding: 2px 0;
  border: 0;
  background: transparent;
}
#messages .cf-typing-indicator span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b96a43;
  opacity: .38;
  animation: cf-typing-bounce 1.15s ease-in-out infinite;
}
#messages .cf-typing-indicator span:nth-child(2) { animation-delay: .16s; }
#messages .cf-typing-indicator span:nth-child(3) { animation-delay: .32s; }
@keyframes cf-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  #messages .cf-typing-indicator span { animation: none; opacity: .65; }
}


/* CodeForge full-screen welcome and account entry */
.auth-welcome-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:stretch;padding:0;background:#fff!important;backdrop-filter:none}
.auth-welcome-backdrop[hidden]{display:none!important}
.auth-welcome-modal{position:relative!important;width:100%!important;height:100%!important;max-height:none!important;max-width:none!important;overflow:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;color:#171717!important}
.auth-welcome-modal>.modal-close,.auth-welcome-modal>.modal-brand-mark,.auth-welcome-modal>#modalEyebrow,.auth-welcome-modal>#modalTitle,.auth-welcome-modal>#modalDescription,.auth-welcome-modal>.modal-actions{display:none!important}
.auth-welcome-modal>#modalBody{width:100%;height:100%;min-height:100dvh;margin:0;padding:0}
.cf-auth-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;width:100%;padding:78px 24px 34px;background:#fff;color:#191919}
.cf-auth-contact{position:absolute;top:27px;right:clamp(22px,5vw,64px);color:#555;text-decoration:none;font-size:13px;font-weight:600;transition:color .2s}
.cf-auth-contact:hover{color:#c66b45}
.cf-auth-content{width:min(100%,430px);display:flex;flex-direction:column;align-items:center}
.cf-auth-brand-stage{display:flex;flex-direction:column;align-items:center;text-align:center;animation:cf-auth-logo-rise .95s cubic-bezier(.2,.75,.25,1) both}
.cf-auth-logo{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(30,30,30,.08))}
.cf-auth-brand-name{margin-top:14px;font:800 clamp(27px,5vw,34px) Manrope,system-ui,sans-serif;letter-spacing:-1.3px;color:#1c1c1c}
.cf-auth-brand-name span{color:#c96e43}
.cf-auth-tagline{margin:10px 0 0;color:#777;font-size:13px;line-height:1.65}
.cf-auth-options{width:100%;margin-top:42px;display:grid;gap:13px;opacity:0;transform:translateY(13px);animation:cf-auth-options-in .65s .72s cubic-bezier(.2,.7,.25,1) forwards}
.cf-auth-action{position:relative;width:100%;min-height:54px;display:flex;cursor:pointer;align-items:center;justify-content:center;gap:12px;padding:0 18px;border:1px solid #dedede;border-radius:999px;background:#fff;color:#242424;font:600 14px 'DM Sans',sans-serif;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.cf-auth-action:hover:not(:disabled){transform:translateY(-1px);border-color:#bdbdbd;box-shadow:0 7px 22px rgba(0,0,0,.055)}
.cf-auth-action:disabled{opacity:.42;cursor:not-allowed}
.cf-auth-google-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;font:700 19px Arial,sans-serif;color:#4285f4}
.cf-auth-consent{display:flex;align-items:flex-start;gap:10px;margin-top:12px;color:#777;font-size:11px;line-height:1.65;cursor:pointer}
.cf-auth-consent input{flex:0 0 16px;width:16px;height:16px;margin:2px 0 0;accent-color:#c96e43}
.cf-auth-consent a{color:#a95839;text-decoration:underline;text-underline-offset:2px}
.cf-auth-consent-hint{min-height:15px;margin:0;text-align:center;color:#9a918b;font-size:10px}
.cf-auth-consent-hint.is-accepted{color:#56816a}
.cf-auth-footer{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;gap:12px;color:#aaa;font-size:10px;letter-spacing:.15px}
@keyframes cf-auth-logo-rise{0%{opacity:0;transform:translateY(24px) scale(.97)}35%{opacity:1}100%{opacity:1;transform:translateY(-34px) scale(1)}}
@keyframes cf-auth-options-in{to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.cf-auth-screen{padding:76px 22px 58px}.cf-auth-logo{width:68px;height:68px}.cf-auth-options{margin-top:34px}.cf-auth-action{min-height:52px}.cf-auth-footer{bottom:15px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.cf-auth-brand-stage,.cf-auth-options{animation:none;opacity:1;transform:none}}

/* Facebook sign-in mark for the two-provider welcome screen. */
.cf-auth-facebook-icon{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#1877f2;color:#fff;font:700 17px Arial,sans-serif;line-height:1}

.cf-auth-github-icon{width:21px;height:21px;flex:0 0 21px;color:#24292f}