:root{
  --coral:#EF5E4E; --coral-deep:#D8452F; --coral-soft:#FBE9E5; --peach:#FFB59E;
  --ink:#1B1B1F; --ink-2:#5B5B63; --ink-3:#8E8E96; --ink-4:#C4C4CA;
  --bg:#F7F5F2; --surface:#FFFFFF; --scout:#F0EDE8; --line:rgba(27,27,31,.08);
  --r-lg:22px; --r-md:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.4,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}

/* Stage: full-screen on phones, a framed device on larger screens */
.stage{height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.device{position:relative;width:100%;height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:600px){
  .stage{background:#ECE9E4}
  .device{width:402px;height:874px;max-height:calc(100dvh - 32px);border-radius:52px;box-shadow:0 30px 80px rgba(0,0,0,.18),0 0 0 10px #1B1B1F,0 0 0 12px #3a3a3f}
  .topbar{padding-top:44px}
}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 10px;background:var(--bg);z-index:2;padding-top:max(12px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:8px}
.pf-mark{width:18px;height:27px}
.wordmark{font-weight:600;font-size:18px;letter-spacing:-.01em}
.reset{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3)}
.reset:active{background:var(--line)}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 12px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 28px 12px;animation:fadeUp .5s var(--ease) both}
.orb-wrap{position:relative;width:220px;height:220px;margin:0 0 16px}
.orb{position:absolute;inset:0;width:220px;height:220px;display:block}
.empty h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.empty p{color:var(--ink-2);margin:0 0 22px;line-height:1.5;font-size:15px}
.starters{display:flex;flex-direction:column;gap:8px;align-items:center}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 16px;font-size:14px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:transform .15s var(--ease),background .15s}
.pill:active{transform:scale(.98);background:var(--scout)}
.starters .pill{animation:fadeUp .5s var(--ease) both;width:auto}
.starters .pill:nth-child(2){animation-delay:.08s}.starters .pill:nth-child(3){animation-delay:.16s}

