/* Whiskey Buddy — shared Buddy chat (every page that loads wb-buddy.js + wb-buddy.css).
   Capped, minimisable panel above a bottom bar. Conversation persists across pages
   (sessionStorage). Relies on each page's design tokens (--bg, --ink, --accent, …)
   from market.css. Site-wide PREVIEW chat; the bottle page's contextual ask routes to
   the real rung-1 advisor (/v2/api/bottle/{name}/buddy) when logged in. */
:root{ --bd-ink:#2a1d14; }

/* header Buddy entry (.wb-nav-buddy) + early-access (.wb-cta-access) base styles
   → single source in static/css/wb-header.css. The html.bd-rail-on rules below
   still reference .wb-nav-buddy to hide/show it with the Buddy rail. */

/* avatar + bubbles */
.bd-av{flex:none;display:flex} .bd-av svg{border-radius:50%;display:block}
.bd-msg{display:flex;gap:.5rem;align-items:flex-end}
.bd-msg-me{justify-content:flex-end}
.bd-bubble{padding:.6rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.5;max-width:82%}
.bd-msg-buddy .bd-bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.bd-msg-me .bd-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bd-bubble b{font-weight:600} .bd-bubble i{font-style:italic;opacity:.9}
.bd-aside{display:block;margin-top:.4rem;font-size:.8rem;color:var(--muted);font-style:italic}
.bd-msg-me .bd-aside{color:#f3dcbe}
.bd-verdict{display:inline-block;font-family:var(--round);font-weight:700;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.04em;border-radius:999px;padding:.16rem .55rem;margin-bottom:.35rem;
  background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-line)}
.bd-suglist,.bd-profile-card{margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem}
.bd-sug{display:flex;align-items:center;gap:.55rem;background:var(--bg-tint);border:1px solid var(--line);
  border-radius:10px;padding:.4rem .5rem;text-decoration:none;color:var(--ink)}
.bd-sug:hover{border-color:var(--accent-line);text-decoration:none}
.bd-sug img{width:28px;height:36px;object-fit:contain;background:#fff;border:1px solid var(--line-soft);border-radius:5px;flex:none;padding:2px}
.bd-sug-t{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.bd-sug-n{font-family:var(--round);font-weight:600;font-size:.82rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-sug-m{font-size:.72rem;color:var(--muted)}
.bd-sug-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.bd-sug-p{font-family:var(--round);font-weight:600;color:var(--accent);font-size:.85rem}
.bd-sug .idx{font-size:.68rem;padding:.08rem .35rem}
/* Each suggestion row = the bottle-page link + a ✦ "ask Buddy about this" button
   beside it (ROADMAP #17 follow-up): tap the row to open the bottle, tap ✦ to
   keep asking Buddy. The button is wired by mountCardButtons (.bd-sug-ask). */
.bd-sug-row{display:flex;align-items:stretch;gap:.35rem}
.bd-sug-row .bd-sug{flex:1 1 auto;min-width:0}
.bd-sug-ask{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;cursor:pointer;border:1px solid var(--accent-line);border-radius:9px;
  background:rgba(201,135,54,.10);color:var(--accent);font-size:.98rem;line-height:1;
  font-family:var(--round)}
.bd-sug-ask:hover{background:rgba(201,135,54,.18);border-color:var(--accent)}
.bd-profile-card{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem;font-size:.84rem;gap:.25rem}
.bd-profile-card b{color:var(--accent);font-family:var(--round);margin-right:.2rem}
.bd-typing{display:inline-flex;gap:.25rem;padding:.1rem 0}
.bd-typing i{width:.45rem;height:.45rem;border-radius:50%;background:var(--muted);animation:bdblink 1.2s infinite}
.bd-typing i:nth-child(2){animation-delay:.2s} .bd-typing i:nth-child(3){animation-delay:.4s}
@keyframes bdblink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.bd-soon{display:inline-block;font-family:var(--round);font-weight:700;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--bd-ink);background:var(--gold-soft);border-radius:999px;padding:.12rem .45rem}

/* composer / bar */
.bd-askbox{display:flex;align-items:flex-end;gap:.5rem;background:#fffdf9;border-radius:16px;
  padding:.45rem .45rem .45rem .7rem;border:1px solid rgba(228,200,156,.7)}
.bd-ask-spark{color:var(--gold);font-size:1.2rem;flex:none}
.bd-bar-toggle{flex:none;border:none;background:none;padding:0;cursor:pointer;display:flex;margin-bottom:.15rem}
.bd-bar-toggle svg{border-radius:50%;box-shadow:0 1px 4px rgba(168,105,42,.4)}
.bd-askbox textarea{flex:1 1 auto;min-width:0;border:none;background:none;font:inherit;font-size:1.02rem;
  line-height:1.35;color:var(--ink);padding:.4rem .2rem;resize:none;overflow-y:hidden;max-height:7.75rem;display:block;box-sizing:border-box}
.bd-askbox textarea::placeholder{color:#b0a48f}
.bd-askbox textarea:focus{outline:none}

html.has-buddy-bar body{padding-bottom:calc(var(--bd-bar-h,6.5rem) + 1rem)}
.bd-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bg);border-top:1px solid var(--line);padding:.55rem 0}
.bd-bar-in{max-width:820px;margin:0 auto;padding:0 1.1rem;position:relative}
.bdc-composer{max-width:none !important;width:100% !important;margin:0 !important;box-shadow:0 6px 22px rgba(51,36,26,.14) !important}

/* capped, minimisable panel (sits above the bar) */
.bd-panel{position:fixed;left:0;right:0;bottom:calc(var(--bd-bar-h,6rem) + .5rem);max-width:820px;margin:0 auto;display:none;flex-direction:column;
  max-height:min(56vh,520px);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 48px rgba(42,29,20,.24);z-index:119}
html.bd-has-convo:not(.bd-chat-min) .bd-panel{display:flex}
.bd-panel-head{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;background:var(--bg-tint);border-bottom:1px solid var(--line);flex:none}
.bd-panel-head .bd-av svg{box-shadow:none}
.bd-panel-t{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.2}
.bd-panel-t b{font-family:var(--round);font-size:1rem;color:var(--ink)}
.bd-panel-t span{font-size:.72rem;color:var(--muted)}
.bd-min{border:none;background:none;color:var(--muted);font-size:1rem;cursor:pointer;width:30px;height:30px;border-radius:8px;line-height:1}
.bd-min:hover{background:var(--soft);color:var(--ink)}
.bd-thread{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:1rem .9rem;display:flex;flex-direction:column;gap:.8rem;background:var(--bg-tint)}
.bd-thread .bd-msg{width:100%}
@media (max-width:860px){.bd-panel{left:.6rem;right:.6rem}}
@media (max-width:560px){.bd-bar-in{padding:0 .7rem}.bd-panel{max-height:60vh}}

/* contextual "Ask Buddy about this" button (bottle page) */
.bd-ask-ctx{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--round);font-weight:600;font-size:.92rem;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--gold));border:none;border-radius:11px;
  padding:.55rem 1rem;cursor:pointer;box-shadow:0 4px 12px rgba(168,105,42,.28)}
