/* Phones: as simple as a chat app. The stars show through, one row of
   options sits above one big message bubble, the dock is a slim glass pill,
   and nothing extra floats on top. Loaded last, phones only. */
@media (max-width:760px){
  /* the sky, not a coloured sheet */
  html body #agent#agent,html body #v-home.agent-workspace #cgchatpanel,html body #v-home.agent-workspace .ag-inline{background:transparent!important;background-image:none!important;border-color:transparent!important;box-shadow:none!important}
  .ag-conversation::before{opacity:.35}
  /* one row of options, scrolling sideways, above the composer */
  #v-home#v-home.agent-workspace #agent#agent.ag .ag-composer-tools,#agent#agent .ag-composer-tools{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 6px!important;margin:0!important}
  .ag-composer-tools::-webkit-scrollbar{display:none}
  #agent#agent .ag-composer-tools>*{flex:none!important;width:auto!important;min-width:0!important;max-width:none!important}
  #agent#agent .ag-composer-tools>.ag-strength{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 150px)!important;width:auto!important;z-index:60}
  .ag-composer-tools .vxe{flex-wrap:nowrap}
  .ag-composer-tools button{height:34px!important;min-height:34px!important;padding:0 12px!important;border-radius:99px!important;font-size:12.5px!important;white-space:nowrap}
  /* the message bubble: big, round, glass */
  #agent .ag-input,#agent .ag-compose,#agent form.ag-form{border-radius:28px!important}
  #agtext{font-size:16.5px!important}
  /* the dock: a slim floating glass pill */
  #mnav{left:10px!important;right:10px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;border-radius:26px!important;padding:4px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 40px rgba(0,0,0,.5)!important;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  #mnav button{min-height:52px!important;border-radius:20px!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important}
  #mnav button.on{background-image:var(--lg-fill-on)!important;border-color:rgba(255,255,255,.3)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important}
  #mnav button b{font-size:9.5px!important}
  /* nothing extra floating over Studio, Audio and the rest */
  html:not(:has(#v-home.agent-workspace:not([hidden]))) .vr-launcher{display:none!important}
  /* Audio */
  .au-tabs a{white-space:nowrap}
  .au-helpers .vxe{justify-content:center}
  .au-center>h1{font-size:27px}
  /* Studio: fewer boxes, calmer stack */
  #v-studio .sg-panel{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
  #v-studio .sg-3d-entry{display:none}
}