/* ===========================================================================
   THE HELP BUBBLE

   Uses the site's own custom properties (--primary, --line, --muted) so it
   follows a rebrand without being touched. Falls back to literal values for
   any page that loads this stylesheet without style.css.

   Z-INDEX, DELIBERATELY: the tab bar is 65 and the mobile cart bar is 70, so
   this sits at 80 — above both when it is shown at all, and JS hides it
   outright on phones where .mobile-bar is present.
   =========================================================================== */

.ubh {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font: inherit;
}

/* ---------------------------------------------------------------- button */
/* Sparkle on the left, "AI Help" on the right. Kept small: 44px tall, which
   is the minimum comfortable tap target, and no taller. */
.ubh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 17px 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  background: var(--primary, #6D28D9);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(45, 16, 101, .34);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.ubh-btn:hover {
  transform: translateY(-2px);
  background: var(--primary-dark, var(--primary-dk, #4C1D95));
  box-shadow: 0 10px 26px rgba(45, 16, 101, .44);
}

.ubh-btn:active { transform: translateY(0); }
.ubh-btn svg    { flex: none; }

/* A slow twinkle, so the button reads as something that thinks rather than
   another notification dot. Motion is dropped entirely for anyone who has
   asked their system for less of it. */
.ubh-spark { animation: ubhTwinkle 3.4s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes ubhTwinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .82; transform: scale(.93) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ubh-spark { animation: none; }
  .ubh-btn   { transition: none; }
  .ubh-panel { animation: none; }
}

/* Open: the label goes (the panel heading already says "AI Help") and the
   button shrinks back to a circle, so it reads as a way to close. */
.ubh.ubh-open .ubh-btn-label { display: none; }

.ubh.ubh-open .ubh-btn {
  width: 44px;
  padding: 0;
  background: var(--primary-dark, var(--primary-dk, #4C1D95));
}

.ubh.ubh-open .ubh-spark { animation: none; transform: rotate(90deg); }

/* ----------------------------------------------------------------- panel */
/* MUST come before .ubh-panel's display, and must win.
   The `hidden` attribute is styled by the browser as [hidden]{display:none} —
   one class's worth of specificity, and an author rule beats a browser one at
   equal weight. So `.ubh-panel { display: flex }` quietly overrode
   panel.hidden = true and the box sat open on every page load, which is
   exactly how it looked on screen. An attribute selector here outranks the
   plain class and puts the attribute back in charge. */
.ubh-panel[hidden] { display: none; }

.ubh-panel {
  width: min(330px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #E5E1F2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(30, 27, 75, .22);
  animation: ubhIn .18s ease;
}

@keyframes ubhIn {
  from { opacity: 0; transform: translateY(10px); }
}

.ubh-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--primary, #6D28D9);
  color: #fff;
}

.ubh-mark { display: inline-flex; opacity: .95; }
.ubh-title { font-size: 14px; font-weight: 700; letter-spacing: .2px; }

.ubh-close {
  margin-left: auto;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.ubh-close:hover { background: rgba(255, 255, 255, .28); }

/* --------------------------------------------------- the live diagnosis */
/* Partner side only. Sits above the transcript and says what is true of THIS
   partner right now, before he asks — which is usually the answer he came
   for. Red when something is stopping his jobs, green when nothing is. */
.ubh-status {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line, #E5E1F2);
  font-size: 13px;
  line-height: 1.45;
}

.ubh-status-ok   { background: #ECFDF5; border-left: 3px solid #10B981; }
.ubh-status-stop { background: #FEF2F2; border-left: 3px solid #EF4444; }

.ubh-status-title  { font-weight: 800; margin-bottom: 3px; }
.ubh-status-ok   .ubh-status-title { color: #065F46; }
.ubh-status-stop .ubh-status-title { color: #991B1B; }

.ubh-status-detail { color: var(--ink, #1E1B4B); opacity: .85; }

/* The one thing to DO about it, set apart so it is not lost in the
   explanation above it. */
.ubh-status-fix {
  margin-top: 6px;
  font-weight: 700;
  color: var(--primary-dark, var(--primary-dk, #4C1D95));
}

/* ------------------------------------------------------------ transcript */
.ubh-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: #FAFAFE;
}

.ubh-msg {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
}

.ubh-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line, #E5E1F2);
  color: var(--ink, #1E1B4B);
  border-bottom-left-radius: 5px;
}

.ubh-me {
  align-self: flex-end;
  background: var(--primary, #6D28D9);
  color: #fff;
  border-bottom-right-radius: 5px;
}

/* The three dots while the server is thinking. It is a few milliseconds on a
   good connection, but on a phone on 3G it is long enough to look broken. */
.ubh-wait { opacity: .55; letter-spacing: 3px; }

.ubh-link {
  align-self: flex-start;
  margin-top: -2px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--lavender, #EDE9FE);
  color: var(--primary-dark, var(--primary-dk, #4C1D95));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ubh-link:hover { background: #E0D9FD; }

/* --------------------------------------------------------------- prompts */
.ubh-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.ubh-chip {
  padding: 8px 12px;
  border: 1px solid var(--line, #E5E1F2);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-dark, var(--primary-dk, #4C1D95));
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.ubh-chip:hover { background: var(--lavender, #EDE9FE); border-color: #DDD6FE; }

/* ------------------------------------------------------------------ form */
.ubh-form {
  display: flex;
  gap: 8px;
  padding: 11px;
  border-top: 1px solid var(--line, #E5E1F2);
  background: #fff;
}

.ubh-input {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line, #E5E1F2);
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #1E1B4B);
}

.ubh-input:focus {
  outline: none;
  border-color: var(--primary, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .12);
}

.ubh-send {
  flex: none;
  width: 44px;
  border: 0;
  border-radius: 11px;
  background: var(--primary, #6D28D9);
  color: #fff;
  cursor: pointer;
}

.ubh-send:hover { background: var(--primary-dark, var(--primary-dk, #4C1D95)); }

/* ----------------------------------------------------------------- phone */
@media (max-width: 640px) {
  /* Clear of .tabbar, which is fixed to the bottom at z-index 65. Sitting on
     top of the primary navigation is the one thing this must never do. */
  .ubh { right: 14px; bottom: 74px; }

  .ubh-btn { height: 42px; padding: 0 15px 0 12px; font-size: 13.5px; }
  .ubh.ubh-open .ubh-btn { width: 42px; padding: 0; }

  .ubh-panel {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 200px);
  }
}

/* A page with .mobile-bar keeps the widget clear of the cart bar on desktop;
   on a phone the script removes it altogether. */
.ubh-has-bar .ubh { bottom: 96px; }