/* ── Sherryl chat — root variables ────────────────────────────────────────── */
:root { --sh-drawer-width: 544px; }

#sherryl-root {
  --sh-bubble-size: 56px;
  --sh-bubble-offset: 20px;
  --sh-drawer-width: 544px;
  --sh-z-bubble: 9000;
  --sh-z-drawer: 8999;
  --sh-z-backdrop: 8998;
  --sh-radius: 16px;
  --sh-glass: rgba(255,255,255,0.92);
  --sh-accent: #f97316;
  --sh-accent-soft: rgba(249, 115, 22,0.12);
  --sh-user-bubble: rgba(249, 115, 22,0.15);
  --sh-text: #141414;
  --sh-muted: #4d4d4d;
  --sh-border: rgba(0,0,0,0.08);
  --sh-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --sh-transition: 260ms cubic-bezier(0.4,0,0.2,1);
  --sh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sh-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#sherryl-bubble {
  position: fixed;
  bottom: var(--sh-bubble-offset);
  right: var(--sh-bubble-offset);
  width: var(--sh-bubble-size);
  height: var(--sh-bubble-size);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2H4C2.9 2 2 2.9 2 4v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
  background-size: 60%, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 20px rgba(234, 88, 12,0.45);
  cursor: pointer;
  z-index: var(--sh-z-bubble);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--sh-transition), box-shadow var(--sh-transition);
  border: none;
}
#sherryl-bubble:hover { transform: scale(1.07); box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.sh-bubble-icon { width: 60%; height: 60%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); }
#sherryl-bubble.is-open { display: none; }

#sherryl-bubble.is-pulsing::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--sh-accent);
  animation: sh-ripple 2s ease-out infinite;
}
@keyframes sh-ripple {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

#sherryl-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: sh-glow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sh-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22,0); }
  50%       { box-shadow: 0 0 22px 10px rgba(249, 115, 22,0.55); }
}

#sherryl-tooltip {
  position: fixed;
  bottom: calc(var(--sh-bubble-offset) + var(--sh-bubble-size) + 8px);
  right: calc(var(--sh-bubble-offset) + var(--sh-bubble-size) + 8px);
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: var(--sh-z-bubble);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sh-transition);
}
#sherryl-tooltip.visible { opacity: 1; }

.sh-dot {
  width: 5px; height: 5px;
  background: var(--sh-accent);
  border-radius: 50%;
  animation: sh-dot-pulse 1.2s infinite;
}
.sh-dot:nth-child(2) { animation-delay: 0.2s; }
.sh-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sh-dot-pulse { 0%,80%,100% { transform: scale(0.6); } 40% { transform: scale(1); } }

/* Dimmed shop area shown behind the panel in the tablet/overlay tier. Clicking
   anywhere on it collapses the chat (wired in sherryl.js). Phone + desktop tiers
   force it off (full-screen takeover / side-by-side push need no dim). Uses an
   opacity fade rather than display toggle so it eases in with the panel. */
#sherryl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: var(--sh-z-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sh-transition);
}
#sherryl-backdrop.visible { opacity: 1; pointer-events: auto; }

#sherryl-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--sh-drawer-width);
  max-width: 100vw;
  background: #f8f6f2;
  z-index: var(--sh-z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--sh-transition);
  box-shadow: -4px 0 32px rgba(0,0,0,0.12);
}
#sherryl-drawer.open { transform: translateX(0); }

.sh-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  flex-shrink: 0;
}
.sh-header-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sh-header-titles { flex: 1; min-width: 0; }
.sh-header-name { font-size: 16px; font-weight: 600; color: var(--sh-text); }
.sh-header-tagline { font-size: 12px; color: var(--sh-muted); }
.sh-header-actions { display: flex; align-items: center; gap: 4px; }
.sh-header-reset,
.sh-header-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--sh-muted);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: background var(--sh-transition), color var(--sh-transition);
}
.sh-header-reset:hover,
.sh-header-close:hover { background: var(--sh-border); color: var(--sh-text); }

