/* Vaia on phones reads like a messaging app: a slim bar at the top (back to
   your Vaias, who you're talking to, a ⋯ menu), the conversation filling the
   screen from the bottom up, and the message box docked right above the tab
   bar. Wider screens keep the header's actions inline. */
.ag-head-menu{display:contents}
.ag-more{display:none}

@media (max-width:760px){
  /* the chat is the whole screen: no separate Vaias button or agent strip here,
     the back button in the chat's own bar opens the same list */
  html:has(#v-home#v-home.agent-workspace:not([hidden])) .vr-mobile-strip,
  html:has(#v-home#v-home.agent-workspace:not([hidden])) .vr-launcher{display:none!important}
  html:not(.native):has(#v-home#v-home.agent-workspace:not([hidden])) .topbar{display:none!important}
  html body #v-home#v-home.agent-workspace{
    padding:env(safe-area-inset-top,0px) 0 calc(var(--dock,0px) + var(--kb,0px))!important}
  html.native body #v-home#v-home.agent-workspace{padding-top:0!important}

  #v-home#v-home.agent-workspace #cgchatpanel.vw-host,
  #v-home#v-home.agent-workspace #cgchatpanel.vw-host:has(#agent.vw-empty:not(.vw-panel)),
  #v-home#v-home.agent-workspace #cgchatpanel.vw-host:is(.vw-has-results,.vw-panel){
    flex:1 1 auto;align-self:stretch;height:auto!important;max-height:none!important;max-width:none;width:100%;margin:0!important}
  #v-home#v-home.agent-workspace #cgchatpanel.vw-host #agent.vw-enabled,
  #v-home#v-home.agent-workspace #agent.vw-empty:not(.vw-panel){
    height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* the bar: back on the left, a pill with the Vaia in the middle, ⋯ on the right */
  #v-home#v-home.agent-workspace #agent .ag-head,
  #v-home#v-home.agent-workspace #agent.vw-empty:not(.vw-panel) .ag-head{
    position:relative;display:flex!important;align-items:center;justify-content:center;gap:0!important;min-height:60px;height:auto;padding:8px 64px!important;
    border:0;background:transparent;flex-wrap:nowrap}
  #v-home#v-home.agent-workspace #agent .ag-head #agcontacts{display:inline-grid!important;place-items:center;position:absolute;left:12px;top:50%;
    transform:translateY(-50%);width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#1c1e2b;color:#eceaf5;
    font:400 26px/1 var(--sans,system-ui);box-shadow:inset 0 1px 0 #ffffff12}
  #v-home#v-home.agent-workspace #agent .ag-head #agcontacts span{display:none}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-avatar{flex:none;display:grid;place-items:center;width:auto!important;height:44px!important;min-height:44px;padding:0 4px 0 8px!important;margin:0!important;border:0!important;
    border-radius:22px 0 0 22px!important;background:#1c1e2b!important;box-shadow:inset 0 1px 0 #ffffff12!important}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-avatar .vorb{--s:30px!important;width:30px!important;height:30px!important}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-ttl{flex:0 1 auto;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center;height:44px;min-width:0;max-width:calc(100vw - 190px);
    margin:0!important;padding:0 18px 0 6px!important;border-radius:0 22px 22px 0!important;background:#1c1e2b!important;box-shadow:inset 0 1px 0 #ffffff12}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-ttl b{font:600 17px/1.2 var(--sans,system-ui);color:#f6f4fb;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-ttl span{display:none}
  #v-home#v-home.agent-workspace #agent .ag-head #agx{display:none}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-more{display:inline-grid;place-items:center;position:absolute;right:12px;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#1c1e2b;color:#eceaf5;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-more:focus-visible{outline:2px solid #d9ccff;outline-offset:2px}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu{display:none;position:absolute;z-index:30;top:calc(100% - 2px);right:12px;min-width:200px;
    flex-direction:column;gap:2px;padding:6px;border-radius:18px;background:#1a1c28f5;border:1px solid #ffffff14;
    box-shadow:0 24px 50px -20px #000d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu.open{display:flex}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu>button{display:flex!important;align-items:center;justify-content:flex-start;width:100%;max-width:none!important;
    min-height:44px;padding:0 14px!important;border:0!important;border-radius:12px!important;background:none!important;box-shadow:none!important;color:#ecebf4;font:500 15px var(--sans,system-ui)!important;
    text-align:left;white-space:nowrap;box-shadow:none}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu>button:hover,
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu>button:focus-visible{background:#ffffff0d;outline:0}
  #v-home#v-home.agent-workspace #agent .ag-head .ag-head-menu>button[hidden]{display:none!important}

  /* the conversation sits at the bottom, nearest the box you type in */
  #v-home#v-home.agent-workspace #agent .ag-log,
  #v-home#v-home.agent-workspace #agent.vw-empty:not(.vw-panel) .ag-log{flex:1 1 auto;min-height:0;padding:12px 14px 8px}
  #v-home#v-home.agent-workspace #agent .ag-log>:first-child{margin-top:auto}
  #v-home#v-home.agent-workspace #agent .ag-hello,
  #v-home#v-home.agent-workspace #agent.vw-empty:not(.vw-panel) .ag-hello{margin:auto 0 4px;gap:8px;max-width:none;align-items:flex-start;text-align:left}
  #v-home#v-home.agent-workspace #agent .ag-hello>.vorb{--s:44px!important;width:44px!important;height:44px!important}
  #v-home#v-home.agent-workspace #agent .ag-hello :is(h1,h2){font-size:24px;letter-spacing:-.5px;text-align:left}
  #v-home#v-home.agent-workspace #agent .ag-hello p{font-size:14px;max-width:none;text-align:left}

  /* the message box: last thing above the tab bar; its quiet options sit just above it */
  #v-home#v-home.agent-workspace #agent .ag-comp,
  #v-home#v-home.agent-workspace #agent.vw-empty:not(.vw-panel) .ag-comp{display:flex;flex-direction:column;flex:none;max-height:none;overflow:visible;
    padding:6px 12px 8px;background:transparent;border:0}
  #v-home#v-home.agent-workspace #agent .ag-composer-tools{order:-1;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;margin:0 0 8px;
    overflow-x:auto;scrollbar-width:none}
  #v-home#v-home.agent-workspace #agent .ag-composer-tools::-webkit-scrollbar{display:none}
  #v-home#v-home.agent-workspace #agent .ag-composer-tools>button{flex:none;min-height:32px;padding:0 11px;border-radius:99px;font-size:12px}
  #v-home#v-home.agent-workspace #agent .ag-creative-tools{order:-1;margin:0 0 8px}
  #v-home#v-home.agent-workspace #agent .ag-row{width:100%;max-width:none;margin:0;border-radius:28px}
}