/* Nuvio workspace — approved Bento Grid / Liquid Glass composition. */
#workspace{
  --n-ink:#231f26;--n-muted:#756f79;--n-line:rgba(255,255,255,.76);
  --n-violet:#d8c7f4;--n-coral:#ffb5c2;--n-lime:#d9ed98;--n-yellow:#ffe18a;
  --n-orange:#ffb37f;--n-blue:#bed9e8;--n-ease:cubic-bezier(.16,1,.3,1);
  height:100dvh;display:flex;gap:12px;padding:12px;overflow:hidden;color:var(--n-ink);
  background:radial-gradient(circle at 12% 8%,#eee4f5 0,transparent 31%),radial-gradient(circle at 91% 92%,#e5f0f4 0,transparent 29%),#f5f3f1;
}
#workspace{color-scheme:light}
#workspace .brand-orb i{background:#fff}
#workspace .sidebar{position:relative;width:230px;flex:0 0 230px;display:flex;flex-direction:column;gap:15px;padding:20px 14px 14px;border:1px solid var(--n-line);border-radius:27px;background:linear-gradient(150deg,rgba(255,255,255,.79),rgba(243,238,246,.66));box-shadow:0 24px 70px rgba(63,45,75,.07),inset 0 1px 0 #fff;backdrop-filter:blur(28px) saturate(1.28);-webkit-backdrop-filter:blur(28px) saturate(1.28)}
#workspace .sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:0 7px}
#workspace .sidebar>.wordmark,#workspace .sidebar-brand .wordmark{padding:0;color:#29252b;font-size:1.1rem}
#workspace .brand-orb{width:31px;height:31px;background:#29262d;box-shadow:0 7px 18px rgba(42,33,47,.16)}
#workspace .sidebar-collapse{display:none;width:35px;height:35px;border:0;border-radius:11px;background:rgba(255,255,255,.58);color:#736c77}
#workspace .sidebar-collapse svg{width:16px;height:16px}
#workspace .project-search{position:relative;display:block}
#workspace .project-search input{width:100%;height:40px;padding:0 13px 0 35px;border:1px solid rgba(255,255,255,.9);border-radius:13px;outline:0;background:rgba(255,255,255,.55);color:#302b33;font-size:.8rem;box-shadow:inset 0 1px 0 #fff}
#workspace .project-search input:focus{border-color:#c9b5dc;box-shadow:0 0 0 4px rgba(156,125,190,.1),inset 0 1px 0 #fff}
#workspace .project-search>span:last-child{position:absolute;left:14px;top:13px;width:12px;height:12px;border:1.5px solid #8c8490;border-radius:50%;pointer-events:none}
#workspace .project-search>span:last-child::after{content:"";position:absolute;right:-4px;bottom:-2px;width:5px;height:1.5px;border-radius:2px;background:#8c8490;transform:rotate(45deg)}
#workspace .new-project{min-height:45px;display:flex;align-items:center;gap:10px;padding:0 14px;border:0;border-radius:14px;background:#2e2a31;color:#fff;font-size:.84rem;font-weight:610;box-shadow:0 9px 22px rgba(49,38,56,.16);transition:transform .25s var(--n-ease),background .2s,box-shadow .25s}
#workspace .new-project:hover{background:#423a46;transform:translateY(-2px);box-shadow:0 13px 26px rgba(49,38,56,.2)}
#workspace .new-project svg{width:16px;height:16px}
#workspace .sidebar-heading{display:flex;align-items:center;justify-content:space-between;margin:4px 0 -7px;padding:0 10px;color:#8b838f;font-size:.72rem;letter-spacing:0;text-transform:none}
#workspace .sidebar-heading .icon-button{width:30px;height:30px;border-radius:10px}
#workspace .project-list{flex:1;min-height:0;overflow:auto;padding-right:2px}
#workspace .project-list a{display:block;margin:2px 0;padding:10px 11px;border-radius:11px;color:#6d6671;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .18s,color .18s,transform .18s}
#workspace .project-list a:hover{background:rgba(255,255,255,.62);color:#2d2830;transform:translateX(2px)}
#workspace .project-list a.active{background:rgba(255,255,255,.88);color:#2b2630;box-shadow:0 5px 17px rgba(66,46,78,.06),inset 3px 0 #a785ce}
#workspace .project-list p{padding:10px;color:#918995;font-size:.76rem}
#workspace .sidebar-footer{padding-top:10px;border-top:1px solid rgba(131,113,142,.13)}
#workspace .sidebar-action,#workspace .account{width:100%;min-height:42px;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:#6a626e;text-align:left;font-size:.78rem;transition:background .2s,color .2s}
#workspace .sidebar-action:hover,#workspace .account:hover{background:rgba(255,255,255,.62);color:#2d2830}
#workspace .sidebar-action svg,#workspace .account>svg{width:15px;height:15px}.account #account-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#workspace .account #avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#302b34;font-size:.69rem;font-weight:720;box-shadow:0 3px 10px rgba(47,37,54,.08)}

