/* This shell is exclusively for phone widths. */
.mobile-topbar,.mobile-menu-shade,.mobile-drawer-close{display:none}
@media(min-width:651px){nav button[data-screen=projects]{display:none}}
@media(max-width:650px){
 :root{--mobile-paper:#f4eddf;--mobile-peach:#f2d7c1}
 body,body[data-screen=chats]{display:flex;flex-direction:column;min-height:0;height:var(--chat-viewport-height,100dvh);overflow:hidden;font-size:14px;background-size:360px 360px}
 .mobile-topbar{display:flex;align-items:center;flex:none;gap:10px;min-height:58px;padding:7px 12px;color:#333b40;border-bottom:1px solid #ffffff55}
 .mobile-topbar>strong{font-size:15px;line-height:1.25;flex:1;min-width:0;text-shadow:0 -1px #ffffffe0,1px 1px 1px #24303d40}
 .mobile-menu-toggle{display:block;flex:0 0 40px;min-height:40px;padding:7px;background:#f4eddfc9;color:#374047;font-size:19px;border:1px solid #ffffff65;box-shadow:inset 1px 1px #fff8,2px 3px 5px #30373d26}
 .mobile-connection{max-width:94px;font-size:9px;line-height:1.3;color:#4b5950;text-align:right;text-shadow:0 1px #ffffffe0,0 -1px 1px #30383b66}
 .mobile-connection.offline{color:#7f493a}
 body main,body[data-screen=chats] main,body:not([data-screen=chats]) main{margin:0;width:100%;min-height:0;height:auto;flex:1;overflow:auto;padding:14px 12px 76px;display:block}
 body main>header,body .shortcuts,body .context-rail{display:none!important}
 body .workspace{display:block;min-width:0}
 body #view{min-width:0}
 body .card,body .work-dialog,body .finance-editor,body .bubble,body .composer{background:var(--mobile-paper);border-color:#fff6}
 body .card{padding:15px;border-radius:15px;box-shadow:0 3px 14px #303a3310}
 body .card h2{font-size:16px;line-height:1.35}
 body .card p{font-size:13px;line-height:1.5}
 body .mobile-greeting{padding:24px 20px;margin:8px 0 18px;min-height:175px;display:flex;flex-direction:column;justify-content:center}
 body .mobile-greeting h2{font-size:25px;line-height:1.2;margin:10px 0}
 .mobile-kicker{font-size:9px;letter-spacing:1.4px;color:#827c70}
 body .mobile-greeting p{font-size:14px;color:#656860;margin:0;max-width:32ch}
 .mobile-priority{display:flex;flex-direction:column;width:100%;text-align:left;gap:5px;border-radius:0!important;background:transparent!important;color:#363f3c;margin:0!important;padding:12px 0!important;border:0!important;border-top:1px solid #92857235!important;box-shadow:none!important}
 .mobile-priority small{font-size:11px;font-weight:400;color:#6c7069}
 body .command-bar{background:var(--mobile-paper)!important;border-top:1px solid #fff8}
 body .command-bar form{background:var(--mobile-paper)}
 body:not([data-screen=chats]) .command-bar #quickMessage{font-size:14px;min-height:52px;padding:12px 8px}
 body:not([data-screen=chats]) .command-bar button{min-height:52px}
 body[data-screen=chats] main{display:flex;flex-direction:column;overflow:hidden;padding:12px 12px 0}
 body[data-screen=chats] .workspace,body[data-screen=chats] #view{display:flex;flex:1;min-height:0}
 body[data-screen=chats] .chat-toolbar{padding:0 0 9px}
 body[data-screen=chats] .chat-panel .composer{margin:8px -12px 0;width:calc(100% + 24px);min-height:54px;padding:6px 8px max(6px,env(safe-area-inset-bottom));border-radius:0}
 body[data-screen=chats] .chat-panel .composer textarea{font-size:14px;line-height:20px;min-height:34px;max-height:90px}
 body .chat-scroll .bubble.user{background:#ecdccc}
 body .chat-scroll .welcome{padding:30px 12px}
 body .chat-scroll .welcome h2{font:600 21px 'Segoe UI',sans-serif}
 body>aside,body[data-screen=chats]>aside,body:not([data-screen=chats])>aside{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100%;padding:24px 14px 14px;display:flex;flex-direction:column;z-index:101;transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility .2s;overflow:hidden;border:0;border-right:1px solid #fff7;box-shadow:5px 0 25px #252a3040;background-size:auto,360px 360px}
 body.mobile-menu-open>aside{transform:translateX(0);visibility:visible}
 .mobile-drawer-close{display:block;position:absolute;right:8px;top:7px;width:34px;height:34px;min-height:34px;padding:0;background:transparent;color:#41483f;font-size:26px;box-shadow:none}
 body>aside .brand,body[data-screen=chats]>aside .brand,body:not([data-screen=chats])>aside .brand{display:flex;height:auto;flex:none;min-height:66px;margin:6px 12px 18px 0;gap:12px}
 body>aside .personal-logo,body[data-screen=chats]>aside .personal-logo,body:not([data-screen=chats])>aside .personal-logo{height:62px;width:62px;flex-basis:62px}
 body>aside .brand strong,body[data-screen=chats]>aside .brand strong,body:not([data-screen=chats])>aside .brand strong{font-size:17px;line-height:1.25}
 body>aside nav{display:flex;flex-direction:column;gap:5px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:4px;scrollbar-width:thin}
 body>aside nav button,body[data-screen=chats]>aside nav button,body:not([data-screen=chats])>aside nav button{width:100%;max-width:none;flex:none;min-height:46px;padding:8px 10px;margin:0;gap:12px;white-space:normal;border:1px solid transparent;border-radius:10px;font-size:14px;background:transparent;color:#354047;box-shadow:none}
 body>aside nav .nav-symbol,body[data-screen=chats]>aside nav .nav-symbol,body:not([data-screen=chats])>aside nav .nav-symbol{width:29px;height:29px;flex-basis:29px}
 body>aside nav .nav-icon{width:20px;height:20px}
 body>aside nav button.active,body[data-screen=chats]>aside nav button.active,body:not([data-screen=chats])>aside nav button.active{background:linear-gradient(145deg,#f8e4d3,#edcfb6);color:#52483f;border-color:#fff6;box-shadow:inset 1px 1px #fff9,2px 3px 5px #30383d26}
 body>aside nav button.active .nav-symbol{background:linear-gradient(145deg,#faebdf,#e6c6ac);color:#665344}
 body>aside .company{display:none}
 .mobile-menu-shade{position:fixed;inset:0;z-index:100;background:#22282c77;border-radius:0;padding:0;backdrop-filter:blur(2px)}
 body.mobile-menu-open .mobile-menu-shade{display:block}
 .project-decision p{white-space:pre-wrap;overflow-wrap:anywhere}
 .project-state{font-size:11px!important;color:#786c5b}
 .project-chat-context{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;color:#5d625a;font-size:11px}
 .project-chat-context button{padding:0;width:26px;min-height:26px;background:transparent;color:#5d625a;box-shadow:none}
 body .bubble-heading{flex-wrap:wrap;gap:5px}
 body .bubble .copy-message{font-size:10px}
}
@media(prefers-reduced-motion:reduce){body>aside{transition:none!important}}

/* Narrow desktop windows use the same left drawer. */
@media(min-width:651px) and (max-width:1050px){
 body,body[data-screen=chats]{display:flex;flex-direction:column}
 .mobile-topbar{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 20px}
 .mobile-topbar>strong{flex:1;font-size:17px}
 .mobile-menu-toggle{display:block;min-width:40px}
 .mobile-connection{font-size:11px}
 body main,body[data-screen=chats] main,body:not([data-screen=chats]) main{margin-left:0;width:100%;min-width:0}
 body>aside,body[data-screen=chats]>aside,body:not([data-screen=chats])>aside{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100%;padding:24px 14px 14px;display:flex;flex-direction:column;z-index:101;transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility .2s;overflow:hidden;border:0;border-right:1px solid #fff7;box-shadow:5px 0 25px #252a3040;background-size:auto,360px 360px}
 body.mobile-menu-open>aside{transform:translateX(0);visibility:visible}
 .mobile-drawer-close{display:block;position:absolute;right:8px;top:7px;width:34px;height:34px;min-height:34px;padding:0;background:transparent;color:#41483f;font-size:26px;box-shadow:none}
 body>aside .brand,body[data-screen=chats]>aside .brand,body:not([data-screen=chats])>aside .brand{display:flex;height:auto;flex:none;min-height:66px;margin:6px 12px 18px 0;gap:12px}
 body>aside .personal-logo,body[data-screen=chats]>aside .personal-logo,body:not([data-screen=chats])>aside .personal-logo{height:62px;width:62px;flex-basis:62px}
 body>aside .brand strong,body[data-screen=chats]>aside .brand strong,body:not([data-screen=chats])>aside .brand strong{font-size:17px;line-height:1.25}
 body>aside nav{display:flex;flex-direction:column;gap:5px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:4px;scrollbar-width:thin}
 body>aside nav button,body[data-screen=chats]>aside nav button,body:not([data-screen=chats])>aside nav button{width:100%;max-width:none;flex:none;min-height:46px;padding:8px 10px;margin:0;gap:12px;white-space:normal;border:1px solid transparent;border-radius:10px;font-size:14px;background:transparent;color:#354047;box-shadow:none}
 body>aside nav .nav-symbol,body[data-screen=chats]>aside nav .nav-symbol,body:not([data-screen=chats])>aside nav .nav-symbol{width:29px;height:29px;flex-basis:29px}
 body>aside nav .nav-icon{width:20px;height:20px}
 body>aside nav button.active,body[data-screen=chats]>aside nav button.active,body:not([data-screen=chats])>aside nav button.active{background:linear-gradient(145deg,#f8e4d3,#edcfb6);color:#52483f;border-color:#fff6;box-shadow:inset 1px 1px #fff9,2px 3px 5px #30383d26}
 body>aside nav button.active .nav-symbol{background:linear-gradient(145deg,#faebdf,#e6c6ac);color:#665344}
 body>aside .company{display:none}
 .mobile-menu-shade{position:fixed;inset:0;z-index:100;background:#22282c77;border-radius:0;padding:0;backdrop-filter:blur(2px)}
 body.mobile-menu-open .mobile-menu-shade{display:block}
}