@media(max-width:1050px){.app-shell{grid-template-columns:250px 1fr}.computer-panel{display:none}}
@media(max-width:700px){.app-shell{display:block}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(300px,88vw);transform:translateX(-105%);transition:.2s;box-shadow:20px 0 60px #000}.sidebar.open{transform:none}.chat-panel{height:100%}.mobile-menu{display:inline-flex}.topbar{padding:0 12px}.messages{padding:24px 18px 130px}.composer{left:12px;right:12px}.computer-overlay>header{height:auto;min-height:64px;flex-wrap:wrap;padding:10px}.computer-overlay>header>div:last-child{flex-wrap:wrap;justify-content:flex-end}.overlay-screen{padding:8px}.mode-grid{grid-template-columns:1fr}}
@media(max-width:1200px){.app-shell{grid-template-columns:230px minmax(0,1fr) 330px}}
@media(max-width:1050px){.app-shell{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:700px){.chat-panel{--chat-gutter:18px}.app-shell{display:block}.message{width:100%}.message>span,.message>.message-body,.message-stack{max-width:90%}.composer-dock{padding:20px var(--chat-gutter) 16px}.composer{width:var(--chat-col);min-height:60px}.composer-files{padding:2px 4px 8px 8px}.file-card{max-width:100%;height:52px}.file-card-remove{flex-basis:32px;width:32px;height:32px}.message.with-files .msg-attachments{max-width:100%}.messages{padding-bottom:118px}.chat-panel:has(.composer-dock.has-status) .messages{padding-bottom:178px}}
@media(prefers-reduced-motion:reduce){.avatar.blobatar.thinking:before,.avatar.blobatar.thinking:after,.thinking-dots i{animation:none!important}}
@media(max-width:1200px){.app-shell.right-open{grid-template-columns:230px minmax(0,1fr) 340px}.app-shell.right-collapsed{grid-template-columns:230px minmax(0,1fr) 52px}}
@media(max-width:1050px){
  .panel-open-btn{display:inline-flex}
  .app-shell.right-collapsed{grid-template-columns:250px minmax(0,1fr)}
  .app-shell.right-collapsed .side-card{display:none}
  .app-shell.right-open{grid-template-columns:250px minmax(0,1fr)}
  .app-shell.right-open .side-card-backdrop{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5)}
  .app-shell.right-open .side-card{position:fixed;z-index:45;inset:0 0 0 auto;width:min(420px,100vw);box-shadow:-20px 0 60px #000}
}
@media(prefers-reduced-motion:reduce){.working-label{animation:none;color:var(--muted);background:none}}
@media(prefers-reduced-motion:reduce){.computer-hud .avatar.blobatar,.computer-hud-label{animation:none!important}.computer-hud-label{color:var(--muted);background:none}}
@media(max-width:700px){
  .topbar{gap:8px}
  .top-tools{gap:2px;padding:3px}
  .top-tool-button{width:32px;height:32px}
  .topbar>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .session-picker{margin-left:2px}
  .session-current{max-width:min(32vw,150px)}
  .message.assistant.spoken{grid-template-columns:24px minmax(0,1fr);column-gap:8px}
  .computer-part .preview{max-height:none}
}
@media(prefers-reduced-motion:reduce){.computer-signal,.computer-signal::before,.computer-signal-face i,.avatar.blobatar.thinking,.avatar-stack .stack-item .avatar.thinking{animation:none!important}}

/* Mobile conversation drawer and two-row chat header. */
.mobile-nav-backdrop,.mobile-nav-close{display:none}
.brand-icon{width:30px;height:30px;flex:none;border-radius:9px;margin-right:9px}
@media(max-width:700px){
  .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:39;border:0;border-radius:0;
    padding:0;background:#0008;backdrop-filter:blur(3px);touch-action:manipulation}
  .sidebar{visibility:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .sidebar.open{visibility:visible}
  .mobile-nav-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
    margin-left:auto;font-size:26px;line-height:1}
  .brand .create-menu-wrap{margin-left:4px}
  .topbar{display:grid;grid-template-columns:44px 32px minmax(0,1fr) minmax(0,104px);
    grid-template-rows:44px auto;gap:8px;height:auto;flex:0 0 auto;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;align-items:center}
  .topbar>.mobile-menu{grid-column:1;grid-row:1;width:44px;height:44px;justify-content:center}
  .topbar>.avatar,.topbar>.avatar-stack{grid-column:2;grid-row:1;margin:0}
  .topbar>strong{grid-column:3;grid-row:1;font-size:15px;line-height:1.3}
  .topbar>.session-picker{grid-column:4;grid-row:1;margin:0;min-width:0}
  .topbar .session-current{max-width:100%;min-height:44px;width:100%}
  .topbar>.grow{display:none}
  .topbar>.top-tools{grid-column:1 / -1;grid-row:2;display:flex;width:100%;min-width:0;
    margin:0;padding:0;border:0;border-radius:0;gap:4px;background:transparent;box-shadow:none}
  .topbar .top-tool-button,.topbar .call-entry{flex:1;min-width:0;width:auto}
  .topbar .top-tool-button{height:44px;min-height:44px;border-radius:10px;background:var(--surface)}
  .topbar .call-entry{display:flex}
  .topbar .call-entry>.top-tool-button{width:100%}
  .topbar .session-menu{right:0;left:auto;max-width:calc(100vw - 24px)}
}