/* Thread */
.thread{display:flex;flex-direction:column;gap:14px;padding:6px 16px 8px}
.msg{display:flex;gap:10px;max-width:100%;align-items:flex-end;animation:fadeUp .35s var(--ease) both}
.msg.cont{margin-top:-8px}
.msg.grouped .avatar{visibility:hidden}
.msg.user{justify-content:flex-end}
.avatar{flex:0 0 26px;width:26px;height:26px;border-radius:50%;margin-bottom:2px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.avatar svg{width:12px;height:18px}
.avatar.thinking{animation:breathe 1.2s ease-in-out infinite}
.bubble{padding:11px 14px;border-radius:var(--r-lg);line-height:1.45;font-size:15px;max-width:86%;white-space:pre-wrap;word-wrap:break-word}
.msg.scout .bubble{background:var(--scout);border-bottom-left-radius:6px}
.msg.scout.cont .bubble{border-top-left-radius:6px}
.msg.user.cont .bubble{border-top-right-radius:6px}
.msg.user .bubble{background:var(--coral);color:#fff;border-bottom-right-radius:6px}
.bubble b{font-weight:600}
.msg.user .bubble b{font-weight:600}
.typing{display:inline-flex;gap:4px;padding:6px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.retry{margin-left:36px}

/* Results */
.results{margin:0 -16px;padding:2px 16px 6px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
.results::after{content:"";flex:0 0 4px}
.results::-webkit-scrollbar{display:none}
.card{flex:0 0 272px;scroll-snap-align:start;background:var(--surface);border-radius:var(--r-md);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(27,27,31,.18);animation:cardIn .5s var(--spring) both}
.card:nth-child(2){animation-delay:.06s}.card:nth-child(3){animation-delay:.12s}.card:nth-child(4){animation-delay:.18s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.photos{position:relative;aspect-ratio:4/3;background:#E9E6E1;overflow:hidden}
.photos .track{display:flex;height:100%;transition:transform .35s var(--ease);will-change:transform}
.photos img{flex:0 0 auto;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s}
.photos img.in{opacity:1}
.ph-nav{position:absolute;top:0;bottom:0;width:38%;background:none}
.ph-nav.prev{left:0}.ph-nav.next{right:0}
.dots{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;gap:5px;pointer-events:none;z-index:1}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.dots i.on{background:#fff}
.badge{position:absolute;top:10px;left:10px;background:rgba(27,27,31,.72);color:#fff;font-size:11px;font-weight:500;padding:4px 8px;border-radius:var(--r-pill);backdrop-filter:blur(6px)}
.card-body{padding:12px 14px 14px}
.price{font-weight:600;font-size:17px;letter-spacing:-.01em}
.price small{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-left:3px}
.meta{color:var(--ink-2);font-size:13.5px;margin-top:3px}
.where{font-size:13.5px;margin-top:3px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tags span{font-size:11.5px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 8px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.tags span svg{width:12px;height:12px;flex:0 0 12px}
.results-note{font-size:13px;color:var(--ink-2);background:#FFF4E5;border:1px solid #F5C88A;border-radius:10px;padding:8px 12px;margin:2px 0 -2px}

/* Dock */
.dock{background:linear-gradient(to top, var(--bg) 70%, rgba(247,245,242,0));padding:6px 12px calc(10px + var(--safe-b));display:flex;flex-direction:column;gap:8px;z-index:3}

.brief{display:flex;align-items:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.03);animation:fadeUp .4s var(--ease) both;transition:transform .15s var(--ease)}
.brief:active{transform:scale(.99)}
.brief-icon{flex:0 0 12px;width:12px;height:18px}
.brief-text{flex:1;font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden;position:relative}
.brief-text .more{position:absolute;right:0;top:0;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;color:var(--ink-2)}
.brief-text .p{transition:background .3s,color .3s}
.brief-text .p.assumed,.brief-text .p.unsure{color:var(--ink-2)}
.brief-text .p.assumed::after,.brief-text .p.unsure::after{content:"?";color:var(--coral);font-weight:600;margin-left:1px}
.brief-text .p.fornow::before{content:"for now: ";color:var(--ink-3);font-style:italic}
.brief-text .sep{color:var(--ink-4);margin:0 5px}
.brief-text .p.added,.brief-text .p.updated{background:var(--coral-soft);border-radius:4px;box-shadow:0 0 0 3px var(--coral-soft);animation:settle 1.6s var(--ease) both}
.brief-text .p.removed{text-decoration:line-through;color:var(--ink-4);animation:collapse 1.4s var(--ease) both}
@keyframes settle{0%{background:var(--peach);box-shadow:0 0 0 3px var(--peach)}100%{background:transparent;box-shadow:none}}
@keyframes collapse{0%,60%{opacity:1}100%{opacity:0}}
.brief-chev{width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-top:1.5px solid var(--ink-3);transform:rotate(-45deg);margin-right:2px}
.brief.pulse{animation:briefPulse .6s var(--spring)}
@keyframes briefPulse{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}

.composer{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 6px 6px 16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.composer input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-width:0;padding:8px 0}
.composer input::placeholder{color:var(--ink-3)}
.mic,.send{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .15s var(--spring),background .2s,color .2s}
.mic{color:var(--ink-2)}
.mic:active{transform:scale(.92);background:var(--bg)}
.send{background:var(--coral);color:#fff;display:none}
.send:active{transform:scale(.92)}
.composer.has-text .send{display:grid}.composer.has-text .mic{display:none}
.composer.busy .send{opacity:.5}

/* Sheet */
.sheet-backdrop{position:absolute;inset:0;background:rgba(27,27,31,.28);z-index:8;animation:fade .25s both}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:26px 26px 0 0;padding:8px 20px calc(24px + var(--safe-b));z-index:9;box-shadow:0 -10px 40px rgba(0,0,0,.12);animation:sheetUp .45s var(--spring) both;max-height:78%;overflow-y:auto}
.sheet.closing{animation:sheetDown .25s var(--ease) both}
.sheet-backdrop.closing{animation:fadeOut .25s both}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.handle{width:36px;height:4px;border-radius:2px;background:var(--ink-4);margin:4px auto 16px;position:relative;cursor:grab;touch-action:none}
.handle::before{content:"";position:absolute;inset:-14px -40px}
.sheet h2{font-size:18px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.sheet-body{font-size:16px;line-height:1.7}
.sheet-body p{margin:0 0 12px}
.sheet-body .lead{color:var(--ink-3);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;display:block;margin:12px 0 2px}
.sheet-body .term{display:inline;border-bottom:1.5px dotted rgba(239,94,78,.7);padding-bottom:1px;cursor:pointer;border-radius:3px;transition:background .15s}
.sheet-body .term:active,.sheet-body .term.active{background:var(--coral-soft)}
.sheet-body .term.assumed,.sheet-body .term.unsure{border-bottom-color:rgba(27,27,31,.35)}
.sheet-body .term.fornow::before{content:"just for now, ";font-style:italic;color:var(--ink-3)}
.sheet-hint{color:var(--ink-3);font-size:13px;margin:6px 0 0}
.sheet .empty-note{color:var(--ink-2)}

.popover{position:absolute;z-index:10;background:var(--ink);color:#fff;border-radius:14px;padding:6px;display:flex;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:popIn .25s var(--spring) both}
.popover button{padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:500;white-space:nowrap}
.popover button:active{background:rgba(255,255,255,.15)}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}

.toast{position:absolute;left:50%;bottom:calc(120px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-pill);font-size:13.5px;z-index:11;white-space:nowrap;animation:fadeUp .3s var(--ease) both;box-shadow:0 8px 24px rgba(0,0,0,.2)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* menu */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:44px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:210px;box-shadow:0 12px 32px rgba(27,27,31,.14);z-index:20;animation:popIn .2s var(--spring) both}
.menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:9px;font-size:14px}
.menu button:active{background:var(--bg)}
.menu-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 4px;border-top:1px solid var(--line);margin-top:4px}
/* card tags */
.tags span.drop{background:#E9F7EE;border-color:#9FDDB6;color:#0F6E3A}
.tags span.over{background:#FFF4E5;border-color:#F5C88A;color:#8A5A00}
/* inline action inside a Scout bubble */
.inline-action{display:block;margin-top:8px;color:var(--coral-deep);font-weight:500;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(239,94,78,.4)}

/* first-load sequence: everything arrives together */
.orb-shimmer{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(110deg,#F1EDE7 30%,#F9F6F2 50%,#F1EDE7 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;transition:opacity .5s}
.empty.loading .orb,.empty.loading h1,.empty.loading p,.empty.loading .starters{opacity:0}
.empty .orb,.empty h1,.empty p,.empty .starters{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.empty.loading h1,.empty.loading p,.empty.loading .starters{transform:translateY(8px)}
.empty h1{transition-delay:.1s}.empty p{transition-delay:.18s}.empty .starters{transition-delay:.26s}
.empty:not(.loading) .orb-shimmer{opacity:0;pointer-events:none;animation:none;visibility:hidden}
.empty .starters .pill{animation:none}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* result skeletons while Scout looks */
.results.skeleton .card{box-shadow:none;background:var(--surface)}
.sk{background:linear-gradient(110deg,#EEEAE4 30%,#F7F4F0 50%,#EEEAE4 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
.sk.photo{aspect-ratio:4/3;border-radius:0}
.sk.line{height:14px;margin:12px 14px 0}.sk.line.w60{width:60%}.sk.line.w40{width:40%}.sk.line.last{margin-bottom:16px}

.composer{position:relative}
.hint{position:absolute;left:16px;right:60px;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;pointer-events:none;color:var(--ink-3);font-size:16px}
.hint-text{position:absolute;left:0;white-space:nowrap;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.hint-text.in{transform:translateY(120%);opacity:0}
.hint-text.out{transform:translateY(-120%);opacity:0}
.results.skeleton{margin-top:-2px}