#workspace .workspace-body{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.82);border-radius:27px;background:rgba(255,255,255,.5);box-shadow:0 24px 70px rgba(58,42,67,.06);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
#workspace .workspace-header{height:58px;flex:0 0 58px;display:flex;align-items:center;gap:12px;padding:0 22px;border:0;background:rgba(255,255,255,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#workspace .project-heading{flex:1;min-width:0}.project-title{max-width:100%;padding:0;border:0;background:transparent;color:#312b34;font-size:.88rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.save-state{display:block;margin-top:3px;color:#8c8490;font-size:.68rem}
#workspace .work-area{position:relative;flex:1;min-height:0;display:flex;gap:14px;padding:0 16px 16px;background:transparent}

/* Home: deliberately not the former centered dashboard. */
#workspace .work-area:not(.has-project) .conversation{width:min(100%,1050px);max-width:1050px;height:100%;min-height:0;margin:0 auto;padding:clamp(20px,4vh,42px) clamp(10px,3vw,34px) 18px;display:flex;flex-direction:column;background:transparent}
#workspace .empty-conversation{width:100%;margin:0 0 24px;display:flex;flex:0 0 auto;min-height:0;flex-direction:column;padding:0;text-align:left}
#workspace .welcome-copy{display:block;margin-bottom:24px}
#workspace .welcome-greeting{grid-column:1;margin:0 0 8px;color:#6b646f;font-size:1rem;line-height:1.4}
#workspace .empty-conversation h2{margin:0;color:#242027;font-size:clamp(2.5rem,4vw,3.75rem);font-weight:650;line-height:1.08;letter-spacing:-.05em}
#workspace .welcome-subtitle{margin:12px 0 0;color:#7d7581;font-size:1rem;line-height:1.55}
#workspace .bento-starts{display:grid;grid-template-columns:1.13fr 1fr;grid-template-rows:minmax(112px,1fr) minmax(112px,1fr);gap:13px;min-height:250px;max-height:330px}
#workspace .starter-card{position:relative;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:13px;overflow:hidden;padding:21px 22px;border:1px solid rgba(255,255,255,.58);border-radius:27px;color:#342d39;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.65),0 12px 30px rgba(68,49,79,.06);transition:transform .32s var(--n-ease),box-shadow .32s var(--n-ease),filter .32s}
#workspace .starter-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px #fff,0 20px 36px rgba(68,49,79,.13);filter:saturate(1.04)}
#workspace .starter-card>svg{position:absolute;right:18px;top:17px;width:18px;height:18px;color:rgba(49,38,55,.65)}
#workspace .starter-primary{grid-row:1/3;padding:25px 26px;background:linear-gradient(145deg,#e2d6f7,#c8b1eb)}
#workspace .starter-coral{background:linear-gradient(135deg,#ffc8d1,#f4a2b2)}
#workspace .starter-lime{background:linear-gradient(135deg,#e5f3b6,#cae47c)}
#workspace .starter-yellow{background:linear-gradient(135deg,#ffeaa9,#ffda6f)}
#workspace .starter-orange{background:linear-gradient(135deg,#ffc69f,#ffa56c)}
#workspace .starter-blue{background:linear-gradient(135deg,#d3e7f1,#a9cede)}
#workspace .starter-extra{display:none}
#workspace .starter-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;max-width:80%}
#workspace .starter-copy strong{font-size:1.02rem;font-weight:700;letter-spacing:-.025em}
#workspace .starter-primary .starter-copy strong{font-size:1.35rem}
#workspace .starter-copy>span{color:#675c6b;font-size:.79rem;line-height:1.42}
#workspace .starter-visual{position:absolute;z-index:1;display:block;pointer-events:none}
#workspace .visual-web{left:30px;top:29px;width:54%;height:43%;border:1px solid rgba(255,255,255,.8);border-radius:16px;background:rgba(255,255,255,.62);box-shadow:0 18px 28px rgba(77,55,90,.14);transform:rotate(-4deg)}
#workspace .visual-web::before{content:"";position:absolute;left:10px;right:10px;top:11px;height:6px;border-radius:8px;background:rgba(73,55,84,.13)}
#workspace .visual-web i{position:absolute;left:12px;right:35%;height:8px;border-radius:6px;background:rgba(107,76,125,.18)}
#workspace .visual-web i:nth-child(1){top:31px}.visual-web i:nth-child(2){top:46px;right:18%}.visual-web i:nth-child(3){top:61px;right:48%}
#workspace .visual-design{right:58px;top:25px;width:118px;height:62px}
#workspace .visual-design i{position:absolute;width:73px;height:52px;border:1px solid rgba(255,255,255,.72);border-radius:13px;background:rgba(255,255,255,.55);box-shadow:0 12px 21px rgba(76,51,63,.12)}
#workspace .visual-design i:first-child{left:0;transform:rotate(-8deg)}.visual-design i:last-child{right:0;top:8px;transform:rotate(7deg)}
#workspace .visual-code{right:46px;top:28px;padding:12px 15px;border:1px solid rgba(255,255,255,.72);border-radius:13px;background:#302c31;color:#f7f5f8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;box-shadow:0 12px 24px rgba(50,45,51,.18);transform:rotate(3deg)}
#workspace .starter-index{position:absolute;left:19px;top:15px;color:rgba(42,36,45,.38);font-size:.72rem;font-weight:760;letter-spacing:.08em}
#workspace .visual-files{right:42px;top:23px;width:90px;height:64px}.visual-files i{position:absolute;width:50px;height:58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:11px;background:rgba(255,255,255,.62);color:#5e515f;font-size:.68rem;font-style:normal;box-shadow:0 10px 20px rgba(76,51,63,.11)}.visual-files i:first-child{left:0;transform:rotate(-9deg)}.visual-files i:last-child{right:0;top:5px;transform:rotate(8deg)}
#workspace .home-recents{margin-top:18px;padding-top:15px;border-top:1px solid rgba(118,99,130,.13)}
#workspace .home-recents>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}.home-recents>div:first-child strong{font-size:.88rem}.home-recents>div:first-child span{color:#8a828e;font-size:.71rem}
#workspace .home-project-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.home-project-list a{min-width:0;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border:1px solid rgba(255,255,255,.8);border-radius:13px;background:rgba(255,255,255,.56);color:#443d47;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-project-list a::after{content:"›";margin-left:8px;color:#8d8192;font-size:1.15rem}

