/* Product finder: launcher + panel. Markup and behaviour in chat.js.
   Same material language as the rest of the site: no radius, no shadow, no rule.
   Depth comes from the ground change (light blocks on the dark panel). */

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; /* taste-skill-ignore */
  clip-path:inset(50%);white-space:nowrap;border:0}

.chat-launch{position:fixed;z-index:40;right:clamp(0.75rem,2vw,1.5rem);
  bottom:calc(clamp(0.75rem,2vw,1.5rem) + env(safe-area-inset-bottom, 0px));
  display:inline-flex;align-items:center;min-height:3rem;padding:0 1.125rem;
  background:var(--accent);color:var(--accent-ink);border:0;
  font-family:var(--font);font-size:var(--s1);font-weight:600;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chat-launch:hover{background:var(--ink);color:var(--bg)}
.chat-launch[aria-expanded="true"]{display:none}

.chat{position:fixed;z-index:50;display:flex;flex-direction:column;
  right:clamp(0.75rem,2vw,1.5rem);
  bottom:calc(clamp(0.75rem,2vw,1.5rem) + env(safe-area-inset-bottom, 0px));
  width:min(23rem,calc(100vw - 1.5rem));max-height:min(44rem,calc(100svh - 2rem));
  background:var(--dark);color:#e7ecee;opacity:0;transform:translateY(12px);
  transition:opacity 160ms var(--ease),transform 160ms var(--ease)}
.chat[hidden]{display:none}
.chat:focus{outline:none}   /* focus lands here on purpose; the ring belongs on the controls */
.chat.in{opacity:1;transform:none}
@media (max-width:44rem){.chat{inset:0;width:auto;max-height:none}}
@media (prefers-reduced-motion:reduce){.chat{transition:none;transform:none}}

.chat-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.9375rem 1.125rem 0.5rem;flex:none}
.chat-head h2{font-size:1.0625rem;letter-spacing:0.01em;color:#f2f5f6}
.chat-x{background:none;border:0;padding:0.25rem 0.375rem;color:#a9b2b6;
  font-family:var(--font);font-size:1.5rem;line-height:1;cursor:pointer}
.chat-x:hover{color:#f2f5f6}

.chat-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0.25rem 1.125rem 1.25rem;display:grid;gap:0.5rem;align-content:start}

.chat-q{font-size:1.25rem;font-weight:800;font-stretch:125%;line-height:1.15;
  letter-spacing:-0.005em;color:#f2f5f6;margin:0.5rem 0 0;max-width:26ch}

.chat-opts{display:grid;gap:0.375rem}
.chat-opts.two{grid-template-columns:1fr 1fr}
.chat-opt{display:flex;align-items:center;gap:0.75rem;width:100%;min-height:2.875rem;
  background:var(--surface);color:var(--ink);border:0;padding:0.4375rem 0.75rem;
  text-align:left;font-family:var(--font);font-size:var(--s1);font-weight:600;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chat-opt:hover{background:var(--accent);color:var(--accent-ink)}
.chat-opt.center{justify-content:center}
.chat-opt img{width:2.5rem;height:2.5rem;object-fit:contain;flex:none}
.chat-opt span{display:grid;gap:0.0625rem;min-width:0}
.chat-opt .m{font-weight:800;font-stretch:125%;letter-spacing:-0.005em;line-height:1.1;
  word-break:break-word}
.chat-opt .s{font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* a product row keeps its light ground on hover: the cutout must not sit on teal */
.chat-opt.prod:hover{background:var(--bg);color:var(--ink)}
.chat-opt.prod:hover .m{color:var(--accent)}

.chat-form{display:flex;gap:0.375rem}
.chat-in{flex:1 1 auto;min-width:0;min-height:2.875rem;background:var(--surface);
  color:var(--ink);border:0;padding:0 0.75rem;font-family:var(--font);font-size:var(--s1)}
.chat-in::placeholder{color:var(--ink-2)}
.chat-go{min-height:2.875rem;padding:0 1rem;background:var(--accent);color:var(--accent-ink);
  border:0;font-family:var(--font);font-size:var(--s1);font-weight:600;cursor:pointer}
.chat-go:hover{background:var(--accent-ink);color:var(--accent)}

.chat-sum{list-style:none;margin:0.25rem 0 0;padding:0;display:grid;gap:0.125rem}
.chat-sum li{color:#cfd6d9}
.chat-sum .m{font-weight:800;font-stretch:125%;font-size:1.125rem;letter-spacing:-0.005em;
  color:#f2f5f6;word-break:break-word}

.chat-send{display:flex;align-items:center;justify-content:center;min-height:3.25rem;
  margin-top:0.75rem;background:var(--accent);color:var(--accent-ink);
  font-size:var(--s2);font-weight:600;text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chat-send:hover{background:var(--accent-ink);color:var(--accent)}
.chat-note{color:#a9b2b6;margin-top:0.5rem;max-width:32ch}

/* the answer to a typed question, above whatever the step is asking */
.chat-ans{color:#f2f5f6;font-size:var(--s1);line-height:1.45;margin:0.625rem 0 0.375rem;max-width:30ch}
.chat-ans.muted{color:#a9b2b6}

/* the ask box: only rendered when /api/health says a model is configured */
.chat-ask{display:flex;gap:0.375rem;flex:none;padding:0.5rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom, 0px))}
.chat-ask .chat-go{width:2.875rem;padding:0}

.chat-links{display:flex;flex-wrap:wrap;gap:0.25rem 1.125rem;margin-top:0.875rem;
  font-size:0.9375rem}
.chat-link{background:none;border:0;padding:0;color:#a9b2b6;font-family:var(--font);
  font-size:inherit;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:0.18em}
.chat-link:hover{color:#f2f5f6}

/* the accent outline is too dark on this ground; use the panel ink instead */
.chat :focus-visible{outline-color:#f2f5f6}
.chat-opt:focus-visible,.chat-in:focus-visible{outline-color:var(--accent)}