/* Brioche & Crumb — Bakery showcase. Design system: warm neutrals, caramel + berry accents. */
:root{
  --bg:#FFF9F4; --bg-2:#F7EDE2; --card:#FFFFFF; --ink:#2E1E17; --ink-soft:#5C4538;
  --muted:#8A7266; --brand:#A8571F; --brand-2:#E9A23B; --berry:#B23A48; --green:#3F7D58;
  --line:rgba(46,30,23,.12); --line-2:rgba(46,30,23,.06);
  --r-sm:10px; --r:16px; --r-lg:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(46,30,23,.06), 0 8px 24px -12px rgba(46,30,23,.18);
  --sh-2:0 2px 6px rgba(46,30,23,.07), 0 24px 60px -28px rgba(46,30,23,.35);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
.eyebrow{font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:600; color:var(--brand)}
.lead{font-size:1.12rem; color:var(--ink-soft); max-width:62ch}
.muted{color:var(--muted)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:60; backdrop-filter:blur(14px);
  background:rgba(255,249,244,.82); border-bottom:1px solid var(--line-2); transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 10px 30px -22px rgba(46,30,23,.5)}
.hdr{display:flex; align-items:center; gap:1.5rem; height:74px}
.brand{display:flex; align-items:center; gap:.7rem; font-family:var(--serif); font-weight:700; font-size:1.18rem}
.brand .mark{width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand)); color:#fff; font-family:var(--serif); font-size:1.1rem}
.brand small{display:block; font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; gap:.35rem; margin-left:auto}
.nav a{padding:.5rem .85rem; border-radius:var(--r-pill); font-size:.94rem; color:var(--ink-soft); transition:.18s}
.nav a:hover{background:var(--bg-2); color:var(--ink)}
.nav a.active{background:var(--ink); color:#fff}
.hdr-cta{display:flex; align-items:center; gap:.5rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1.15rem; border-radius:var(--r-pill);
  font-weight:600; font-size:.92rem; border:1px solid transparent; transition:.18s; white-space:nowrap}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px -14px rgba(168,87,31,.9)}
.btn-primary:hover{background:#8f4a1a; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); background:rgba(255,255,255,.6)}
.btn-ghost:hover{background:#fff; border-color:var(--ink)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#000}
.btn-sm{padding:.5rem .85rem; font-size:.85rem}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff}
.burger span{display:block; width:18px; height:2px; margin:3px auto; background:var(--ink); border-radius:2px; transition:.2s}
@media(max-width:900px){
  .nav{position:fixed; inset:74px 0 auto 0; flex-direction:column; background:var(--bg); padding:1rem 6vw 1.6rem;
    border-bottom:1px solid var(--line); gap:.2rem; display:none}
  .nav.open{display:flex}
  .nav a{padding:.85rem .9rem}
  .burger{display:block; margin-left:auto}
  .hdr-cta .btn-ghost{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5.5rem)}
.hero:before{content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 78% 8%,rgba(233,162,59,.28),transparent 62%),
             radial-gradient(45% 45% at 12% 30%,rgba(178,58,72,.12),transparent 60%); z-index:-1}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4rem 0 1.8rem}
.pill{padding:.4rem .8rem; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line);
  font-size:.8rem; font-weight:600; color:var(--ink-soft)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.stars{display:flex; align-items:center; gap:.6rem; margin-top:1.6rem; font-size:.88rem; color:var(--muted)}
.stars b{color:var(--ink)}
.mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; aspect-ratio:1/1}
.tile{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); display:grid; place-items:center;
  font-size:clamp(2.6rem,6vw,4.4rem); border:1px solid rgba(255,255,255,.7)}