.bd-ask-ctx:hover{filter:brightness(1.05)}
.bd-ask-ctx .star{font-size:.9em}

/* ============================================================
   RAIL LAYOUT — Buddy docked as a full-height left strip.
   Opt in per page with <html data-buddy-rail>; wb-buddy.js then adds
   .bd-rail-on. Below ~860px it falls back to the bottom-bar layout above.
   ============================================================ */
:root{ --wb-header-h:46px; --bd-rail-w:312px; --bd-bar-h:104px; }
html.bd-rail-on body{padding-left:var(--bd-rail-w);padding-bottom:0}
/* keep the sticky header full-width above the strip (−rail width, not 100vw, to avoid scrollbar overflow) */
html.bd-rail-on .wb-header{margin-left:calc(-1 * var(--bd-rail-w));width:calc(100% + var(--bd-rail-w))}
/* panel = the strip body (thread), always visible */
html.bd-rail-on .bd-panel{display:flex !important;left:0;right:auto;top:var(--wb-header-h);bottom:calc(var(--bd-bar-h,5.4rem) + .4rem);
  width:var(--bd-rail-w);max-width:none;max-height:none;margin:0;border-radius:0;border:none;
  border-right:1px solid var(--line);box-shadow:6px 0 22px rgba(42,29,20,.06);z-index:40}
html.bd-rail-on .bd-min{display:none}
html.bd-rail-on .bd-thread{background:var(--bg-tint);padding:.7rem .6rem}
/* reclaim horizontal space in the narrow strip: drop the per-message avatar, let bubbles run full width */
html.bd-rail-on .bd-thread .bd-msg{gap:0}
html.bd-rail-on .bd-thread .bd-msg .bd-av{display:none}
html.bd-rail-on .bd-thread .bd-bubble{max-width:100%;padding:.5rem .65rem;font-size:.86rem}
html.bd-rail-on .bd-thread .bd-sug{padding:.35rem .4rem}
html.bd-rail-on .bd-thread .bd-sug img{width:24px;height:32px}
/* bar = composer pinned to the bottom of the strip */
html.bd-rail-on .bd-bar{left:0;right:auto;width:var(--bd-rail-w);border-right:1px solid var(--line);z-index:41}
html.bd-rail-on .bd-bar-toggle{display:none}
html.bd-rail-on .bd-askbox{padding-left:.7rem}
/* the strip is the search surface in this layout — hide the redundant header search */
html.bd-rail-on .wb-search{display:none}
/* the chat strip is permanently open here, so the "Buddy" nav pill has nothing to
   open — it read as a dead button (feedback uid 320615963). Hidden on desktop rail,
   restored on mobile below where the nav collapses and the strip isn't always shown. */
