@font-face{font-family:"Gotham";src:url("/fonts/GothamBook.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("/fonts/gothambold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noe Display";src:url("/fonts/NoeDisplay-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
:root{
  --bg:#fff;
  --ink:#11110f;
  --muted:#74736f;
  --muted-2:#a2a19c;
  --line:#e7e7e4;
  --line-strong:#d8d8d4;
  --green:#6bb346;
  --soft:#f6f6f4;
}
*{box-sizing:border-box}
html{background:#fff;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;overflow-x:hidden;color-scheme:light}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
button,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-shell{width:min(820px,100%);max-width:100%;min-height:100dvh;margin:0 auto;padding:0 18px max(30px,env(safe-area-inset-bottom));overflow-x:clip;background:#fff}

/* MR MATCHA CLUB chrome — white, quiet, and product-first. */
.ai-topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:62px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(17,17,15,.06)}
.ai-back{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink);text-decoration:none;font-size:25px;line-height:1;transition:background .15s ease,transform .15s ease}
.ai-back:active{background:#f3f3f1;transform:scale(.96)}
.ai-brand{justify-self:center;display:inline-flex;align-items:baseline;gap:5px;color:var(--ink);text-decoration:none;white-space:nowrap}
.ai-brand span{font:700 17px/1 "Gotham",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:-.055em}
.ai-brand em{margin-left:0;color:var(--green);font:400 italic 21px/1 "Noe Display",Georgia,"Times New Roman",serif;letter-spacing:-.04em}
.ai-topbar-spacer{width:38px;height:38px}

/* W18.349 — ASK IDENTITY + ICON CLEANUP
   Restore the original MR MATCHA CLUB wordmark and remove duplicate
   black wrapper layers behind the existing Ask icon artwork. */
/* MR MATCHA identity first; OpenAI attribution stays clear but secondary. */
.ai-hero{text-align:center;padding:30px 18px 23px;transition:padding .2s ease,opacity .2s ease,transform .2s ease}
.ai-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 13px;border-radius:19px;background:transparent;color:#fff;font-size:22px;box-shadow:none;overflow:hidden}
.ai-mark>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ai-powered-badge{display:inline-flex;align-items:center;gap:5px;min-height:26px;margin:0 auto 13px;padding:0 10px;border:1px solid rgba(17,17,15,.09);border-radius:999px;background:#fff;color:#8b8984;font-size:9px;line-height:1;letter-spacing:.005em;box-shadow:0 2px 8px rgba(17,17,15,.025)}
.ai-powered-badge strong{color:#353532;font-weight:780}
.ai-powered-badge img{display:block;width:16px;height:16px;flex:0 0 16px;object-fit:contain;opacity:.92;margin-right:1px}
.ai-hero h1{margin:0;font-size:clamp(38px,7vw,58px);line-height:.94;letter-spacing:-.065em;font-weight:900;color:var(--ink)}
.ai-sub{margin:15px auto 0;color:#252522;font-size:17px;font-weight:760;letter-spacing:-.025em}
.ai-subline{max-width:610px;margin:7px auto 0;color:#74736f;font-size:12.5px;line-height:1.55}

/* Clean AI conversation surface — no beige cast. */
.ai-chat-card{width:100%;min-width:0;overflow:hidden;border:1px solid rgba(17,17,15,.075);border-radius:25px;background:#fff;box-shadow:0 12px 38px rgba(17,17,15,.045)}
.ai-messages{min-height:218px;max-height:min(53vh,600px);overflow:auto;padding:24px 22px 8px;scroll-behavior:smooth;overscroll-behavior:contain;background:#fff}
.ai-message{display:flex;gap:10px;margin:0 0 17px;align-items:flex-start}
.ai-message--user{justify-content:flex-end}
.ai-avatar{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:11px;background:transparent;color:#fff;font-size:11px;box-shadow:none;overflow:hidden}
.ai-avatar>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ai-bubble{max-width:min(600px,84%);padding:13px 15px;border-radius:18px;background:#f6f6f4;color:var(--ink);font-size:13px;line-height:1.58;white-space:pre-wrap;letter-spacing:-.006em}
.ai-message--assistant .ai-bubble{border-bottom-left-radius:7px}
.ai-message--user .ai-bubble{background:#11110f;color:#fff;border-bottom-right-radius:7px}
.ai-bubble strong{display:block;margin-bottom:5px;font-size:13.5px;line-height:1.3;letter-spacing:-.015em}
.ai-message--welcome .ai-bubble{max-width:560px;background:#f6f6f4}
.ai-bubble.is-loading{color:#888681;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

/* Composer: familiar AI behavior, MR MATCHA restraint. */
.ai-compose-zone{position:sticky;bottom:0;z-index:5;padding-top:3px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.98) 16px,#fff 42px)}
.ai-prompts{display:flex;gap:8px;overflow-x:auto;padding:8px 18px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ai-prompts::-webkit-scrollbar{display:none}
.ai-prompts[hidden]{display:none}
.ai-prompts button{flex:0 0 auto;min-height:38px;padding:0 14px;border:1px solid #dededb;border-radius:999px;background:#fff;color:#444440;font-size:10.5px;font-weight:760;letter-spacing:-.01em;cursor:pointer;box-shadow:none;transition:background .15s ease,border-color .15s ease,transform .12s ease}
.ai-prompts button:hover{background:#f7f7f5;border-color:#d2d2ce}
.ai-prompts button:active{transform:scale(.975)}
.ai-compose{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) 48px;gap:10px;align-items:end;margin:0 14px;padding:9px 9px 9px 16px;border:1px solid #d9d9d5;border-radius:22px;background:#fff;box-shadow:0 3px 14px rgba(17,17,15,.025);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.ai-compose:focus-within{background:#fff;border-color:#bcbcb7;box-shadow:0 0 0 4px rgba(17,17,15,.025),0 8px 24px rgba(17,17,15,.025)}
.ai-compose textarea{width:100%;min-width:0;min-height:42px;max-height:132px;padding:11px 0 8px;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font-size:14px;line-height:1.45;letter-spacing:-.01em}
.ai-compose textarea::placeholder{color:#aaa9a4}
.ai-compose button{display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:15px;background:var(--green);color:#fff;font-size:23px;font-weight:900;cursor:pointer;box-shadow:0 7px 16px rgba(107,179,70,.20);transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.ai-compose button:hover{background:#61aa3d;box-shadow:0 8px 20px rgba(107,179,70,.25)}
.ai-compose button:active{transform:scale(.95)}
.ai-compose button:disabled{opacity:.5;cursor:default;box-shadow:none}
.ai-compose button.is-busy span{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-compose-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:10px 17px 15px}
.ai-compose-meta button{padding:1px 0 0;border:0;background:none;color:#4f4f4b;font-size:9.5px;font-weight:820;cursor:pointer;white-space:nowrap}
.ai-compose-info{min-width:0;display:grid;justify-items:end;gap:3px;text-align:right}
.ai-compose-info p{margin:0;color:#a09f9a;font-size:8.5px;line-height:1.35}
.ai-compose-info small{color:#7d7b76;font-size:8px;line-height:1.3;font-weight:650;letter-spacing:.005em}

/* W18.218 — keep the empty state clean; reset appears only after a conversation starts. */
body:not(.has-chat) #ai-new{display:none}
body:not(.has-chat) .ai-compose-meta{justify-content:center}
body:not(.has-chat) .ai-compose-info{justify-items:center;text-align:center}

/* Same five-icon navigation language as the polished MR MATCHA CLUB bottom bar. */
.ai-mobile-nav{display:none}
@media(max-width:560px){
  .ai-shell{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .ai-mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    height:calc(67px + env(safe-area-inset-bottom));
    min-height:0;
    padding:4px 8px env(safe-area-inset-bottom);
    border-top:1px solid rgba(17,17,15,.065);
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    transition:transform .18s ease,opacity .16s ease;
  }
  .ai-mobile-nav-link{
    position:relative;
    min-width:0;
    min-height:56px;
    display:grid;
    place-items:center;
    align-content:center;
    color:#11110f;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .ai-mobile-nav-link:active{transform:scale(.93)}
  .ai-mobile-nav-icon,
  .ai-mobile-nav-spark{width:36px;height:36px;display:grid;place-items:center;color:#11110f;transform:none}
  .ai-mobile-nav-icon svg,
  .ai-mobile-nav-spark svg{
    width:27px;
    height:27px;
    display:block;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .ai-mobile-nav-spark svg path{fill:none;stroke:currentColor;stroke-width:1.75}
  .ai-mobile-nav-link.is-active .ai-mobile-nav-spark{transform:none}
  .ai-mobile-nav-link.is-active .ai-mobile-nav-spark svg,
  .ai-mobile-nav-link.is-active .ai-mobile-nav-spark svg path{stroke-width:2}
  /* W18.406 — optical centering: the source plant artwork sits low inside its square canvas. */
  .ai-mobile-nav .ai-mobile-nav-spark .ask-ai-mark.ask-ai-mark--nav{transform:translateY(-2px)!important}
  body.keyboard-open .ai-mobile-nav{
    display:none;
    opacity:0;
    pointer-events:none;
    transform:translateY(115%);
  }

  /* W18.346 — use Safari's visible viewport while the keyboard owns focus.
     This keeps the page from retaining layout-viewport space below Ask. */
  body.keyboard-open{
    height:var(--ask-visual-height,100dvh);
    min-height:0;
    overflow:hidden;
    overscroll-behavior-y:none;
  }
  body.keyboard-open .ai-shell{
    height:var(--ask-visual-height,100dvh);
    min-height:0;
    padding-bottom:max(10px,env(safe-area-inset-bottom));
    overflow-x:clip;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* Once the conversation starts, the large welcome moment gets out of the way. */
body.has-chat .ai-hero{padding:15px 12px 12px}
body.has-chat .ai-hero .ai-mark{width:38px;height:38px;margin-bottom:8px;border-radius:13px;font-size:14px;box-shadow:none}
body.has-chat .ai-hero .ai-powered-badge,
body.has-chat .ai-hero .ai-sub,
body.has-chat .ai-hero .ai-subline{display:none}
body.has-chat .ai-hero h1{font-size:24px;letter-spacing:-.045em}
body.has-chat .ai-messages{min-height:calc(100dvh - 315px);max-height:none}

@media(max-width:560px){
  .ai-shell{padding-left:12px;padding-right:12px}
  .ai-topbar{min-height:58px}
  .ai-hero{padding:22px 8px 18px}
  .ai-mark{width:50px;height:50px;border-radius:16px;font-size:19px;margin-bottom:11px}
  .ai-powered-badge{margin-bottom:11px}
  .ai-hero h1{font-size:40px}
  .ai-sub{margin-top:13px;font-size:15.5px}
  .ai-subline{max-width:350px;font-size:11.5px;line-height:1.5}
  .ai-chat-card{border-radius:23px}
  .ai-messages{min-height:205px;max-height:49vh;padding:20px 14px 5px}
  .ai-message{gap:8px}
  .ai-avatar{flex-basis:30px;width:30px;height:30px;border-radius:10px}
  .ai-bubble{max-width:88%;padding:12px 13px;font-size:12.5px}
  .ai-bubble strong{font-size:13px}
  .ai-prompts{padding-left:12px;padding-right:12px}
  .ai-prompts button{min-height:37px;padding:0 13px;font-size:10px}
  .ai-compose{margin-left:10px;margin-right:10px;grid-template-columns:minmax(0,1fr) 46px;padding-left:14px;border-radius:20px}
  /* 16px prevents iOS Safari from zooming and horizontally shifting the page on focus. */
  .ai-compose textarea{font-size:16px}
  .ai-compose-meta{padding-left:13px;padding-right:13px;gap:10px}
  .ai-compose-info small{font-size:7.8px}
  body.keyboard-open .ai-compose-zone{bottom:0}
  body.keyboard-open .ai-prompts{scrollbar-width:none}
  body.has-chat .ai-hero{padding-top:12px;padding-bottom:10px}
  body.has-chat .ai-messages{min-height:calc(100dvh - 280px)}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Readable AI answers + clickable live-web sources. */
.ai-bubble p{margin:0 0 8px}.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble ul{margin:7px 0 8px;padding-left:18px}.ai-bubble li{margin:3px 0}
.ai-bubble p strong,.ai-bubble li strong{display:inline;margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit}
.ai-sources{margin-top:11px;padding-top:9px;border-top:1px solid rgba(17,17,15,.08)}
.ai-sources>span{display:block;margin-bottom:6px;color:#8c8982;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ai-source-links{display:flex;gap:6px;flex-wrap:wrap}
.ai-source-links a{display:inline-flex;align-items:center;min-height:26px;max-width:100%;padding:0 9px;border:1px solid rgba(17,17,15,.08);border-radius:999px;background:#fff;color:#595751;text-decoration:none;font-size:8.5px;font-weight:740;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-source-links a:active{transform:scale(.98)}

/* =========================================================
   W18.219 — MOBILE ASK CHAT SCROLL UX
   Once a conversation starts, keep Ask MR MATCHA feeling like
   a chat app: messages scroll, composer stays visible above nav.
   ========================================================= */
@media(max-width:560px){
  body.has-chat{
    height:100dvh;
    overflow:hidden;
  }

  body.has-chat .ai-shell{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
    overflow:hidden;
  }

  body.has-chat .ai-topbar,
  body.has-chat .ai-hero{
    flex:0 0 auto;
  }

  body.has-chat .ai-chat-card{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  body.has-chat .ai-messages{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  body.has-chat .ai-compose-zone{
    position:relative;
    bottom:auto;
    flex:0 0 auto;
  }

  /* W18.354 — iOS Safari can pan the visual viewport downward while the
     textarea is focused. Include that page offset in the flex viewport so
     the composer still lands directly above the keyboard instead of ending
     early and leaving a large white gap. */
  body.keyboard-open.has-chat,
  body.keyboard-open.has-chat .ai-shell{
    height:calc(var(--ask-visual-height,100dvh) + var(--ask-visual-top,0px));
    min-height:0;
  }

  body.keyboard-open.has-chat .ai-shell{
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
}



/* =========================================================
   W18.322 — ASK MR MATCHA DESKTOP PREMIUM POLISH
   Desktop/laptop only. Bring the focused Ask experience into
   the same visual family as the polished MR MATCHA CLUB while
   preserving chat behavior and the established mobile layout.
   ========================================================= */
@media (min-width:821px){
  body{
    background:#fff!important;
  }

  .ai-shell{
    width:min(980px,calc(100% - 48px))!important;
    min-height:100dvh!important;
    padding:0 28px 54px!important;
    background:#fff!important;
  }

  .ai-topbar{
    min-height:70px!important;
    grid-template-columns:48px 1fr 48px!important;
    border-bottom:1px solid #efefeb!important;
    background:rgba(255,255,255,.94)!important;
  }

  .ai-back{
    width:40px!important;
    height:40px!important;
    border:1px solid transparent!important;
    border-radius:13px!important;
    color:#3b3a36!important;
    font-size:23px!important;
  }

  .ai-back:hover{
    border-color:#ecece8!important;
    background:#f7f7f5!important;
  }

  .ai-brand{
    display:flex!important;
    align-items:baseline!important;
    justify-self:center!important;
    gap:6px!important;
    color:#11110f!important;
    font-size:15px!important;
    font-weight:800!important;
    letter-spacing:-.045em!important;
  }

  .ai-brand em{
    margin-left:0!important;
    color:#6BB346!important;
    font:400 italic 19px/1 "Noe Display",Georgia,"Times New Roman",serif!important;
    letter-spacing:-.03em!important;
  }

  .ai-hero{
    padding:34px 18px 25px!important;
  }

  .ai-mark{
    width:64px!important;
    height:64px!important;
    margin-bottom:14px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:20px!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .ai-mark>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:inherit!important;
    transform:scale(1.36)!important;
    transform-origin:center!important;
  }

  .ai-powered-badge{
    min-height:25px!important;
    margin-bottom:14px!important;
    padding:0 9px 0 7px!important;
    border-color:#ecebe7!important;
    background:#fafaf8!important;
    box-shadow:none!important;
  }

  .ai-hero h1{
    font-size:54px!important;
    line-height:.96!important;
    letter-spacing:-.06em!important;
    font-weight:850!important;
  }

  .ai-sub{
    margin-top:14px!important;
    font-size:17px!important;
    font-weight:760!important;
  }

  .ai-subline{
    max-width:560px!important;
    margin-top:6px!important;
    color:#85827c!important;
    font-size:12px!important;
  }

  .ai-chat-card{
    border:1px solid #e9e9e5!important;
    border-radius:28px!important;
    box-shadow:0 14px 42px rgba(17,17,15,.045)!important;
  }

  .ai-messages{
    min-height:270px!important;
    max-height:min(56vh,640px)!important;
    padding:28px 28px 10px!important;
  }

  .ai-message{
    gap:11px!important;
    margin-bottom:18px!important;
  }

  .ai-avatar{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:11px!important;
    background:transparent!important;
  }

  .ai-avatar>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:inherit!important;
    transform:scale(1.30)!important;
    transform-origin:center!important;
  }

  .ai-bubble{
    max-width:min(650px,78%)!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    background:#f6f6f4!important;
    font-size:13.5px!important;
    line-height:1.58!important;
  }

  .ai-message--assistant .ai-bubble{
    border-bottom-left-radius:7px!important;
  }

  .ai-message--user .ai-bubble{
    background:#11110f!important;
    color:#fff!important;
    border-bottom-right-radius:7px!important;
  }

  .ai-message--welcome .ai-bubble{
    max-width:600px!important;
  }

  .ai-compose-zone{
    padding-top:5px!important;
  }

  .ai-prompts{
    gap:8px!important;
    padding:10px 22px 15px!important;
  }

  .ai-prompts button{
    min-height:38px!important;
    padding:0 14px!important;
    border-color:#e3e2de!important;
    background:#fff!important;
    color:#4f4d47!important;
    font-size:10.5px!important;
    font-weight:720!important;
  }

  .ai-prompts button:hover{
    border-color:#d7d6d1!important;
    background:#f8f8f6!important;
  }

  /* W18.391 — desktop composer: camera + flexible text + send stay on one row. */
  .ai-compose{
    grid-template-columns:42px minmax(0,1fr) 48px!important;
    gap:10px!important;
    margin:0 18px!important;
    padding:9px 9px 9px 17px!important;
    border:1px solid #dcdcd7!important;
    border-radius:22px!important;
    box-shadow:0 3px 14px rgba(17,17,15,.025)!important;
  }

  .ai-compose:focus-within{
    border-color:#b9b9b3!important;
    box-shadow:0 0 0 4px rgba(17,17,15,.022),0 8px 24px rgba(17,17,15,.03)!important;
  }

  .ai-compose textarea{
    min-height:44px!important;
    padding:11px 0 9px!important;
    font-size:14px!important;
  }

  .ai-compose button{
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }

  .ai-compose-meta{
    padding:10px 21px 16px!important;
  }

  .ai-compose-info p{
    color:#aaa7a0!important;
  }

  .ai-compose-info small{
    color:#8b8881!important;
  }

  body.has-chat .ai-hero{
    padding:16px 12px 13px!important;
  }

  body.has-chat .ai-hero .ai-mark{
    width:40px!important;
    height:40px!important;
    margin-bottom:8px!important;
    border-radius:13px!important;
  }

  body.has-chat .ai-hero h1{
    font-size:25px!important;
    letter-spacing:-.045em!important;
  }

  body.has-chat .ai-messages{
    min-height:calc(100dvh - 325px)!important;
    max-height:none!important;
  }
}

/* =========================================================
   W18.323 — ASK MR MATCHA PREMIUM DENSITY POLISH
   Desktop/laptop empty-state only. Let the welcome moment hug
   its content so the prompt chips + composer arrive sooner,
   while preserving the roomy conversation layout after chat begins.
   ========================================================= */
@media (min-width:821px){
  body:not(.has-chat) .ai-chat-card{
    box-shadow:0 12px 34px rgba(17,17,15,.04)!important;
  }

  body:not(.has-chat) .ai-messages{
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:26px 28px 7px!important;
  }

  body:not(.has-chat) .ai-message--welcome{
    margin-bottom:8px!important;
  }

  body:not(.has-chat) .ai-message--welcome .ai-bubble{
    max-width:560px!important;
    padding:15px 17px!important;
    white-space:normal!important;
  }

  body:not(.has-chat) .ai-message--welcome .ai-bubble strong{
    margin-bottom:6px!important;
  }

  body:not(.has-chat) .ai-prompts{
    padding:8px 22px 12px!important;
  }

  body:not(.has-chat) .ai-compose-zone{
    padding-top:0!important;
  }

  body:not(.has-chat) .ai-compose-meta{
    padding-top:9px!important;
    padding-bottom:14px!important;
  }
}

/* =========================================================
   W18.362 — IOS KEYBOARD EMPTY-STATE VIEWPORT ANCHOR
   Safari may pan the visual viewport downward before the first
   Ask message is sent. Extend the page to the visible viewport
   bottom in both welcome and active-chat states so the composer
   does not end early and leave a large blank strip above keyboard.
   ========================================================= */
@media(max-width:560px){
  body.keyboard-open,
  body.keyboard-open .ai-shell{
    height:calc(var(--ask-visual-height,100dvh) + var(--ask-visual-top,0px));
    min-height:0;
  }
}

/* =========================================================
   W18.384 — POINT MR MATCHA
   One camera action inside Ask: menu first, with storefront / cup / receipt
   recognition available through the same visual input. Keep it product-first,
   not a separate scanner page.
   ========================================================= */
.ai-point-hero{
  width:min(100%,430px);
  min-height:62px;
  margin:18px auto 0;
  padding:10px 12px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  align-items:center;
  gap:11px;
  border:1px solid rgba(17,17,15,.09);
  border-radius:20px;
  background:#11110f;
  color:#fff;
  box-shadow:0 10px 28px rgba(17,17,15,.10);
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,opacity .15s ease;
}
.ai-point-hero:active{transform:scale(.986);box-shadow:0 6px 18px rgba(17,17,15,.08)}
.ai-point-hero:disabled{opacity:.55;cursor:default}
.ai-point-camera{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#fff;color:#11110f}
.ai-point-camera svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ai-point-copy{min-width:0;display:grid;gap:4px}
.ai-point-copy strong{font-size:11px;line-height:1;font-weight:850;letter-spacing:.06em}
.ai-point-copy small{color:rgba(255,255,255,.68);font-size:9.5px;line-height:1.3;font-weight:550}
.ai-point-spark{justify-self:center;font-size:17px;line-height:1;color:#bde4aa}
.ai-point-note{margin:7px auto 0!important;color:#a09e98!important;font-size:8.5px!important;line-height:1.35!important}
body.has-chat .ai-point-hero,body.has-chat .ai-point-note{display:none}

.ai-scan-preview{
  margin:6px 14px 9px;
  padding:8px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 34px;
  align-items:center;
  gap:10px;
  border:1px solid #e5e4df;
  border-radius:16px;
  background:#f8f8f6;
}
.ai-scan-preview[hidden]{display:none}
.ai-scan-preview img{width:48px;height:48px;display:block;object-fit:cover;border-radius:11px;background:#ecebe7}
.ai-scan-preview>div{min-width:0;display:grid;gap:3px}
.ai-scan-preview strong{font-size:11px;line-height:1.2;color:#24231f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-scan-preview small{font-size:8.7px;line-height:1.3;color:#8a8882}
.ai-scan-preview>button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:#77756f;font-size:20px;line-height:1;cursor:pointer}
.ai-scan-preview>button:active{background:#ecebe7;transform:scale(.96)}

.ai-compose{grid-template-columns:42px minmax(0,1fr) 48px}
.ai-compose .ai-camera-button{
  width:42px!important;
  height:42px!important;
  align-self:center;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:14px!important;
  background:#f3f3f0!important;
  color:#292824!important;
  box-shadow:none!important;
}
.ai-compose .ai-camera-button:hover{background:#ecece8!important;box-shadow:none!important}
.ai-compose .ai-camera-button:active{transform:scale(.94)!important}
.ai-compose .ai-camera-button:disabled{opacity:.45!important}
.ai-camera-button svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.ai-scan-message-image{display:block;width:min(260px,100%);max-height:250px;object-fit:cover;margin:0 0 9px auto;border-radius:13px;background:#ecebe7}

@media(max-width:560px){
  .ai-point-hero{width:100%;min-height:60px;margin-top:15px;border-radius:18px;grid-template-columns:40px minmax(0,1fr) 22px;padding:10px 11px}
  .ai-point-camera{width:40px;height:40px;border-radius:13px}
  .ai-point-copy strong{font-size:10.5px}
  .ai-point-copy small{font-size:9px}
  .ai-point-note{font-size:8px!important}
  .ai-scan-preview{margin-left:10px;margin-right:10px;grid-template-columns:46px minmax(0,1fr) 32px}
  .ai-scan-preview img{width:46px;height:46px}
  .ai-compose{grid-template-columns:40px minmax(0,1fr) 46px!important;padding-left:8px!important;gap:8px!important}
  .ai-compose .ai-camera-button{width:40px!important;height:40px!important;border-radius:13px!important}
  .ai-scan-message-image{width:min(230px,100%);max-height:220px}
}

/* =========================================================
   W18.385 — POINT MR MATCHA → SHARE A POUR
   One decisive follow-through action after a usable scan pick.
   ========================================================= */
.ai-pour-action{margin-top:12px;padding-top:11px;border-top:1px solid rgba(17,17,15,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:normal}
.ai-pour-action small{display:block;min-width:0;color:#77746d;font-size:9px;line-height:1.35;font-weight:650}
.ai-pour-action-button{flex:0 0 auto;min-height:36px;padding:0 13px;border:0;border-radius:12px;background:#11110f;color:#fff;font:800 9.5px/1 "Gotham",-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.015em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,opacity .12s ease}
.ai-pour-action-button:active{transform:scale(.97);opacity:.86}
@media(max-width:560px){
  .ai-pour-action{align-items:flex-start;flex-direction:column;gap:8px}
  .ai-pour-action-button{width:100%;min-height:40px;border-radius:13px}
}


/* =========================================================
   W18.387 — ASK MR MATCHA GEN Z HERO POLISH
   Simplify the empty-state identity: MR MATCHA is the product,
   OpenAI is quiet attribution, and POINT is the first action.
   No behavior, scan limits, keyboard handling, or Pour handoff changed.
   ========================================================= */
.ai-hero{
  padding-top:24px!important;
  padding-bottom:20px!important;
}
.ai-hero h1{
  margin:0!important;
}
.ai-powered-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  min-height:0!important;
  margin:8px auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#9a9892!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.005em!important;
}
.ai-powered-badge img{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  margin:0 1px 0 0!important;
  opacity:.76!important;
}
.ai-powered-badge strong{
  color:#45443f!important;
  font-weight:760!important;
}
.ai-sub{
  margin-top:14px!important;
}
.ai-subline{
  margin-top:6px!important;
}
.ai-point-hero{
  margin-top:16px!important;
  box-shadow:0 9px 24px rgba(17,17,15,.09)!important;
}
.ai-point-copy strong{
  letter-spacing:.055em!important;
}
.ai-point-note{
  margin-top:8px!important;
  color:#999790!important;
}
body:not(.has-chat) .ai-message--welcome .ai-bubble{
  background:#f7f7f5!important;
}
body:not(.has-chat) .ai-message--welcome .ai-bubble p{
  color:#4f4e49;
}

@media(max-width:560px){
  .ai-hero{
    padding:17px 6px 16px!important;
  }
  .ai-hero h1{
    font-size:41px!important;
    line-height:.95!important;
  }
  .ai-powered-badge{
    margin-top:7px!important;
    font-size:8.8px!important;
  }
  .ai-powered-badge img{
    width:13px!important;
    height:13px!important;
    flex-basis:13px!important;
  }
  .ai-sub{
    margin-top:12px!important;
  }
  .ai-point-hero{
    margin-top:14px!important;
  }
  .ai-point-note{
    max-width:330px;
    font-size:8.2px!important;
  }
}

/* Active chat stays compact. The old hero icon is gone, so do not reserve space for it. */
body.has-chat .ai-hero{
  padding:13px 12px 11px!important;
}
body.has-chat .ai-hero .ai-powered-badge,
body.has-chat .ai-hero .ai-sub,
body.has-chat .ai-hero .ai-subline{
  display:none!important;
}

/* =========================================================
   W18.407 — ASK MR MATCHA GEN Z CLARITY
   One obvious photo action + one obvious typed Ask path.
   Keep the existing photo picker in the DOM for current JS behavior,
   but remove the duplicate composer camera from the visible UI.
   ========================================================= */
.ai-or-ask{
  margin:0 auto 9px;
  color:#8d8b85;
  text-align:center;
  font-size:8.5px;
  line-height:1;
  font-weight:820;
  letter-spacing:.12em;
}
body.has-chat .ai-or-ask{display:none}
.ai-compose .ai-camera-button{display:none!important}
.ai-compose{grid-template-columns:minmax(0,1fr) 48px!important}
@media(max-width:560px){
  .ai-or-ask{margin-bottom:8px;font-size:8px}
  .ai-compose{grid-template-columns:minmax(0,1fr) 46px!important;padding-left:14px!important;gap:8px!important}
}


/* =========================================================
   W18.413 — CAFÉ QR SURPRISE + WHY THIS PICK
   Café-context only: Surprise Me becomes the photo-first action.
   Recommendation rationale is a quiet native disclosure; opening it
   is local UI only and does not send another Ask request.
   ========================================================= */
.ai-surprise-hero .ai-point-spark--surprise{
  font-size:21px;
  line-height:1;
  font-weight:800;
  color:#bde4aa;
  transform:translateY(-1px);
}
.ai-why-pick{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(17,17,15,.07);
}
.ai-why-pick summary{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:4px;
  list-style:none;
  cursor:pointer;
  color:#77756f;
  font-size:9px;
  line-height:1.2;
  font-weight:760;
  letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;
}
.ai-why-pick summary::-webkit-details-marker{display:none}
.ai-why-pick summary::after{
  content:"›";
  display:inline-block;
  color:#9a9892;
  font-size:13px;
  line-height:1;
  transform:translateY(-.5px);
  transition:transform .14s ease;
}
.ai-why-pick[open] summary::after{transform:rotate(90deg) translateX(-.5px)}
.ai-why-pick>p{
  margin:6px 0 0!important;
  color:#77756f!important;
  font-size:9.5px!important;
  line-height:1.45!important;
  letter-spacing:0!important;
}
@media(max-width:560px){
  .ai-surprise-hero .ai-point-spark--surprise{font-size:20px}
  .ai-why-pick summary{font-size:8.8px}
  .ai-why-pick>p{font-size:9.2px!important}
}


/* =========================================================
   W18.431 — ASK MR MATCHA / BOLD CLEAN START
   One input, three true question shortcuts, one Surprise photo action.
   Page-only overrides intentionally preserve existing chat, keyboard and safety flows.
   ========================================================= */
body.ai-design-v2,
body.ai-design-v2 .ai-shell{background:#F5F5F5}
body.ai-design-v2 .ai-topbar{background:rgba(245,245,245,.95)!important;border-bottom-color:rgba(17,17,15,.055)!important}
body.ai-design-v2:not(.has-chat) .ai-hero{padding:33px 12px 10px!important}
body.ai-design-v2:not(.has-chat) .ai-hero h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-size:clamp(34px,7vw,52px)!important;line-height:1.04!important;letter-spacing:-.044em!important;word-spacing:.05em!important;font-weight:900!important}
body.ai-design-v2:not(.has-chat) .ai-powered-badge{margin-top:10px!important;color:#8d8c87!important}
body.ai-design-v2:not(.has-chat) .ai-chat-card{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
body.ai-design-v2:not(.has-chat) .ai-messages{display:none!important}
body.ai-design-v2:not(.has-chat) .ai-compose-zone{position:relative!important;bottom:auto!important;padding-top:0!important;background:transparent!important}
body.ai-design-v2:not(.has-chat) .ai-compose{min-height:70px;margin:0!important;align-items:center!important;padding:10px 12px 10px 17px!important;border:1px solid #e3e3df!important;border-radius:22px!important;background:#fff!important;box-shadow:0 6px 20px rgba(17,17,15,.035)!important}
body.ai-design-v2:not(.has-chat) .ai-compose textarea{align-self:center;min-height:43px;padding:10px 0 7px!important;font-size:16px!important}
body.ai-design-v2:not(.has-chat) .ai-compose #ai-send{width:43px!important;height:43px!important;border-radius:14px!important;box-shadow:none!important}
body.ai-design-v2 .ai-compose:focus-within{border-color:#b7ceab!important;box-shadow:0 0 0 3px rgba(107,179,70,.09)!important}
/* W18.437 — clear white icon on the existing MR MATCHA green action. */
body.ai-design-v2 .ai-compose #ai-send{background:#6bb346!important;color:#fff!important}
body.ai-design-v2:not(.has-chat) .ai-prompts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch;gap:8px!important;overflow:visible!important;padding:11px 0 0!important;margin:0!important}
body.ai-design-v2 .ai-prompts[hidden]{display:none!important}
body.ai-design-v2:not(.has-chat) .ai-prompts button{min-width:0;min-height:62px!important;padding:9px 8px!important;border:1px solid #e4e4e0!important;border-radius:16px!important;background:#fff!important;color:#25251f!important;white-space:normal;text-align:center;font-family:"Gotham",Inter,system-ui,sans-serif;font-size:11.5px!important;line-height:1.28!important;font-weight:700!important;letter-spacing:-.025em!important;cursor:pointer;box-shadow:none!important}
body.ai-design-v2:not(.has-chat) .ai-prompts button:hover{background:#fff!important;border-color:#b9cdb1!important;box-shadow:0 5px 18px rgba(35,58,27,.045)!important}
body.ai-design-v2:not(.has-chat) .ai-prompts button:active{transform:scale(.97)}
body.ai-design-v2:not(.has-chat) .ai-surprise-hero{width:100%!important;max-width:none!important;min-height:70px!important;margin:12px auto 0!important;padding:11px 14px!important;grid-template-columns:43px minmax(0,1fr) 26px!important;gap:12px!important;border:1px solid #1a1a18!important;border-radius:19px!important;background:#171816!important;box-shadow:0 7px 18px rgba(17,17,15,.10)!important}
body.ai-design-v2:not(.has-chat) .ai-surprise-hero:hover{background:#232520!important}
body.ai-design-v2 .ai-surprise-hero .ai-point-camera{width:43px;height:43px;border-radius:13px;background:#30312e;color:#fff}
body.ai-design-v2 .ai-surprise-hero .ai-point-copy strong{font-size:14px!important;font-weight:700!important;line-height:1.14!important;letter-spacing:-.02em!important;text-transform:none!important}
body.ai-design-v2 .ai-surprise-hero .ai-point-copy small{color:#c1c4bd;font-size:10.5px;line-height:1.3}
body.ai-design-v2 .ai-surprise-spark{color:#f0f0ed;font-size:15px}
body.ai-design-v2 .ai-surprise-arrow{justify-self:center;color:#fff;font-size:22px;font-weight:500;line-height:1}
body.ai-design-v2:not(.has-chat) .ai-compose-meta{padding:12px 0 0!important;justify-content:center!important}
body.ai-design-v2:not(.has-chat) .ai-compose-info{justify-items:center;text-align:center}
body.ai-design-v2:not(.has-chat) .ai-compose-info p{font-size:9px;color:#86847e!important}
body.ai-design-v2:not(.has-chat) .ai-compose-info small{display:none}
body.ai-design-v2.has-chat .ai-hero{padding:13px 12px 11px!important}
body.ai-design-v2.has-chat .ai-powered-badge{display:none!important}
body.ai-design-v2.has-chat .ai-hero h1{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;font-size:23px!important;letter-spacing:-.04em!important;word-spacing:.05em!important;font-weight:900!important}
body.ai-design-v2.has-chat .ai-chat-card{border-color:#e9e9e6!important;background:#fff!important}
body.ai-design-v2.has-chat .ai-compose-zone{background:#fff}
body.ai-design-v2.has-chat .ai-surprise-hero{display:none!important}
body.ai-design-v2.has-chat .ai-compose-info small{display:none}
body.ai-design-v2 button:focus-visible,body.ai-design-v2 a:focus-visible{outline:2px solid #6bb346!important;outline-offset:3px!important}
@media(min-width:821px){
  body.ai-design-v2,body.ai-design-v2 .ai-shell{background:#F5F5F5!important}
  body.ai-design-v2:not(.has-chat) .ai-shell{width:min(760px,calc(100% - 48px))!important}
  body.ai-design-v2:not(.has-chat) .ai-hero{padding-top:36px!important;padding-bottom:12px!important}
  body.ai-design-v2:not(.has-chat) .ai-compose{max-width:640px;margin:0 auto!important}
  body.ai-design-v2:not(.has-chat) .ai-prompts,body.ai-design-v2:not(.has-chat) .ai-surprise-hero{max-width:640px;margin-left:auto!important;margin-right:auto!important}
  body.ai-design-v2:not(.has-chat) .ai-prompts button{min-height:62px!important;font-size:12px!important}
  body.ai-design-v2.has-chat .ai-shell{background:#fff!important}
}
@media(max-width:560px){
  body.ai-design-v2 .ai-shell{padding-left:17px;padding-right:17px}
  body.ai-design-v2:not(.has-chat) .ai-hero{padding:21px 0 9px!important}
  body.ai-design-v2:not(.has-chat) .ai-hero h1{font-size:40px!important}
  body.ai-design-v2:not(.has-chat) .ai-compose{min-height:70px;padding-left:15px!important}
  body.ai-design-v2:not(.has-chat) .ai-prompts{gap:7px!important;padding-top:10px!important}
  body.ai-design-v2:not(.has-chat) .ai-prompts button{min-height:64px!important;padding:9px 5px!important;font-size:11px!important;border-radius:15px!important}
  body.ai-design-v2:not(.has-chat) .ai-surprise-hero{margin-top:10px!important;min-height:67px!important;padding:10px 12px!important}
  body.ai-design-v2:not(.has-chat) .ai-compose-info p{font-size:8.5px}
}
@media(max-width:360px){
  body.ai-design-v2:not(.has-chat) .ai-hero h1{font-size:34px!important}
  body.ai-design-v2:not(.has-chat) .ai-prompts button{font-size:10.5px!important;padding:8px 4px!important}
}

/* =========================================================
   W18.432 / W18.437 — MOBILE OPENING SCREEN VERTICAL BALANCE
   Keep a little breathing room on taller phones without
   pushing the controls down on compact displays. Only the empty
   Ask state is affected. iOS keyboard and active chat keep the
   original layout, scroll handling, and navigation positioning.
   ========================================================= */
@media (max-width:560px) {
  body.ai-design-v2:not(.has-chat):not(.keyboard-open) .ai-hero {
    /* At 690px tall: ~12px. At 844px: ~33px. Cap at 36px. */
    margin-top:clamp(0px,calc(14vh - 85px),36px)!important;
    margin-top:clamp(0px,calc(14dvh - 85px),36px)!important;
  }
  /* Restore the compact position as soon as typing starts. */
  body.ai-design-v2:not(.has-chat) .ai-shell:focus-within .ai-hero,
  body.ai-design-v2.keyboard-open:not(.has-chat) .ai-hero {
    margin-top:0!important;
  }
}