.sh-scrollback {
  flex: 1;
  min-height: 0;             /* flex child must allow shrink below content, else overflow:auto won't scroll */
  overflow-y: auto;
  overflow-x: hidden;        /* content reflows to the drawer; never scrolls sideways */
  overscroll-behavior: contain; /* keep scroll inside the drawer, don't chain to the page */
  min-width: 0;
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.sh-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 16px 12px;
  text-align: center;
}
.sh-welcome-line { font-size: 14px; color: var(--sh-text); line-height: 1.5; }
.sh-starter-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sh-starter-chip {
  background: linear-gradient(180deg, #ffffff 0%, #ffe8d6 100%);
  border: 1.5px solid rgba(249, 115, 22,0.5);
  border-radius: 20px;
  padding: 10px 17px;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  cursor: pointer;
  transition: background var(--sh-transition), border-color var(--sh-transition), color var(--sh-transition), box-shadow var(--sh-transition), transform 80ms ease;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(0,0,0,0.10);
}
.sh-starter-chip:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.16); }
.sh-starter-chip:hover { background: var(--sh-accent-soft); border-color: var(--sh-accent); color: #1a1a1a; }

.sh-msg { display: flex; gap: 10px; max-width: 90%; min-width: 0; }
.sh-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.sh-msg.assistant { align-self: flex-start; }
.sh-msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sh-msg-body {
  /* Soft top→bottom gradient + an inset top highlight and a grounded drop
     shadow give the bubble physical volume instead of a flat fill. */
  background: linear-gradient(180deg, #ffffff 0%, #ffeede 100%);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sh-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
              inset 0 -1px 0 rgba(0,0,0,0.04),
              0 3px 8px rgba(0,0,0,0.12);
  min-width: 0;          /* let product cards inside reflow instead of forcing width */
  max-width: 100%;
  box-sizing: border-box;
}
.sh-msg.user .sh-msg-body {
  background: linear-gradient(180deg, rgba(249, 115, 22,0.26) 0%, rgba(249, 115, 22,0.10) 100%);
  border-radius: 16px 4px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7),
              inset 0 -1px 0 rgba(0,0,0,0.05),
              0 3px 8px rgba(234, 88, 12,0.16);
}
/* Streamed assistant prose. Sits below the progress spine + any product/compare
   cards in the same bubble; line breaks come through as <br> from _renderProse. */
.sh-answer { white-space: normal; }
.sh-answer:not(:first-child) { margin-top: 6px; }

/* Live reasoning trace — collapsible "thinking" disclosure above the answer. */
.sh-reasoning { margin: 0 0 6px; min-width: 0; }
.sh-reasoning-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sh-muted);
  padding: 2px 0;
  user-select: none;
}
.sh-reasoning-summary::-webkit-details-marker { display: none; }
.sh-reasoning-summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.15s ease;
}
.sh-reasoning[open] .sh-reasoning-summary::before { transform: rotate(90deg); }
.sh-reasoning-body {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #4a4540;                 /* high-contrast muted, comfortably readable */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 2px solid var(--sh-border);
  padding-left: 10px;
}

.sh-typing { display: flex; gap: 4px; padding: 4px 0; }
.sh-typing .sh-dot { background: var(--sh-muted); }

.sh-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sh-muted);
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 4px 0;
}

