/* Studio app navigation is phone-only. Tablet and desktop keep their sidebar. */
.studio-phone-label{display:none}
@media(max-width:760px){
  .studio-shell{--studio-phone-header:56px;--studio-phone-dock:calc(96px + env(safe-area-inset-bottom,0px))}
  .studio-shell .studio-topbar{height:var(--studio-phone-header);min-height:var(--studio-phone-header);padding:8px 12px!important;flex-wrap:nowrap;gap:8px!important}
  .studio-topbar .secondary-nav,.studio-topbar .secondary-search,.studio-topbar .header-spacer{display:none!important}
  .studio-shell .studio-workspace{grid-template-columns:minmax(0,1fr);min-height:calc(100dvh - var(--studio-phone-header))}
  .studio-shell .studio-sidebar{position:fixed;z-index:1000;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 16px);max-width:560px;min-height:80px;padding:6px 4px;border:1px solid #48503e;border-radius:18px;background:#242720;box-shadow:0 8px 30px #18201238}
  .studio-sidebar>.sidebar-toggle,.studio-sidebar>.intro-mark,.studio-sidebar>h2,.studio-sidebar>p,.studio-sidebar>.sidebar-bottom,.studio-sidebar nav>small{display:none!important}
  .studio-shell .studio-sidebar nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;overflow:visible;width:100%;max-width:100%}
  .studio-shell .studio-sidebar nav .studio-nav-link{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;min-height:68px;padding:4px 1px;border-radius:10px;text-align:center;white-space:normal;background:transparent;color:#c6cbc0;text-decoration:none}
  .studio-shell .studio-sidebar nav .studio-nav-link>.sidebar-label{display:none}
  .studio-shell .studio-sidebar nav .studio-nav-link>.studio-phone-label{display:block;width:100%;font-size:9px;font-weight:600;line-height:1.25;letter-spacing:0;overflow-wrap:normal}
  .studio-shell .studio-sidebar nav .studio-nav-link>span:not(.studio-phone-label){display:grid;place-items:center;flex:none;width:36px;height:32px;border-radius:9px;font-size:22px;line-height:1}
  .studio-sidebar .studio-nav-link>span svg{width:20px;height:20px}
  .studio-shell .studio-sidebar nav .studio-nav-link>svg{flex:none;width:36px;height:32px;padding:6px 8px;border-radius:9px}
  .studio-shell .studio-sidebar nav .studio-nav-link.active{background:transparent;color:#d1fc64}
  .studio-sidebar .studio-nav-link.active>span:not(.studio-phone-label),.studio-sidebar .studio-nav-link.active>svg{background:#d1fc64;color:#192113}
  .studio-sidebar .studio-nav-link:focus-visible{outline:2px solid #d1fc64;outline-offset:-2px}
  .studio-shell #studio-main{padding-bottom:calc(var(--studio-phone-dock) + 24px);scroll-padding-bottom:var(--studio-phone-dock)}
  .studio-shell .studio-workspace.canvas-workspace{grid-template-rows:minmax(0,1fr);height:calc(100dvh - var(--studio-phone-header) - var(--studio-phone-dock));min-height:0}
  .studio-shell #studio-main.canvas-main{padding:0;height:100%}
  .studio-shell #studio-main.agent-main{padding:12px 12px calc(var(--studio-phone-dock) + 24px)!important}
  .studio-shell .agent-main .agent-shell{height:calc(100dvh - var(--studio-phone-header) - var(--studio-phone-dock) - 24px);min-height:360px}
  /* The dock already provides the Agent shortcut. Keep floating UI above it. */
  body:has(.studio-shell) .agent-launcher{display:none}
  body:has(.studio-shell) .agent-floating{bottom:var(--studio-phone-dock,calc(96px + env(safe-area-inset-bottom,0px)));height:min(690px,calc(100dvh - 170px - env(safe-area-inset-bottom,0px)))}
  body:has(.studio-shell) .profile-progress-widget{bottom:calc(108px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 180px - env(safe-area-inset-bottom,0px))}
  body:has(.studio-shell) #studio-toast{right:12px;bottom:calc(108px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 24px)}
}