.tile:after{content:attr(data-label); position:absolute; left:14px; bottom:12px; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:rgba(46,30,23,.62)}
.t1{background:linear-gradient(150deg,#FBE3C0,#EFC48E); grid-row:span 2}
.t2{background:linear-gradient(150deg,#F6D9D2,#E8B4A8)}
.t3{background:linear-gradient(150deg,#E4EEDD,#C7DDBB)}
.t4{background:linear-gradient(150deg,#EFE1F2,#D8C2E0); display:none}

/* ---------- responsive split ---------- */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:1.6rem;align-items:center}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.split-support{display:grid;grid-template-columns:1.35fr .9fr;gap:1.6rem;align-items:start}
@media(max-width:900px){.split,.split-even,.split-support{grid-template-columns:1fr}}

/* ---------- strips / sections ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.2rem}
.sec-head p{margin:.4rem 0 0; max-width:52ch}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--sh-1)}
.card.flat{box-shadow:none}
.card .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem;
  background:var(--bg-2); margin-bottom:.9rem}
.tag{display:inline-block; padding:.22rem .6rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase}
.tag.vegan{background:#E7F2E3; color:#2F6B44}
.tag.gf{background:#FDF0D8; color:#8A5A12}
.tag.new{background:#FBE3E6; color:#8E2431}
.tag.best{background:#E9EFFB; color:#2B4B8F}

/* ---------- product cards ---------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; align-items:center}
.chip{padding:.5rem 1rem; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff;
  font-size:.86rem; font-weight:600; color:var(--ink-soft); transition:.16s}
.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.search{margin-left:auto; display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.45rem .5rem .45rem 1rem; min-width:min(280px,70vw)}
.search input{border:0; outline:0; background:none; width:100%}
.products{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.2rem}
.p-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:.22s}
.p-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(168,87,31,.35)}
.p-art{aspect-ratio:4/3; display:grid; place-items:center; font-size:3.6rem; position:relative;
  background:linear-gradient(150deg,#FBEAD4,#F3D9B8)}
.p-art .tag{position:absolute; top:12px; left:12px}
.p-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1}
.p-body h3{margin-bottom:.25rem}
.p-body p{font-size:.9rem; color:var(--muted); margin-bottom:.9rem; flex:1}
.p-foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.price{font-family:var(--serif); font-size:1.25rem; font-weight:700}
.price small{font-size:.75rem; color:var(--muted); font-family:var(--sans); font-weight:500}
.empty{padding:3rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r-lg)}

/* ---------- AI spotlight ---------- */
.ai-band{background:linear-gradient(160deg,#2E1E17,#3E2A20 55%,#57331F); color:#FFF6EC; border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,3.2rem); display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center;
  box-shadow:var(--sh-2); overflow:hidden; position:relative}
.ai-band:after{content:""; position:absolute; right:-14%; bottom:-45%; width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(233,162,59,.35),transparent 66%)}
.ai-band .eyebrow{color:var(--brand-2)}
.ai-band h2{color:#fff}
.ai-band p{color:rgba(255,246,236,.78)}
@media(max-width:900px){.ai-band{grid-template-columns:1fr}}
.ai-steps{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem}
.ai-steps li{display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; color:rgba(255,246,236,.85)}
.ai-steps b{color:#fff; display:block; font-weight:600}
.ai-steps .n{width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:.75rem; font-weight:700; color:#fff}
.mock-chat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r);
  padding:1rem; backdrop-filter:blur(6px)}
.mock-bubble{background:rgba(255,255,255,.1); border-radius:14px 14px 14px 4px; padding:.6rem .8rem; font-size:.86rem; margin-bottom:.5rem; max-width:88%}
.mock-bubble.me{background:var(--brand-2); color:#2E1E17; border-radius:14px 14px 4px 14px; margin-left:auto; font-weight:500}
.mock-meta{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,246,236,.5); margin-bottom:.7rem}

/* ---------- steps / timeline / stats ---------- */
.steps{counter-reset:s; display:grid; gap:1rem}
.step{display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.1rem 1.3rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r)}
.step .num{counter-increment:s; width:34px; height:34px; border-radius:50%; background:var(--bg-2); display:grid;
  place-items:center; font-weight:700; color:var(--brand)}
.step .num:before{content:counter(s)}
.step h3{margin:.1rem 0 .3rem; font-size:1.05rem}
.step p{margin:0; font-size:.92rem; color:var(--muted)}
.timeline{border-left:2px solid var(--line); margin-left:.6rem; padding-left:1.6rem; display:grid; gap:1.6rem}
.tl-item{position:relative}
.tl-item:before{content:""; position:absolute; left:-1.95rem; top:.45rem; width:11px; height:11px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px var(--bg)}
.tl-item time{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:700}
.tl-item h3{margin:.25rem 0 .3rem}
.tl-item p{margin:0; color:var(--muted); font-size:.94rem}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; text-align:center}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block; font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.8rem); color:var(--brand)}
.stat span{font-size:.85rem; color:var(--muted)}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media(max-width:820px){.team{grid-template-columns:1fr}}
.avatar{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; background:var(--bg-2); margin-bottom:.8rem}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:.7rem; max-width:820px}
.q{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.q summary{padding:1rem 1.2rem; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:"+"; color:var(--brand); font-weight:700}
.q[open] summary:after{content:"–"}
.q .a{padding:0 1.2rem 1.1rem; color:var(--muted); font-size:.94rem}

/* ---------- forms / contact ---------- */
.form{display:grid; gap:.9rem}
.field{display:grid; gap:.35rem}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-soft)}
.field input,.field textarea,.field select{padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; outline:0; transition:.16s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(168,87,31,.12)}
.note{font-size:.82rem; color:var(--muted)}

/* ---------- order tray ---------- */
.tray{position:fixed; right:24px; bottom:150px; z-index:70; width:min(340px,92vw); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:1rem 1.1rem 1.2rem;
  transform:translateY(20px) scale(.96); opacity:0; pointer-events:none; transition:.22s}
.tray.open{transform:none; opacity:1; pointer-events:auto}
.tray h4{margin:0 0 .6rem; display:flex; justify-content:space-between; align-items:center}
.tray ul{list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.45rem; max-height:180px; overflow:auto}
.tray li{display:flex; justify-content:space-between; gap:.6rem; font-size:.88rem; padding-bottom:.45rem; border-bottom:1px dashed var(--line)}
.tray .total{display:flex; justify-content:space-between; font-weight:700; font-family:var(--serif); font-size:1.1rem; margin-bottom:.9rem}
.tray-fab{position:fixed; right:24px; bottom:88px; z-index:70; display:flex; align-items:center; gap:.5rem;
  padding:.8rem 1.05rem; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:600; box-shadow:var(--sh-2)}
.tray-fab:hover{transform:translateY(-2px)}
.tray-fab .count{background:var(--brand-2); color:var(--ink); border-radius:var(--r-pill); padding:0 .45rem; font-size:.78rem}
@media(max-width:620px){.tray-fab span.label{display:none}}

/* ---------- toast ---------- */
.toast-host{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90; display:grid; gap:.5rem; justify-items:center}
.toast{background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-pill); font-size:.88rem;
  box-shadow:var(--sh-2); animation:pop .25s ease both}
@keyframes pop{from{opacity:0; transform:translateY(10px)}}

/* ---------- footer ---------- */
.site-footer{background:#241610; color:rgba(255,246,236,.72); padding:3.5rem 0 2rem; margin-top:2rem}
.site-footer h4{color:#fff; font-size:1rem; margin-bottom:.9rem}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-grid a{display:block; padding:.22rem 0; font-size:.92rem}
.f-grid a:hover{color:#fff}
.f-bottom{margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ---------- AI widget ---------- */
.ai-fab{position:fixed; right:24px; bottom:24px; z-index:80; display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1.15rem .8rem .9rem; border-radius:var(--r-pill); background:linear-gradient(140deg,var(--brand-2),var(--brand));
  color:#fff; font-weight:600; box-shadow:0 18px 40px -18px rgba(168,87,31,.9); transition:.2s}
.ai-fab:hover{transform:translateY(-2px) scale(1.02)}
.ai-fab .dot{width:9px; height:9px; border-radius:50%; background:#8FF0A4; box-shadow:0 0 0 4px rgba(143,240,164,.25); animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(143,240,164,.05)}}
.ai-panel{position:fixed; right:24px; bottom:24px; z-index:85; width:min(404px,94vw); height:min(660px,82vh);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(46,30,23,.55);
  display:flex; flex-direction:column; overflow:hidden; transform:translateY(18px) scale(.98); opacity:0; pointer-events:none;
  transition:.24s cubic-bezier(.2,.9,.3,1)}
.ai-panel.open{transform:none; opacity:1; pointer-events:auto}
.ai-panel.embedded{position:static; width:100%; height:min(680px,78vh); transform:none; opacity:1; pointer-events:auto; box-shadow:var(--sh-2)}
.ai-head{padding:1rem 1.1rem; background:linear-gradient(150deg,#2E1E17,#4A2E1F); color:#fff; display:flex; align-items:center; gap:.75rem}
.ai-head .ava{width:40px; height:40px; border-radius:13px; background:linear-gradient(140deg,var(--brand-2),var(--brand));
  display:grid; place-items:center; font-size:1.15rem}
.ai-head b{display:block; font-family:var(--serif); font-size:1.02rem; font-weight:600}
.ai-head small{font-size:.74rem; color:rgba(255,246,236,.7); display:flex; align-items:center; gap:.35rem}
.ai-head .live{width:7px; height:7px; border-radius:50%; background:#8FF0A4}
.ai-head .x{margin-left:auto; width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.12);
  display:grid; place-items:center; font-size:1rem}
.ai-head .x:hover{background:rgba(255,255,255,.22)}
.ai-scroll{flex:1; overflow-y:auto; padding:1.1rem; background:var(--bg); display:flex; flex-direction:column; gap:.7rem}
.msg{max-width:86%; padding:.7rem .9rem; border-radius:16px; font-size:.92rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word}
.msg.bot{background:#fff; border:1px solid var(--line); border-radius:16px 16px 16px 5px; align-self:flex-start; box-shadow:var(--sh-1)}
.msg.me{background:var(--brand); color:#fff; border-radius:16px 16px 5px 16px; align-self:flex-end}
.msg .card-inline{background:var(--bg-2); border-radius:var(--r-sm); padding:.6rem .7rem; margin-top:.6rem; font-size:.86rem}
.msg .card-inline b{display:block}
.ai-trace{font-size:.7rem; color:var(--muted); align-self:flex-start; margin:-.35rem 0 .2rem .2rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1.1rem .6rem; background:var(--bg)}
.chips button{border:1px solid var(--line); background:#fff; border-radius:var(--r-pill); padding:.38rem .8rem;
  font-size:.82rem; font-weight:600; color:var(--brand); transition:.16s}
.chips button:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.ai-foot{padding:.75rem 1rem 1rem; background:#fff; border-top:1px solid var(--line-2)}
.ai-compose{display:flex; gap:.5rem; align-items:flex-end; background:var(--bg-2); border-radius:var(--r);
  padding:.4rem .4rem .4rem .8rem}
.ai-compose textarea{flex:1; border:0; background:none; outline:0; resize:none; max-height:100px; padding:.5rem 0; font-size:.92rem}
.ai-send{width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center}
.ai-send:hover{background:#8f4a1a}
.ai-util{display:flex; justify-content:space-between; align-items:center; margin-top:.55rem; font-size:.74rem; color:var(--muted)}
.ai-util label{display:flex; align-items:center; gap:.35rem; cursor:pointer}
.typing{display:flex; gap:4px; align-items:center}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.handoff{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.9rem; display:grid; gap:.55rem;
  align-self:flex-start; width:100%; max-width:92%}
.handoff b{font-size:.88rem}
.handoff input,.handoff textarea{padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); outline:0; font-size:.86rem}
.slot-meter{font-size:.72rem; color:var(--muted); font-family:ui-monospace,Menlo,monospace}
@media(max-width:520px){
  .ai-panel{right:0; left:0; bottom:0; width:100%; height:88vh; border-radius:22px 22px 0 0}
  .ai-fab{right:16px; bottom:16px}
  .tray-fab{right:16px; bottom:84px}
}