/* The composer floats like the approved mockup. */
#workspace .composer{flex:0 0 auto;margin-top:auto;padding:15px 17px;border:1px solid rgba(255,255,255,.92);border-radius:23px;background:rgba(255,255,255,.82);box-shadow:0 19px 48px rgba(65,46,76,.11),inset 0 1px #fff;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);transition:border-color .2s,box-shadow .25s,transform .25s}
#workspace .composer:focus-within{border-color:#c8b5dc;box-shadow:0 21px 54px rgba(74,53,87,.16),0 0 0 4px rgba(161,130,194,.09)}
#workspace .composer textarea{width:100%;min-height:57px;max-height:190px;padding:0;border:0;outline:0;resize:none;background:transparent;color:#29242d;font-size:.94rem;line-height:1.5}.composer textarea::placeholder{color:#98909b}
#workspace .composer-tools{display:flex;align-items:center;gap:8px}.composer-tools #attach-button{width:39px;height:39px;display:grid;place-items:center;border:1px solid #ebe4ed;border-radius:13px;background:#fff;color:#716977}.composer-tools #attach-button:hover{background:#faf8fb;color:#302a34}
#workspace .mode-switch{position:relative;min-width:158px;display:flex;margin:0 auto 0 0;padding:3px;border:1px solid rgba(255,255,255,.86);border-radius:999px;background:rgba(232,226,236,.82)}
#workspace .mode-switch label{flex:1;cursor:pointer}.mode-switch input{position:absolute;width:1px;height:1px;opacity:0}.mode-switch span{display:block;padding:8px 10px;border-radius:999px;color:#817987;font-size:.76rem;text-align:center}.mode-switch input:checked+span{background:#fff;color:#2f2933;box-shadow:0 3px 10px rgba(70,53,79,.1)}
#workspace .composer-actions{display:flex;align-items:center;gap:10px}.send{width:39px;height:39px;display:grid;place-items:center;border:0;border-radius:13px;background:#312b34;color:#fff;box-shadow:0 6px 15px rgba(57,44,65,.2)}.send svg{width:17px;height:17px}
#workspace .composer-note{margin:8px 0 0;color:#8b838f;font-size:.7rem;text-align:center}

