/* Phones, laid out like a messaging app (vx-phone.js).
   Home is the inbox; a conversation has back, who you're talking to and ⋯ on
   top and the message box at the bottom; Create, Assets and Projects get a
   titled bar. Dark glass on the stars, no grain. */
.vxp-bar,.vxp-sheet,.vxp-quick,.vxp-inbox{display:none}

html.vx-phone{--dock:0px!important}
html.vx-phone.vx-phone body .topbar.topbar.topbar.topbar,html.vx-phone body #mnav#mnav,html.vx-phone body .vr-launcher.vr-launcher,
html.vx-phone body .vr-mobile-strip.vr-mobile-strip.vr-mobile-strip,html.vx-phone body #agrecommend#agrecommend,
html.vx-phone body #v-home#v-home.agent-workspace #agent#agent .ag-head.ag-head{display:none!important}

.vxp-round{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;color:#eef0fb;
  border:1px solid rgba(255,255,255,.14);background:rgba(22,24,40,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 22px -12px #000;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.vxp-round svg{width:21px;height:21px}
.vxp-round:active{transform:scale(.94)}
.vxp-round:focus-visible,.vxp-row:focus-visible,.vxp-face:focus-visible,.vxp-who:focus-visible{outline:2px solid #c9b8ff;outline-offset:2px}
.vxp-me{background:linear-gradient(135deg,rgba(255,138,216,.42),rgba(124,196,255,.42));border-color:rgba(255,255,255,.24)}
.vxp-initial{font:700 17px var(--sans,system-ui);color:#fff}

/* ---- the inbox ---- */
html.vx-phone.vxp-home .vxp-inbox{display:block;position:fixed;inset:0;z-index:55}
html.vx-phone.vxp-home #main{visibility:hidden}
.vxp-ihead{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 16px 10px;background:linear-gradient(180deg,rgba(5,6,13,.92),rgba(5,6,13,0))}
.vxp-iscroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 66px) 0 calc(env(safe-area-inset-bottom,0px) + 96px)}
.vxp-faces{display:flex;gap:6px;overflow-x:auto;padding:10px 14px 18px;scrollbar-width:none;scroll-snap-type:x proximity}
.vxp-faces::-webkit-scrollbar{display:none}
.vxp-face{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:4px 0;border:0;background:none;cursor:pointer;color:#c4c7da}
.vxp-face-av{position:relative;display:grid;place-items:center;width:84px;height:84px}
.vxp-face-av .vorb{--s:78px!important;width:78px!important;height:78px!important}
.vxp-face b{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13.5px var(--sans,system-ui)}
.vxp-face:active .vxp-face-av{transform:scale(.95)}
.vxp-face-new .vxp-face-av{width:78px;height:78px;margin:3px;border-radius:50%;border:1.5px dashed rgba(201,155,255,.55);color:#d9ccff}
.vxp-face-new svg{width:26px;height:26px}
.vxp-busy,.vxp-dot{display:block;width:12px;height:12px;border-radius:50%;background:#7cc4ff;box-shadow:0 0 0 3px #070811,0 0 12px #7cc4ff}
.vxp-busy{position:absolute;right:6px;bottom:6px;animation:vxp-pulse 1.4s ease-in-out infinite}
@keyframes vxp-pulse{50%{opacity:.45}}
.vxp-rows{display:flex;flex-direction:column}
.vxp-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 18px;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.vxp-row:active{background:rgba(255,255,255,.05)}
.vxp-row-av{flex:none;display:grid;place-items:center;width:54px;height:54px}
.vxp-row-av .vorb{--s:50px!important;width:50px!important;height:50px!important}
.vxp-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vxp-row-top{display:flex;align-items:baseline;gap:10px}
.vxp-row-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 16.5px var(--sans,system-ui);color:#f4f3fb}
.vxp-row-top em{font-style:normal;font-weight:500;color:#aeb2c8}
.vxp-row-top time{flex:none;font:500 13px var(--sans,system-ui);color:#7e8399}
.vxp-row-sub{display:flex;align-items:center;gap:10px}
.vxp-row-sub span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14.5px var(--sans,system-ui);color:#9a9fb5}
.vxp-dot{width:10px;height:10px;box-shadow:0 0 10px #7cc4ff}
.vxp-none{margin:30px 24px;text-align:center;color:#9a9fb5;font:400 14.5px/1.5 var(--sans,system-ui)}
.vxp-ifoot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:center;
  padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(0deg,rgba(5,6,13,.95) 40%,rgba(5,6,13,0))}
.vxp-ifoot .vxp-round{width:54px;height:54px}
.vxp-search{flex:1;display:flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-radius:27px;color:#9a9fb5;
  border:1px solid rgba(255,255,255,.13);background:rgba(22,24,40,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.vxp-search svg{width:21px;height:21px;flex:none}
.vxp-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#f4f3fb;font:400 17px var(--sans,system-ui)}
.vxp-search input::placeholder{color:#8a8fa6}
.vxp-search:focus-within{border-color:transparent;background:linear-gradient(rgba(22,24,40,.9),rgba(22,24,40,.9)) padding-box,linear-gradient(135deg,#ff8ad8,#c99bff 45%,#7cc4ff) border-box}

/* ---- the bar over a conversation or a page ---- */
html.vx-phone:is(.vxp-chat,.vxp-page) #vxpbar.vxp-bar{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 14px 12px;background:linear-gradient(180deg,rgba(5,6,13,.9) 55%,rgba(5,6,13,0))}
#vxpbar :is(.vxp-title,.vxp-who,.vxp-more,.vxp-me){display:none}
html.vxp-chat #vxpbar .vxp-who{display:flex;align-items:center;gap:9px;margin:0 auto;max-width:calc(100vw - 150px);height:46px;padding:0 18px 0 8px;border-radius:23px;cursor:pointer;
  color:#f4f3fb;border:1px solid rgba(255,255,255,.14);background:rgba(22,24,40,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.vxp-chat #vxpbar .vxp-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 16px var(--sans,system-ui)}
html.vxp-chat #vxpbar .vxp-who-av{display:grid;place-items:center;width:32px;height:32px;flex:none}
html.vxp-chat #vxpbar .vxp-who-av .vorb{--s:30px!important;width:30px!important;height:30px!important}
html.vxp-chat #vxpbar .vxp-more{display:grid}
html.vxp-page #vxpbar .vxp-title{display:block;flex:1;text-align:center;font:700 17px var(--sans,system-ui);color:#f3f2fa}
html.vxp-page #vxpbar .vxp-me{display:grid}

/* ---- the conversation ---- */
html.vx-phone body #v-home#v-home.agent-workspace{padding:calc(env(safe-area-inset-top,0px) + 64px) 0 var(--kb,0px)!important}
html.vx-phone .ag-conversation::before,html.vx-phone #agent::before,html.vx-phone #agent::after{display:none!important}
html.vx-phone body #v-home#v-home.agent-workspace #agent#agent,html.vx-phone body #v-home#v-home.agent-workspace #agent .ag-conversation{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vx-phone body #v-home#v-home.agent-workspace :is(#cgchatpanel,.hero.create,#agent .ag-comp,#agent .ag-log){border:0!important;box-shadow:none!important}
html.vx-phone body #v-home#v-home.agent-workspace #agent .ag-log{padding:10px 14px 8px}
/* Vaia speaks in a wide glass bubble, you in the gradient one */
html.vx-phone #agent .ag-msg.orb>.ag-av{display:none}
html.vx-phone body #agent#agent .ag-msg.orb>.ag-bub{max-width:92%;padding:14px 18px;border-radius:26px 26px 26px 10px!important;font-size:16.5px;line-height:1.5;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.045) 55%,rgba(255,255,255,.07))!important;
  border:1px solid rgba(255,255,255,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 14px 34px -20px rgba(0,0,0,.9)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
html.vx-phone body #agent#agent .ag-msg.orb.run>.ag-bub{padding:8px}
html.vx-phone body #agent#agent .ag-msg.you>p{border-radius:26px 26px 10px 26px!important;font-size:16px;color:#fff;
  background:linear-gradient(135deg,rgba(255,138,216,.30),rgba(201,155,255,.22) 50%,rgba(124,196,255,.30))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 14px 34px -18px rgba(140,110,255,.65)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}

/* the message box: one glass bubble, the same as on the web: + inside on the
   left, then the words, the mic, and the V that sends */
html.vx-phone #v-home#v-home.agent-workspace #agent .ag-comp{padding:6px 12px calc(8px + env(safe-area-inset-bottom,0px))!important}
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row.ag-row{position:relative;display:flex;align-items:center;gap:4px;min-height:58px;padding:6px 8px 6px 6px!important;
  border-radius:30px!important;border:0!important;background:var(--lg-fill)!important;box-shadow:var(--lg-rim),var(--lg-drop)!important;
  -webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important}
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row:focus-within{box-shadow:var(--lg-rim),0 0 0 1.5px rgba(201,155,255,.55),0 16px 40px -16px rgba(160,120,255,.6)!important}
html.vx-phone #agent#agent .ag-row #agattach{flex:none;width:44px!important;height:44px!important;margin:0!important;border-radius:50%!important;border:0!important;
  background:rgba(255,255,255,.08)!important;box-shadow:none!important}
html.vx-phone #agent#agent .ag-row #agtext{flex:1;min-width:0;padding:12px 6px!important;background:none!important;border:0!important;box-shadow:none!important;font-size:17px!important}
html.vx-phone #agent#agent .ag-row #agmic{flex:none;width:42px!important;height:42px!important;min-height:42px;background:none!important;border:0!important;box-shadow:none!important}
html.vx-phone #agent#agent .ag-row #agsend.ag-send{flex:none;width:46px!important;height:46px!important;min-height:46px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}

/* the empty chat: what Vaia can make, one tap starts the sentence */
html.vx-phone .vxp-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:14px}
.vxp-quick button{min-height:44px;padding:0 8px;border-radius:16px;cursor:pointer;color:#f1effa;font:600 13px var(--sans,system-ui);
  border:1.5px solid transparent;background:linear-gradient(rgba(18,19,34,.85),rgba(18,19,34,.85)) padding-box,
  linear-gradient(135deg,rgba(255,138,216,.4),rgba(201,155,255,.3),rgba(124,196,255,.4)) border-box}
.vxp-quick button:active{transform:scale(.97)}

/* ---- menus: a glass sheet from the bottom ---- */
html.vx-phone .vxp-sheet{display:block;position:fixed;inset:0;z-index:80}
html.vx-phone .vxp-sheet[hidden]{display:none}
.vxp-scrim{position:absolute;inset:0;background:rgba(3,4,10,.55);opacity:0;transition:opacity .2s}
.vxp-panel{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);padding:8px 8px 10px;border-radius:28px;
  background:rgba(22,23,38,.95);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -20px #000;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);transform:translateY(24px);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
.vxp-sheet.open .vxp-scrim{opacity:1}.vxp-sheet.open .vxp-panel{transform:none;opacity:1}
.vxp-grab{display:block;width:38px;height:5px;margin:2px auto 8px;border-radius:3px;background:rgba(255,255,255,.22)}
.vxp-panel button{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 16px;border:0;border-radius:16px;background:none;
  color:#eeedf6;font:500 16.5px var(--sans,system-ui);text-align:left;cursor:pointer}
.vxp-panel button svg{width:21px;height:21px;color:#c9b8ff;flex:none}
.vxp-panel button:active,.vxp-panel button:focus-visible{background:rgba(255,255,255,.07);outline:0}

/* ---- Create, Assets and Projects ---- */
html.vx-phone.vxp-page main .view:not(#v-home){padding-top:calc(env(safe-area-inset-top,0px) + 66px)!important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 30px)!important}
html.vx-phone #v-assets .ax-make{display:none}
@media(prefers-reduced-motion:reduce){.vxp-panel,.vxp-scrim{transition:none}.vxp-busy{animation:none}}

/* ---- speed: a phone repaints nothing that isn't moving for a reason ----
   the faces keep their float and blink (cheap, on the GPU); the lava inside
   them, the glow, the flowing rims and sheens stand still, and nothing hidden
   behind the inbox keeps animating */
html.vx-phone .vorb :is(.vo-lava,.vo-glow){animation:none!important}
html.vx-phone .vxp-rows .vorb *,html.vx-phone #vxpbar .vorb *{animation:none!important}
html.vx-phone.vxp-home #main *,html.vx-phone.vxp-home #main *::before,html.vx-phone.vxp-home #main *::after{animation-play-state:paused!important}
html.vx-phone #agent .ag-row::before,html.vx-phone #agsend,html.vx-phone #agsend::after,html.vx-phone .chat-brand-mark{animation:none!important}

/* Projects: no campaigns dropdown on a phone */
html.vx-phone body #campaign-organizer#campaign-organizer{display:none!important}
/* Create: Generate sits after the settings instead of floating over the last of them,
   and the prompt has room for a sentence or two */
html.vx-phone body #v-studio#v-studio .sg-gowrap{position:static!important;margin-top:14px;background:none!important;box-shadow:none!important}
html.vx-phone body #v-studio#v-studio #scinput{min-height:112px!important}
html.vx-phone body #v-studio#v-studio .sg-tiles{display:flex;flex-wrap:wrap;gap:8px}
html.vx-phone body #v-studio#v-studio .sg-tile{width:auto;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vx-phone body #v-studio#v-studio .sg-tile::before,html.vx-phone body #v-studio#v-studio .sg-tile::after{display:none!important}

/* swiping a chat away: the inbox waits underneath, the chat slides off over it */
html.vx-phone.vxp-swiping .vxp-inbox{display:block;position:fixed;inset:0;z-index:40}
html.vx-phone.vxp-swiping body .app{position:relative;z-index:50}
html.vx-phone.vxp-swiping #main{position:relative;z-index:50;background:#05060d;box-shadow:-18px 0 40px -10px rgba(0,0,0,.8);will-change:transform}
html.vx-phone.vxp-swiping #vxpbar{will-change:transform}

/* ==== liquid glass, everywhere on a phone (v4) ==========================
   No hard edges: every control and card is frosted glass with a light rim
   (inset highlights, never a 1px border line), content runs full screen
   under floating controls, and the logo hovers under the notch, sliding
   away while you scroll. */
html.vx-phone{
  --lg-fill:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.045) 46%,rgba(255,255,255,.075));
  --lg-rim:inset 0 1px .5px rgba(255,255,255,.42),inset 0 -.5px .5px rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.10),inset 0 0 22px rgba(255,255,255,.035);
  --lg-drop:0 14px 34px -16px rgba(0,0,0,.8);
  --lg-blur:blur(24px) saturate(185%)}
/* 1 · no lines: borders go transparent (gradient rings that paint through a transparent border still work) */
html.vx-phone body :is(main,.vxp-bar,.vxp-inbox,.vxp-sheet,.vxf-dock,.vxf-tools,.vxs-pop) *:not([class*=spin]):not([class*=Spin]):not(.vxp-busy):not(.vxp-dot){border-color:transparent!important}
html.vx-phone body :is(main,.vxp-inbox,.vxp-sheet) hr{display:none!important}
html.vx-phone body :is(.vxp-round,.vxp-who,.vxp-search,.vxf-dock,.vxf-tools){border-color:transparent!important}
html.vx-phone body#vx :is(#agattach,#scautoenhance,#scask,.ar-chip,#scgo,.vxp-play),html.vx-phone body :is(#agattach.cg-ico,#scautoenhance.sg-chip,#scask.sg-chip,.cg-chip.ar-chip,#scgo.sg-go,.vxp-play.vxp-play){border:0!important}
/* 2 · the glass itself, on every control and card */
html.vx-phone body :is(.vxp-round,.vxp-who,.vxp-search,.vxp-panel,.vxp-quick button,
  #agent .ag-msg.orb>.ag-bub,.vaia-answer,
  main .view :is(.sg-tabs,.sg-chip,.sg-card,.sg-row,.gs-chip,.cg-chip,.gen-budget,.gs-sptext,.ax-pills,.ax-sort,.ax-ico,.ax-media,.ax-search input,.ax-sources button,.pg-card,.pmenu,.vaia-btn,.vxp.compact,.vxp-play,.ag-suggest,.go,.ghost,.btn,.sc-more,details,input[type=text],select)){
  background:var(--lg-fill)!important;box-shadow:var(--lg-rim),var(--lg-drop)!important;
  -webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important}
/* the main actions stay luminous: tinted glass, not flat colour */
html.vx-phone body :is(#scgo.sg-go,.vxp-me,.ax-pills [aria-checked=true],.ax-sources [aria-checked=true],.sg-tabs [aria-selected=true],.sg-tabs .on){color:#fff!important;
  background:linear-gradient(135deg,rgba(255,138,216,.42),rgba(201,155,255,.32) 50%,rgba(124,196,255,.42))!important;
  box-shadow:var(--lg-rim),0 12px 30px -12px rgba(160,120,255,.7)!important}
/* your messages: tinted glass with the same rim */
html.vx-phone body #agent#agent .ag-msg.you>p{box-shadow:var(--lg-rim),0 14px 34px -18px rgba(140,110,255,.65)!important;border:0!important}
html.vx-phone body #agent#agent .ag-msg.orb>.ag-bub{border:0!important}

/* 3 · full screen: no bands behind the top controls, content runs underneath */
html.vx-phone body #vxpbar.vxp-bar,html.vx-phone body .vxp-ihead{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vx-phone body .vxp-ifoot{background:linear-gradient(0deg,rgba(5,6,13,.55),rgba(5,6,13,0))!important}
html.vx-phone body #vxpbar .vxp-title{display:none!important}

/* 4 · the logo under the notch */
.vxp-logo{display:none}
html.vx-phone:is(.vxp-home,.vxp-page) .vxp-logo{display:block;position:fixed;z-index:61;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);
  transform:translateX(-50%);height:26px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(160,140,255,.35));
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s}
.vxp-logo img{display:block;height:100%;width:auto}
html.vx-phone.vxp-chat .vxp-logo{display:none}
/* 5 · tucked while scrolling down: logo and top controls glide up out of the way */
html.vx-phone body :is(#vxpbar.vxp-bar,.vxp-ihead){transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s}
html.vx-phone.vxp-tucked body :is(#vxpbar.vxp-bar,.vxp-ihead){transform:translateY(calc(-100% - env(safe-area-inset-top,0px)));opacity:0;pointer-events:none}
html.vx-phone.vxp-tucked .vxp-logo{transform:translate(-50%,calc(-100% - 40px));opacity:0}
@media(prefers-reduced-motion:reduce){html.vx-phone body :is(#vxpbar.vxp-bar,.vxp-ihead),.vxp-logo{transition:none}}

html.vx-phone body #agent .ag-row #agtext{box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none!important}
html.vx-phone.vxp-page body #vxpbar .vxp-me{margin-left:auto}
/* nothing square: open/close boxes and wide controls get the same soft radius */
html.vx-phone body main :is(details,summary,.sc-more){border-radius:22px!important}
html.vx-phone body main details{overflow:hidden}
html.vx-phone body main details>summary{padding-left:18px}

/* ==== the dock: Chat · Create · Assets (v5) ==== */
.vxp-dock{display:none}
html.vx-phone:is(.vxp-home,.vxp-page) .vxp-dock{display:flex;position:fixed;z-index:62;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);
  gap:4px;padding:6px;border-radius:32px;background:var(--lg-fill);box-shadow:var(--lg-rim),0 18px 40px -14px rgba(0,0,0,.85);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.vxp-dock button{display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;padding:7px 0 6px;border:0;border-radius:26px;background:none;cursor:pointer;color:#b9bdd2;font:inherit}
.vxp-dock-ic{display:grid;place-items:center;width:34px;height:34px}
.vxp-dock-ic svg{width:34px;height:34px}
.vxp-dock b{font:650 11.5px var(--sans,system-ui);letter-spacing:.01em}
.vxp-dock button[aria-current=true]{color:#fff;background:linear-gradient(135deg,rgba(255,138,216,.26),rgba(201,155,255,.2) 50%,rgba(124,196,255,.26));box-shadow:inset 0 1px .5px rgba(255,255,255,.35)}
.vxp-dock button:active{transform:scale(.95)}
.vxp-dock button:focus-visible{outline:2px solid #c9b8ff;outline-offset:1px}
html.vx-phone.vxp-tucked .vxp-dock{transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
html.vx-phone .vxp-dock{transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s}
/* pages: the dock is the way back, so no back button; the logo and your account stay */
html.vx-phone.vxp-page body #vxpbar .vxp-back{visibility:hidden}
html.vx-phone.vxp-page main .view:not(#v-home){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 110px)!important}
/* inbox: search sits in the list, the dock at the bottom */
html.vx-phone .vxp-iscroll{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 110px)!important}
html.vx-phone .vxp-inbox .vxp-search{margin:0 16px 10px;height:48px}
html.vx-phone .vxp-ifoot{display:none!important}
html.vx-phone body #v-home#v-home.agent-workspace #agent#agent#agent.ag :is(.ag-composer-tools,.vxe,.ag-creative-tools[hidden]){display:none!important}
html.vx-phone body #v-home#v-home.agent-workspace :is(#agent,#agent .ag-conversation,#agent .ag-log,#cgchatpanel,.hero.create){outline:0!important;box-shadow:none!important;border:0!important}
html.vx-phone body #v-home#v-home.agent-workspace :is(#agent,#agent .ag-conversation):focus-within{box-shadow:none!important;outline:0!important}
html.vx-phone.vx-phone body #v-home#v-home.agent-workspace #agent#agent#agent.ag.ag{outline:0!important;box-shadow:none!important;border:0!important;border-color:transparent!important}
/* asset actions: dark glass so they read over any picture; armed delete is red and stands alone */
html.vx-phone body #main .view .ax-ico.ax-ico{background:rgba(8,10,20,.55)!important;color:#fff}
html.vx-phone body #main .view .ax-ico.ax-del.armed{background:linear-gradient(135deg,#ff5f78,#e0407a)!important;box-shadow:0 6px 18px -6px rgba(255,80,120,.8)!important}
.ax-acts:has(.ax-del.armed) .ax-ico:not(.ax-del){display:none}

/* inside the iPhone app the app's own dock pages between Chat, Create and Assets */
html.native.vx-phone body .vxp-dock{display:none!important}
html.native.vx-phone .vxp-iscroll{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px)!important}

/* ---- the message box, ChatGPT / Grok style: one frosted capsule floating over the
   chat, a hairline edge instead of a coloured ring, plain icons inside, and a round
   send button that lights up once there's something to send. Every Vaia chat. */
html.vx-phone #v-home#v-home.agent-workspace #agent .ag-comp{background:linear-gradient(0deg,rgba(5,6,13,.7) 30%,rgba(5,6,13,0))!important}
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row.ag-row{min-height:54px;gap:2px;padding:5px 6px 5px 4px!important;border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.13),0 10px 30px -10px rgba(0,0,0,.75)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%)!important;backdrop-filter:blur(30px) saturate(180%)!important;transition:box-shadow .25s,background .25s}
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row.ag-row:focus-within{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07))!important;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.2),0 12px 34px -10px rgba(0,0,0,.8)!important}
/* the old coloured ring goes; your composer colour lives on as a faint glow while typing */
html.vx-phone #agent#agent .ag-row::before{opacity:0!important;transition:opacity .3s}
html.vx-phone #agent#agent .ag-row:focus-within::before{opacity:.35!important;padding:1px!important;inset:-1px!important}
html.vx-phone #agent#agent .ag-row #agattach,html.vx-phone #agent#agent .ag-row #agmic{width:40px!important;height:40px!important;min-height:40px!important;min-width:40px!important;flex:0 0 40px!important;
  border-radius:50%!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:rgba(240,242,255,.82)!important;opacity:1}
html.vx-phone #agent#agent .ag-row #agattach:active,html.vx-phone #agent#agent .ag-row #agmic:active{background:rgba(255,255,255,.1)!important}
html.vx-phone #agent#agent .ag-row #agmic[aria-pressed=true]{color:#fff!important;background:rgba(255,120,150,.22)!important}
html.vx-phone #agent#agent .ag-row #agtext{font-size:17px!important;line-height:1.35!important;padding:10px 4px!important;color:#f4f5ff!important}
html.vx-phone #agent#agent .ag-row #agtext::placeholder{color:rgba(220,224,245,.5)!important}
/* send: a round, softly glowing glass button with the V, dimmed until there's text */
html.vx-phone #agent#agent .ag-row #agsend.ag-send{width:40px!important;height:40px!important;min-height:40px!important;min-width:40px!important;flex:0 0 40px!important;border-radius:50%!important;
  background:linear-gradient(135deg,rgba(255,138,216,.5),rgba(201,155,255,.42) 50%,rgba(124,196,255,.5))!important;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.55),0 6px 18px -6px rgba(160,120,255,.75)!important;transition:opacity .2s,transform .15s,box-shadow .2s}
html.vx-phone #agent#agent .ag-row:has(#agtext:placeholder-shown) #agsend.ag-send{background:rgba(255,255,255,.1)!important;box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)!important;opacity:.6}
html.vx-phone #agent#agent .ag-row #agsend.ag-send:active{transform:scale(.92)}
html.vx-phone #agent#agent .ag-row #agsend .chat-brand-mark{transform:scale(.78)}

/* ---- two rows, like Grok: what you type on top, the buttons underneath
   (+ on the left; the mic and a bright V to send on the right) */
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row.ag-row{flex-wrap:wrap;align-items:center;gap:8px;min-height:0;padding:12px 10px 10px!important;border-radius:30px!important;
  background:linear-gradient(180deg,rgba(38,40,48,.88),rgba(28,29,36,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.1),0 14px 34px -12px rgba(0,0,0,.8)!important}
html.vx-phone #v-home#v-home.agent-workspace #agent#agent .ag-row.ag-row:focus-within{background:linear-gradient(180deg,rgba(42,44,53,.92),rgba(30,31,39,.92))!important}
html.vx-phone #agent#agent .ag-row #agtext{order:-1;flex:1 1 100%!important;width:100%!important;min-height:30px;padding:4px 8px!important}
html.vx-phone #agent#agent .ag-row #agattach,html.vx-phone #agent#agent .ag-row #agmic{width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;flex:0 0 44px!important;
  background:rgba(255,255,255,.1)!important;color:#f2f3f8!important}
html.vx-phone #agent#agent .ag-row #agmic{margin-left:auto!important}
html.vx-phone #agent#agent .ag-row #agsend.ag-send,html.vx-phone #agent#agent .ag-row:has(#agtext:placeholder-shown) #agsend.ag-send{width:54px!important;height:44px!important;min-height:44px!important;min-width:54px!important;flex:0 0 54px!important;border-radius:22px!important;
  background:#fff!important;box-shadow:0 4px 14px -4px rgba(0,0,0,.6)!important}
html.vx-phone #agent#agent .ag-row:has(#agtext:placeholder-shown) #agsend.ag-send{opacity:.5}

/* press and hold a chat: no text selection or iOS callout while holding */
html.vx-phone :is(.vxp-row,.vxp-face,.vxp-rows,.vxp-faces),html.vx-phone :is(.vxp-row,.vxp-face) *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}
.vxp-sheet .vxp-panel button.vxp-danger{color:#ff7a8a}
.vxp-sheet .vxp-panel button.vxp-danger svg{stroke:#ff7a8a}
/* the rename box */
.vxp-ask{position:fixed;inset:0;z-index:90}
.vxp-ask .vxp-panel{display:grid;gap:12px;padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.vxp-ask-t{font:650 16px var(--sans,system-ui);color:#f4f5ff;padding:0 4px}
.vxp-ask input{width:100%;box-sizing:border-box;height:50px;padding:0 16px;border-radius:16px;border:0;background:rgba(255,255,255,.08);color:#fff;font:400 17px var(--sans,system-ui);outline:none;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.vxp-ask input:focus{box-shadow:inset 0 0 0 1.5px rgba(201,155,255,.6)}
.vxp-ask-b{display:flex;gap:10px}
.vxp-ask-b button{flex:1;height:48px;border-radius:24px;border:0;font:650 16px var(--sans,system-ui);background:rgba(255,255,255,.1);color:#f2f3f8}
.vxp-ask-b button[type=submit]{background:#fff;color:#111}
/* in the iPhone app the app's own dock sits at the bottom: menus open above it */
html.native .vxp-sheet:not(.vxp-ask) .vxp-panel{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
/* the rename box sits up top, clear of the keyboard */
.vxp-ask .vxp-panel{top:calc(env(safe-area-inset-top,0px) + 64px);bottom:auto!important;transform:none!important;opacity:1!important}

/* An app, not a document: pressing and holding anywhere never selects the page's
   text or brings up iOS's Copy / Look Up bar. Only the places you type keep it. */
html.vx-phone,html.vx-phone body,html.vx-phone body *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
html.vx-phone :is(input,textarea,[contenteditable],[contenteditable] *){-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}
html.vx-phone body{-webkit-tap-highlight-color:transparent}
/* the app's brand mark: V icon + "Vedit AI" (iPhone app only) */
.vxp-logo.vxp-logo-app{display:none;align-items:center;gap:8px;text-decoration:none}
html.vx-phone:is(.vxp-home,.vxp-page) .vxp-logo.vxp-logo-app{display:flex}
html.vx-phone.vxp-chat .vxp-logo.vxp-logo-app{display:none}
.vxp-logo.vxp-logo-app img{height:26px;width:26px;border-radius:6px}
.vxp-logo.vxp-logo-app b{font:700 18px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#f3f1ff;letter-spacing:-.2px;white-space:nowrap}