.sh-products { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  padding: 8px 12px;
}
.sh-card-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sh-card-info { flex: 1; min-width: 0; }
.sh-card-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-card-price { font-size: 13px; font-weight: 600; color: var(--sh-text); }
.sh-price-now { color: var(--sh-accent); }
.sh-price-was { text-decoration: line-through; color: var(--sh-muted); font-weight: 400; font-size: 11px; }
.sh-card-meta { font-size: 11px; color: var(--sh-muted); margin-top: 2px; line-height: 1.45; }
.sh-meta-rating { color: #ea580c; }
.sh-meta-oos { color: #b00020; }
/* Allow a third action (Remove, shown after an add) to wrap under the row in the
   narrow card instead of overflowing. */
.sh-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
/* Fixed-width action buttons so the row stays aligned across cards even when
   "+ Cart" turns into the wider "✓ Added". */
.sh-card-actions .sh-btn { min-width: 68px; text-align: center; box-sizing: border-box; }
/* Remove (undo an add) — a quiet destructive accent so it reads as secondary to
   the green "✓ Added" status it sits beside. */
.sh-remove-cart { color: #c0392b; border-color: #e3b4ae; background: var(--sh-glass); }
.sh-remove-cart:hover { background: #fbeae7; color: #a93226; }
.sh-compare-actions { flex-wrap: wrap; }
.sh-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--sh-border);
  background: linear-gradient(180deg, #ffffff 0%, #ffe4ce 100%);
  cursor: pointer;
  transition: background var(--sh-transition), box-shadow var(--sh-transition), transform 80ms ease;
  white-space: nowrap;
  text-decoration: none;
  color: var(--sh-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.12);
}
.sh-btn:hover { background: linear-gradient(180deg, #ffffff 0%, #fff2e8 100%); color: var(--sh-text); }
/* press-in: shadow flips inward and the button sinks a pixel */
.sh-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.18); }
.sh-btn.primary {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  color: #fff;
  border-color: #c2410c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 5px rgba(234, 88, 12,0.35);
}
.sh-btn.primary:hover { background: linear-gradient(180deg, #fdba74 0%, #f97316 100%); color: #fff; }
.sh-btn.primary:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(120,72,16,0.4); }
.sh-btn.success {
  background: linear-gradient(180deg, #5cc763 0%, #43a049 100%);
  color: #fff;
  border-color: #3d9143;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 5px rgba(67,160,73,0.3);
  pointer-events: none;
}

.sh-action-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-bottom: 4px; }
.sh-action-chip {
  background: linear-gradient(180deg, #ffffff 0%, #ffeada 100%);
  border: 1.5px solid var(--sh-accent);
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #1f1f1f;
  transition: background var(--sh-transition), border-color var(--sh-transition), box-shadow var(--sh-transition), transform 80ms ease;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(0,0,0,0.12);
}
.sh-action-chip:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.18); }
/* Keep the dark text on hover — the parent theme's global button:hover sets a
   light color that washes the label out against the pale hover background. */
.sh-action-chip:hover,
.sh-action-chip:focus { background: var(--sh-accent-soft); border-color: #c2410c; color: #1f1f1f; }
.sh-chip-check.is-selected:hover { color: #fff; } /* selected chip stays white-on-accent */

/* Keep Astra's scroll-to-top button out of the Sherryl chat corner:
   move it to the bottom-left so it never overlaps the bubble/drawer. */
#ast-scroll-top.ast-scroll-to-top-right {
  right: auto;
  left: 30px;
}
.sh-chips-wrap { margin-top: 8px; }
.sh-chips-question { font-size: 13px; color: var(--sh-text); margin-bottom: 6px; }
.sh-chips-wrap .sh-action-chips { margin-top: 0; }
/* Multi-select chips (e.g. size picker): toggle state + Confirm button. */
.sh-chip-check.is-selected {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  border-color: #c2410c;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 5px rgba(234, 88, 12,0.3);
}
.sh-chip-check.is-selected::before { content: '✓ '; }
.sh-chips-confirm { margin-top: 8px; min-width: 96px; }

/* Side-by-side comparison cards (compare_products) — horizontal scroll in the narrow drawer */
.sh-compare {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  /* Centre the cards so a 2-up comparison doesn't leave a wide empty gap on
     the right. `safe` keeps the first card reachable when 4-5 cards overflow
     and the row scrolls horizontally. */
  justify-content: safe center;
}
.sh-compare-card {
  flex: 0 0 144px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  padding: 8px;
}
.sh-compare-thumb { width: 100%; height: 96px; object-fit: cover; border-radius: 6px; background: #ffedd5; }
.sh-compare-title { font-size: 12px; font-weight: 600; line-height: 1.3; }
.sh-compare-price { font-size: 13px; font-weight: 600; color: var(--sh-accent); }
.sh-compare-rating { font-size: 11px; color: #ea580c; }
.sh-compare-spec { font-size: 11px; color: var(--sh-muted); }
.sh-compare-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.sh-compare-actions .sh-btn { flex: 1; text-align: center; padding: 4px 6px; }

/* Cart view (view_cart) + cart op notes */
.sh-cart-view {
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.sh-cart-head { font-size: 12px; font-weight: 600; color: var(--sh-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.sh-cart-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
  border-bottom: 1px solid var(--sh-border);
}
.sh-cart-row:last-of-type { border-bottom: none; }
.sh-cart-qty { color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.sh-cart-name { flex: 1; }
.sh-cart-price { font-weight: 600; color: var(--sh-accent); }
.sh-cart-total { font-size: 13px; margin-top: 6px; text-align: right; }
.sh-cart-empty { font-size: 13px; color: var(--sh-muted); }
.sh-cart-checkout { display: block; text-align: center; margin-top: 8px; }
.sh-cart-note { font-size: 12px; color: var(--sh-muted); margin-top: 6px; }
.sh-cart-note.sh-cart-error { color: #b00020; }

.sh-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--sh-glass);
  border-top: 1px solid var(--sh-border);
  flex-shrink: 0;
  align-items: flex-end; /* keep the send button at the bottom of the taller box */
}
.sh-input {
  flex: 1;
  border: 1px solid var(--sh-border);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 14px;
  background: #fff;
  outline: none;
  resize: none;
  /* ~3 lines tall by default (3 × 1.4em line-height + vertical padding), still
     grows up to max-height before scrolling. */
  min-height: 78px;
  max-height: 140px;
  line-height: 1.4;
}
.sh-input:focus { border-color: var(--sh-accent); }
.sh-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  /* domed gloss: bright top highlight, accent body, grounded shadow */
  background: radial-gradient(120% 120% at 50% 18%, #fdba74 0%, var(--sh-accent) 45%, #c2410c 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--sh-transition), box-shadow var(--sh-transition), transform 80ms ease;
  align-self: flex-end;
  padding: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 3px 7px rgba(234, 88, 12,0.4);
}
.sh-send:hover { background: radial-gradient(120% 120% at 50% 18%, #fed7aa 0%, #fb923c 45%, #c2410c 100%); }
.sh-send:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(120,72,16,0.45); }
.sh-send:disabled {
  background: var(--sh-border);
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}


/* ── Desktop (≥1281px): side-by-side panel pushes the page, no backdrop ─────── */
@media (min-width: 1281px) {
  html { transition: padding-right 260ms cubic-bezier(0.4,0,0.2,1); }
  html.sherryl-open { padding-right: var(--sh-drawer-width); }
  #sherryl-drawer { box-shadow: -1px 0 0 rgba(0,0,0,0.1); }
  #sherryl-backdrop { display: none !important; }
}

/* ── Tablet / small laptop (769–1280px): overlay panel over a dimmed shop ───── */
/* Pushing the page here crushes the grid — at ~384px the sidebar heading wraps
   one letter per line — so the panel floats over the shop instead. The whole
   dimmed shop is the backdrop; clicking anywhere on it collapses the chat. */
@media (min-width: 769px) and (max-width: 1280px) {
  #sherryl-root { --sh-drawer-width: min(440px, 90vw); }
  html.sherryl-open { padding-right: 0; }        /* never push the page */
  #sherryl-drawer { width: var(--sh-drawer-width); }
}

/* ── Phone (≤768px): full-screen takeover ──────────────────────────────────── */
@media (max-width: 768px) {
  #sherryl-root {
    --sh-bubble-size: 52px;
    --sh-bubble-offset: 16px;
  }
  #sherryl-drawer { width: 100%; inset: 0; border-radius: 0; }
  #sherryl-backdrop { display: none !important; } /* full screen — nothing to dim */
  /* Reclaim vertical room for the conversation on small screens. */
  .sh-header { padding: 12px 16px; }
  .sh-input { min-height: 52px; }
  .sh-input-area { padding: 10px 12px; }
}

/* iPhone Safari zooms the page when a focused field is under 16px. Bump the
   chat input to 16px on touch/mobile widths (covers portrait + landscape). */
@media (max-width: 1024px) {
  .sh-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #sherryl-bubble.is-pulsing::before { animation: none; box-shadow: 0 0 0 3px var(--sh-accent); }
  #sherryl-bubble::after { animation: none; }
  #sherryl-drawer { transition: none; }
  .sh-dot { animation: none; opacity: 0.6; }
}

/* ── Reasoning spine ─────────────────────────────────────────────────── */
.sh-progress {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sh-progress-line {
  font-family: var(--sh-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  color: #3d3d3d;
  padding-left: 18px;
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}
.sh-progress-line::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #c9a3ff;
}
/* active step pulses */
.sh-progress-line.is-active::before { animation: sh-pulse 1s ease-in-out infinite; }
@keyframes sh-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* completed step → static check */
.sh-progress-line.is-done { color: #5a5a5a; }
.sh-progress-line.is-done::before {
  content: '✓';
  background: none;
  font-size: 11px;
  line-height: 7px;
  color: #6cbf73;
  margin-top: -4px;
  animation: none;
}
/* collapsed: keep only the final summary line visible */
.sh-progress--collapsed .sh-progress-line { display: none; }
.sh-progress--collapsed .sh-progress-line:last-child {
  display: block;
  opacity: .7;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .sh-progress-line.is-active::before { animation: none; opacity: .8; }
}

/* Proactive removal peek bubble — sits above the (locked) Sherryl bubble */
#sherryl-peek {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 10px 12px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  animation: sh-peek-in 180ms ease-out;
}
#sherryl-peek .sh-peek-body {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
#sherryl-peek .sh-peek-x {
  background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: #888; padding: 0 2px;
}
@keyframes sh-peek-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 👍/👎 feedback row on the latest completed turn */
.sh-feedback {
  display: flex; gap: 6px; justify-content: flex-end;
  margin: 2px 8px 6px 0;
  font-size: 12px; color: var(--sh-muted);
}
.sh-feedback-btn {
  background: none; border: 1px solid var(--sh-line, #e3ddd4); border-radius: 999px;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 8px;
  opacity: 0.55; transition: opacity 0.15s ease;
}
.sh-feedback-btn:hover { opacity: 1; }
.sh-feedback-done { font-size: 12px; color: var(--sh-muted); }