/* Active project: real chat and preview as two Bento panes. */
#workspace .work-area.has-project{padding:0 14px 14px;gap:12px}
#workspace .work-area.has-project .conversation{width:38%;min-width:330px;max-width:455px;height:100%;display:flex;flex-direction:column;padding:8px 14px 12px;border:1px solid rgba(255,255,255,.9);border-radius:23px;background:rgba(255,255,255,.69);box-shadow:0 14px 38px rgba(61,43,71,.07);overflow:hidden}
#workspace .has-project .empty-conversation,#workspace .conversation.has-messages .empty-conversation{display:none}
#workspace .messages{flex:1;min-height:0;overflow-y:auto;padding:14px 3px 7px;scroll-behavior:smooth}
#workspace .message{margin:0 0 18px;color:#373139;font-size:.88rem;line-height:1.58;white-space:pre-wrap;overflow-wrap:anywhere;animation:nuvio-message .42s var(--n-ease) both}
#workspace .message.user{width:fit-content;max-width:88%;margin-left:auto;padding:12px 14px;border:1px solid rgba(255,255,255,.7);border-radius:18px 18px 5px 18px;background:linear-gradient(135deg,#e4d8f3,#efe8f7);color:#342d38;box-shadow:0 7px 18px rgba(70,54,80,.06)}
#workspace .message.assistant{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:3px;color:#38323b}
#workspace .assistant-avatar{width:27px;height:27px;margin-top:2px;display:flex;align-items:center;justify-content:center;gap:3px;border:0;border-radius:50%;background:#29262c;box-shadow:0 5px 13px rgba(47,38,55,.14)}.assistant-avatar i{width:3px;height:7px;border-radius:4px;background:#fff;animation:blink 5s infinite}.message-body{min-width:0}.message-label{display:block;margin-bottom:4px;color:#817984;font-size:.65rem;font-weight:720;letter-spacing:.09em;text-transform:uppercase}
#workspace .message.assistant.active-turn{grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:start;padding-left:2px}
#workspace .message.assistant.active-turn>.assistant-avatar{display:none}#workspace .message.assistant.active-turn>.activity-mascot{grid-column:1;width:42px;height:42px;flex-basis:42px;margin-top:2px;overflow:hidden;border:1px solid #fff;border-radius:13px;background:linear-gradient(145deg,#e6dcf1,#d5c5e7);box-shadow:0 6px 15px rgba(70,51,82,.13)}
#workspace .message.assistant.active-turn>.activity-mascot .scene{position:absolute;left:0;top:1px;transform:scale(.116);transform-origin:0 0}.message.assistant.active-turn>.message-body{grid-column:2;min-width:0}
#workspace .message.assistant.active-turn .activity-copy{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:8px;padding:9px 10px 9px 22px;border:1px solid #e2d9e5;border-radius:14px;background:rgba(248,245,249,.9);color:#39323d;animation:nuvio-activity .35s var(--n-ease) both}.message.assistant.active-turn .activity-copy::before{content:"";position:absolute;left:9px;top:14px;width:5px;height:5px;border-radius:50%;background:#9c7bc0;box-shadow:0 0 0 4px rgba(156,123,192,.1),0 0 11px rgba(156,123,192,.44);animation:nuvio-pulse 1.4s ease-in-out infinite}.message.assistant.active-turn .activity-copy>span{font-size:.76rem;font-weight:650}.message.assistant.active-turn .activity-copy>small{color:#7c7481;font-size:.68rem;line-height:1.4}.activity.activity-dock{display:none!important}
#workspace .editor{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.94);border-radius:23px;background:rgba(255,255,255,.75);box-shadow:0 14px 40px rgba(61,43,71,.08)}
#workspace .editor-toolbar{height:57px;flex:0 0 57px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(122,106,132,.13);background:rgba(255,255,255,.7);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
#workspace .tabs{display:flex;padding:4px;border:1px solid #fff;border-radius:13px;background:#ede8ef}.tabs button{min-height:33px;padding:6px 12px;border:0;border-radius:9px;background:transparent;color:#746d78;font-size:.72rem}.tabs button[aria-selected=true]{background:#fff;color:#302a33;box-shadow:0 3px 10px rgba(68,51,77,.09)}
#workspace .editor-actions{display:flex;align-items:center;gap:5px}.editor-actions .icon-button{width:35px;height:35px;border-radius:11px;color:#77707b}.editor-actions .text-button{color:#6e6672;font-size:.72rem}.editor-publish{min-height:35px;padding:0 13px;border:0;border-radius:11px;background:#302a33;color:#fff;font-size:.73rem;font-weight:650;box-shadow:0 6px 15px rgba(55,43,64,.16)}
#workspace .preview-panel{flex:1;min-height:0;padding:11px;background:linear-gradient(145deg,#ece8ef,#e7edf0)}.preview-panel iframe{width:100%;height:100%;border:0;border-radius:12px;background:#fff;box-shadow:0 13px 35px rgba(61,48,70,.14)}
#workspace .preview-empty{height:100%;display:grid;place-content:center;justify-items:center;color:#827a86;text-align:center}.preview-empty h3{margin:14px 0 7px;color:#3b3540;font-size:1rem}.preview-empty p{max-width:270px;margin:0;font-size:.76rem;line-height:1.5}.preview-empty .outline-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid #d2c9d6;border-radius:15px;background:rgba(255,255,255,.55)}.outline-icon svg{width:19px;height:19px}
#workspace .code-panel{flex:1;min-height:0;display:flex;flex-direction:column;background:#242229;color:#edeaf0}.file-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid #3c3841}.file-tabs{display:flex;gap:4px;overflow:auto}.file-tabs button{padding:7px 9px;border:0;border-radius:8px;background:transparent;color:#aaa4ae;font-size:.7rem}.file-tabs button[aria-selected=true]{background:#3a363e;color:#fff}.code-panel pre{flex:1;overflow:auto;margin:0;padding:17px;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace}.editor-footer{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-top:1px solid rgba(122,106,132,.13);background:rgba(255,255,255,.65);color:#827a86;font-size:.67rem}
#workspace .editor.editor-reveal{animation:nuvio-editor .62s var(--n-ease) both;transform-origin:right center}.preview-panel.preview-reveal iframe{animation:nuvio-preview .55s var(--n-ease) both}
#workspace .mobile-workspace-tabs{display:none}
body.native-ios #workspace .mobile-workspace-tabs{display:none!important}

