/* ============================================================================
   🏁 SB POLISH WAVE v1 — style layer (append-only companion to polish-wave.js)
   Design tokens follow the StudioBoss system: dark layered ground, gold
   #e3bd5f→#c79b3b bevels, Varien display (already @font-face'd by the base),
   ≥44px tap targets, no dead zones. Nothing here restyles the certified base
   except the thread-header nodes the JS explicitly classes at runtime.
   ========================================================================= */

/* honest refresh pip — tiny, calm, never a spinner takeover */
#sbPolishPip {
  position: fixed; right: 14px; bottom: 14px; z-index: 99999;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(20, 18, 10, .92);
  border: 1px solid rgba(227, 189, 95, .5);
  color: #f6df9a; font: 800 11.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .05em;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
#sbPolishPip.on { opacity: 1; transform: translateY(0); }

/* ── W5 · thread header, regraded ────────────────────────────────────── */
/* The JS moves the three action buttons into .sb-th-actions and classes the
   header .sb-th-head. Geometry lives here; semantic colors preserved. */
.sb-th-head { flex-wrap: wrap !important; row-gap: 10px; }

.sb-th-actions {
  display: flex; gap: 10px; width: 100%; flex: 1 1 100%;
  padding-top: 2px;
}
.sb-th-btn {
  flex: 1 1 0 !important;
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: .04em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* the 3-D bevel recipe (Collect-Payment family): lift + inner light */
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .06s ease, filter .12s ease;
}
.sb-th-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.sb-th-btn:hover { filter: brightness(1.12); }

.sb-th-read {
  background: linear-gradient(180deg, rgba(74, 222, 128, .22), rgba(74, 222, 128, .08)) !important;
  border: 1px solid rgba(74, 222, 128, .55) !important;
}
.sb-th-mute {
  background: linear-gradient(180deg, rgba(255, 111, 134, .2), rgba(255, 111, 134, .07)) !important;
  border: 1px solid rgba(255, 111, 134, .5) !important;
}
.sb-th-close {
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: #e8eaf0 !important;
}

/* phone: the header breathes — identity row, then the full-width action row */
@media (max-width: 640px) {
  .sb-th-head { padding: 12px 12px 10px !important; gap: 10px !important; }
  .sb-th-actions { gap: 8px; }
  .sb-th-btn { min-height: 50px; font-size: 12.5px !important; }
}

/* ── W6 · consult-type chips ─────────────────────────────────────────── */
.sb-ct-chip {
  display: inline-block; vertical-align: middle;
  margin: 0 4px 2px 0; padding: 3px 10px;
  border-radius: 999px;
  font: 800 10.5px/1.5 Inter, system-ui, sans-serif;
  letter-spacing: .05em; white-space: nowrap;
}
.sb-ct-phone {
  background: rgba(122, 162, 247, .14);
  border: 1px solid rgba(122, 162, 247, .5);
  color: #a8c0ff;
}
.sb-ct-inperson {
  background: linear-gradient(180deg, rgba(246, 223, 154, .2), rgba(199, 155, 59, .12));
  border: 1px solid rgba(227, 189, 95, .55);
  color: #f6df9a;
}

/* ── W1 · skeleton shimmer (available to future panels; harmless unused) ─ */
.sb-skel {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, .05); border-radius: 10px; min-height: 14px;
}
.sb-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(227, 189, 95, .09), transparent);
  animation: sbSkel 1.2s infinite;
}
@keyframes sbSkel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }