/* ============================================================
   Old Bruce J BBQ — custom AI Advisor chat widget.
   A right-edge floating button that expands on hover and opens a
   slide-in conversation drawer with the question box pinned at the
   bottom. Talks to the product /api/advisor/ask endpoint directly
   (see advisor-widget.js). Uses the site.css design tokens.
   ============================================================ */

.obai { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.obai input[name="__RequestVerificationToken"] { display: none; }

/* ---- Floating launch button (right edge) ---- */
.obai-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 940; display: flex; align-items: center;
  height: 56px; width: 56px; padding: 0; overflow: hidden;
  background: var(--ember, #e0531f); color: #fff; border: 0; cursor: pointer;
  border-radius: 30px 0 0 30px; box-shadow: -7px 8px 26px rgba(0,0,0,.30);
  transition: width .3s var(--ease, ease), padding .3s var(--ease, ease), background .15s, transform .3s var(--ease, ease), opacity .3s;
}
.obai-fab__icon { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; }
.obai-fab__icon svg { width: 27px; height: 27px; }
.obai-fab__label { white-space: nowrap; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding-right: 18px; opacity: 0; transition: opacity .18s ease; }
.obai-fab:hover, .obai-fab:focus-visible { width: 188px; background: var(--ember-2, #bb3f12); outline: none; }
.obai-fab:hover .obai-fab__label, .obai-fab:focus-visible .obai-fab__label { opacity: 1; }
.obai.is-open .obai-fab { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(30px); }

/* ---- Backdrop ---- */
.obai-backdrop {
  position: fixed; inset: 0; z-index: 990; background: rgba(15,11,8,.5);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.obai.is-open .obai-backdrop { opacity: 1; pointer-events: auto; }

/* ---- Slide-in panel ---- */
.obai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--cream, #f7f1e6); color: var(--ink, #211a13);
  box-shadow: -24px 0 70px rgba(0,0,0,.4);
  transform: translateX(112%); transition: transform .36s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.obai.is-open .obai-panel { transform: translateX(0); }

.obai-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: var(--char, #16110d); color: #fff; flex: 0 0 auto; }
.obai-head__brand { display: flex; align-items: center; gap: 9px; font-family: "Anton","Oswald",sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
.obai-head__brand svg { width: 22px; height: 22px; color: var(--gold, #e8a23d); }
.obai-close { margin-left: auto; background: transparent; border: 0; color: rgba(255,255,255,.8); font-size: 1.7rem; line-height: 1; cursor: pointer; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; transition: background .15s, color .15s; }
.obai-close:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ---- Conversation log ---- */
.obai-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: #cdb89e transparent; }
.obai-log::-webkit-scrollbar { width: 8px; }
.obai-log::-webkit-scrollbar-thumb { background: #cdb89e; border-radius: 8px; }

.obai-greet { color: var(--muted, #6f6356); font-size: .96rem; line-height: 1.6; }
.obai-greet strong { color: var(--ink, #211a13); }
.obai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.obai-chip { background: #fff; border: 1px solid var(--line, rgba(33,26,19,.12)); color: var(--ink, #211a13); border-radius: 999px; padding: 8px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-align: left; }
.obai-chip:hover { background: var(--ember, #e0531f); color: #fff; border-color: var(--ember, #e0531f); }

.obai-msg { max-width: 90%; animation: obai-pop .22s var(--ease, ease); }
@keyframes obai-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.obai-msg--user { align-self: flex-end; background: var(--ember, #e0531f); color: #fff; padding: 10px 15px; border-radius: 16px 16px 5px 16px; font-size: .95rem; line-height: 1.5; }
.obai-msg--ai { align-self: flex-start; color: var(--ink, #211a13); font-size: .97rem; line-height: 1.62; }
.obai-msg--ai p { margin: 0 0 .6rem; }
.obai-msg--ai p:last-child { margin-bottom: 0; }
.obai-msg--ai a { color: var(--ember-2, #bb3f12); }
.obai-msg--ai a:hover { color: var(--ember, #e0531f); }
.obai-msg--ai strong, .obai-msg--ai h2, .obai-msg--ai h3, .obai-msg--ai h4 { color: var(--char, #16110d); }
.obai-msg--ai ul, .obai-msg--ai ol { margin: 0 0 .6rem 1.15rem; padding: 0; }
.obai-msg--ai li { margin-bottom: .25rem; }
.obai-aitag { display: flex; align-items: center; gap: 6px; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ember, #e0531f); font-weight: 700; margin-bottom: 7px; }
.obai-aitag svg { width: 14px; height: 14px; }
.obai-sources { margin-top: 10px; font-size: .82rem; color: var(--muted, #6f6356); }
.obai-sources a { color: var(--ember-2, #bb3f12); margin-right: 10px; }
.obai-thinking { display: inline-flex; gap: 5px; align-items: center; }
.obai-thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember, #e0531f); display: inline-block; animation: obai-blink 1.2s infinite ease-in-out; }
.obai-thinking i:nth-child(2) { animation-delay: .18s; }
.obai-thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes obai-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.obai-msg--error { align-self: flex-start; color: #9c2218; font-size: .92rem; }

/* ---- Composer (question box at the bottom) ---- */
.obai-compose { display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px; border-top: 1px solid var(--line, rgba(33,26,19,.12)); background: #fff; flex: 0 0 auto; }
.obai-input { flex: 1 1 auto; resize: none; max-height: 130px; font: 400 .97rem/1.45 "Inter", sans-serif; color: var(--ink, #211a13); border: 1px solid #d9cfc0; border-radius: 13px; padding: 11px 14px; background: #fbf8f3; transition: border-color .15s, box-shadow .15s; }
.obai-input:focus { outline: none; border-color: var(--ember, #e0531f); box-shadow: 0 0 0 3px rgba(224,83,31,.14); background: #fff; }
.obai-mic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; border: 1px solid #d9cfc0; background: #fff; color: var(--char, #16110d); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.obai-mic:hover { border-color: var(--ember, #e0531f); color: var(--ember, #e0531f); }
.obai-mic svg { width: 20px; height: 20px; }
.obai-mic.is-listening { background: var(--ember, #e0531f); color: #fff; border-color: var(--ember, #e0531f); animation: obai-pulse 1.3s infinite; }
@keyframes obai-pulse { 0% { box-shadow: 0 0 0 0 rgba(224,83,31,.45); } 70% { box-shadow: 0 0 0 10px rgba(224,83,31,0); } 100% { box-shadow: 0 0 0 0 rgba(224,83,31,0); } }
.obai-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; border: 0; background: var(--ember, #e0531f); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .08s; }
.obai-send:hover { background: var(--ember-2, #bb3f12); }
.obai-send:active { transform: translateY(1px); }
.obai-send:disabled { opacity: .45; cursor: default; }
.obai-send svg { width: 20px; height: 20px; }

@media (max-width: 520px) { .obai-panel { width: 100vw; } }
@media print { .obai { display: none; } }