@keyframes nuvio-message{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes nuvio-activity{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nuvio-pulse{50%{opacity:.45;transform:scale(.78)}}
@keyframes nuvio-editor{from{opacity:0;transform:translateX(25px) scale(.975);clip-path:inset(0 0 0 100% round 23px)}to{opacity:1;transform:none;clip-path:inset(0 round 23px)}}
@keyframes nuvio-preview{from{opacity:.25;transform:scale(.975)}to{opacity:1;transform:none}}

@media(max-width:1050px){
  #workspace .sidebar{width:205px;flex-basis:205px}#workspace .welcome-copy{grid-template-columns:1fr 210px}#workspace .starter-copy>span{font-size:.73rem}#workspace .work-area.has-project .conversation{width:40%;min-width:300px}#workspace .editor-actions .text-button{display:none}
}

@media(max-width:800px){
  #workspace{display:block;padding:0;background:radial-gradient(circle at 0 0,#eee4f5,transparent 35%),radial-gradient(circle at 100% 100%,#e3eef3,transparent 40%),#f6f4f2}
  #workspace .workspace-body{height:100dvh;border:0;border-radius:0;background:transparent;box-shadow:none}
  #workspace .sidebar{position:fixed;z-index:90;inset:0 auto 0 0;width:min(292px,86vw);padding:18px 15px;border:0;border-radius:0 25px 25px 0;transform:translateX(-105%);transition:transform .38s var(--n-ease);box-shadow:25px 0 70px rgba(49,36,57,.17)}
  #workspace .sidebar.open{transform:none}#workspace .sidebar.open::after{content:"";position:fixed;z-index:-1;left:100%;top:0;width:100vw;height:100dvh;background:rgba(42,34,47,.12);backdrop-filter:blur(2px)}
  #workspace .sidebar-collapse{display:grid;place-items:center}
  #workspace .workspace-header{height:70px;flex-basis:70px;margin:10px 12px 0;padding:0 13px;border:1px solid rgba(255,255,255,.84);border-radius:21px;background:rgba(255,255,255,.68);box-shadow:0 10px 30px rgba(67,48,77,.07),inset 0 1px #fff}
  #workspace .workspace-header>.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #fff;border-radius:13px;background:rgba(255,255,255,.67);color:#443d47}
  #workspace .project-title{font-size:.82rem}#workspace .save-state{font-size:.64rem}
  #workspace .work-area,#workspace .work-area.has-project{padding:10px 12px 12px;overflow:hidden}
  #workspace .work-area:not(.has-project) .conversation{width:100%;max-width:none;padding:15px 2px 10px;overflow-y:auto}
  #workspace .empty-conversation{display:block;padding-bottom:88px;overflow:visible}
  #workspace .welcome-copy{display:block;margin:4px 4px 20px}#workspace .welcome-greeting{margin-bottom:6px;font-size:.88rem}#workspace .empty-conversation h2{font-size:clamp(2.45rem,11vw,3.45rem);line-height:.96}#workspace .welcome-subtitle{margin-top:11px;font-size:.82rem}
  #workspace .bento-starts{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,168px);gap:10px;min-height:0;max-height:none}
  #workspace .starter-card,#workspace .starter-primary{grid-row:auto;display:flex;padding:15px;border-radius:23px;justify-content:flex-end}
  #workspace .starter-extra{display:flex}#workspace .starter-card>svg{right:14px;top:14px}#workspace .starter-copy{max-width:91%;gap:4px}#workspace .starter-copy strong,#workspace .starter-primary .starter-copy strong{font-size:.91rem}#workspace .starter-copy>span{font-size:.7rem;line-height:1.36}
  #workspace .starter-visual{transform:scale(.77);transform-origin:top right}#workspace .visual-web{left:15px;top:16px;width:70%;height:38%}#workspace .visual-design{right:17px;top:18px}#workspace .visual-code{right:20px;top:22px}#workspace .visual-files{right:14px;top:18px}
  #workspace .home-recents{display:block;margin:19px 2px 0;padding-top:16px}#workspace .home-project-list{grid-template-columns:1fr}#workspace .home-project-list a{min-height:46px}
  #workspace .composer{position:sticky;z-index:30;bottom:0;margin-top:14px;padding:13px 14px;border-radius:21px}#workspace .composer textarea{min-height:49px;font-size:.9rem}#workspace .composer-note{display:none}#workspace .mode-switch{min-width:145px}#workspace .mode-switch span{padding:7px 8px;font-size:.72rem}
  #workspace .work-area.has-project .conversation{display:none;width:100%;max-width:none;min-width:0;height:100%;padding:7px 10px 78px;border-radius:22px}
  #workspace .work-area.has-project[data-mobile-view=chat] .conversation{display:flex}
  #workspace .work-area.has-project .editor{display:none;height:100%;padding-bottom:68px;border-radius:22px}
  #workspace .work-area.has-project[data-mobile-view=preview] .editor,#workspace .work-area.has-project[data-mobile-view=code] .editor{display:flex}
  #workspace .messages{padding-top:10px}#workspace .message{font-size:.86rem}#workspace .message.assistant.active-turn{grid-template-columns:38px minmax(0,1fr)}#workspace .message.assistant.active-turn>.activity-mascot{width:38px;height:38px;border-radius:12px}#workspace .message.assistant.active-turn>.activity-mascot .scene{transform:scale(.105)}
  #workspace .editor-toolbar{height:53px;flex-basis:53px}#workspace .editor-toolbar>.tabs{display:none}#workspace .editor-actions{width:100%;justify-content:flex-end}#workspace .editor-actions .text-button{display:block}
  #workspace .mobile-workspace-tabs{position:absolute;z-index:50;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100% - 26px));min-height:54px;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:3px;padding:5px;border:1px solid #fff;border-radius:19px;background:rgba(249,247,250,.87);box-shadow:0 14px 38px rgba(62,48,74,.18);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
  #workspace .mobile-workspace-tabs button{border:0;border-radius:14px;background:transparent;color:#716a75;font-size:.76rem;font-weight:640}#workspace .mobile-workspace-tabs button[aria-selected=true]{background:linear-gradient(135deg,#d9caf4,#bca0e8);color:#32263d;box-shadow:0 4px 13px rgba(104,79,131,.16)}
  #workspace .work-area:not(.has-project) .mobile-workspace-tabs{display:none}
}

@media(max-width:420px){
  #workspace .bento-starts{grid-template-rows:repeat(3,154px)}#workspace .starter-copy>span{font-size:.66rem}#workspace .starter-copy strong,#workspace .starter-primary .starter-copy strong{font-size:.84rem}#workspace .mode-switch{min-width:137px}#workspace .mode-switch span{padding:7px 6px}#workspace .composer-tools{gap:5px}#workspace .composer-actions{gap:6px}
}

@media(max-height:720px) and (min-width:801px){
  #workspace .work-area:not(.has-project) .conversation{padding-top:14px}#workspace .empty-conversation h2{font-size:3.45rem}#workspace .welcome-copy{margin-bottom:15px}#workspace .bento-starts{grid-template-rows:96px 96px;min-height:205px}#workspace .composer textarea{min-height:48px}#workspace .home-recents{display:none}
}

@media(prefers-reduced-motion:reduce){#workspace *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
body.reduce-motion #workspace *{scroll-behavior:auto!important;animation:none!important;transition:none!important}

.settings-link-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 2px;color:#3b3540;border-radius:12px;transition:background .2s,color .2s,transform .25s var(--n-ease)}
.settings-link-row>span:first-child{display:grid;gap:5px}.settings-link-row strong{font-size:.91rem;font-weight:590}.settings-link-row small{color:#77777f;font-size:.78rem;line-height:1.45}.settings-link-row>span:last-child{color:#8b8290;font-size:1rem;transition:transform .25s var(--n-ease)}
.settings-link-row:hover{background:rgba(242,238,244,.72);transform:translateX(2px)}.settings-link-row:hover>span:last-child{transform:translateX(3px)}.settings-link-row:focus-visible{outline:2px solid #9270b8;outline-offset:4px}

/* Compact mode selector: the choice panel opens upward from the composer. */
#workspace .mode-picker{position:relative;margin-right:auto}
#workspace .mode-button{min-width:112px;height:39px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid rgba(255,255,255,.94);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(235,229,239,.82));color:#3a333e;font:inherit;font-size:.78rem;font-weight:680;box-shadow:inset 0 1px #fff,0 5px 15px rgba(60,45,70,.08);transition:transform .22s var(--n-ease),box-shadow .22s ease}
#workspace .mode-button:hover{transform:translateY(-1px);box-shadow:inset 0 1px #fff,0 8px 20px rgba(60,45,70,.12)}
#workspace .mode-button svg{width:13px;height:13px;transform:rotate(-90deg);transition:transform .25s var(--n-ease)}
#workspace .mode-button[aria-expanded=true] svg{transform:rotate(90deg)}
#workspace .mode-menu{position:absolute;z-index:80;left:0;bottom:calc(100% + 10px);width:244px;padding:6px;border:1px solid rgba(255,255,255,.93);border-radius:18px;background:linear-gradient(145deg,rgba(252,250,253,.95),rgba(235,228,241,.92));box-shadow:0 22px 54px rgba(50,36,60,.2),inset 0 1px #fff;backdrop-filter:blur(28px) saturate(1.35);-webkit-backdrop-filter:blur(28px) saturate(1.35);transform-origin:left bottom;animation:mode-menu-in .3s var(--n-ease) both}
#workspace .mode-menu[hidden]{display:none}
#workspace .mode-menu button{position:relative;width:100%;display:flex;align-items:center;padding:11px 12px 11px 35px;border:0;border-radius:13px;background:transparent;color:#4b4350;text-align:left}
#workspace .mode-menu button:hover,#workspace .mode-menu button:focus-visible{outline:0;background:rgba(255,255,255,.72)}
#workspace .mode-menu button[aria-checked=true]{background:rgba(255,255,255,.88);box-shadow:0 4px 13px rgba(70,51,80,.06)}
#workspace .mode-menu button[aria-checked=true]::before{content:"";position:absolute;left:15px;width:8px;height:8px;border-radius:50%;background:#9270b8;box-shadow:0 0 0 4px rgba(146,112,184,.12)}
#workspace .mode-menu span{display:grid;gap:2px}#workspace .mode-menu strong{font-size:.78rem}#workspace .mode-menu small{color:#817987;font-size:.67rem;line-height:1.3}
@keyframes mode-menu-in{from{opacity:0;transform:translateY(9px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:800px){
 #workspace .bento-starts{grid-template-columns:1fr 1fr;grid-template-rows:minmax(190px,1fr) minmax(126px,.7fr);gap:10px;height:auto;min-height:326px;max-height:430px}
 #workspace .bento-starts .starter-primary{grid-column:1/-1;grid-row:1;padding:20px!important}
 #workspace .bento-starts .starter-coral,#workspace .bento-starts .starter-lime{grid-row:2;padding:15px!important}
 #workspace .bento-starts .starter-primary .starter-visual{display:block;left:20px;top:20px;width:48%;height:45%;transform:none}
 #workspace .bento-starts .starter-primary .starter-copy strong{font-size:1.15rem}
 #workspace .bento-starts .starter-coral .starter-copy strong,#workspace .bento-starts .starter-lime .starter-copy strong{font-size:.9rem}
 #workspace .mode-button{min-width:104px;height:38px;font-size:.75rem}
 #workspace .mode-menu{width:min(244px,calc(100vw - 44px))}
}
@media(max-width:420px){#workspace .bento-starts{grid-template-rows:180px 116px;min-height:306px}#workspace .mode-button{min-width:98px;padding:0 10px}}

/* Isolate the new Bento components from historical .bento-starts rules. */
#workspace .bento-starts .starter-card{padding:22px;justify-content:flex-end;min-width:0}
#workspace .bento-starts .starter-card>svg{display:block;position:absolute;inset:18px 18px auto auto;width:18px;height:18px;padding:0;margin:0;border:0;background:none;box-shadow:none;transform:none}
#workspace .bento-starts .starter-copy{display:flex}
#workspace .bento-starts .starter-copy>span{display:block;font-size:.875rem}
#workspace .bento-starts .starter-primary{padding:26px}
#workspace .bento-starts .starter-coral .starter-copy,#workspace .bento-starts .starter-lime .starter-copy{max-width:65%}
#workspace .bento-starts .visual-design{right:18px;top:24px;width:78px}
#workspace .bento-starts .visual-code{right:18px;top:22px}
#workspace .conversation:not(.has-messages) .messages{display:none}
#workspace .work-area:not(.has-project) .conversation{overflow-y:auto}
#workspace .mode-switch::before{background:#fff!important}
#workspace .mode-switch input:checked+span{background:transparent;box-shadow:none}
#workspace .message.assistant.active-turn .activity-copy>span{color:#39323d}
#workspace .message.assistant.active-turn .activity-copy>small{color:#7c7481}
#workspace .message.assistant.active-turn .activity-copy>small{display:none}
#workspace .message{font-size:1rem}
#workspace .composer textarea{font-size:1rem}
#workspace .project-title:disabled{opacity:1}
#workspace .project-heading{max-width:none}
@media(max-width:800px){
 #workspace .workspace-body{display:flex}
 #workspace .work-area{display:flex;flex:1;min-height:0;flex-direction:column}
 #workspace .work-area:not(.has-project) .conversation{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-height:0;padding:12px 2px 0;overflow:hidden}
 #workspace .empty-conversation{min-height:0;margin:0;padding:4px 2px 20px;overflow-y:auto;flex:none}
 #workspace .conversation:not(.has-messages) .messages{display:none}
 #workspace .work-area:not(.has-project) .conversation.has-messages .messages{grid-row:1;min-height:0}
 #workspace .composer{position:relative;bottom:auto;margin:8px 0 0;grid-row:2;padding-bottom:max(13px,env(safe-area-inset-bottom))}
 #workspace .bento-starts .starter-card{padding:16px!important;justify-content:flex-end!important}
 #workspace .bento-starts .starter-copy{display:flex;max-width:100%}
 #workspace .bento-starts .starter-copy>span{display:block;font-size:.875rem;line-height:1.4}
 #workspace .bento-starts .starter-copy strong{font-size:1rem}
 #workspace .bento-starts .starter-coral .starter-copy,#workspace .bento-starts .starter-lime .starter-copy{max-width:100%}
 #workspace .bento-starts{grid-template-rows:repeat(3,minmax(180px,auto));height:auto}
 #workspace .bento-starts .starter-visual{display:none}
 #workspace .starter-index{display:none}
 #workspace .work-area.has-project .conversation{min-height:0;flex:1;flex-shrink:1}
 #workspace .work-area.has-project .editor{min-height:0;flex:1;flex-shrink:1}
 #workspace .message.assistant.active-turn>.activity-mascot{flex-basis:38px}
 #workspace .mode-switch span{font-size:.875rem}
 #workspace .welcome-copy{margin-bottom:22px}
 #workspace .welcome-subtitle{font-size:.9375rem}
 #workspace .empty-conversation h2{font-size:clamp(2.25rem,9vw,3rem);line-height:1.12}
}

/* Final approved three-card mobile composition. */
@media(max-width:800px){
 #workspace .bento-starts{grid-template-columns:1fr 1fr;grid-template-rows:minmax(190px,1fr) minmax(126px,.68fr);min-height:326px;height:auto;max-height:430px}
 #workspace .bento-starts .starter-primary{grid-column:1/-1;grid-row:1;padding:20px!important}
 #workspace .bento-starts .starter-coral,#workspace .bento-starts .starter-lime{grid-row:2;padding:15px!important}
 #workspace .bento-starts .starter-primary .starter-visual{display:block;left:20px;top:20px;width:48%;height:45%;transform:none}
 #workspace .bento-starts .starter-primary .starter-copy strong{font-size:1.15rem}
 #workspace .bento-starts .starter-coral .starter-copy strong,#workspace .bento-starts .starter-lime .starter-copy strong{font-size:.9rem}
}
@media(max-width:420px){#workspace .bento-starts{grid-template-rows:180px 116px;min-height:306px}}