html.bd-rail-on .wb-nav-buddy{display:none}
/* intro chips shown in the empty strip */
.bd-rail-chips{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.bd-railchip{text-align:left;font-family:var(--round);font-weight:500;font-size:.84rem;color:var(--accent);
  background:var(--card);border:1px solid var(--accent-line);border-radius:11px;padding:.5rem .7rem;cursor:pointer}
.bd-railchip:hover{background:var(--accent);color:#fff}
/* drag handle on the strip's right edge — width is user-adjustable + persisted (localStorage) */
.bd-rail-resize{display:none}
html.bd-rail-on .bd-rail-resize{display:block;position:fixed;top:var(--wb-header-h);bottom:0;
  left:calc(var(--bd-rail-w) - 3px);width:6px;cursor:col-resize;z-index:42;touch-action:none}
html.bd-rail-on .bd-rail-resize::after{content:"";position:absolute;inset:0 0 0 2px;width:1px;background:var(--line)}
html.bd-rail-on .bd-rail-resize:hover::after,html.bd-rail-on .bd-rail-resize.drag::after{width:2px;background:var(--accent)}
html.bd-rail-on.bd-rail-dragging{cursor:col-resize;user-select:none}
@media (max-width:860px){
  html.bd-rail-on body{padding-left:0;padding-bottom:calc(var(--bd-bar-h,6.5rem) + 1rem)}
  html.bd-rail-on .bd-rail-resize{display:none}
  html.bd-rail-on .wb-header{margin-left:0;width:auto}
  html.bd-rail-on .bd-panel{left:0;right:0;width:auto;top:auto;bottom:calc(var(--bd-bar-h,6rem) + .5rem);max-height:min(56vh,520px);
    border-right:none;border-top:1px solid var(--line);display:none !important}
  html.bd-rail-on.bd-has-convo:not(.bd-chat-min) .bd-panel{display:flex !important}
  html.bd-rail-on .bd-bar{left:0;right:0;width:auto;border-right:none}
  html.bd-rail-on .bd-bar-toggle{display:flex}
  html.bd-rail-on .wb-search{display:revert}
  html.bd-rail-on .wb-nav-buddy{display:inline-flex}
}

/* ============================================================
   Logged-out: Buddy's chat is an account feature. The dock shows
   a LOCKED teaser (what Buddy does + a free-account CTA) instead of
   a usable-looking input that refuses on submit.
   ============================================================ */
.bd-locked{display:flex;flex-direction:column;gap:.7rem;padding:.15rem .1rem}
.bd-locked-h{display:flex;align-items:center;gap:.55rem}
.bd-locked-h b{font-family:var(--round);font-size:1rem;color:var(--ink);display:block;line-height:1.2}
.bd-locked-h span{font-size:.72rem;color:var(--accent);font-weight:600}
.bd-locked-p{font-size:.86rem;line-height:1.5;color:var(--ink-soft);margin:0}
.bd-locked-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.bd-locked-list li{position:relative;padding-left:1.25rem;font-size:.82rem;line-height:1.4;color:var(--ink-soft)}
.bd-locked-list li::before{content:"\2726";position:absolute;left:0;color:var(--gold);font-size:.8rem}
.bd-locked-cta{display:block;text-align:center;font-family:var(--round);font-weight:600;font-size:.92rem;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--gold));border-radius:11px;
  padding:.62rem .9rem;text-decoration:none;margin-top:.15rem}
.bd-locked-cta:hover{filter:brightness(1.05);text-decoration:none}
.bd-locked-login{display:block;text-align:center;font-size:.78rem;color:var(--muted);text-decoration:none}
.bd-locked-login:hover{color:var(--accent)}
/* the bottom composer becomes a single CTA (no typable box) when logged out */
.bd-locked-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--round);
  font-weight:600;font-size:.88rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--gold));
  border-radius:12px;padding:.6rem .9rem;text-decoration:none}
.bd-locked-bar:hover{filter:brightness(1.05);text-decoration:none}
.bd-locked-bar b{font-weight:700}
.bd-locked-bar svg{border-radius:50%;flex:none}

