:root{--brand:#216bac;--brand-soft:#c1dce8;--ink:#10253f;--muted:#60758c;--panel:#f9fcff;--white:#fff;--success:#16845b;--shadow:0 24px 70px rgba(24,73,117,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:"Baloo 2",'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(circle at 50% -10%,#fff 0,#e8f4fa 34%,var(--brand-soft) 100%)}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding:28px 20px 48px}.topbar{max-width:1120px;margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand img{width:42px;height:42px;object-fit:contain}.private-pill{font-size:.82rem;font-weight:700;color:var(--brand);background:#fff9;border:1px solid #fff;padding:8px 13px;border-radius:999px}.panel{max-width:1000px;margin:0 auto;background:rgba(249,252,255,.94);border:1px solid #fff;border-radius:32px;box-shadow:var(--shadow);overflow:hidden;min-height:580px}.progress{height:7px;background:#dceaf2}.progress span{display:block;height:100%;width:var(--progress,16.6%);background:linear-gradient(90deg,var(--brand),#54a8d7);transition:width .45s ease}.step-label{padding:15px clamp(24px,6vw,76px) 0;text-align:right;color:var(--muted);font:700 .78rem 'Inter',system-ui}.stage{padding:52px clamp(24px,6vw,76px);animation:arrive .45s ease both}.welcome-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:42px;align-items:center}.welcome-art{display:grid;place-items:center;min-height:320px;position:relative}.welcome-art:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#fff 0,#dbeef7 70%);box-shadow:0 24px 60px rgba(33,107,172,.14)}.preview-egg{width:150px;height:195px;position:relative;z-index:1;border-radius:50% 50% 46% 46%;background:linear-gradient(145deg,#fff,#d7eaf4);box-shadow:inset -14px -14px 0 rgba(33,107,172,.12),0 20px 38px rgba(33,107,172,.19);transform:rotate(3deg)}.preview-egg:before,.preview-egg:after{content:"";position:absolute;border-radius:50%;background:var(--brand)}.preview-egg:before{width:22px;height:31px;left:38px;top:54px;transform:rotate(25deg)}.preview-egg:after{width:29px;height:20px;right:31px;top:108px;transform:rotate(-18deg)}.eyebrow{color:var(--brand);font-size:.86rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1{font-size:clamp(2.25rem,5vw,4.35rem);line-height:.98;margin:14px 0 18px;letter-spacing:-.035em}h2{font-size:clamp(1.75rem,3vw,2.65rem);line-height:1.06;margin:10px 0 14px}p{font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.65;color:var(--muted);font-size:1.02rem}.lead{max-width:660px;font-size:1.15rem}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{border:0;border-radius:999px;padding:14px 24px;font-weight:800;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 25px rgba(33,107,172,.28)}.btn-secondary{background:#e8f3f8;color:var(--brand)}.name-field{width:min(560px,100%);border:2px solid #bdd8e7;background:#fff;border-radius:18px;padding:17px 20px;font-size:1.2rem;color:var(--ink);outline:none}.name-field:focus{border-color:var(--brand);box-shadow:0 0 0 5px rgba(33,107,172,.1)}.design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}.design-card{border:2px solid transparent;background:#edf6fa;border-radius:24px;padding:24px;text-align:center;transition:.2s}.design-card:hover,.design-card.selected{border-color:var(--brand);background:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(33,107,172,.13)}.bot{width:116px;height:116px;margin:0 auto 15px;position:relative;border-radius:48% 48% 44% 44%;background:linear-gradient(145deg,#fff 15%,var(--bot,#5aa6cf));border:7px solid #d7eaf4;box-shadow:inset 0 -12px 0 rgba(33,107,172,.18)}.bot:before{content:"";position:absolute;left:24px;top:38px;width:18px;height:22px;border-radius:50%;background:var(--ink);box-shadow:44px 0 var(--ink)}.bot:after{content:"";position:absolute;left:43px;top:75px;width:24px;height:9px;border:4px solid var(--brand);border-top:0;border-radius:0 0 18px 18px}.bot.sunset{--bot:#ffc28e}.bot.mint{--bot:#83d5c1}.hatch-zone{text-align:center;padding-top:16px}.egg{width:190px;height:245px;margin:24px auto;position:relative;border-radius:50% 50% 46% 46%;background:linear-gradient(145deg,#fff,#d7eaf4);box-shadow:inset -18px -18px 0 rgba(33,107,172,.12),0 24px 45px rgba(33,107,172,.2);animation:wobble .7s ease-in-out infinite alternate}.egg:before,.egg:after{content:"";position:absolute;border-radius:50%;background:var(--brand)}.egg:before{width:24px;height:34px;left:48px;top:67px;transform:rotate(28deg)}.egg:after{width:32px;height:22px;right:43px;top:128px;transform:rotate(-18deg)}.egg.crack{animation:hatch 1.4s ease forwards}.hatched{animation:pop .6s cubic-bezier(.2,1.6,.5,1) both}.market-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.market-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(270px,32%);gap:18px;overflow-x:auto;padding:12px 4px 26px;scroll-snap-type:x mandatory}.agent-card{scroll-snap-align:start;border:1px solid #dcebf3;background:#fff;border-radius:24px;padding:22px;box-shadow:0 12px 28px rgba(37,83,120,.08);display:flex;flex-direction:column}.agent-icon{width:56px;height:56px;border-radius:18px;background:linear-gradient(145deg,var(--brand-soft),#fff);display:grid;place-items:center;color:var(--brand);font-size:1.6rem}.agent-card h3{font-size:1.4rem;margin:16px 0 6px}.agent-card p{font-size:.92rem;flex:1}.tag{display:inline-flex;align-items:center;border-radius:999px;background:#edf6fa;color:var(--brand);font:700 .78rem 'Inter',system-ui;padding:6px 10px;margin-right:5px;margin-bottom:6px}.modal-backdrop{position:fixed;inset:0;background:rgba(10,30,50,.55);display:grid;place-items:center;padding:20px;z-index:20;animation:fade .2s ease}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:28px;padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.modal-top{display:flex;justify-content:space-between;gap:20px}.close{width:42px;height:42px;border:0;border-radius:50%;background:#edf6fa;color:var(--ink);font-size:1.3rem}.checks{display:grid;gap:10px;margin:20px 0}.check{display:flex;gap:11px;align-items:flex-start;font-family:'Inter',system-ui;color:#36516d}.check i{font-style:normal;color:#fff;background:var(--success);width:23px;height:23px;flex:0 0 23px;border-radius:50%;display:grid;place-items:center;font-size:.78rem}.mcp-list{display:flex;flex-wrap:wrap;gap:8px}.mcp{border:1px solid #cee2ed;border-radius:12px;padding:9px 12px;font:700 .84rem 'Inter',system-ui;background:#f7fbfd}.hidden{display:none!important}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.confetti span{position:absolute;top:-20px;width:9px;height:18px;background:var(--brand);animation:fall 1.8s linear forwards}.empty{padding:34px;background:#edf6fa;border-radius:22px;text-align:center}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes wobble{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}@keyframes hatch{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-8deg) scale(1.04)}60%{transform:rotate(10deg) scale(1.05)}100%{transform:translateY(80px) scale(.15);opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.35) translateY(50px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes fall{to{transform:translateY(110vh) rotate(520deg)}}
@media(max-width:760px){.design-grid{grid-template-columns:1fr}.panel{border-radius:24px;min-height:0}.stage{padding:32px 22px}.step-label{padding:12px 22px 0}.welcome-grid{grid-template-columns:1fr;gap:10px}.welcome-art{min-height:230px;order:-1}.welcome-art:before{width:210px;height:210px}.preview-egg{width:112px;height:146px}.preview-egg:before{left:27px;top:38px}.preview-egg:after{right:20px;top:79px}.market-head{align-items:start;flex-direction:column}.market-row{grid-auto-columns:84%}.private-pill{display:none}.topbar{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.field-label{display:block;font:700 .9rem 'Inter',system-ui;color:var(--ink);margin:22px 0 8px}
.look-field{width:min(620px,100%);min-height:96px;resize:vertical;border:2px solid #bdd8e7;background:#fff;border-radius:18px;padding:15px 18px;font-size:1.05rem;line-height:1.5;color:var(--ink);outline:none;font-family:'Inter',system-ui}
.look-field:focus{border-color:var(--brand);box-shadow:0 0 0 5px rgba(33,107,172,.1)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip{border:1.5px solid #cbe0ec;background:#fff;color:var(--brand);border-radius:999px;padding:9px 15px;font:700 .86rem 'Inter',system-ui;transition:.18s}
.chip:hover{border-color:var(--brand);background:#eef7fb;transform:translateY(-1px)}
.egg-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,4vw,42px);margin:30px auto 8px;min-height:220px}
.egg-mini{width:132px;height:170px;position:relative;border-radius:50% 50% 46% 46%;background:linear-gradient(145deg,#fff,#d7eaf4);box-shadow:inset -12px -12px 0 rgba(33,107,172,.12),0 18px 34px rgba(33,107,172,.18);animation:wobble .7s ease-in-out infinite alternate}
.egg-mini.v1{filter:hue-rotate(-28deg)}
.egg-mini.v2{filter:hue-rotate(32deg)}
.egg-mini .spot{position:absolute;border-radius:50%;background:var(--brand);opacity:.85}
.egg-mini .spot.a{width:20px;height:20px;left:26px;top:52px}
.egg-mini .spot.b{width:14px;height:14px;right:30px;top:44px}
.egg-mini .spot.c{width:24px;height:24px;right:34px;bottom:40px}
.egg-mini.crack{animation-name:hatch;animation-duration:1.3s;animation-timing-function:ease;animation-iteration-count:1;animation-fill-mode:forwards}
.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.variant-card{position:relative;border:2px solid transparent;background:#edf6fa;border-radius:24px;padding:26px 18px 22px;text-align:center;transition:.2s}
.variant-card:hover{background:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(33,107,172,.13)}
.variant-card.selected{border-color:var(--brand);background:#fff;box-shadow:0 14px 30px rgba(33,107,172,.18)}
.variant-card strong{display:block;font-size:1.15rem;margin-top:4px}
.variant-tag{font:700 .78rem 'Inter',system-ui;color:var(--muted)}
.variant-card .bot{animation:pop .55s cubic-bezier(.2,1.6,.5,1) both}
.variant-card:nth-child(2) .bot{animation-delay:.12s}
.variant-card:nth-child(3) .bot{animation-delay:.24s}
.variant-card.selected:before{content:"✓";position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font:700 .9rem 'Inter',system-ui}
.bot.v1{filter:hue-rotate(-28deg)}
.bot.v2{filter:hue-rotate(32deg)}
.agent-chip{display:inline-flex;align-items:center;gap:9px;background:#fff9;border:1px solid #fff;padding:6px 15px 6px 6px;border-radius:999px;font-weight:800;color:var(--brand)}
.bot.chip{width:34px;height:34px;margin:0;border-width:3px;box-shadow:inset 0 -4px 0 rgba(33,107,172,.18)}
.bot.chip:before,.bot.chip:after{display:none}
@media(max-width:760px){.variant-grid{grid-template-columns:1fr}.egg-row{gap:12px;min-height:150px}.egg-mini{width:92px;height:118px}.agent-chip{display:none}}
.market-intro{display:flex;align-items:center;gap:22px;margin-bottom:6px}
.market-intro .market-avatar{flex:0 0 auto}
.market-avatar .bot{width:74px;height:74px;margin:0}
.market-intro h2{margin:6px 0 8px}
.market-intro>div:last-child{flex:1;min-width:0}
.market-intro .btn-secondary{align-self:flex-start;flex:0 0 auto}
.agent-card{position:relative}
.match-label{align-self:flex-start;font:800 .68rem 'Inter',system-ui;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#eef4f9;border-radius:999px;padding:5px 11px;margin-bottom:12px}
.agent-card.top-match{border-color:#bcdcef}
.agent-card.top-match .match-label{color:var(--brand);background:#e2f0fa}
@media(max-width:760px){.market-intro{flex-wrap:wrap;gap:14px}.market-avatar .bot{width:56px;height:56px}}
.hatch-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,4vw,44px);margin:30px auto 10px;min-height:230px}
.hatch-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.hatch-card.opened .egg-mini{animation-name:hatch;animation-duration:1s;animation-timing-function:ease;animation-iteration-count:1;animation-fill-mode:forwards}
.hatchling{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:150px;height:150px;display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,1.6,.5,1) both}
.hatchling img{width:150px;height:150px;object-fit:contain;border-radius:24px;background:#fff;box-shadow:0 16px 34px rgba(33,107,172,.22)}
.hatchling .bot{width:130px;height:130px;margin:0}
.hatch-number{font:800 .7rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hatch-actions{margin-top:14px;min-height:52px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.hatch-status{color:var(--muted);font-family:'Inter',system-ui;margin:0}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.generated-choice{position:relative;border:2px solid transparent;background:#edf6fa;border-radius:24px;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:.2s}
.generated-choice:hover{background:#fff;transform:translateY(-3px);box-shadow:0 12px 28px rgba(33,107,172,.13)}
.generated-choice.selected{border-color:var(--brand);background:#fff;box-shadow:0 14px 30px rgba(33,107,172,.18)}
.generated-choice img{width:150px;height:150px;object-fit:contain;border-radius:18px;background:#fff}
.generated-choice .bot{width:120px;height:120px;margin:0}
.generated-choice.selected:before{content:"✓";position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font:700 .9rem 'Inter',system-ui}
.pick-name{font-weight:800;font-size:1.12rem}
.pick-tag{font:700 .78rem 'Inter',system-ui;color:var(--muted)}
.chosen-agent{flex:0 0 auto;width:78px;height:78px;object-fit:contain;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(33,107,172,.18)}
.chip-img{width:34px;height:34px;object-fit:cover;border-radius:50%}
@media(max-width:760px){.choice-grid{grid-template-columns:1fr}.hatch-row{gap:12px;min-height:170px}.hatchling,.hatchling img{width:110px;height:110px}.hatchling .bot{width:96px;height:96px}}
/* ===== Product dashboard (marketplace step) — mirrors agenthatchers.ai Profiles ===== */
.app{min-height:100vh;background:#f5f6f8;font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;color:#1a1d21;display:flex;flex-direction:column}
.app svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.app svg rect{fill:currentColor;stroke:none}
.app svg path,.app svg circle{fill:none}
.app-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid #e7e9ee;padding:11px clamp(14px,2.4vw,26px);position:sticky;top:0;z-index:5}
.ws{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;border:1px solid #e7e9ee;border-radius:12px;padding:7px 11px;background:#fff}
.ws-logo{width:22px;height:22px;object-fit:contain;border-radius:6px}
.ws-chev svg{width:15px;height:15px;color:#9aa3ad}
.nav-tabs{display:flex;align-items:center;gap:4px;background:#f1f3f6;border-radius:14px;padding:4px}
.nav-tab{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#6b7480;font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:11px;transition:.15s}
.nav-tab span{line-height:1}
.nav-tab:hover{color:#1a1d21}
.nav-tab.active{background:#fff;color:#1a1d21;box-shadow:0 1px 3px rgba(20,25,35,.1);border:1px solid #e7e9ee}
.nav-tab.active svg{color:#216bac}
.nav-tab{position:relative}
.nav-tab.is-locked{color:#a3aab4;cursor:not-allowed}
.nav-tab.is-locked:hover{color:#8b929c}
.nav-tab .tab-lock{width:17px;height:17px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-left:-1px;flex:none}
.lock-note{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;font:600 .76rem 'Inter',system-ui;font-style:normal;color:#fff;background:#1a1d21;padding:7px 11px;border-radius:9px;box-shadow:0 6px 18px rgba(20,25,35,.18);z-index:5;animation:fade .18s ease}
.lock-note:before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;background:#1a1d21;transform:translateX(-50%) rotate(45deg);border-radius:2px}
@media(max-width:900px){.nav-tab .tab-lock{display:block}}
.nav-right{display:flex;align-items:center;gap:12px}
.create-btn{display:flex;align-items:center;gap:7px;background:#1f2a4d;color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;font-size:.9rem;box-shadow:0 4px 12px rgba(31,42,77,.25);transition:.15s}
.create-btn:hover{transform:translateY(-1px);background:#243257}
.create-btn svg{width:16px;height:16px}
.nav-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#e0433f,#c0322f);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.82rem}
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border-bottom:1px solid #e7e9ee;padding:12px clamp(14px,2.4vw,26px)}
.seg{display:flex;background:#f1f3f6;border-radius:11px;padding:3px}
.seg button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#6b7480;font-weight:600;font-size:.86rem;padding:7px 13px;border-radius:9px}
.seg .seg-on{background:#fff;color:#1a1d21;box-shadow:0 1px 2px rgba(20,25,35,.08)}
.seg svg{width:15px;height:15px}
.filter-pill{display:flex;align-items:center;gap:5px;border:1px solid #e2e5ea;background:#fff;color:#48505a;font-weight:600;font-size:.86rem;padding:8px 13px;border-radius:11px}
.filter-pill svg{width:14px;height:14px;color:#9aa3ad}
.filter-pill.sel{border-color:#bcd6ec;background:#eef5fc;color:#216bac}
.filter-pill.sel svg{color:#216bac}
.search-box{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid #e2e5ea;background:#fff;border-radius:11px;padding:8px 13px;min-width:230px}
.search-box svg{width:16px;height:16px;color:#9aa3ad}
.search-box input{border:0;outline:0;background:transparent;font-size:.9rem;color:#1a1d21;width:100%}
.board{flex:1;padding:20px clamp(14px,2.4vw,26px) 8px;max-width:1500px;width:100%;margin:0 auto}
.board-group{border-radius:20px;padding:16px clamp(12px,1.6vw,22px) 22px;margin-bottom:14px}
.board-group.g-active{background:linear-gradient(180deg,#edf6f0 0,rgba(237,246,240,0) 82%)}
.board-group.g-rec{background:linear-gradient(180deg,#eef1f7 0,rgba(238,241,247,0) 82%)}
.group-head{display:flex;align-items:center;gap:9px;margin:2px 2px 14px}
.group-head h3{font-size:1.18rem;font-weight:800;margin:0;letter-spacing:-.01em}
.count{font:800 .78rem 'Inter',system-ui;color:#6b7480;background:#fff;border:1px solid #e2e5ea;border-radius:999px;min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.p-card{background:#fff;border:1px solid #e7e9ee;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;outline:none}
.p-card:hover,.p-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,25,35,.12);border-color:#d7dbe2}
.p-card[hidden],.board-group[hidden]{display:none}
.p-thumb{aspect-ratio:4/3;display:grid;place-items:center;padding:14px;overflow:hidden}
.p-thumb img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(20,40,70,.14))}
.p-thumb .thumb-bot .bot{width:96px;height:96px;margin:0}
.thumb-sales{background:linear-gradient(160deg,#eaf2fc,#d7e6fa)}
.thumb-documents{background:linear-gradient(160deg,#eef0fb,#e0e4f7)}
.thumb-invoices{background:linear-gradient(160deg,#e9f6f1,#d6ede2)}
.thumb-support{background:linear-gradient(160deg,#e8f4fb,#d5e9f6)}
.thumb-website{background:linear-gradient(160deg,#f2edfb,#e6daf6)}
.thumb-operations{background:linear-gradient(160deg,#eaf6ec,#d8ecdc)}
.thumb-new{background:linear-gradient(160deg,#e0edfb,#c8ddf5)}
.p-meta{padding:12px 13px 14px;border-top:1px solid #eef0f3}
.p-name{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.98rem;color:#1a1d21}
.p-name .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.p-sub{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.p-owner{font-size:.82rem;color:#7a828c}
.p-tag{font:700 .72rem 'Inter',system-ui;color:#1a9d5f;background:#e7f7ee;border-radius:7px;padding:3px 8px}
.p-tag.tag-run{display:inline-flex;align-items:center;gap:5px;color:#fff;background:#1a9d5f}
.p-tag.tag-run i{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.p-tag.tag-new{color:#216bac;background:#e4f0fb}
.p-card.is-yours{border-color:#bcd6ec;box-shadow:0 0 0 2px rgba(33,107,172,.12)}
.board-empty{padding:40px;text-align:center;color:#7a828c;font-weight:600}
.board-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(14px,2.4vw,26px) 26px;max-width:1500px;width:100%;margin:0 auto;color:#9aa3ad;font-size:.82rem;font-family:'Inter',system-ui}
@media(max-width:900px){.nav-tab span{display:none}.nav-tabs{gap:2px}.search-box{min-width:0;flex:1}}
@media(max-width:680px){.ws span{display:none}.filter-pill:not(.sel){display:none}.p-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* ===== Flat product theme applied to the whole guided flow ===== */
body{background:#f5f6f8;font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2{font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.02em}
h1{font-weight:800}
.shell{padding:24px 20px 44px}
.brand{font-family:'Inter',system-ui;font-weight:800}
.private-pill{font-family:'Inter',system-ui;color:#48505a;background:#fff;border:1px solid #e7e9ee;font-weight:700}
.agent-chip{background:#fff;border:1px solid #e7e9ee}
.panel{background:#fff;border:1px solid #e7e9ee;border-radius:20px;box-shadow:0 1px 3px rgba(20,25,35,.05),0 22px 44px rgba(20,25,35,.06)}
.progress{background:#eef0f3}
.progress span{background:linear-gradient(90deg,#216bac,#3f9bd6)}
.step-label{color:#9aa3ad}
.eyebrow{letter-spacing:.10em}
.btn{border-radius:12px;font-family:'Inter',system-ui;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s}
.btn-primary{background:#216bac;box-shadow:0 4px 12px rgba(33,107,172,.22)}
.btn-primary:hover{background:#1d5f99}
.btn-secondary{background:#eef0f3;color:#48505a}
.btn-secondary:hover{background:#e6e9ee}
.name-field,.look-field{border-radius:12px;border:1.5px solid #e2e5ea;font-family:'Inter',system-ui}
.name-field:focus,.look-field:focus{border-color:#216bac;box-shadow:0 0 0 4px rgba(33,107,172,.12)}
.field-label{font-family:'Inter',system-ui}
.chip{border-radius:10px;border:1px solid #e2e5ea;color:#48505a;font-family:'Inter',system-ui}
.chip:hover{border-color:#bcd6ec;background:#eef5fc;color:#216bac}
.design-card,.variant-card,.generated-choice{background:#fff;border:1px solid #e7e9ee;border-radius:16px}
.design-card:hover,.design-card.selected,.variant-card:hover,.variant-card.selected,.generated-choice:hover,.generated-choice.selected{border-color:#bcd6ec;box-shadow:0 12px 26px rgba(20,25,35,.1)}
.variant-card.selected,.generated-choice.selected{box-shadow:0 0 0 2px rgba(33,107,172,.18),0 12px 26px rgba(20,25,35,.1)}
.pick-tag,.variant-tag{font-family:'Inter',system-ui}
.welcome-art:before{background:radial-gradient(circle,#fff 0,#eef2f6 70%);box-shadow:0 20px 50px rgba(20,25,35,.08)}
.hatch-card .egg-mini{box-shadow:inset -12px -12px 0 rgba(33,107,172,.1),0 14px 28px rgba(20,25,35,.12)}

/* Brand theme — match agenthatchers.ai (Inter + brand blue gradient) */
body{background:radial-gradient(circle at 50% -12%,#fff 0,#eaf4fb 36%,#c1dce8 100%)}
.panel{border-radius:26px;border:1px solid #e7f0f7;box-shadow:0 1px 3px rgba(33,107,172,.06),0 26px 60px rgba(33,107,172,.12)}
h1{font-weight:800}h2{font-weight:700}
/* Default egg — brand illustration replaces the CSS-drawn eggs */
.preview-egg{background:url("/prototype/egg.webp") center/contain no-repeat;box-shadow:none;width:230px;height:290px;transform:none;border-radius:0}
.preview-egg:before,.preview-egg:after{display:none}
.egg-mini{background:url("/prototype/egg.webp") center/contain no-repeat;box-shadow:none;border-radius:0}
.egg-mini.v1,.egg-mini.v2{filter:none}
.egg-mini .spot{display:none}
.hatch-card .egg-mini{box-shadow:none}
.welcome-title{font-family:"Baloo 2",'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em}
/* Gradual hatch: crack → another crack → agent slowly emerges */
.egg-mini{position:relative}
.crack{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#16253f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.crack path{stroke-dasharray:140;stroke-dashoffset:140}
.crack1{animation:crackShow .01s linear forwards 1.3s}
.crack1 path{animation:crackDraw .5s ease-out forwards 1.3s}
.crack2{animation:crackShow .01s linear forwards 2.8s}
.crack2 path{animation:crackDraw .55s ease-out forwards 2.8s}
@keyframes crackShow{to{opacity:.92}}
@keyframes crackDraw{to{stroke-dashoffset:0}}
/* little shudder as each crack forms */
.hatch-card .egg-mini{animation:wobble .7s ease-in-out infinite alternate,eggShudder 4s ease-in-out both}
@keyframes eggShudder{0%,32%{transform:rotate(0)}36%{transform:rotate(-4deg)}40%{transform:rotate(3deg)}44%{transform:rotate(0)}68%{transform:rotate(0)}72%{transform:rotate(-6deg)}76%{transform:rotate(5deg)}80%{transform:rotate(0)}100%{transform:rotate(0)}}
/* egg breaks open */
.hatch-card.opened .egg-mini{animation:eggBreak .7s cubic-bezier(.3,1,.5,1) forwards}
@keyframes eggBreak{0%{transform:rotate(0) scale(1);opacity:1}22%{transform:rotate(-8deg) scale(1.06)}44%{transform:rotate(9deg) scale(1.05)}100%{transform:translateY(26px) scale(.16) rotate(-6deg);opacity:0}}
/* agent rises out slowly, staying centred */
.hatchling{animation:hatchRise 1s cubic-bezier(.2,1.3,.35,1) both}
@keyframes hatchRise{0%{opacity:0;transform:translateX(-50%) translateY(34px) scale(.42)}55%{opacity:1}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
/* Connect Your Agent step */
.connect-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:44px 20px;font-family:'Inter',system-ui,-apple-system,sans-serif}
.connect-head{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.connect-mascot{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(33,107,172,.22))}
.connect-head h2{margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:#16253f;letter-spacing:-.02em}
.connect-card{width:min(660px,100%);background:#fff;border:1px solid #e7f0f7;border-radius:22px;box-shadow:0 24px 60px rgba(33,107,172,.14);padding:24px clamp(20px,3vw,32px) 28px}
.connect-card h3{margin:0 0 6px;font-size:1.15rem;font-weight:800;color:#16253f}
.connect-card svg,.connect-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field-row{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font:800 .72rem 'Inter',system-ui;letter-spacing:.07em;text-transform:uppercase;color:#54606e}
.field-ic{color:#9aa3ad;display:inline-flex}
.connect-input{width:100%;border:1.5px solid #e4e8ee;background:#f6f8fb;border-radius:14px;padding:13px 16px;font-size:.98rem;color:#16253f;outline:none;font-family:'Inter',system-ui}
.connect-input::placeholder{color:#aab3be}
.connect-input:focus{border-color:#216bac;background:#fff;box-shadow:0 0 0 4px rgba(33,107,172,.1)}
.connect-save{width:100%;margin-top:24px;background:#216bac;color:#fff;border:0;border-radius:14px;padding:15px;font-weight:800;font-size:1rem;box-shadow:0 10px 22px rgba(33,107,172,.24)}
.connect-save:hover{background:#1d5f99}
.connect-cta{width:min(660px,100%);display:flex;align-items:center;justify-content:space-between;gap:14px;border:1.5px dashed #b9cfe2;border-radius:16px;padding:13px 16px;color:#3a4a5e;font-weight:600;font-size:.94rem;background:rgba(255,255,255,.45)}
.connect-cta .cta-left{display:flex;align-items:center;gap:9px}
.connect-cta .cta-left svg{color:#216bac;flex:0 0 auto}
.cta-book{background:#fff;border:1px solid #cdddea;color:#216bac;padding:10px 18px}
.cta-book:hover{background:#eef5fc}
.connect-nav{width:min(660px,100%);display:flex;justify-content:space-between;gap:12px;margin-top:2px}
.connect-nav.center{justify-content:center}
.connect-success{text-align:center;padding:34px 26px}
.connect-success .success-emoji{font-size:2.4rem}
.connect-success h3{font-size:1.5rem;margin:8px 0 6px}
.connect-success p{max-width:420px;margin:0 auto 20px}
@media(max-width:560px){.connect-cta{flex-direction:column;align-items:flex-start}.connect-head{flex-direction:column;text-align:center;gap:8px}}
.welcome-grid .actions{margin-top:clamp(48px,12vh,120px)}
/* Microphone dictation field */
.mic-field{position:relative}
.mic-field .look-field{padding-right:54px}
.mic-btn{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;border:1px solid #dfe4ea;background:#fff;display:grid;place-items:center;color:#6b7480;cursor:pointer;transition:.15s;padding:0}
.mic-btn:hover{border-color:#216bac;color:#216bac}
.mic-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mic-btn.mic-live{background:#216bac;color:#fff;border-color:#216bac;animation:micPulse 1.1s ease-in-out infinite}
.mic-btn.mic-off{opacity:.5}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(33,107,172,.4)}50%{box-shadow:0 0 0 6px rgba(33,107,172,0)}}
/* Marketplace portraits being re-generated in the chosen look */
.p-thumb.is-pending{position:relative}
.p-thumb.is-pending:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite;pointer-events:none}
@keyframes shimmer{to{background-position:-200% 0}}
.p-thumb img{transition:opacity .3s}
.p-thumb.is-generated img{filter:drop-shadow(0 6px 12px rgba(20,40,70,.18))}
/* Generated portraits come back on a white background — sit them on white tiles */
.p-thumb.is-generated{background:#fff}
/* Connect end page — ported from the dashboard's HermesOnboarding + AddInstanceDialog */
.onboard-card{width:min(560px,100%);background:#fff;border:1px solid #e7f0f7;border-radius:18px;box-shadow:0 16px 44px rgba(33,107,172,.12);padding:24px clamp(20px,3vw,28px)}
.onboard-head{display:flex;align-items:center;gap:12px}
.onboard-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#eef4f9;display:grid;place-items:center;color:#54606e}
.onboard-ic.ok{background:#e7f7ee;color:#1a9d5f}
.onboard-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.onboard-head h2{margin:0;font-size:1.15rem;font-weight:800;color:#16253f}
.onboard-lead{margin:12px 0 0;font-size:.92rem;color:#54606e}
.onboard-eyebrow{margin:20px 0 0;font:700 .72rem 'Inter',system-ui;letter-spacing:.08em;text-transform:uppercase;color:#8a94a0}
.onboard-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.onboard-list li{display:flex;align-items:flex-start;gap:12px}
.onboard-list svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;fill:none;stroke:#9aa3ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.req-label{font-size:.9rem;font-weight:700;color:#16253f}
.req-detail{font-size:.8rem;color:#8a94a0;margin-top:1px}
.opt{margin-left:8px;font-size:.72rem;font-weight:500;color:#9aa3ad;text-transform:none;letter-spacing:0}
.onboard-btn{width:100%;margin-top:22px;background:#216bac;color:#fff;border:0;border-radius:12px;padding:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.onboard-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.onboard-btn:hover{background:#1d5f99}
/* wizard dialog */
.connect-modal{width:min(560px,100%)}
.step-rail{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0;flex:1}
.rail-item{display:flex;align-items:center;gap:8px;flex:1;color:#9aa3ad;font-size:.8rem;font-weight:700}
.rail-item:not(:last-child):after{content:"";flex:1;height:2px;background:#e7e9ee;border-radius:2px}
.rail-dot{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#f1f3f6;color:#8a94a0;display:grid;place-items:center;font-size:.75rem;font-weight:800}
.rail-dot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rail-item.active{color:#16253f}.rail-item.active .rail-dot{background:#216bac;color:#fff}
.rail-item.done .rail-dot{background:#e7f7ee;color:#1a9d5f}
.rail-title{white-space:nowrap}
@media(max-width:520px){.rail-title{display:none}}
.dlg-lead{margin:16px 0 0;font-size:.9rem;color:#54606e}
.dlg-form{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.cf{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cf-label{display:flex;align-items:center;gap:7px;font:800 .72rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;color:#16253f}
.cf-label.plain{text-transform:none;letter-spacing:0;font-weight:700;font-size:.9rem;color:#16253f}
.cf-label svg{width:15px;height:15px;fill:none;stroke:#9aa3ad;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-wrap{position:relative}
.cf-input{width:100%;border:1.5px solid #e4e8ee;background:#f8fafc;border-radius:10px;padding:11px 40px 11px 13px;font-size:.95rem;color:#16253f;outline:none;font-family:'Inter',system-ui}
.cf-input::placeholder{color:#aab3be}
.cf-input:focus{border-color:#216bac;background:#fff;box-shadow:0 0 0 4px rgba(33,107,172,.1)}
.cf-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;background:transparent;color:#9aa3ad;display:grid;place-items:center;cursor:pointer}
.cf-eye svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-eye:hover{color:#16253f}
.cf-hint{margin:0 0 6px;font-size:.76rem;color:#8a94a0}
.cf-hint code{background:#eef1f5;border-radius:5px;padding:1px 5px;font-size:.72rem;color:#48505a}
.cf-test{margin-top:6px;display:flex;align-items:center;gap:10px}
.btn-outline{background:#fff;border:1px solid #d7dce3;color:#48505a;border-radius:9px;padding:8px 14px;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.btn-outline:hover{border-color:#216bac;color:#216bac}
.btn-outline svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.probe-ok{font-size:.82rem;color:#1a9d5f;font-weight:600}
.cf-note{margin:12px 0 0;font-size:.76rem;color:#9aa3ad}
.dlg-actions{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Single crack that draws inner-left → right over 5s, then the egg opens */
.hatch-card .egg-mini{animation:wobble .7s ease-in-out infinite alternate}
.crackline{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#16253f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.92;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.crackline path{stroke-dasharray:100;stroke-dashoffset:100;animation:crackAcross 5s linear forwards}
@keyframes crackAcross{to{stroke-dashoffset:0}}
/* old two-step crack overlays are no longer emitted */
.crack1,.crack2{display:none}
/* Dashboard tab pages — Chats / Analytics / Config */
.chat-wrap{flex:1;display:flex;min-height:0;max-width:1500px;width:100%;margin:0 auto;border-top:1px solid #eef0f3}
.chat-list{width:300px;border-right:1px solid #e7e9ee;display:flex;flex-direction:column;overflow-y:auto;background:#fff}
.chat-list-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eef0f3}
.chat-list-head svg{width:16px;height:16px;stroke:#9aa3ad;fill:none;stroke-width:2}
.chat-list-head input{border:0;outline:0;background:transparent;font-size:.88rem;width:100%;font-family:'Inter',system-ui}
.chat-item{display:flex;gap:10px;align-items:center;padding:11px 14px;border:0;background:transparent;text-align:left;cursor:pointer;border-bottom:1px solid #f2f3f6}
.chat-item:hover{background:#f7f9fb}.chat-item.active{background:#eef5fc}
.chat-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#eef4f9}
.chat-item-main{min-width:0;flex:1}
.chat-item-top{display:flex;justify-content:space-between;gap:8px;font-size:.9rem}
.chat-item-top b{color:#16253f}.chat-item-top span{color:#9aa3ad;font-size:.75rem}
.chat-item-sub{color:#7a828c;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:#f8fafc}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #e7e9ee;background:#fff}
.chat-head b{font-size:.95rem;color:#16253f;display:block}
.chat-status{font-size:.76rem;color:#1a9d5f;display:flex;align-items:center;gap:5px}
.chat-status .dot{width:7px;height:7px;border-radius:50%;background:#22c55e}
.chat-thread{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:9px;max-width:74%}
.msg.me{align-self:flex-end}.msg.them{align-self:flex-start}
.msg-ava{width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-flex;flex:0 0 auto;background:#eef4f9}
.msg-ava img,.msg-ava .bot{width:100%;height:100%;object-fit:cover;margin:0}
.bubble{padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.5}
.msg.them .bubble{background:#fff;border:1px solid #e7e9ee;color:#28313c;border-bottom-left-radius:5px}
.msg.me .bubble{background:#216bac;color:#fff;border-bottom-right-radius:5px}
.chat-input{display:flex;gap:10px;padding:14px 18px;border-top:1px solid #e7e9ee;background:#fff}
.chat-input input{flex:1;border:1.5px solid #e2e5ea;border-radius:14px;padding:12px 16px;font-size:.92rem;outline:none;font-family:'Inter',system-ui}
.chat-input input:focus{border-color:#216bac}
.send-btn{width:44px;border:0;border-radius:12px;background:#216bac;color:#fff;font-size:1.1rem;cursor:pointer}
.page-pad{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:26px clamp(16px,2.4vw,30px)}
.page-h2{font-size:1.5rem;font-weight:800;margin:0;color:#16253f}
.page-sub{color:#7a828c;margin:4px 0 22px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat-tile{background:#fff;border:1px solid #e7e9ee;border-radius:16px;padding:18px 20px}
.stat-label{font-size:.82rem;color:#8a94a0}
.stat-val{font-size:1.9rem;font-weight:800;color:#16253f;margin-top:4px}
.stat-delta{font-size:.8rem;color:#1a9d5f;font-weight:700;margin-top:2px}
.chart-card{background:#fff;border:1px solid #e7e9ee;border-radius:16px;padding:20px;margin-top:18px}
.chart-head{display:flex;justify-content:space-between;color:#16253f;font-size:.95rem;font-weight:700;margin-bottom:16px}
.chart-head span{color:#9aa3ad;font-size:.8rem;font-weight:400}
.bars{display:flex;align-items:flex-end;gap:14px;height:160px}
.bars span{flex:1;background:linear-gradient(180deg,#4a9fd6,#216bac);border-radius:6px 6px 0 0;min-height:6px}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cfg-card{background:#fff;border:1px solid #e7e9ee;border-radius:16px;padding:20px}
.cfg-card h3{margin:0 0 14px;font-size:1.02rem;color:#16253f}
.cfg-identity{display:flex;gap:16px}
.cfg-ava{width:72px;height:72px;border-radius:16px;object-fit:cover;flex:0 0 auto;background:#eef4f9}
.cfg-ava.bot{margin:0}
.cfg-fields{flex:1;display:flex;flex-direction:column;gap:4px}
.cfg-fields .field-label{margin:6px 0 2px}
.cfg-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f2f3f6;font-size:.9rem;color:#28313c}
.cfg-row:last-child{border-bottom:0}
.toggle{width:38px;height:22px;border-radius:999px;background:#d7dce3;position:relative;flex:0 0 auto;transition:.15s}
.toggle i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on{background:#216bac}.toggle.on i{left:18px}
.cfg-conns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cfg-note{color:#8a94a0;font-size:.84rem;margin:0 0 12px}
.ctx-list{display:flex;flex-direction:column;gap:8px}
.ctx-item{display:flex;align-items:center;gap:9px;font-size:.88rem;color:#28313c;background:#f6f8fb;border:1px solid #eef0f3;border-radius:10px;padding:9px 12px}
.ctx-item svg{width:15px;height:15px;stroke:#9aa3ad;fill:none;stroke-width:2}
@media(max-width:760px){.chat-list{width:0;display:none}}
/* Chat paywall bubble */
.bubble.paywall{background:#fff7ed;border:1px solid #f3d7a8;color:#8a5a1a;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-weight:600}
.bubble.paywall .pay-ic{display:inline-flex}
.bubble.paywall svg{width:16px;height:16px;fill:none;stroke:#c07f1f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pay-btn{background:#216bac;color:#fff;border:0;border-radius:10px;padding:7px 13px;font-weight:700;font-size:.82rem}
.pay-btn:hover{background:#1d5f99}
/* ===== Exact site hatch choreography (from hatchery.html), 3 eggs side by side ===== */
.hatch-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,40px);margin:22px auto 8px;min-height:220px}
.hatch-cell{display:flex;flex-direction:column;align-items:center;gap:8px}
.hatch-car{position:relative;width:clamp(120px,17vw,188px);height:clamp(120px,17vw,188px)}
.hatch-car .rig{position:absolute;inset:0}
.hatch-car .layer{position:absolute;inset:0;width:100%;height:100%}
.hatch-car .egg-wrap{transform-origin:50% 90%;will-change:transform,opacity}
.hatch-car .egg-wrap img.egg{width:100%;height:100%;object-fit:contain}
.hatch-car:not(.hatching):not(.hatched) .egg-wrap{animation:idleWobble 1.7s ease-in-out infinite}
@keyframes idleWobble{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.hatch-car .cracks{position:absolute;inset:0;width:100%;height:100%}
.hatch-car .cracks path{fill:none;stroke:#1b1a40;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hatch-car .crack-b1,.hatch-car .crack-b2{stroke-width:3.5}
.hatch-car .cap{transform-origin:50% 45%;object-fit:contain;will-change:transform,opacity}
.hatch-car .pop{transform-origin:50% 88%;will-change:transform,opacity}
.hatch-car .pop .bot{position:absolute;left:50%;bottom:9.5%;transform:translateX(-50%);max-width:88%;max-height:84%;object-fit:contain}
.hatch-car .pop .ground{position:absolute;left:50%;bottom:14%;width:46%;height:4.5%;transform:translateX(-50%);border-radius:50%;background:rgba(22,21,15,.13)}
.hatch-car .cap,.hatch-car .pop{opacity:0}
.hatch-car.hatched .egg-wrap{opacity:0}
.hatch-car.hatched .pop{opacity:1}
.hatch-car .burst{pointer-events:none}
.hatch-car .flash{position:absolute;left:50%;top:48%;width:88%;aspect-ratio:1/1;margin:-44% 0 0 -44%;border-radius:50%;background:radial-gradient(circle,#fff 0%,#fff 48%,rgba(255,255,255,0) 74%);opacity:0}
.hatch-car .ring{position:absolute;left:50%;top:54%;width:34%;aspect-ratio:1/1;margin:-17% 0 0 -17%;border-radius:50%;border:4px solid #2E7FC0;opacity:0}
.hatch-car .shard{position:absolute;left:50%;top:54%;width:2.8%;aspect-ratio:1/1;margin:-1.4% 0 0 -1.4%;background:#F6EBD4;border:2px solid #1b1a40;border-radius:22% 60% 40% 60%;opacity:0}
.hatch-car .shard:nth-child(even){background:#2E7FC0;border-radius:50%}
.hatch-car .shard.s1{--fx:-160%;--fy:-560%;--r:340deg}
.hatch-car .shard.s2{--fx:300%;--fy:-480%;--r:-290deg;animation-delay:.03s}
.hatch-car .shard.s3{--fx:-460%;--fy:-260%;--r:260deg}
.hatch-car .shard.s4{--fx:520%;--fy:-180%;--r:-320deg;animation-delay:.05s}
.hatch-car .shard.s5{--fx:-540%;--fy:90%;--r:300deg}
.hatch-car .shard.s6{--fx:480%;--fy:160%;--r:-260deg;animation-delay:.02s}
.hatch-car .shard.s7{--fx:-240%;--fy:420%;--r:280deg;animation-delay:.04s}
.hatch-car .shard.s8{--fx:180%;--fy:480%;--r:-300deg}
.hatch-car .shard.s9{--fx:40%;--fy:-620%;--r:250deg;animation-delay:.06s}
.hatch-car .shard.s10{--fx:-360%;--fy:-430%;--r:-270deg;animation-delay:.01s}
.hatch-car.hatching .anim{animation-duration:3.4s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:1}
.hatch-car.hatching .egg-wrap{animation-name:egg-wobble}
.hatch-car.hatching .cracks path{animation-duration:3.4s;animation-timing-function:linear;animation-fill-mode:both}
.hatch-car.hatching .crack-1{animation-name:crack-1}
.hatch-car.hatching .crack-2{animation-name:crack-2}
.hatch-car.hatching .crack-3{animation-name:crack-3}
.hatch-car.hatching .crack-b1{animation-name:crack-b1}
.hatch-car.hatching .crack-b2{animation-name:crack-b2}
.hatch-car.hatching .cap{animation-name:cap-fly;animation-timing-function:linear}
.hatch-car.hatching .pop{animation-name:pop-spring}
.hatch-car.hatching .flash{animation-name:flash}
.hatch-car.hatching .ring{animation-name:ring}
.hatch-car.hatching .shard{animation-name:shard;animation-timing-function:cubic-bezier(.17,.67,.4,1)}
@keyframes egg-wobble{0%,8%{opacity:1;transform:none}12%{transform:rotate(0)}14%{transform:rotate(-3deg)}16%{transform:rotate(2.5deg)}18%{transform:rotate(-1.5deg)}20%{transform:rotate(0)}28%{transform:rotate(0)}30%{transform:rotate(-5deg) translateY(-1.2%)}32%{transform:rotate(4.5deg)}34%{transform:rotate(-3deg) translateY(-.6%)}36%{transform:rotate(0) translateY(0)}44%{transform:rotate(0)}45.5%{transform:rotate(-7deg) translateY(-2%)}47%{transform:rotate(6.5deg)}48.5%{transform:rotate(-5deg) translateY(-1.2%)}50%{transform:rotate(4deg)}51.5%{transform:rotate(-2deg)}52%{transform:rotate(0)}53%{transform:rotate(1.5deg)}54%{transform:rotate(-1.5deg)}55%{transform:rotate(1.5deg)}56%{transform:rotate(-1deg)}57%{transform:rotate(0)}58.5%{opacity:1;transform:scale(1.07,.86)}59.5%{opacity:1;transform:scale(.99,1.04)}61%{opacity:0;transform:translateY(-2%) scale(.92,1.1)}100%{opacity:0;transform:translateY(-2%) scale(.92,1.1)}}
@keyframes crack-1{0%,16%{stroke-dashoffset:1}21%,100%{stroke-dashoffset:0}}
@keyframes crack-2{0%,33%{stroke-dashoffset:1}38%,100%{stroke-dashoffset:0}}
@keyframes crack-3{0%,48%{stroke-dashoffset:1}53%,100%{stroke-dashoffset:0}}
@keyframes crack-b1{0%,53%{stroke-dashoffset:1}56%,100%{stroke-dashoffset:0}}
@keyframes crack-b2{0%,54%{stroke-dashoffset:1}57%,100%{stroke-dashoffset:0}}
@keyframes cap-fly{0%,57.9%{opacity:0;transform:translate(0,-9%) scale(.82) rotate(0)}58%{opacity:1;transform:translate(0,-9%) scale(.82) rotate(0)}61%{opacity:1;transform:translate(9%,-43%) scale(.82) rotate(14deg)}64%{opacity:1;transform:translate(19%,-65%) scale(.82) rotate(26deg)}67%{opacity:1;transform:translate(28%,-73%) scale(.82) rotate(38deg)}70%{opacity:1;transform:translate(37%,-65%) scale(.82) rotate(50deg)}73%{opacity:1;transform:translate(45%,-39%) scale(.82) rotate(60deg)}76%{opacity:1;transform:translate(53%,3%) scale(.82) rotate(70deg)}79%{opacity:.55;transform:translate(60%,59%) scale(.82) rotate(78deg)}82%,100%{opacity:0;transform:translate(66%,121%) scale(.82) rotate(84deg)}}
@keyframes pop-spring{0%,57.5%{opacity:0;transform:translateY(3%) scale(1.06,.7)}60%{opacity:1;transform:translateY(2.5%) scale(1.05,.74)}67%{opacity:1;transform:translateY(-2.5%) scale(.955,1.1)}74%{transform:translateY(.6%) scale(1.03,.96)}80%{transform:translateY(-.4%) scale(.99,1.02)}88%,100%{opacity:1;transform:none}}
@keyframes flash{0%,57.2%{opacity:0;transform:scale(.2)}58.6%{opacity:1;transform:scale(1)}60.5%{opacity:.9;transform:scale(1.25)}66%,100%{opacity:0;transform:scale(2)}}
@keyframes ring{0%,57.5%{opacity:0;transform:scale(.25)}59%{opacity:.5;transform:scale(.6)}66%,100%{opacity:0;transform:scale(2.1)}}
@keyframes shard{0%,57.5%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}59%{opacity:1;transform:translate(calc(var(--fx)*.45),calc(var(--fy)*.45)) rotate(calc(var(--r)*.45)) scale(1.1)}68%{opacity:1;transform:translate(calc(var(--fx)*.92),calc(var(--fy)*.92 + 60%)) rotate(calc(var(--r)*.92)) scale(.9)}75%,100%{opacity:0;transform:translate(var(--fx),calc(var(--fy) + 240%)) rotate(var(--r)) scale(.55)}}
/* ===== Conveyor hatch line (exact port of hatchery.html) ===== */
.hscene{position:relative;width:100%;max-width:1000px;height:330px;margin:8px auto 0;overflow:hidden}
.hscene::before,.hscene::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:5;pointer-events:none}
.hscene::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.hscene::after{right:0;background:linear-gradient(-90deg,#fff,rgba(255,255,255,0))}
.hbelt{position:absolute;left:2%;right:2%;bottom:56px;height:44px;border-radius:999px;background:#16150F;border:3px solid #1b1a40;box-shadow:0 10px 18px rgba(22,21,15,.18);overflow:hidden;z-index:2}
.hbelt::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 26px,rgba(255,255,255,.13) 26px 32px,rgba(255,255,255,0) 32px 60px);animation:tread .35s linear infinite;animation-play-state:paused}
.hbelt::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0))}
.hscene.moving .hbelt::before{animation-play-state:running}
@keyframes tread{to{background-position-x:60px}}
.hrollers{position:absolute;left:4%;right:4%;bottom:32px;height:32px;display:flex;justify-content:space-between;z-index:1}
.hroller{width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid #1b1a40;position:relative;animation:spin .5s linear infinite;animation-play-state:paused}
.hroller::before{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:3px;margin-left:-1.5px;border-radius:2px;background:#1b1a40}
.hscene.moving .hroller{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.hfloor{position:absolute;left:0;right:0;bottom:16px;height:3px;border-radius:2px;background:rgba(22,21,15,.12)}
.car{position:absolute;left:0;bottom:66px;width:180px;height:180px;z-index:3;transition:transform 1.45s cubic-bezier(.45,.05,.35,1);will-change:transform}
.car.teleport{transition:none}
.car .rig{position:absolute;inset:0}
.hscene.moving .car .rig{animation:rock .72s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(0)}25%{transform:rotate(1.4deg)}75%{transform:rotate(-1.4deg)}}
.car .layer{position:absolute;inset:0;width:100%;height:100%}
.car .egg-wrap{transform-origin:50% 90%;will-change:transform,opacity}
.car .egg-wrap img.egg,.car .cap{width:100%;height:100%;object-fit:contain;filter:hue-rotate(var(--hue,0deg))}
.car .burst{filter:hue-rotate(var(--hue,0deg));pointer-events:none}
.car .cracks{position:absolute;inset:0;width:100%;height:100%}
.car .cracks path{fill:none;stroke:#1b1a40;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.car .crack-b1,.car .crack-b2{stroke-width:3.5}
.car .cap{transform-origin:50% 45%;will-change:transform,opacity}
.car .pop{transform-origin:50% 88%;will-change:transform,opacity}
.car .pop .bot{position:absolute;left:50%;bottom:9.5%;transform:translateX(-50%);max-width:88%;max-height:84%;object-fit:contain}
.car .pop .ground{position:absolute;left:50%;bottom:15%;width:44%;height:4.5%;transform:translateX(-50%);border-radius:50%;background:rgba(22,21,15,.13)}
.car .cap,.car .pop{opacity:0}
.car.hatched .egg-wrap{opacity:0}
.car.hatched .pop{opacity:1}
.car .flash{position:absolute;left:50%;top:48%;width:88%;aspect-ratio:1/1;margin:-44% 0 0 -44%;border-radius:50%;background:radial-gradient(circle,#fff 0%,#fff 48%,rgba(255,255,255,0) 74%);opacity:0}
.car .ring{position:absolute;left:50%;top:54%;width:34%;aspect-ratio:1/1;margin:-17% 0 0 -17%;border-radius:50%;border:4px solid #2E7FC0;opacity:0}
.car .shard{position:absolute;left:50%;top:54%;width:2.8%;aspect-ratio:1/1;margin:-1.4% 0 0 -1.4%;background:#F6EBD4;border:2px solid #1b1a40;border-radius:22% 60% 40% 60%;opacity:0}
.car .shard:nth-child(even){background:#2E7FC0;border-radius:50%}
.car .shard.s1{--fx:-160%;--fy:-560%;--r:340deg}
.car .shard.s2{--fx:300%;--fy:-480%;--r:-290deg;animation-delay:.03s}
.car .shard.s3{--fx:-460%;--fy:-260%;--r:260deg}
.car .shard.s4{--fx:520%;--fy:-180%;--r:-320deg;animation-delay:.05s}
.car .shard.s5{--fx:-540%;--fy:90%;--r:300deg}
.car .shard.s6{--fx:480%;--fy:160%;--r:-260deg;animation-delay:.02s}
.car .shard.s7{--fx:-240%;--fy:420%;--r:280deg;animation-delay:.04s}
.car .shard.s8{--fx:180%;--fy:480%;--r:-300deg}
.car .shard.s9{--fx:40%;--fy:-620%;--r:250deg;animation-delay:.06s}
.car .shard.s10{--fx:-360%;--fy:-430%;--r:-270deg;animation-delay:.01s}
.car .tag{position:absolute;left:50%;top:-4%;transform:translateX(-50%) scale(0);font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;background:#16150F;color:#F4F1EA;border-radius:999px;padding:4px 12px;white-space:nowrap;z-index:4}
.car.hatched .tag{animation:tag-pop .45s cubic-bezier(.2,1.6,.4,1) .05s both}
@keyframes tag-pop{from{transform:translateX(-50%) scale(0)}to{transform:translateX(-50%) scale(1)}}
.car.hatching .anim{animation-duration:3.4s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:1}
.car.hatching .egg-wrap{animation-name:egg-wobble}
.car.hatching .cracks path{animation-duration:3.4s;animation-timing-function:linear;animation-fill-mode:both}
.car.hatching .crack-1{animation-name:crack-1}
.car.hatching .crack-2{animation-name:crack-2}
.car.hatching .crack-3{animation-name:crack-3}
.car.hatching .crack-b1{animation-name:crack-b1}
.car.hatching .crack-b2{animation-name:crack-b2}
.car.hatching .cap{animation-name:cap-fly;animation-timing-function:linear}
.car.hatching .pop{animation-name:pop-spring}
.car.hatching .flash{animation-name:flash}
.car.hatching .ring{animation-name:ring}
.car.hatching .shard{animation-name:shard;animation-timing-function:cubic-bezier(.17,.67,.4,1)}
@media(max-width:640px){.car{width:130px;height:130px;bottom:70px}.hscene{height:270px}}
/* ===== Exact homepage hero hatch (index.html), 3 eggs ===== */
.hatch-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,34px);margin:20px auto 4px;min-height:230px}
.egg-cell{display:flex;flex-direction:column;align-items:center;gap:8px}
.egg-scene{position:relative;width:clamp(120px,17vw,200px)}
.egg-stage{position:relative;width:100%}
.egg-layer{width:100%;height:auto;display:block}
.egg-closed{position:relative;transform-origin:50% 84%;animation:eggRock 2.8s ease-in-out infinite}
.egg-pop{position:absolute;left:0;top:0;opacity:0}
.egg-lid{position:absolute;inset:0}
@keyframes eggRock{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.lid-piece{position:absolute;left:0;top:0;width:100%;height:auto;display:block;opacity:0;transform-origin:50% 46%}
.lp1{clip-path:polygon(50% 62%,4% 50%,10% 18%)}
.lp2{clip-path:polygon(50% 62%,10% 18%,34% 4%)}
.lp3{clip-path:polygon(50% 62%,34% 4%,66% 4%)}
.lp4{clip-path:polygon(50% 62%,66% 4%,90% 18%)}
.lp5{clip-path:polygon(50% 62%,90% 18%,96% 50%)}
.egg-crack{position:absolute;inset:0;width:100%;height:auto;display:block;pointer-events:none;overflow:visible}
.egg-crack .crackline{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.egg-scene.hatched .egg-closed{transform-origin:50% 84%;animation:closedHatch 3.05s cubic-bezier(.4,0,.3,1) forwards}
@keyframes closedHatch{0%{transform:rotate(0);opacity:1}5%{transform:rotate(-4deg)}10%{transform:rotate(4deg)}15%{transform:rotate(-2deg)}20%{transform:rotate(0);opacity:1}90%{transform:rotate(0);opacity:1}100%{transform:rotate(0);opacity:0}}
.egg-scene.hatched .egg-crack .crackline{animation:crackStaged 2.1s cubic-bezier(.5,0,.5,1) .55s forwards}
@keyframes crackStaged{0%{opacity:1;stroke-dashoffset:1}16%{stroke-dashoffset:.74}30%{stroke-dashoffset:.74}44%{stroke-dashoffset:.5}58%{stroke-dashoffset:.5}72%{stroke-dashoffset:.26}84%{stroke-dashoffset:.26}95%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.egg-scene.hatched .lid-piece{animation:lidBreak 1.4s cubic-bezier(.42,0,.72,.62) 2.7s forwards}
.egg-scene.hatched .lp2{animation-delay:2.74s}
.egg-scene.hatched .lp3{animation-delay:2.72s}
.egg-scene.hatched .lp4{animation-delay:2.77s}
.egg-scene.hatched .lp5{animation-delay:2.8s}
@keyframes lidBreak{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:1}20%{transform:translate(0,0) rotate(0)}82%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}}
.egg-scene.hatched .egg-pop{transform-origin:50% 82%;animation:popRise 1.15s cubic-bezier(.34,1.4,.5,1) 2.68s forwards}
@keyframes popRise{0%{opacity:0;transform:translateY(6%) scale(.86)}26%{opacity:1}62%{transform:translateY(-2%) scale(1.07)}100%{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.egg-closed{animation:none}.egg-scene.hatched .egg-closed,.egg-scene.hatched .lid-piece,.egg-scene.hatched .egg-crack .crackline{animation:none;opacity:0}.egg-scene.hatched .egg-pop{animation:none;opacity:1;transform:none}}
/* Single hero egg (exact homepage) + speech bubble */
.hero-hatch{display:flex;justify-content:center;align-items:flex-end;min-height:clamp(300px,36vw,440px);margin:6px auto 0}
.hero-hatch .egg-scene{width:clamp(240px,32vw,380px)}
.egg-bubble{position:absolute;right:max(-20px,-3vw);top:4%;background:#fff;border:1px solid #e7e9ee;border-radius:14px 14px 14px 3px;box-shadow:0 8px 20px rgba(22,21,15,.12);padding:11px 16px;font-weight:600;font-size:clamp(13px,1.2vw,17px);letter-spacing:-.01em;opacity:0;transform:translateY(6px);white-space:nowrap;font-family:'Inter',system-ui;color:#16253f}
.egg-scene.hatched .egg-bubble{animation:bubbleIn .45s cubic-bezier(.22,1,.36,1) 1.5s forwards}
@keyframes bubbleIn{to{opacity:1;transform:translateY(0)}}
/* The design pops out of the egg as a clean rounded image (not the generic Hatchy) */
.egg-pop.pop-design{width:80%;left:10%;top:3%;height:auto;border-radius:16px;box-shadow:0 12px 26px rgba(22,21,70,.16);background:#fff}
/* Marketplace agent loading state — a spinner around an egg while it hatches */
/* While a portrait is generating, the card drops its team tint for the clean Hatchy
   blue-on-white look — one consistent loader, no clashing colours per agent. */
.p-thumb.is-loading,.mkt-thumb:has(.hatch-loader){position:relative;background:radial-gradient(circle at 50% 30%,#fff 0%,#f2f8fc 55%,#e2eef7 100%)!important}
.hatch-loader{display:grid;place-items:center;width:100%;height:100%;gap:0;position:relative}
.hatch-loader .loader-egg{width:42%;height:auto;animation:eggRock 1.7s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(33,107,172,.16))}
.hatch-loader .loader-txt{position:absolute;bottom:9px;left:0;right:0;text-align:center;font:800 .68rem 'Inter',system-ui;letter-spacing:.09em;text-transform:uppercase;color:var(--brand,#216bac)}
.ws-avatar-img{border-radius:50%;object-fit:cover}
/* Analytics — filter bar + horizontal bar charts */
.an-bar{max-width:1200px;margin:0 auto;border-radius:14px;border:1px solid #e7e9ee;background:#fff;margin-top:4px}
.an-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:18px}
@media(max-width:820px){.an-grid{grid-template-columns:1fr}}
.hbars{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.hbar{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:12px}
.hbar-l{font-size:.86rem;color:#48505a;font-weight:600}
.hbar-t{height:12px;background:#eef1f5;border-radius:999px;overflow:hidden}
.hbar-t i{display:block;height:100%;background:linear-gradient(90deg,#4a9fd6,#216bac);border-radius:999px}
.hbar-v{font-size:.82rem;color:#8a94a0;font-weight:700;text-align:right}
/* ============ Analytics page (mimics dashboard) ============ */
.an-page{flex:1;display:flex;min-height:0;max-width:1500px;width:100%;margin:0 auto}
.an-side{width:210px;flex:0 0 auto;padding:20px 14px;overflow-y:auto;border-right:1px solid #e7e9ee;background:#fff}
.an-side-h{font:800 .68rem 'Inter';letter-spacing:.09em;text-transform:uppercase;color:#9aa3ad;margin-bottom:12px}
.an-sec{margin-bottom:14px}
.an-sec-h{font-weight:800;font-size:.92rem;color:#16253f;display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px}
.an-sec-h.on{color:#216bac}
.an-sub{font-size:.85rem;color:#7a828c;padding:5px 8px 5px 18px;border-radius:8px;cursor:pointer}
.an-sub:hover{background:#f2f5f8;color:#16253f}
.an-sub.on{background:#eef5fc;color:#216bac;font-weight:700}
.an-main{flex:1;min-width:0;overflow-y:auto;padding:16px clamp(14px,2vw,24px)}
.an-filters{max-width:none;margin:0;border:0;background:transparent;padding:0 0 6px}
.an-h{font-size:1.5rem;font-weight:800;color:#16253f;margin:8px 2px 2px;display:flex;align-items:center;gap:8px}
.an-eyebrow{font:800 .68rem 'Inter';letter-spacing:.09em;text-transform:uppercase;color:#9aa3ad;margin:18px 2px 10px}
.an-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.an-tile{background:#fff;border:1px solid #e7e9ee;border-radius:14px;padding:16px 18px}
.an-tile-l{font:700 .72rem 'Inter';letter-spacing:.05em;text-transform:uppercase;color:#8a94a0}
.an-tile-v{font-size:1.9rem;font-weight:800;color:#16253f;margin:6px 0 2px;letter-spacing:-.02em}
.an-tile-s{font-size:.76rem;color:#9aa3ad}
.an-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.an-chart-card{background:#fff;border:1px solid #e7e9ee;border-radius:14px;padding:16px 16px 10px}
.an-chart-h{font-weight:700;font-size:.95rem;color:#16253f;margin-bottom:10px}
.an-chart-card .area-chart{width:100%;height:132px;display:block;flex:none}
.area-fill{fill:rgba(47,111,237,.10);stroke:none}
.area-line{fill:none;stroke:#2f6fed;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.an-x{display:flex;justify-content:space-between;font-size:.68rem;color:#aab3be;margin-top:4px}
/* ============ Config page ============ */
.cfg-page{flex:1;display:flex;min-height:0;max-width:1500px;width:100%;margin:0 auto}
.cfg-side{width:220px;flex:0 0 auto;padding:16px 12px;border-right:1px solid #e7e9ee;background:#fff}
.cfg-side-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;font-weight:600;font-size:.92rem;color:#48505a;cursor:pointer;margin-bottom:2px}
.cfg-side-item:hover{background:#f2f5f8}
.cfg-side-item.on{background:#eef2f6;color:#16253f;font-weight:700}
.cfg-side-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cfg-main{flex:1;min-width:0;overflow-y:auto;padding:20px clamp(16px,2.4vw,32px);max-width:1000px}
.cfg-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.cfg-head-ic{width:36px;height:36px;border-radius:10px;background:#e4f0fb;display:grid;place-items:center;color:#216bac}
.cfg-head-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.cfg-head h2{margin:0;font-size:1.4rem;font-weight:800;color:#16253f}
.cfg-label{font-weight:700;color:#48505a;margin-bottom:10px}
.platform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.platform{display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid #e2e5ea;background:#fff;border-radius:14px;padding:15px;font-weight:700;color:#16253f}
.platform.sel{border-color:#bcd6ec;background:#eef5fc}
.platform .pf-ic svg{width:22px;height:22px;stroke:none;fill:none}
.platform .pf-ok svg{width:15px;height:15px;stroke:#1a9d5f;fill:none;stroke-width:2.4}
.cfg-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px;border-top:1px solid #eef0f3;padding-top:20px}
.cfg-sub b{font-size:1.05rem;color:#16253f}
.cfg-sub .count{color:#9aa3ad;font-weight:700;margin-left:6px}
.cfg-connect{background:#16253f;color:#fff;border-radius:12px;padding:10px 16px;display:inline-flex;align-items:center;gap:7px}
.cfg-connect svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.ws-row,.chan-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #eef0f3;border-radius:14px;background:#fff;margin-bottom:10px}
.ws-av2{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#eef4f9;display:grid;place-items:center}
.ws-av2 img{width:100%;height:100%;object-fit:cover}
.ws-av2 .bot{width:38px;height:38px;margin:0}
.ws-row-main{flex:1}
.ws-row-main b{font-size:.95rem;color:#16253f}
.ws-id{font:400 .78rem 'Space Mono',monospace;color:#9aa3ad;letter-spacing:.02em}
.ws-actions{display:flex;gap:6px}
.ws-actions button{width:34px;height:34px;border-radius:9px;border:1px solid #e7e9ee;background:#fff;color:#8a94a0}
.chan-filters{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.chan-row b{flex:1;font-size:.95rem;color:#16253f}
.chan-count{color:#8a94a0;font-weight:600;font-size:.86rem;display:flex;align-items:center;gap:6px}
.chan-count svg{width:14px;height:14px;stroke:#9aa3ad;fill:none;stroke-width:2}
/* ============ Chats 3-column ============ */
.chats3{flex:1;display:flex;min-height:0;max-width:1600px;width:100%;margin:0 auto}
.pf-side{width:240px;flex:0 0 auto;background:#222c3a;color:#c7d0da;display:flex;flex-direction:column;overflow-y:auto;padding:14px 12px}
.pf-side-h{display:flex;align-items:center;gap:8px;color:#9aa6b3;font-weight:800;padding:2px 6px 12px}
.pf-side-h b{color:#eef2f6}
.pf-count{background:#33415380;border-radius:999px;padding:1px 8px;font-size:.72rem}
.pf-plus{margin-left:auto}.pf-plus svg{width:16px;height:16px;stroke:#9aa6b3;fill:none;stroke-width:2}
.pf-search{display:flex;align-items:center;gap:8px;background:#2d3948;border-radius:10px;padding:9px 12px;margin-bottom:12px}
.pf-search svg{width:15px;height:15px;stroke:#8794a3;fill:none;stroke-width:2}
.pf-search input{border:0;outline:0;background:transparent;color:#e6ebf1;font-size:.85rem;width:100%;font-family:'Inter'}
.pf-search input::placeholder{color:#7f8b99}
.pf-sec{font:800 .66rem 'Inter';letter-spacing:.08em;text-transform:uppercase;color:#7f8b99;margin:12px 8px 6px}
.pf-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:#c2ccd6;padding:9px 10px;border-radius:12px;cursor:pointer;text-align:left}
.pf-item:hover{background:#2b3644}
.pf-item.on{background:#151c26;color:#fff;font-weight:700}
.pf-av{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#3a4655;display:grid;place-items:center}
.pf-av img{width:100%;height:100%;object-fit:cover}
.pf-av .bot{width:30px;height:30px;margin:0}
.pf-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#22c55e;border:2px solid #222c3a}
.pf-name{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-hist{width:230px;flex:0 0 auto;background:#2a3543;color:#c7d0da;padding:16px 14px;border-left:1px solid #2f3b49}
.chat-hist-h{color:#eef2f6;font-weight:800;margin-bottom:12px}
.pf-search.hist{background:#354251}
.chat-empty{flex:1;display:flex;flex-direction:column;min-width:0;background:#f5f6f8}
.chat-empty-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.chat-empty-av{width:78px;height:78px;border-radius:50%;overflow:hidden;background:#e6ebf1;display:grid;place-items:center;box-shadow:0 8px 20px rgba(20,40,70,.12)}
.chat-empty-av img{width:100%;height:100%;object-fit:cover}
.chat-empty-av .bot{width:78px;height:78px;margin:0}
.chat-empty-name{font-size:1.3rem;font-weight:800;color:#16253f}
.chat-input.big{margin:0 clamp(20px,6vw,120px) 26px;border:1px solid #e2e5ea;border-radius:18px;box-shadow:0 6px 18px rgba(20,40,70,.08);padding:8px 8px 8px 18px;align-items:center}
.chat-input.big input{border:0;box-shadow:none;padding:10px 4px}
.chat-mic{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#8a94a0;display:grid;place-items:center}
.chat-mic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-empty .chat-thread{flex:1;overflow-y:auto;padding:22px clamp(20px,6vw,120px)}
@media(max-width:900px){.chat-hist{display:none}.pf-side{width:200px}}
/* ============ Marketplace grid ============ */
.mkt-page{flex:1;overflow-y:auto;max-width:1600px;width:100%;margin:0 auto;padding:22px clamp(16px,2.4vw,30px)}
.mkt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.mkt-head h2{display:flex;align-items:center;gap:11px;font-size:1.5rem;font-weight:800;color:#16253f;margin:0}
.mkt-head-ic{width:34px;height:34px;border-radius:10px;background:#eef2f6;display:grid;place-items:center;color:#54606e}
.mkt-head-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.mkt-head-r{display:flex;align-items:center;gap:10px}
.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.mkt-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e7e9ee;border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;outline:none}
.mkt-card:hover,.mkt-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,25,35,.12);border-color:#d7dbe2}
.mkt-thumb{position:relative;aspect-ratio:1/1;flex:0 0 auto;overflow:hidden;background:#eef2f6}
.mkt-thumb img{width:100%;height:100%;object-fit:cover}
.mkt-installed{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:5px;background:rgba(26,157,95,.95);color:#fff;font:700 .72rem 'Inter';padding:4px 9px;border-radius:8px}
.mkt-installed svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}
.mkt-body{display:flex;flex-direction:column;flex:1;padding:14px 15px 16px}   /* tag row pinned to the bottom so it lines up across the row */
.mkt-body h3{margin:0 0 5px;font-size:1.02rem;font-weight:800;color:#16253f}
.mkt-body p{font-size:.86rem;color:#7a828c;line-height:1.45;margin:0 0 12px;min-height:2.5em;flex:1}
.mkt-tags{display:flex;align-items:center;gap:10px}
.mkt-skills{font-size:.8rem;color:#9aa3ad;font-weight:600}
.mkt-thumb .hatch-loader{position:absolute;inset:0}
/* Installed agents: green ring round the whole card, not just the badge in the corner */
.mkt-card.is-installed{border-color:#1a9d5f;box-shadow:0 0 0 2px rgba(26,157,95,.35),0 8px 22px rgba(26,157,95,.14)}
.mkt-card.is-installed:hover,.mkt-card.is-installed:focus-visible{border-color:#1a9d5f;box-shadow:0 0 0 2px rgba(26,157,95,.5),0 16px 34px rgba(20,25,35,.12)}
.p-tag.tag-team{white-space:nowrap}
/* Not-yet-installed agents should look worth adding: a "Free to add" pill on the portrait,
   a navy Add button that fills on hover, a navy ring on the card and a slow zoom on the art */
.mkt-free{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.94);color:#1f2a4d;font:800 .66rem 'Inter',system-ui;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(20,25,35,.14)}
.mkt-add{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid #1f2a4d;background:#fff;color:#1f2a4d;border-radius:12px;padding:9px 12px;font:800 .84rem 'Inter',system-ui;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,transform .15s}
.mkt-add b{font-size:1.1rem;line-height:1;font-weight:800}
.mkt-card:not(.is-installed):hover,.mkt-card:not(.is-installed):focus-visible{border-color:#1f2a4d;box-shadow:0 0 0 2px rgba(31,42,77,.16),0 16px 34px rgba(20,25,35,.14)}
.mkt-card:not(.is-installed):hover .mkt-add,.mkt-add:hover,.mkt-add:focus-visible{background:#1f2a4d;color:#fff;box-shadow:0 6px 14px rgba(31,42,77,.28);outline:none}
.mkt-add:active{transform:scale(.98)}
.mkt-thumb img{transition:transform .4s ease}
.mkt-card:hover .mkt-thumb img{transform:scale(1.04)}
/* ============ Design hatch (.hx6) — the same continuous split-egg animation ============
   One per design, identical choreography to the welcome hatch: the egg is two clip-path
   halves of egg-closed.webp split along the crack seam, so the lid that tumbles off IS the
   egg's top. While a design is generating the egg idles with a gentle rock; the moment its
   image is ready (.go) the 5s clock runs — wobble, crack, lid off, and the generated design
   rises from inside the shell — then holds its last keyframe. .done renders the finished
   pose statically so re-renders never reset a hatched egg. Reuses the hx5 keyframes. */
.hx6{position:relative;width:clamp(130px,18vw,210px);aspect-ratio:31/42;overflow:hidden}
.hx6-wrap{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1/1}
.hx6-wrap img,.hx6-cracks{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hx6-lid{transform-origin:50% 42%}
.hx6-pop{position:absolute;left:13%;bottom:12%;width:74%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:0 10px 22px rgba(22,21,70,.18);background:#fff;pointer-events:none;transform-origin:50% 100%;transform:translateY(4%) scale(.45)}
.hx6-pop.is-cut{left:8%;width:84%;object-fit:contain;object-position:50% 100%;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 12px 16px rgba(22,21,70,.24))}
.hx6:not(.go):not(.done) .hx6-wrap{transform-origin:50% 90%;animation:hx6Idle 2.6s ease-in-out infinite}
@keyframes hx6Idle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
/* Sep 2026: the crack is a loading bar. While the image generates, app.js creeps one
   continuous crack along the seam (stroke-dashoffset, eased by the transition below) with a
   glowing tip; when the image lands it rushes to the end (.rush) and .go plays only the LAST
   2.8s of the 5s timeline (animation-delay:-2.2s) — the urgent tremble, the lid, the pop —
   because the slow build-up already happened while waiting. */
.hx6-crack{transition:stroke-dashoffset .38s cubic-bezier(.25,.8,.3,1)}
.hx6-glow{transition:stroke-dashoffset .38s cubic-bezier(.25,.8,.3,1),opacity .3s;filter:blur(2px);mix-blend-mode:multiply;animation:hx6GlowPulse 1.1s ease-in-out infinite}
@keyframes hx6GlowPulse{0%,100%{stroke-width:11}50%{stroke-width:15}}
.hx6.rush .hx6-crack{transition-duration:.6s;transition-timing-function:cubic-bezier(.3,.6,.15,1)}
.hx6.rush .hx6-glow,.hx6.go .hx6-glow{opacity:0!important;animation:none}
.hx6.go .hx6-wrap{transform-origin:50% 90%;animation:hx6Egg 5s ease -2.2s both}
@keyframes hx6Egg{
  0%,12%{transform:rotate(0)}14%{transform:rotate(-3deg)}16%{transform:rotate(2.5deg)}18%{transform:rotate(-1.5deg)}20%{transform:rotate(0)}
  28%{transform:rotate(0)}30%{transform:rotate(-5deg) translateY(-1.2%)}32%{transform:rotate(4.5deg)}34%{transform:rotate(-3deg) translateY(-.6%)}36%{transform:rotate(0) translateY(0)}
  44%{transform:rotate(0)}45.5%{transform:rotate(-6deg) translateY(-1.6%)}47%{transform:rotate(5.5deg)}48.5%{transform:rotate(-4deg) translateY(-1%)}50%{transform:rotate(3deg)}51.5%{transform:rotate(-1.5deg)}53%{transform:rotate(1.5deg)}54.5%{transform:rotate(-1deg)}56%{transform:rotate(.8deg)}57.5%,100%{transform:rotate(0)}
}
.hx6.go .hx6-cracks{animation:hx5CrackFade 5s linear -2.2s both}
.hx6.go .hx6-lid{animation:hx6Lid 5s linear -2.2s both}
.hx6.go .hx6-bottom{animation:hxBottom 5s ease -2.2s both}
@keyframes hx6Lid{
  0%,58%{transform:none;opacity:1}
  62%{transform:translate(3%,-10%) rotate(8deg)}
  68%{transform:translate(9%,-24%) rotate(24deg);opacity:1}
  76%{transform:translate(16%,-30%) rotate(46deg);opacity:.85}
  84%{transform:translate(23%,-24%) rotate(64deg);opacity:.35}
  90%,100%{transform:translate(28%,-10%) rotate(76deg);opacity:0}
}
.hx6.go .hx6-pop{animation:hx6Pop 5s -2.2s both;animation-timing-function:cubic-bezier(.3,1.2,.45,1)}
@keyframes hx6Pop{
  0%,59%{transform:translateY(4%) scale(.45)}
  73%{transform:translateY(-4%) scale(1.04)}
  81%{transform:translateY(1.2%) scale(.985)}
  88%,100%{transform:none}
}
.hx6.done .hx6-wrap,.hx6.done .hx6-pop{animation:none;transform:none}
.hx6.done .hx6-lid,.hx6.done .hx6-bottom,.hx6.done .hx6-cracks{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  .hx6 .hx6-wrap,.hx6 .hx6-lid,.hx6 .hx6-bottom,.hx6 .hx6-pop,.hx6 .hx6-cracks,.hx6 .hx6-cracks path{animation:none!important}
  .hx6 .hx6-crack,.hx6 .hx6-glow{transition:none}
  .hx6.go .hx6-lid,.hx6.go .hx6-bottom,.hx6.go .hx6-cracks{opacity:0}
  .hx6.go .hx6-pop{transform:none}
}
/* ============ Hatch screen: pick your design in place (no separate step) ============ */
.egg-cell{position:relative;border-radius:20px;padding:8px 8px 4px;border:2px solid transparent;transition:border-color .2s,background .2s,transform .2s;outline:none}
.egg-cell.is-ready{cursor:pointer}
.egg-cell.is-ready:hover,.egg-cell.is-ready:focus-visible{transform:translateY(-3px)}
.egg-cell.selected{border-color:var(--brand);background:#fff;box-shadow:0 12px 28px rgba(33,107,172,.15)}
.egg-tick{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--brand);display:none;place-items:center;box-shadow:0 4px 10px rgba(33,107,172,.35)}
.egg-tick svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.egg-cell.selected .egg-tick{display:grid;animation:tickPop .3s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tickPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ Welcome hatch — one continuous 5s choreography, no layer swaps ============
   The egg is two clip-path halves of the same egg image split along the crack seam, so the
   composed egg is pixel-identical to the whole egg until the lid (the real egg top) tumbles
   off. Hatchy rises from behind the bottom shell on the same clock. Every layer uses one 5s
   timeline (1% = 50ms) with fill-mode both, so the final frame is held — nothing swaps in. */
.hx5{position:relative;width:min(300px,80%);aspect-ratio:31/38;z-index:1;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.hx5-egg{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1/1}
.hx5-egg img,.hx5-cracks{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hx5-robot{position:absolute;left:16%;bottom:13%;width:68%;pointer-events:none;transform-origin:50% 100%;transform:translateY(3%) scale(.42);clip-path:polygon(0 0,66% 0,66% 19%,72% 19%,72% 24.5%,100% 24.5%,100% 100%,0 100%)}
.hx5-lid{transform-origin:50% 42%}
/* egg group: settle in, three wobble bouts, tremble — then rests (the shell stays) */
.hx5.run .hx5-egg{animation:hx5Egg 5s ease both}
@keyframes hx5Egg{
  0%{opacity:0;transform:translateY(-2%) scale(.96)}
  6%{opacity:1;transform:none}
  12%{transform:rotate(0)}14%{transform:rotate(-3deg)}16%{transform:rotate(2.5deg)}18%{transform:rotate(-1.5deg)}20%{transform:rotate(0)}
  28%{transform:rotate(0)}30%{transform:rotate(-5deg) translateY(-1.2%)}32%{transform:rotate(4.5deg)}34%{transform:rotate(-3deg) translateY(-.6%)}36%{transform:rotate(0) translateY(0)}
  44%{transform:rotate(0)}45.5%{transform:rotate(-6deg) translateY(-1.6%)}47%{transform:rotate(5.5deg)}48.5%{transform:rotate(-4deg) translateY(-1%)}50%{transform:rotate(3deg)}51.5%{transform:rotate(-1.5deg)}53%{transform:rotate(1.5deg)}54.5%{transform:rotate(-1deg)}56%{transform:rotate(.8deg)}57.5%,100%{transform:rotate(0)}
}
/* the crack draws leg by leg during the wobbles, then fades as the real seam takes over */
.hx5.run .hx5-cracks{animation:hx5CrackFade 5s linear both}
@keyframes hx5CrackFade{0%,58%{opacity:1}63%,100%{opacity:0}}
.hx5.run .hx5-c1{animation:hx5C1 5s linear both}
.hx5.run .hx5-c2{animation:hx5C2 5s linear both}
.hx5.run .hx5-c3{animation:hx5C3 5s linear both}
@keyframes hx5C1{0%,16%{stroke-dashoffset:198}21%,100%{stroke-dashoffset:0}}
@keyframes hx5C2{0%,33%{stroke-dashoffset:202}38%,100%{stroke-dashoffset:0}}
@keyframes hx5C3{0%,48%{stroke-dashoffset:204}53%,100%{stroke-dashoffset:0}}
/* the lid IS the egg's top: it hinges up off the seam, arcs over and tumbles out of frame */
.hx5.run .hx5-lid{animation:hx5Lid 5s linear both}
@keyframes hx5Lid{
  0%,58%{transform:none;opacity:1}
  62%{transform:translate(3%,-14%) rotate(9deg)}
  70%{transform:translate(14%,-42%) rotate(30deg)}
  78%{transform:translate(30%,-52%) rotate(56deg)}
  86%{transform:translate(50%,-26%) rotate(80deg)}
  93%{transform:translate(66%,44%) rotate(98deg);opacity:.45}
  100%{transform:translate(78%,140%) rotate(110deg);opacity:0}
}
/* the bottom shell gives a little kick as the lid pops */
.hx5.run .hx5-bottom{animation:hxBottom 5s ease both}
@keyframes hxBottom{0%,58%{transform:none;opacity:1}60.5%{transform:translateY(1.6%) scale(1.015,.985)}64%{transform:translateY(-.5%)}67%{transform:none}82%{opacity:1}94%,100%{transform:none;opacity:0}}
/* Hatchy rises from inside the shell with overshoot and simply holds */
.hx5.run .hx5-robot{animation:hx5Robot 5s both;animation-timing-function:cubic-bezier(.3,1.2,.45,1)}
@keyframes hx5Robot{
  0%,59%{transform:translateY(3%) scale(.42)}
  73%{transform:translateY(-4%) scale(1.04)}
  81%{transform:translateY(1.2%) scale(.985)}
  88%,100%{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .hx5 .hx5-egg,.hx5 .hx5-lid,.hx5 .hx5-bottom,.hx5 .hx5-robot,.hx5 .hx5-cracks,.hx5 .hx5-cracks path{animation:none!important}
  .hx5 .hx5-lid,.hx5 .hx5-bottom,.hx5 .hx5-cracks{opacity:0}
  .hx5 .hx5-robot{transform:none}
}
/* ============ Agent profile: MCP logos + suggested team ============ */
.mcp{display:inline-flex;align-items:center;gap:7px}
.mcp-lg{width:16px;height:16px;flex:0 0 auto}
.mcp-img{border-radius:4px;object-fit:contain}
.mcp-mono{width:16px;height:16px;flex:0 0 auto;border-radius:5px;color:#fff;font:800 .52rem 'Inter',system-ui;display:inline-grid;place-items:center;letter-spacing:0}
.mate-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.mate{display:flex;align-items:center;gap:10px;border:1px solid #dcebf3;background:#f7fbfd;border-radius:14px;padding:9px 12px;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.mate:hover,.mate:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 18px rgba(33,107,172,.14);outline:none}
.mate-ava{width:36px;height:36px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:#e8f1f8}
.mate-ava img{width:100%;height:100%;object-fit:cover}
.mate-meta{display:flex;flex-direction:column;line-height:1.2}
.mate-meta b{font:700 .88rem 'Inter',system-ui;color:var(--ink)}
.mate-meta i{font:600 .72rem 'Inter',system-ui;font-style:normal;color:var(--muted)}
.welcome-grid{position:relative}
/* agent profile: portrait beside the outcomes checklist */
.profile-cols{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:22px;align-items:start}
.profile-cols h3{margin-top:0}
.tailored-note{font-size:.92rem;margin:-4px 0 14px;color:var(--muted)}
.tailored-note b{color:var(--ink);font-weight:600}
.tailored-pill{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:#eef5fc;color:var(--brand);font:700 .7rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.profile-art{border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(33,107,172,.18);border:1px solid #dcebf3;background:#f2f8fc}
.profile-art img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
@media(max-width:640px){.profile-cols{grid-template-columns:1fr}.profile-art{max-width:220px}}
/* ============ Merch tab — mirrors the real dashboard's Printful page ============ */
.merch-page{flex:1;overflow-y:auto;max-width:1600px;width:100%;margin:0 auto;padding:20px clamp(16px,2.4vw,30px) 40px}
.merch-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.merch-head h2{display:flex;align-items:center;gap:11px;font-size:1.5rem;font-weight:800;color:#16253f;margin:0}
.merch-ic{width:34px;height:34px;border-radius:10px;background:#fdeeda;display:grid;place-items:center;color:#c07f1f}
.merch-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.merch-sub{font-size:.85rem;color:#8a94a0}
.merch-note{margin:14px 0 4px;background:#fff8e6;border:1px solid #f3dfae;color:#a4700c;font:600 .84rem 'Inter',system-ui;padding:10px 14px;border-radius:10px}
.merch-step{font-size:1.02rem;font-weight:800;color:#16253f;margin:26px 0 12px}
.mr-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px}
.mr{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;cursor:pointer;flex:0 0 auto;width:86px}
.mr-ava{width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid transparent;background:#eef4f9;transition:border-color .15s,transform .15s}
.mr:hover .mr-ava{transform:translateY(-2px)}
.mr.on .mr-ava{border-color:#216bac}
.mr-ava img{width:100%;height:100%;object-fit:cover}
.mr-name{font:600 .72rem 'Inter',system-ui;color:#54606e;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merch-prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.merch-prod{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1.5px solid #e7e9ee;border-radius:18px;padding:22px 16px 18px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.merch-prod:hover{box-shadow:0 10px 24px rgba(20,40,70,.08)}
.merch-prod.on{border-color:#216bac;box-shadow:0 10px 24px rgba(33,107,172,.12)}
.merch-prod.is-off{opacity:.55;cursor:default}
.merch-prod b{font-size:.98rem;color:#16253f;margin-top:8px}
.merch-prod>span{font-size:.8rem;color:#8a94a0}
.mock{position:relative;width:130px;aspect-ratio:1/1}
.mock.big{width:min(240px,36vw);flex:0 0 auto}
.mock.mini{width:52px}
.merch-page .mock svg,.g-svg{width:100%!important;height:100%!important;display:block;flex:none}
.g-print{position:absolute;border-radius:8%;object-fit:cover}
.g-print.tee{left:36%;top:33%;width:28%}
.g-print.jumper{left:36%;top:31%;width:28%}
.g-print.hat{left:41%;top:34%;width:18%;border-radius:50%}
.g-print.sock1{left:40%;top:22%;width:15%;border-radius:50%}
.g-print.sock2{left:40%;top:42%;width:15%;border-radius:50%}
.merch-detail{display:flex;gap:clamp(18px,3vw,40px);align-items:flex-start;background:#fff;border:1px solid #e7e9ee;border-radius:20px;padding:clamp(16px,2.4vw,28px);margin-top:18px}
.merch-code{font-size:1.05rem;color:#16253f}
.merch-conf{flex:1;min-width:0}
.merch-conf p{margin:4px 0 14px;font-size:.9rem}
.merch-label{font:700 .78rem 'Inter',system-ui;color:#54606e;margin:12px 0 8px}
.swatches{display:flex;flex-wrap:wrap;gap:7px;max-width:920px}
.sw{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(16,16,40,.15);cursor:pointer;padding:0}
.sw.on{outline:2.5px solid #216bac;outline-offset:2px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size{min-width:40px;padding:7px 11px;border-radius:999px;border:1.5px solid #dfe3e9;background:#fff;font:700 .8rem 'Inter',system-ui;color:#54606e;cursor:pointer}
.size.on{border-color:#216bac;color:#216bac;background:#eef5fc}
.merch-buy{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.merch-buy>b{font-size:1.05rem;color:#16253f}
.qty{display:inline-flex;align-items:center;gap:2px;border:1.5px solid #dfe3e9;border-radius:999px;padding:3px}
.qty button{width:28px;height:28px;border:0;background:none;font-size:1rem;color:#54606e;cursor:pointer}
.qty i{font-style:normal;font:700 .88rem 'Inter',system-ui;min-width:22px;text-align:center}
.basket-btn{display:inline-flex;align-items:center;gap:8px;background:#1a9d5f;color:#fff;border:0;border-radius:999px;padding:11px 18px;font:700 .88rem 'Inter',system-ui;cursor:pointer}
.basket-btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.merch-empty{color:#8a94a0;font-size:.92rem}
.basket{background:#fff;border:1px solid #e7e9ee;border-radius:16px;padding:14px 18px;max-width:640px}
.basket-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid #f0f2f5}
.basket-desc{flex:1;font-size:.9rem;color:#16253f}
.basket-row.total{border-bottom:0;font-size:.95rem;justify-content:space-between}
.basket .btn{margin-top:12px}
.merch-pay{display:flex;align-items:center;gap:9px;margin-top:12px;background:#fff8e6;border:1px solid #f3dfae;color:#a4700c;font:700 .86rem 'Inter',system-ui;padding:11px 14px;border-radius:12px}
.merch-pay svg{width:16px;height:16px;stroke:#c07f1f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.merch-detail{flex-direction:column;align-items:center}}
/* ============ Edit-your-agent dialog ============ */
.p-card.is-yours .p-thumb{position:relative}
.p-card.is-yours .p-thumb:after{content:"✎ Edit look";position:absolute;top:8px;right:8px;background:rgba(22,37,63,.82);color:#fff;font:700 .68rem 'Inter',system-ui;padding:5px 9px;border-radius:999px;opacity:0;transition:opacity .15s;pointer-events:none}
.p-card.is-yours:hover .p-thumb:after,.p-card.is-yours:focus-visible .p-thumb:after{opacity:1}
.el-body{display:flex;gap:22px;align-items:flex-start;margin-top:8px}
.el-current{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.el-current img{width:170px;height:170px;object-fit:cover;border-radius:18px;border:1px solid #dcebf3;box-shadow:0 10px 24px rgba(33,107,172,.15)}
.el-current span{font:700 .72rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;color:#8a94a0}
.el-form{flex:1;min-width:0}
.el-form .look-field{width:100%;min-height:96px}
.el-err{margin-top:10px;color:#b3352c;font:600 .85rem 'Inter',system-ui}
.el-hatch{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 4px}
.el-hatch .hx6{width:min(280px,60vw)}
.el-note{margin:0;font:600 .92rem 'Inter',system-ui;color:#60758c}
.el-ready{justify-content:center}
@media(max-width:640px){.el-body{flex-direction:column;align-items:center}}
/* Create-button paywall popover */
.create-pop{position:fixed;top:70px;right:24px;z-index:60;display:flex;align-items:center;gap:10px;max-width:340px;background:#fff;border:1px solid #f3dfae;border-left:4px solid #c07f1f;border-radius:14px;box-shadow:0 18px 44px rgba(20,25,35,.18);padding:13px 16px;font:600 .88rem 'Inter',system-ui;color:#7a5410;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
.create-pop.show{opacity:1;transform:none}
.create-pop svg{width:18px;height:18px;flex:0 0 auto;stroke:#c07f1f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* chat: typing indicator + recommended-agent chips under a real reply */
.bubble-wrap{display:flex;flex-direction:column;gap:8px;max-width:min(560px,78%)}
.bubble-wrap .bubble{max-width:none}
.bubble.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:#9fb2c4;animation:typindot 1.1s ease-in-out infinite}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}
@keyframes typindot{0%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-recs{display:flex;gap:8px;flex-wrap:wrap}
.chat-rec{display:inline-flex;align-items:center;gap:7px;border:1px solid #d5e3ee;background:#fff;border-radius:999px;padding:5px 12px 5px 5px;font:700 .78rem 'Inter',system-ui;color:#16253f;cursor:pointer;transition:border-color .15s,transform .15s}
.chat-rec:hover{border-color:var(--brand);transform:translateY(-1px)}
.chat-rec img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.el-left{margin-left:6px;font:800 .72rem 'Inter',system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);background:#eef5fc;border-radius:999px;padding:3px 9px;white-space:nowrap}
/* ============ One card: brand, preview pill and step counter share the panel's guides ============ */
.shell{padding:clamp(18px,4vw,44px) 20px 48px}
.panel .topbar{max-width:none;margin:0;padding:22px clamp(24px,6vw,76px) 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.panel .step-label{padding:0;font:700 .76rem 'Inter',system-ui;letter-spacing:.04em;color:#9aa3ad}
.private-pill{background:#eef5fc;border:1px solid #d6e6f3}
.welcome-grid{padding-top:36px}
.welcome-title{font-size:clamp(3.4rem,7.6vw,6.2rem);line-height:.92;margin:0 0 28px;letter-spacing:-.015em}
@media(max-width:760px){.panel .topbar{padding:18px 22px 0}.topbar-right{flex-direction:row;align-items:center;gap:10px}.private-pill{display:inline-block}.welcome-title{font-size:clamp(2.8rem,13vw,4rem)}}
/* create screen: reference (photo or website) — build 27 */
.ref-wrap{width:min(620px,100%);margin-top:2px}
.ref-zone{border:1.5px dashed #cfd6de;border-radius:14px;background:#fafbfc;padding:14px 16px;transition:border-color .15s,background .15s}
.ref-zone.is-over{border-color:#216bac;background:#eef5fc}
.ref-zone.is-busy{opacity:.75}
.ref-drop{display:flex;gap:12px;align-items:center;padding:8px 6px;border-radius:10px;cursor:pointer;font:500 .93rem/1.4 'Inter',system-ui;color:#48505a}
.ref-drop:hover,.ref-drop:focus-visible{background:#f1f5f9;outline:none}
.ref-drop strong{color:var(--ink);font-weight:700}
.ref-ico{font-size:1.35rem;line-height:1;flex:0 0 auto}
.ref-browse{border:0;background:none;padding:0;color:#216bac;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ref-sub{display:block;font:500 .8rem 'Inter',system-ui;color:#9aa3ad;margin-top:2px}
.ref-or{display:flex;align-items:center;gap:10px;margin:6px 0;font:700 .72rem 'Inter',system-ui;color:#b3bac3;text-transform:uppercase;letter-spacing:.08em}
.ref-or:before,.ref-or:after{content:"";flex:1;height:1px;background:#e7e9ee}
.ref-url{display:flex;align-items:center;gap:10px;padding:2px 6px}
.ref-url input{flex:1;min-width:0;border:1.5px solid #e2e5ea;border-radius:10px;background:#fff;padding:11px 13px;font:500 .95rem 'Inter',system-ui;color:var(--ink);outline:none}
.ref-url input:focus{border-color:#216bac;box-shadow:0 0 0 4px rgba(33,107,172,.12)}
.ref-url .btn{padding:11px 16px;font-size:.9rem;white-space:nowrap}
.ref-url .btn[disabled]{opacity:.6;cursor:wait}
.ref-url-sub{padding:0 6px 4px 44px}
.ref-error{margin-top:10px;background:#fff1f0;border:1px solid #f5c6c2;color:#b42318;font:600 .86rem 'Inter',system-ui;padding:10px 13px;border-radius:10px}
.ref-cards{display:grid;gap:10px;margin-top:12px}
.ref-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e2e5ea;border-radius:14px;padding:10px 12px;animation:arrive .3s ease both}
.ref-card>img,.ref-glyph{width:58px;height:58px;flex:0 0 58px;border-radius:12px;object-fit:cover;background:#f1f5f9}
.ref-card>img.ref-logo{object-fit:contain;padding:6px;background:#fff;border:1px solid #eef0f3}
.ref-glyph{display:grid;place-items:center;color:#216bac;font-size:1.5rem}
.ref-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;font:500 .86rem 'Inter',system-ui;color:#6b7480}
.ref-card-body strong{color:var(--ink);font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-swatches{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ref-swatches i{width:22px;height:22px;border-radius:7px;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.ref-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid #e2e5ea;background:#fff;color:#6b7480;font-size:1.1rem;line-height:1;cursor:pointer;padding:0}
.ref-x:hover{border-color:#b42318;color:#b42318}
@media(max-width:600px){.ref-url{flex-wrap:wrap}.ref-url input{flex:1 1 100%;order:-1}.ref-url .ref-ico{display:none}.ref-url .btn{flex:1}.ref-url-sub{padding-left:6px}}
/* ============ Plain-English intro: "What can our agents do for you?" → the team screen ============ */
.welcome-grid.intro{grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);align-items:center;padding-top:44px}
.welcome-grid.intro .welcome-art:before{width:340px;height:340px}
.welcome-grid.intro .hx5{width:min(360px,92%)}
.intro-title{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:.98;margin:10px 0 14px;letter-spacing:-.015em}
.intro-lead{max-width:520px;margin:0 0 18px;font-size:1.05rem}
.intro-field{max-width:520px}
.intro-field .name-field{width:100%;padding-right:54px}
.intro-field .mic-btn{bottom:auto;top:50%;transform:translateY(-50%)}
.name-field[aria-invalid="true"]{border-color:#d9534f}
.welcome-grid.intro .chips{margin-top:0;max-width:560px;margin-bottom:18px}
.intro-label{display:block;margin:0 0 8px;font:700 .8rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.intro-optional{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.intro-select-wrap{position:relative;max-width:520px;margin-bottom:18px}
.intro-select{display:block;width:100%;text-align:left;padding:15px 54px 15px 20px;cursor:pointer;font-family:"Baloo 2",'Inter',system-ui;font-size:1.05rem;font-weight:600;color:var(--ink)}
.intro-select.is-empty{color:#8a97a6;font-weight:500}
.intro-select[aria-expanded="true"]{border-color:var(--brand);box-shadow:0 0 0 4px rgba(33,107,172,.12)}
.intro-select-wrap:after{content:"";position:absolute;right:22px;top:29px;width:10px;height:10px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform .18s}
.intro-select-wrap:has([aria-expanded="true"]):after{transform:translateY(-20%) rotate(225deg)}
.intro-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:6;margin:0;padding:8px;list-style:none;background:#fff;border:1.5px solid #e2e5ea;border-radius:18px;box-shadow:0 18px 44px rgba(37,83,120,.16);max-height:420px;overflow:auto;overscroll-behavior:contain;animation:fade .15s ease}
.intro-menu.is-up{top:auto;bottom:calc(100% + 8px)}
/* The panel clips to its rounded corners; let the open list escape it (the progress bar keeps its own rounding). */
.panel:has(.intro-menu:not([hidden])){overflow:visible}
.panel:has(.intro-menu:not([hidden])) .progress{border-radius:32px 32px 0 0;overflow:hidden}
.intro-option{padding:10px 14px;border-radius:12px;font-family:"Baloo 2",'Inter',system-ui;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;outline:none}
.intro-option:hover,.intro-option:focus{background:#eef5fc;color:var(--brand)}
.intro-option.is-on{color:var(--brand)}
.intro-option.is-on:after{content:"✓";float:right;font-weight:800}
.welcome-grid.intro .intro-field{margin:0 0 18px}
.welcome-grid.intro .actions{margin-top:22px}
/* Chats sidebar: "Other profiles" still hatching in the prospect's look */
.pf-av img.egg,.chat-empty-av img.egg,.msg-ava img.egg{object-fit:contain;padding:4px;background:#fff}
@media(max-width:760px){.welcome-grid.intro{padding-top:8px}.intro-title{font-size:clamp(2.1rem,9.5vw,3rem)}.team-stage{padding-top:24px}.team-row{align-items:flex-start}.team-flow{flex-direction:column;align-items:flex-start;gap:4px}.flow-arrow{transform:rotate(90deg);margin-left:14px;line-height:1}.flow-step{border-radius:14px}}
/* team research: the model thinks about the business before the team appears */
@keyframes thinkRock{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes thinkDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.think-egg,.think-dots i,.think-line.swap{animation:none}}
/* chats: the page stays put — the thread scrolls inside its own pane like a real chat */
.app.is-chats{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.app.is-chats .chats3{min-height:0}
.app.is-chats .chat-empty,.app.is-chats .chat-main{min-height:0}
.app.is-chats .chat-thread{overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
/* team screen: agents aren't hatched yet, so each one is a "?" tile rather than a Hatchy */
/* ---- Create ▾ menu, Create a Profile dialog, Notifications tray, hatched reveal (build 40) ---- */
.nav-right{position:relative}
.create-menu{position:absolute;top:calc(100% + 8px);right:48px;min-width:196px;background:#fff;border:1px solid #e3e6ec;border-radius:14px;box-shadow:0 18px 44px rgba(20,25,35,.16);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:30;animation:fade .15s ease}
.create-menu button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;border-radius:9px;padding:10px 12px;font:600 .9rem 'Inter',system-ui;color:#1a1d21;text-align:left;cursor:pointer}
.create-menu button:hover,.create-menu button:focus-visible{background:#f1f4f8;outline:none}
.create-menu svg{width:17px;height:17px;flex:0 0 auto;color:#3d4753;fill:none;stroke:currentColor}
.cp-modal{width:min(490px,100%);padding:34px 28px 26px;position:relative;text-align:left;border-radius:22px}
.cp-close{position:absolute;top:14px;right:14px;width:34px;height:34px;background:none;font-size:1.2rem;color:#6b7480}
.cp-close:hover{background:#f1f4f8}
.cp-ava{width:82px;height:82px;margin:2px auto 14px;border-radius:50%;background:linear-gradient(160deg,#e0edfb,#c8ddf5);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 6px #edf3fa,0 10px 24px rgba(33,107,172,.16)}
.cp-ava img{width:100%;height:100%;object-fit:cover}
.cp-modal h2{text-align:center;font-size:1.45rem;margin:0 0 22px;font-family:'Inter',system-ui;font-weight:700;letter-spacing:-.01em}
.cp-label{display:block;font:600 .9rem 'Inter',system-ui;color:#1a1d21;margin:0 0 8px}
.cp-field{width:100%;background:#e9eff8;border:1.5px solid #dfe6f0;border-radius:12px;padding:12px 14px;font-size:.95rem;margin-bottom:18px}
.cp-field:focus{background:#fff;border-color:#6ea8dc;box-shadow:0 0 0 4px rgba(33,107,172,.12)}
.cp-area{min-height:150px;resize:none;line-height:1.5}
.cp-mic{margin-bottom:4px}
.cp-mic .mic-btn{bottom:30px}
.cp-submit{display:block;width:100%;border-radius:14px;padding:15px;margin-top:18px;font-size:.98rem;transition:background .2s,transform .2s}
.cp-submit:disabled{background:#9cc3e8;box-shadow:none;cursor:default;transform:none}
.notif{position:fixed;right:14px;top:66px;width:min(340px,calc(100vw - 28px));z-index:25;background:#f0f4fa;border:1px solid #e0e6ef;border-radius:18px;box-shadow:0 20px 50px rgba(20,30,50,.14);padding:12px;font-family:'Inter',system-ui;color:#1a1d21;animation:fade .2s ease}
.notif-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.notif-head b{font-size:.98rem;flex:1}
.notif-ic{width:22px;height:22px;display:grid;place-items:center;color:#216bac}
.notif-ic svg{width:18px;height:18px;fill:none;stroke:currentColor}
.notif-clear{border:0;background:none;font:600 .86rem 'Inter',system-ui;color:#6b7480;cursor:pointer;padding:4px 6px}
.notif-clear:hover{color:#216bac}
.notif-tog,.nm-tog,.nm-x{border:0;background:none;width:28px;height:28px;display:grid;place-items:center;color:#6b7480;cursor:pointer;border-radius:8px;padding:0}
.notif-tog:hover,.nm-tog:hover,.nm-x:hover{background:#e3e9f2;color:#1a1d21}
.notif-tog svg,.nm-tog svg,.nm-x svg{width:16px;height:16px;fill:none;stroke:currentColor}
.notif-list{display:flex;flex-direction:column;gap:8px;max-height:min(62vh,540px);overflow:auto}
.nc{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e4e8ef;border-radius:16px;padding:14px 14px 13px}
.nc-ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#f0f4fa;display:grid;place-items:center;color:#216bac;margin-top:1px}
.nc-spin{width:16px;height:16px;border-radius:50%;border:2px solid #cfe0f3;border-top-color:#216bac;animation:spin 1s linear infinite;display:block}
.nc-spark svg,.nc-okic svg{width:18px;height:18px;fill:none;stroke:currentColor}
.nc-spark{color:#e6a52e;background:#fff7e6}
.nc-okic{color:#16845b;background:#e8f6ee}
.nc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.nc-name{font-size:.95rem;font-weight:700;padding-right:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-status{font-size:.84rem;color:#6b7480}
.nc-ok{font-size:.86rem;color:#16845b;font-weight:600}
.nc-bar{height:6px;border-radius:999px;background:#e9edf3;overflow:hidden;margin:6px 0 4px}
.nc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8b5cf6,#216bac 55%,#3aa0e6);transition:width 1.4s ease}
.nc-rail{display:flex;align-items:center;gap:4px;margin:2px 0 3px}
.nc-dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:2px solid #d9dfe8;background:#fff;color:#fff}
.nc-dot svg{width:11px;height:11px;fill:none;stroke:currentColor}
.nc-dot.done{background:#1a9d5f;border-color:#1a9d5f}
.nc-dot.now{border-color:#216bac;background:#dbe9f7;box-shadow:0 0 0 3px rgba(33,107,172,.14)}
.nc-line{flex:1;height:2px;background:#dfe4ec;border-radius:2px;min-width:8px}
.nc-line.on{background:#1a9d5f}
.nc-lbl{font-size:.74rem;font-weight:700;color:#1a1d21;margin-left:2px;white-space:nowrap}
.nc-cancel{align-self:flex-start;border:0;background:none;padding:2px 0;font:500 .84rem 'Inter',system-ui;color:#6b7480;cursor:pointer}
.nc-cancel:hover{color:#c0322f}
.nc-open{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0;font:600 .86rem 'Inter',system-ui;color:#216bac;cursor:pointer}
.nc-open svg{width:14px;height:14px;fill:none;stroke:currentColor}
.nc-open:hover{text-decoration:underline}
.nc-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border:0;background:none;color:#8a94a0;border-radius:7px;display:grid;place-items:center;cursor:pointer;padding:0}
.nc-x:hover{background:#f1f4f8;color:#1a1d21}
.nc-x svg{width:14px;height:14px;fill:none;stroke:currentColor}
.notif.is-mini{padding:8px 10px 8px 8px;border-radius:14px;top:auto;bottom:16px}
.notif-mini{display:flex;align-items:center;gap:10px}
.notif-mini b{flex:1;font-size:.92rem}
.nm-count{font:700 .74rem 'Inter',system-ui;color:#216bac;background:#dce9f7;border-radius:999px;min-width:22px;height:20px;padding:0 7px;display:grid;place-items:center}
.nm-bar{margin:8px 0 0}
.p-name .dot.dot-wait{background:#c5cbd5;box-shadow:0 0 0 3px rgba(197,203,213,.25);animation:pulse 1.4s ease-in-out infinite}
.cp-reveal{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) scale(.82);z-index:35;display:flex;flex-direction:column;align-items:center;cursor:pointer;opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.4,.5,1)}
.cp-reveal.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cp-reveal.out{opacity:0;transform:translate(-50%,-56%) scale(.94);transition:opacity .4s ease,transform .4s ease}
.cp-swirl{position:absolute;left:50%;top:38%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:conic-gradient(from 0deg,rgba(139,92,246,0) 0,rgba(139,92,246,.85) 22%,rgba(88,80,236,.3) 40%,rgba(192,90,250,.8) 58%,rgba(58,160,230,.55) 78%,rgba(139,92,246,0) 100%);filter:blur(18px);animation:cpSwirl 3.2s linear infinite;pointer-events:none}
.cp-swirl2{width:250px;height:250px;margin:-125px 0 0 -125px;animation-direction:reverse;animation-duration:2.1s;opacity:.9;filter:blur(10px)}
.cp-reveal-art{position:relative;width:156px;height:156px;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 16px 40px rgba(76,54,140,.28),0 0 0 4px rgba(255,255,255,.75);z-index:1}
.cp-reveal-art img{width:100%;height:100%;object-fit:cover}
.cp-reveal-card{position:relative;z-index:1;margin-top:-22px;background:#fff;border-radius:22px;padding:30px 30px 18px;text-align:center;display:flex;flex-direction:column;gap:4px;box-shadow:0 20px 50px rgba(30,20,70,.22);font-family:'Inter',system-ui;min-width:230px}
.cp-reveal-eyebrow{font:800 .68rem 'Inter',system-ui;letter-spacing:.16em;text-transform:uppercase;color:#8b5cf6}
.cp-reveal-card b{font-size:1.28rem;color:#1a1d21;letter-spacing:-.01em}
.cp-reveal-card span:last-child{font-size:.86rem;color:#6b7480}
@keyframes cpSwirl{to{transform:rotate(360deg)}}
@media (max-width:640px){.notif{top:auto;bottom:12px;right:8px;width:calc(100vw - 16px)}.cp-modal{padding:28px 18px 20px}}
.create-pop.wb-pop{border-color:#cfe3d6;border-left-color:#1a9d5f;color:#1f5a3a}
.create-pop.wb-pop svg{stroke:#1a9d5f}
.create-pop.wb-pop b{font-weight:800}

/* Review mode: the team looking at a saved session (app.js reviewSession) */
.review-bar{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:#1a1d21;color:#fff;font:600 .84rem 'Inter',system-ui,sans-serif;padding:9px 16px;text-align:center}
.review-bar b{color:#ffd166}
.review-bar a{color:#fff;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 12px;text-decoration:none;white-space:nowrap}
.review-bar a:hover{background:rgba(255,255,255,.26)}
.review-bar.bad{background:#8a2323}
/* Share mode — the prospect's copy of the review bar: brand blue, friendlier, same layout */
.review-bar.share-bar{background:linear-gradient(90deg,#216bac,#2f8ad0);font-weight:500}
.review-bar.share-bar b{color:#fff;font-weight:800}
.review-bar.share-bar.bad{background:#8a2323}
.board-foot.share-foot{justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.share-foot-txt{font:600 .92rem 'Inter',system-ui;color:#48505a}
.board-foot a.btn{text-decoration:none;display:inline-block}
/* "Which tools does your company use?" — first-screen picker and the Your-tools chips in agent profiles */
.tool-wrap{margin-bottom:12px}
.tool-menu{padding:8px;overflow:hidden;display:flex;flex-direction:column}
.tool-menu[hidden],.tool-option[hidden]{display:none}
.tool-search{flex:0 0 auto;width:100%;margin-bottom:6px;padding:10px 12px;border:1.5px solid #e2e5ea;border-radius:12px;font:600 .95rem 'Inter',system-ui;color:var(--ink);outline:none}
.tool-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(33,107,172,.12)}
.tool-list{list-style:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;min-height:0}
.tool-option{display:flex;align-items:center;gap:10px}
.tool-option .mcp-lg,.tool-option .mcp-mono{width:16px;height:16px;flex:0 0 16px}
.tool-option.is-on:after{float:none;margin-left:auto}
.tool-chosen{display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.tool-chosen:empty{display:none}
.tool-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 11px;border:1.5px solid var(--brand);border-radius:12px;background:var(--brand);color:#fff;font:700 .82rem 'Inter',system-ui;box-shadow:0 6px 16px rgba(37,83,120,.18)}
.tool-chip .mcp-lg,.tool-chip .mcp-mono{width:15px;height:15px}
.tool-chip .mcp-mono{outline:1.5px solid #fff6}
.tool-sel button{border:0;background:transparent;color:#fff;font-size:1.05rem;line-height:1;padding:0 0 1px 3px;cursor:pointer;opacity:.8}
.tool-sel button:hover{opacity:1}
.mcp.is-mine{border-color:var(--brand);background:#eef5fc;color:var(--brand)}
.mcp-tick{margin-left:2px;font-style:normal;font-weight:800;font-size:.8rem}
.mcp-sub{margin:18px 0 8px;font:700 .8rem 'Inter',system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.tool-chip{transition:none}}

/* ---------- Book a call modal (Calendly inline) ---------- */
.book-modal{width:min(760px,100%);padding:26px 26px 18px;position:relative;text-align:left;border-radius:22px}
.book-head{text-align:center;margin:4px 0 14px}
.book-head h2{margin:6px 0 4px;font-size:1.5rem}
.book-head p,.book-alt{font-family:"Baloo 2",-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}   /* same paragraph face as the homepage's booking modal */
.book-head p{margin:0;font-size:.98rem}
.book-frame-wrap{position:relative;background:#f4f1ea;border-radius:16px;overflow:hidden;min-height:420px}
.book-frame{display:block;width:100%;height:640px;border:0}
.book-loader{position:absolute;inset:0;display:grid;place-items:center;background:#f4f1ea;transition:opacity .3s}
.book-loader.is-hidden{opacity:0;pointer-events:none}
.book-spinner{width:34px;height:34px;border:3px solid #d8d2c4;border-top-color:#216bac;border-radius:50%;animation:book-spin .8s linear infinite}
@keyframes book-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.book-spinner{animation-duration:1.6s}}
.book-alt{text-align:center;margin:12px 0 0;font-size:.9rem}
.book-alt a{color:var(--brand);font-weight:700;text-decoration:none}
.book-alt a:hover{text-decoration:underline}
.cta-book.btn:hover{transform:translateY(-1px)}
@media (max-width:640px){.book-modal{padding:20px 12px 14px}.book-frame{height:560px}.book-frame-wrap{min-height:360px}}

/* ---------- Phone layout (build 66): dashboard header, chats rail, hatch row ---------- */
@media (max-width:640px){
  .app-nav{gap:8px;padding:9px 10px}
  .ws{padding:6px 8px;gap:6px}
  .nav-tabs{padding:3px}
  .nav-tab{padding:8px 9px}
  .nav-right{gap:8px}
  .create-btn{padding:9px 11px}
  .create-btn span{display:none}
  .nav-avatar{display:none}
  .create-menu{right:0}
  .board-foot{flex-wrap:wrap}
  /* chats: the profile rail becomes a horizontal strip above the thread */
  .chats3{flex-direction:column}
  .pf-side{width:100%;flex:0 0 auto;flex-direction:row;align-items:center;gap:4px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .pf-side::-webkit-scrollbar{display:none}
  .pf-side-h,.pf-search,.pf-sec{display:none}
  .pf-item{width:auto;flex:0 0 auto;white-space:nowrap;padding:6px 10px 6px 6px;gap:8px}
  .chat-input.big{margin:0 10px 12px;padding:6px 6px 6px 12px}
  /* hatch: three eggs fit side by side on a phone */
  .egg-row{gap:6px}
  .egg-cell .hx6{width:clamp(88px,27vw,130px)}
}