/* End-of-shelf invitation ("Looking for something else?") - public/tz-ask.js.
   Locked design 2026-10-31: Prompt bar + Lift & write + produce sticker.
   Isolation rule: EVERY selector in this file starts with .tzask (checked by
   tests/tz-ask.test.js). No element/global selectors, no token changes - the
   storefront's tokens (--glow, --paper, --leaf...) are only read, with
   fallbacks. Nothing here is fixed-position or layered above the cards. */

.tzask{--tzask-ink:var(--beige,#1E2116);--tzask-soft:var(--cream-soft,#6B6F60);--tzask-green:var(--glow,#3D4A28);--tzask-leaf:var(--leaf,#7C9152);
  max-width:560px;margin:44px auto 0;font-family:'Work Sans',Georgia,sans-serif;color:var(--tzask-ink);}
.tzask[hidden]{display:none;}
.tzask button{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0;}
.tzask p{margin:0;}
.tzask .tzask-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.tzask .tzask-h{text-align:center;font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.2;text-wrap:balance;}
.tzask .tzask-s{text-align:center;font-size:14.5px;color:var(--tzask-soft);margin:4px 0 18px;}

/* the pill */
.tzask .tzask-pill{position:relative;display:flex;align-items:center;gap:4px;min-height:58px;padding:7px;background:#fff;border-radius:29px;border:1px solid rgba(30,33,22,.07);
  box-shadow:0 1px 2px rgba(30,33,22,.05),0 12px 30px -14px rgba(30,33,22,.28);transition:box-shadow .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1);}
