/* Agent-first home, full-width list hit targets, and a moving iOS-style tab pill. */
.hero-mascot{position:relative;width:130px;height:130px;margin:0 auto 4px;display:grid;place-items:center}
.agent-hero .hero-frog{display:block;width:126px!important;height:126px!important;object-fit:contain;margin:0!important;filter:drop-shadow(0 9px 9px #174d2d2c);animation:qaqa-frog-breathe 4s ease-in-out infinite}
.hero-edit-name{position:absolute!important;right:2px;bottom:10px;width:32px;height:32px;padding:0!important;border-radius:50%!important;background:#ffffff7f!important;border:1px solid #ffffffa9;color:#315a42;font-size:19px;box-shadow:0 3px 12px #18432824;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.agent-hero h1{margin:0 0 8px!important;font-size:clamp(27px,7vw,37px)!important;font-weight:720!important;letter-spacing:-.045em!important}
#page-home .starter-prompts{padding:5px 7px!important;margin:11px 0 20px!important;border-radius:28px!important}
#page-home .starter-prompts button{width:100%!important;margin:0!important;padding:11px 12px!important;min-height:67px;border-radius:18px!important;box-sizing:border-box;gap:12px}
#page-home .starter-prompts button>span:nth-child(2){flex:1;min-width:0}
#page-home .starter-prompts small{display:block!important;color:#2b925a!important;font-size:11px;margin-top:3px}
#page-home .starter-prompts button::after{content:none!important;display:none!important}
#page-home .starter-prompts .starter-chevron{font-size:23px;font-weight:300;color:#a5b2aa;line-height:1}
#page-home .starter-prompts button:not(:last-child){border-bottom:1px solid #dfe9e2}
#page-home .section-heading p{margin:5px 0 0;color:#60736a;font-size:13px;line-height:1.4}
#page-home .home-skills .discovery-list,#page-home .home-connection-list{padding:5px 7px!important;overflow:hidden;border-radius:27px!important}
#page-home .home-skills .discovery-list>button,#page-home .home-connection-list>button{width:100%!important;margin:0!important;padding:11px 12px!important;box-sizing:border-box;border-radius:18px!important;min-height:67px;gap:12px}
#page-home .home-skills .discovery-list>button:not(:last-child),#page-home .home-connection-list>button:not(:last-child){border-bottom:1px solid #e2ebe5}
#page-home .home-connection-list>button>span:nth-child(2){flex:1;min-width:0}
#page-home .home-connection-list>button>span:first-child{width:38px;height:38px;flex:none;display:grid;place-items:center}
#page-home .home-connection-list>button>span:first-child img{width:28px;height:28px;object-fit:contain}
#page-home .home-connection-list>button>b{font-weight:400;font-size:23px;color:#9aa9a0}
#page-home .home-more-skills{border-radius:18px!important}
#page-profile .settings-list{padding:5px 7px!important;border-radius:26px!important}
#page-profile .settings-list>button,#page-profile .settings-list>a,#page-profile .settings-list>label{box-sizing:border-box;width:100%!important;min-height:61px;padding:10px 12px!important;border-radius:18px!important}
:root:not([data-theme=dark]) #page-profile .settings-list>button:hover,:root:not([data-theme=dark]) #page-profile .settings-list>a:hover{background:#e8ece9!important;border-radius:18px!important}
#page-profile .settings-list>.subscription-row{background:#edeafa!important;color:#5f43ac!important;border-radius:18px!important}
#page-profile .settings-list>.subscription-row:hover{background:#e6e1f8!important}
#page-profile .settings-group h2{color:#337656;font-size:13px;font-weight:650}
#page-tools .page-intro{padding-bottom:12px}
#page-tools .filter-row{box-sizing:border-box;width:calc(100% + 28px);margin-left:-14px;padding:14px 14px 8px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
#page-tools .filter-row .filter-chip{flex:none;scroll-snap-align:start}
#page-tools .tool-sections{margin-top:12px}
#page-tools .tool-section-head{margin:0 5px 9px}
#page-tools .tool-section-head p{display:none}
#page-tools .tool-grid{box-sizing:border-box;padding:5px 7px!important;overflow:hidden;border-radius:26px!important}
#page-tools .tool-card{width:100%!important;margin:0!important;box-sizing:border-box;padding:12px 12px!important;border-radius:18px!important;min-height:72px}
#page-tools .tool-card:hover,#page-tools .tool-card:focus-visible,#page-home .starter-prompts button:hover,#page-home .starter-prompts button:focus-visible,#page-home .home-skills .discovery-list>button:hover,#page-home .home-skills .discovery-list>button:focus-visible,#page-home .home-connection-list>button:hover,#page-home .home-connection-list>button:focus-visible{background:#e8ece9!important;border-radius:18px!important}
#page-tools .tool-card .row-action.planned{color:#667787!important;background:#eef1f3!important;border-color:#dce4e8!important}
.bottom-nav{isolation:isolate;overflow:hidden}
.bottom-nav::before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);border-radius:999px;background:#e8ece9b8;transform:translateX(var(--nav-x,0%));transition:transform .34s cubic-bezier(.2,.85,.2,1),background-color .2s ease;box-shadow:inset 0 1px #fff9}
.bottom-nav[data-active=tools]{--nav-x:100%}.bottom-nav[data-active=create]{--nav-x:200%}.bottom-nav[data-active=profile]{--nav-x:300%}
:root:not([data-theme=dark]) .bottom-nav button.active,:root:not([data-theme=dark]) .bottom-nav .create-nav.active,:root:not([data-theme=dark]) .bottom-nav .create-nav>span,:root:not([data-theme=dark]) .bottom-nav .create-nav.active>span{background:transparent!important;box-shadow:none!important;outline:0!important;color:#234f38!important}
.bottom-nav button.active small,.bottom-nav button.active .semantic-icon{color:#176c48!important}
.bottom-nav button:hover,.bottom-nav button:focus-visible{background:transparent!important}
:root[data-theme=dark] .bottom-nav::before{background:#44614c99}
:root[data-theme=dark] #page-tools .tool-card:hover,:root[data-theme=dark] #page-home .starter-prompts button:hover,:root[data-theme=dark] #page-home .home-skills .discovery-list>button:hover,:root[data-theme=dark] #page-home .home-connection-list>button:hover{background:#ffffff18!important}
@media(max-width:430px){#page-tools .filter-row{width:calc(100% + 28px);margin-left:-14px}}
@media(prefers-reduced-motion:reduce){.bottom-nav::before,.agent-hero .hero-frog{transition:none;animation:none}}

/* One continuous green-to-white canvas and consistent glass controls. */
:root:not([data-theme=dark]) body,
:root:not([data-theme=dark]) body:has(#page-home:not([hidden])){
  background:linear-gradient(180deg,#43b374 0%,#69c98e 19%,#91d7aa 38%,#bce7c8 58%,#e0f2e3 79%,#fff 100%)!important;
  background-attachment:fixed!important;
}
:root:not([data-theme=dark]) #appShell button:not(.upgrade-button),
:root:not([data-theme=dark]) #appShell .settings-list>a,
:root:not([data-theme=dark]) #appShell .theme-setting,
:root:not([data-theme=dark]) #appShell .search-box,
:root:not([data-theme=dark]) #appShell .generator-card,
:root:not([data-theme=dark]) #appShell .settings-list,
:root:not([data-theme=dark]) #appShell .tool-grid,
:root:not([data-theme=dark]) #appShell .studio-ideas .template-tile{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(255,255,255,.68)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.16);
  backdrop-filter:blur(20px) saturate(1.16);
}
:root:not([data-theme=dark]) #appShell #currentModelButton{
  display:inline-flex!important;align-items:center;max-width:63%;height:40px;
  padding:0 16px!important;border-radius:999px!important;
  box-shadow:0 5px 17px #15432920,inset 0 1px #ffffffad;
}
#page-home .model-selector-emoji,#page-home .model-selector-copy small{display:none!important}
:root:not([data-theme=dark]) #appShell .filter-chip.active{
  background:rgba(255,255,255,.86)!important;color:#176e49!important;
  box-shadow:0 3px 10px #28573a20;
}
:root:not([data-theme=dark]) #appShell .starter-prompts,
:root:not([data-theme=dark]) #appShell .home-skills .discovery-list,
:root:not([data-theme=dark]) #appShell .home-connection-list{
  background:rgba(255,255,255,.53)!important;
}
:root:not([data-theme=dark]) #appShell #upgradeButton,
:root:not([data-theme=dark]) #appShell .compact-upgrade{
  background:linear-gradient(115deg,rgba(57,135,229,.76),rgba(54,109,215,.76))!important;
  border-color:rgba(207,229,255,.72)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  backdrop-filter:blur(20px) saturate(1.2);
}
:root:not([data-theme=dark]) #appShell .settings-list>button,
:root:not([data-theme=dark]) #appShell .settings-list>a,
:root:not([data-theme=dark]) #appShell .settings-list>label{
  background:rgba(255,255,255,.22)!important;
}
:root:not([data-theme=dark]) #appShell .settings-list>.subscription-row{
  background:rgba(194,182,243,.5)!important;
}
:root:not([data-theme=dark]) #appShell .tool-card:hover,
:root:not([data-theme=dark]) #appShell .tool-card:focus-visible,
:root:not([data-theme=dark]) #appShell .creation-launch:hover,
:root:not([data-theme=dark]) #appShell .creation-launch:focus-visible,
:root:not([data-theme=dark]) #appShell .settings-list>button:hover,
:root:not([data-theme=dark]) #appShell .settings-list>a:hover{
  background:rgba(224,230,225,.78)!important;
  border-radius:18px!important;
}
:root:not([data-theme=dark]) .bottom-nav{
  background:rgba(255,255,255,.7)!important;
  border-color:rgba(255,255,255,.82)!important;
  -webkit-backdrop-filter:blur(25px) saturate(1.3);
  backdrop-filter:blur(25px) saturate(1.3);
}
:root:not([data-theme=dark]) .sheet,
:root:not([data-theme=dark]) .plans-screen{
  background:rgba(247,253,249,.87)!important;
  -webkit-backdrop-filter:blur(25px);
  backdrop-filter:blur(25px);
}
.plan-context{margin:7px 0 15px;padding:12px 14px;border-radius:17px;background:rgba(226,244,234,.85);color:#245b3d;font-size:13px;line-height:1.4}
.plan-context[hidden]{display:none}
.plan-payment-options{margin:15px 0}
.plan-payment-options h3{margin:0 0 9px;font-size:15px;letter-spacing:-.02em}
.plan-payment-options>div{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.plan-payment-options button{min-height:70px;padding:12px;text-align:left;border:1px solid #d9e9df;border-radius:17px;background:rgba(255,255,255,.72);color:#1c3a28}
.plan-payment-options button strong,.plan-payment-options button small{display:block}
.plan-payment-options button strong{font-size:13px}
.plan-payment-options button small{margin-top:5px;font-size:10px;color:#647b6d}
.plan-payment-options button:disabled{opacity:.74;cursor:not-allowed}
:root[data-theme=dark] .plan-context{background:#294432;color:#dcf4e1}
:root[data-theme=dark] .plan-payment-options button{background:#263a2b;color:#f1f8f1;border-color:#416047}
:root[data-theme=dark] .plan-payment-options button small{color:#bbd0c0}
@media(max-width:350px){.plan-payment-options>div{grid-template-columns:1fr}}

/* The glass belongs to each action, not to a larger grouped rectangle. */
:root:not([data-theme=dark]) #appShell #page-home .starter-prompts,
:root:not([data-theme=dark]) #appShell #page-home .home-skills .discovery-list,
:root:not([data-theme=dark]) #appShell #page-home .home-connection-list,
:root:not([data-theme=dark]) #appShell #page-tools .tool-grid,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list,
:root[data-theme=dark] #appShell #page-home .starter-prompts,
:root[data-theme=dark] #appShell #page-home .home-skills .discovery-list,
:root[data-theme=dark] #appShell #page-home .home-connection-list,
:root[data-theme=dark] #appShell #page-tools .tool-grid,
:root[data-theme=dark] #appShell #page-profile .settings-list {
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-radius:0!important;padding:0!important;overflow:visible!important;
}
#page-home .starter-prompts,#page-home .home-skills .discovery-list,
#page-home .home-connection-list,#page-tools .tool-grid,#page-profile .settings-list {
  display:grid!important;gap:9px!important;
}
#page-home .home-skills .discovery-list{
  grid-auto-flow:row!important;grid-template-columns:minmax(0,1fr)!important;
  grid-auto-columns:auto!important;
}
:root:not([data-theme=dark]) #appShell #page-home .starter-prompts>button,
:root:not([data-theme=dark]) #appShell #page-home .home-skills .discovery-list>button,
:root:not([data-theme=dark]) #appShell #page-home .home-connection-list>button,
:root:not([data-theme=dark]) #appShell #page-tools .tool-card,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>button,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>a,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>label {
  background:rgba(255,255,255,.66)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:21px!important;
  box-shadow:0 6px 18px rgba(26,75,45,.08),inset 0 1px rgba(255,255,255,.65)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.17)!important;
  backdrop-filter:blur(18px) saturate(1.17)!important;
}
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>.subscription-row {
  background:rgba(194,220,255,.7)!important;color:#165e92!important;
}
:root:not([data-theme=dark]) #appShell #page-home .starter-prompts>button:hover,
:root:not([data-theme=dark]) #appShell #page-home .home-skills .discovery-list>button:hover,
:root:not([data-theme=dark]) #appShell #page-home .home-connection-list>button:hover,
:root:not([data-theme=dark]) #appShell #page-tools .tool-card:hover,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>button:hover,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>a:hover,
:root:not([data-theme=dark]) #appShell #page-profile .settings-list>label:hover {
  background:rgba(223,229,225,.88)!important;border-radius:21px!important;
}
:root[data-theme=dark] #appShell #page-home .starter-prompts>button,
:root[data-theme=dark] #appShell #page-home .home-skills .discovery-list>button,
:root[data-theme=dark] #appShell #page-home .home-connection-list>button,
:root[data-theme=dark] #appShell #page-tools .tool-card,
:root[data-theme=dark] #appShell #page-profile .settings-list>button,
:root[data-theme=dark] #appShell #page-profile .settings-list>a,
:root[data-theme=dark] #appShell #page-profile .settings-list>label {
  background:rgba(37,59,43,.74)!important;border:1px solid rgba(209,239,216,.16)!important;
  border-radius:21px!important;box-shadow:0 6px 18px #0002!important;
  -webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
}
#page-home .home-more-skills{margin-top:9px!important;border-radius:20px!important}
:root:not([data-theme=dark]) #appShell #upgradeButton,
:root:not([data-theme=dark]) #appShell .compact-upgrade {
  background:linear-gradient(120deg,rgba(199,238,255,.89),rgba(139,210,248,.88))!important;
  border:1px solid rgba(220,244,255,.91)!important;color:#155b89!important;
  box-shadow:0 6px 19px #155e8b24,inset 0 1px #fff9!important;
}
:root[data-theme=dark] .service-logo:not([src*="notion"]){filter:none!important}

/* iOS should not enlarge a page while the tab changes or an input receives focus. */
@keyframes qaqa-page-forward{from{opacity:.55;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}
@keyframes qaqa-page-back{from{opacity:.55;transform:translate3d(-14px,0,0)}to{opacity:1;transform:none}}
@media(max-width:600px){#appShell input,#appShell textarea,#appShell select{font-size:16px!important}}