/* ---- dock mode switch: Ask Buddy ⇄ Search (one persistent bar, two modes) ---- */
.bd-mode{display:inline-flex;gap:.2rem;margin:0 0 .45rem;padding:.2rem;
  background:var(--soft,#faf3e7);border:1px solid var(--line);border-radius:999px}
.bd-mode-btn{font-family:var(--round);font-weight:600;font-size:.8rem;line-height:1;
  cursor:pointer;border:none;background:transparent;color:var(--muted);
  padding:.32rem .85rem;border-radius:999px;transition:background .14s,color .14s}
.bd-mode-btn.is-on{background:var(--accent);color:#fff}
/* Desktop has its own dedicated search; the mode switch is mobile-only. Default
   mode is "buddy" (the Buddy btn ships .is-on), so hiding the switch on desktop
   leaves Ask Buddy active. Mirrors the 860px rail breakpoint above. */
@media (min-width:861px){.bd-mode{display:none}}
/* In search mode the chat avatar + the "double-check trivia" foot are noise.
   The avatar selector must out-specify `html.bd-rail-on .bd-bar-toggle`,
   which force-shows it on narrow screens. */
.bd-mode-search .bd-bar-foot{display:none}
.bd-mode-search .bd-bar-toggle,
html.bd-rail-on .bd-bar.bd-mode-search .bd-bar-toggle{display:none}
/* Live results float ABOVE the bar as an overlay (absolute, out of flow) so the
   list never inflates the bar height — which is published as --bd-bar-h and
   reserved as body padding-bottom. On mobile an in-flow card grew the fixed
   bottom bar and ate the viewport even for a single match; overlaying keeps the
   docked bar at composer height and lets the results overlap page content. */
.bd-search-results{position:absolute;left:1.1rem;right:1.1rem;bottom:calc(100% + .1rem);
  margin:0;max-height:min(46vh,360px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 30px rgba(42,29,20,.16)}
@media (max-width:560px){.bd-search-results{left:.7rem;right:.7rem}}
.bd-sr-head{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:.55rem .8rem .35rem}
.bd-sr-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;
  text-decoration:none;color:var(--ink);border-top:1px solid var(--line-soft)}
.bd-sr-row:hover{background:var(--soft,#faf3e7);text-decoration:none}
.bd-sr-row img{width:34px;height:34px;object-fit:contain;flex:none;background:#fff;
  border-radius:7px;border:1px solid var(--line-soft);padding:.15rem}
.bd-sr-t{display:flex;flex-direction:column;min-width:0;flex:1}
.bd-sr-name{font-family:var(--round);font-weight:600;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-sr-meta{font-size:.75rem;color:var(--muted)}
.bd-sr-r{display:flex;align-items:center;gap:.35rem;flex:none;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem;color:var(--accent)}
.bd-sr-foot{display:block;padding:.55rem .8rem;font-family:var(--round);font-weight:600;
  font-size:.85rem;color:var(--accent);text-decoration:none;border-top:1px solid var(--line-soft)}
.bd-sr-foot:hover{text-decoration:underline}

/* ---------- Buddy AI consent dialog (Apple App Store 5.1.2(i)) ----------
   Shown once before a signed-in user's first LLM call. Tokens fall back so it
   renders even on a page that doesn't define the full palette. */
.bd-consent-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:1.2rem;background:rgba(35,24,16,.5);backdrop-filter:blur(2px)}
.bd-consent{background:var(--card,#fffdf9);color:var(--ink,#33241A);width:min(440px,100%);
  border:1px solid var(--line,#e8ddc9);border-radius:16px;padding:1.3rem 1.35rem 1.15rem;
  box-shadow:0 18px 50px rgba(35,24,16,.28)}
.bd-consent h3{font-family:var(--round,'Fredoka',system-ui,sans-serif);font-weight:600;
  font-size:1.25rem;margin:0 0 .55rem}
.bd-consent p{margin:0 0 .7rem;font-size:.92rem;line-height:1.5;color:var(--ink-soft,#5b4a39)}
.bd-consent .bd-consent-fine{font-size:.82rem;color:var(--muted,#9a8c79)}
.bd-consent a{color:var(--accent,#a8692a);font-weight:600}
.bd-consent-row{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.9rem}
.bd-consent-row button{font-family:var(--round,'Fredoka',system-ui,sans-serif);font-weight:600;
  font-size:.92rem;border-radius:10px;padding:.55rem 1.05rem;cursor:pointer}
.bd-consent-no{background:var(--bg-tint,#fdf8ef);color:var(--ink-soft,#5b4a39);
  border:1px solid var(--line,#e8ddc9)}
.bd-consent-no:hover{border-color:var(--accent-line,#e4c89c);color:var(--accent,#a8692a)}
.bd-consent-yes{background:var(--accent,#a8692a);color:#fff;border:none}
.bd-consent-yes:hover{background:var(--accent-2,#c0792f)}