.tzask .tzask-pill:focus-within{transform:translateY(-2px);box-shadow:0 1px 2px rgba(30,33,22,.06),0 20px 40px -16px rgba(30,33,22,.36);}
.tzask.tzask-nolift .tzask-pill:focus-within{transform:none;}
/* Ask More (2026-11-01): "Ask something else", questions left, signed-in line, end card */
.tzask .tzask-more{margin-top:14px;}
/* Ask bar (2026-11-02): sticker slot + folded prompt */
.tzask .tzask-stk{flex:none;width:42px;height:42px;border-radius:50%;border:0;padding:0;background:#F4F2EA;display:grid;place-items:center;}
.tzask .tzask-stk-e{display:inline-block;font-size:21px;line-height:1;transform:rotate(-8deg);}
.tzask .tzask-dock{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 16px;margin-top:10px;border-radius:20px;background:#fff;border:1px solid rgba(30,33,22,.07);box-shadow:0 1px 2px rgba(30,33,22,.04),0 8px 20px -14px rgba(30,33,22,.3);font-size:14.5px;color:rgba(30,33,22,.5);transition:color .25s,box-shadow .25s;}
.tzask .tzask-dock:active{transform:scale(.98);}
.tzask .tzask-dock.is-hidden{visibility:hidden;}
.tzask .tzask-dock-go{width:28px;height:28px;border-radius:50%;background:rgba(30,33,22,.1);display:grid;place-items:center;color:#fff;}
.tzask .tzask-dock-go svg{width:14px;height:14px;}
.tzask .tzask-thread>.tzask-out{animation:tzask-out .2s ease-in both;}
.tzask-morph{position:fixed;z-index:150;pointer-events:none;background:#fff;border:1px solid rgba(30,33,22,.07);box-shadow:0 1px 2px rgba(30,33,22,.05),0 12px 30px -14px rgba(30,33,22,.28);}
.tzask .tzask-left,.tzask .tzask-as{font-size:12px;color:var(--tzask-soft);text-align:center;margin:8px 0 0;}
.tzask .tzask-end{margin-top:14px;padding:16px;border-radius:20px;background:#fff;border:1px solid rgba(30,33,22,.08);text-align:center;}
.tzask .tzask-end b{display:block;font-size:17px;}
.tzask .tzask-end span{display:block;font-size:14px;color:var(--tzask-soft);margin-top:4px;}
.tzask .tzask-thread.tzask-out{animation:tzask-out .23s ease-in both;}
@keyframes tzask-out{to{opacity:0;transform:translateY(-6px);}}   /* only with ?tzdebug=1&lift=0 (iPhone diagnosis) */
.tzask .tzask-plus{flex:none;width:42px;height:42px;border-radius:50%;border:0;padding:0;background:transparent;color:var(--tzask-ink);display:grid;place-items:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .2s;}
.tzask .tzask-plus[aria-expanded="true"]{transform:rotate(45deg);background:#F2F1EB;}
.tzask .tzask-cc{flex:none;padding:0 4px 0 12px;font-size:16px;color:var(--tzask-soft);font-variant-numeric:tabular-nums;}
.tzask .tzask-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;align-self:stretch;}
.tzask .tzask-field textarea,.tzask .tzask-field input{width:100%;margin:0;border:0;background:transparent;outline:none;resize:none;font:400 16px/1.35 'Work Sans',sans-serif;padding:10px 0;max-height:112px;overflow:hidden;color:var(--tzask-ink);-webkit-appearance:none;appearance:none;box-shadow:none;}
.tzask .tzask-field input{letter-spacing:.03em;font-variant-numeric:tabular-nums;}
.tzask .tzask-field input::placeholder{color:rgba(30,33,22,.4);}
.tzask .tzask-ghost{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;font-size:16px;color:rgba(30,33,22,.42);white-space:nowrap;overflow:hidden;transition:opacity .15s;}
.tzask .tzask-pill.has-text .tzask-ghost{opacity:0;}
.tzask .tzask-caret{display:inline-block;width:1.5px;height:1.1em;background:var(--tzask-leaf);vertical-align:-3px;margin-left:1px;animation:tzask-blink 1.05s steps(1) infinite;}
.tzask .tzask-pill:focus-within .tzask-caret{display:none;}
.tzask .tzask-go{flex:none;width:42px;height:42px;border-radius:50%;border:0;padding:0;background:rgba(30,33,22,.12);color:#fff;display:grid;place-items:center;overflow:hidden;transition:background .25s,transform .2s;}
.tzask .tzask-pill.has-text .tzask-go{background:var(--tzask-ink);animation:tzask-pop .42s cubic-bezier(.34,1.56,.64,1);}
.tzask .tzask-go:not(:disabled):active{transform:scale(.88);}
.tzask .tzask-go:disabled{cursor:default;}
.tzask .tzask-go.busy{background:var(--tzask-ink);}
.tzask .tzask-go.busy svg{animation:tzask-up .75s cubic-bezier(.5,0,.5,1) infinite;}
.tzask .tzask-err{font-size:13px;color:#9A3B23;margin:10px 4px 0;text-align:center;}

/* + quick starters */
.tzask .tzask-ideas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;}
.tzask .tzask-idea{height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(30,33,22,.1);background:#fff;font-size:14px;color:var(--tzask-ink);box-shadow:0 4px 12px -8px rgba(30,33,22,.3);animation:tzask-chip .5s cubic-bezier(.34,1.56,.64,1) both;}
.tzask .tzask-idea:active{transform:scale(.95);}

/* the reply */
.tzask .tzask-thread{display:flex;flex-direction:column;gap:12px;}
.tzask .tzask-me{align-self:flex-end;max-width:82%;background:var(--tzask-ink);color:#FAF9F6;padding:10px 15px;border-radius:21px 21px 6px 21px;font-size:15.5px;line-height:1.4;overflow-wrap:anywhere;}
.tzask .tzask-reply{padding:2px 2px 0;}
.tzask .tzask-wm{font:500 17px/1 'Clash Grotesk','Work Sans',sans-serif;color:var(--tzask-green);letter-spacing:-.01em;margin-bottom:7px;}
.tzask .tzask-st{display:inline-block;font-size:22px;line-height:1;margin-left:7px;vertical-align:-3px;transform:rotate(-8deg);
  filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 4px rgba(30,33,22,.22));}
.tzask .tzask-text{font-size:17px;line-height:1.45;color:var(--tzask-ink);text-wrap:pretty;letter-spacing:-.005em;}
.tzask .tzask-w{display:inline-block;animation:tzask-word .5s cubic-bezier(.2,.8,.2,1) both;}
.tzask .tzask-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.tzask .tzask-link{height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(30,33,22,.14);background:#fff;font-size:14px;font-weight:600;color:var(--tzask-green);display:inline-flex;align-items:center;gap:6px;}
.tzask .tzask-link.code{border-style:dashed;border-color:var(--tzask-green);letter-spacing:.04em;}
.tzask .tzask-link.solid{background:var(--tzask-ink);border-color:var(--tzask-ink);color:#FAF9F6;}
.tzask .tzask-fq{font-size:14.5px;color:var(--ink-soft,#41472F);}
.tzask .tzask-fa{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.tzask .tzask-yes{height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--tzask-ink);color:#FAF9F6;font-size:14px;font-weight:600;}
.tzask .tzask-no{height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(30,33,22,.14);background:transparent;color:var(--ink-soft,#41472F);font-size:14px;}
.tzask .tzask-follow .tzask-pill{min-height:52px;margin-top:2px;}
.tzask .tzask-follow .tzask-go{width:38px;height:38px;}
.tzask .tzask-hint{font-size:12px;color:var(--tzask-soft);margin:8px 6px 0;}
.tzask .tzask-done{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tzask-green);}

/* motion, only on the send that just happened */
.tzask.is-fresh .tzask-wm{animation:tzask-in .4s .22s cubic-bezier(.2,.8,.2,1) both;}
.tzask.is-fresh .tzask-st{animation:tzask-drop .7s .32s cubic-bezier(.34,1.56,.64,1) both;}
.tzask.is-fresh [data-late]{animation:tzask-in .45s cubic-bezier(.2,.8,.2,1) both;}

/* "You asked for kiwi. It's here now." - sits under the tabs, on every tab */
.tzask-back{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 0 18px;padding:10px 8px 10px 14px;background:#fff;border:1px solid rgba(30,33,22,.08);border-radius:18px;
  box-shadow:0 8px 20px -14px rgba(30,33,22,.3);font-family:'Work Sans',Georgia,sans-serif;color:var(--beige,#1E2116);animation:tzask-in .45s cubic-bezier(.2,.8,.2,1) both;}
.tzask-back[hidden]{display:none;}
.tzask-back .tzask-back-em{font-size:22px;line-height:1;}
.tzask-back .tzask-back-tx{flex:1;min-width:0;font-size:14px;line-height:1.35;}
.tzask-back .tzask-back-tx b{display:block;font-weight:600;}
.tzask-back .tzask-back-tx span{color:var(--cream-soft,#6B6F60);font-size:12.5px;}
.tzask-back .tzask-back-go{flex:none;height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--beige,#1E2116);color:#FAF9F6;font:600 13.5px 'Work Sans',sans-serif;cursor:pointer;}
.tzask-back .tzask-back-x{flex:none;width:32px;height:32px;border-radius:50%;border:0;padding:0;background:transparent;color:var(--cream-soft,#6B6F60);font-size:18px;line-height:1;cursor:pointer;}

@keyframes tzask-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tzask-blink{50%{opacity:0}}
@keyframes tzask-pop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes tzask-up{0%{transform:none;opacity:1}45%{transform:translateY(-16px);opacity:0}55%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}
@keyframes tzask-chip{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
@keyframes tzask-word{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes tzask-drop{0%{opacity:0;transform:translateY(-16px) rotate(-30deg) scale(.4)}60%{opacity:1;transform:translateY(2px) rotate(6deg) scale(1.12)}100%{transform:rotate(-8deg)}}

@media (prefers-reduced-motion:reduce){
  .tzask *,.tzask-back{animation:none!important;transition:none!important;}
}