/* ============================================================
   Zellyfi Booker — shared widget engine (Clean Club pattern)
   Desktop: chat left + live schedule panel right.
   Mobile:  chat only + booking bar (day-strip peek) + bottom sheet.
   Palette comes from CSS vars set per widget:
     --zw-primary, --zw-primary-deep, --zw-accent (defaults derive tints)
   ============================================================ */

.zw-booker, .zw-booker * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }
/* NB: no `background` reset here — `.zw-booker button` (specificity 0,1,1) would
   out-rank every themed single-class button (`.zw-confirm`, `.zw-send`, 0,1,0) and
   render them transparent. Buttons that want no fill set `background: transparent`. */
.zw-booker button { cursor: pointer; font-family: inherit; border: none; }
.zw-booker input { font-family: inherit; }

.zw-booker {
  --zw-ink: #14202c;
  --zw-muted: rgba(20, 32, 44, 0.55);
  --zw-dim: rgba(20, 32, 44, 0.45);
  --zw-line: rgba(20, 32, 44, 0.12);
  --zw-soft: color-mix(in srgb, var(--zw-primary) 7%, white);
  --zw-soft-strong: color-mix(in srgb, var(--zw-primary) 14%, white);
  --zw-accent-soft: color-mix(in srgb, var(--zw-accent) 16%, white);
  --zw-chat-bg: color-mix(in srgb, var(--zw-primary) 4%, #f8fafc);

  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  background: #fff;
  color: var(--zw-ink);
  box-shadow: 0 70px 140px -40px rgba(3, 10, 20, 0.7), 0 0 0 1px rgba(20, 32, 44, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Header ── */
.zw-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--zw-line);
}
.zw-agent { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zw-av {
  position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600;
  background: radial-gradient(circle at 30% 30%, var(--zw-accent), var(--zw-primary-deep));
  overflow: visible;
}
.zw-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.zw-on {
  position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #3fb27a; border: 2px solid #fff;
}
.zw-who b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.zw-who span { display: block; font-size: 12px; color: var(--zw-muted); white-space: nowrap; }
.zw-badges { display: none; align-items: center; gap: 8px; }
@media (min-width: 440px) { .zw-badges { display: flex; } }
.zw-brand {
  display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--zw-muted); text-transform: uppercase;
}
@media (min-width: 1024px) { .zw-brand { display: inline; } }
.zw-badge {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--zw-soft); color: var(--zw-primary);
  border: 1px solid color-mix(in srgb, var(--zw-primary) 30%, white);
}

/* ── Body ── */
.zw-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .zw-body { grid-template-columns: 1fr 1.1fr; } }

/* ── Chat ── */
.zw-chat {
  display: flex; flex-direction: column; padding: 16px;
  min-height: 340px; max-height: 440px;
  overflow: hidden; /* height is capped — keep tall content (hero + long greeting
    + chips + composer) INSIDE the chat box so it can never spill down over the
    mobile booking bar below. The messages area scrolls to absorb any overflow. */
  background: var(--zw-chat-bg);
}
@media (min-width: 768px) {
  /* Cap raised above the tallest panel so the chat column stretches to match
     the schedule panel (grid stretch) instead of leaving an empty gap below it.
     Long conversations still scroll inside .zw-msgs. */
  .zw-chat { max-height: 760px; border-right: 1px solid var(--zw-line); }
}
.zw-msgs {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
}
/* Anchor messages to the bottom (chat convention): a short conversation sits
   just above the composer, with headroom above — instead of the greeting
   floating at the top and leaving a big gap before the input. When messages
   overflow, margin-top:auto collapses and normal scrolling takes over. */
.zw-msgs::before { content: ''; margin-top: auto; }

/* Welcome hero — fills the empty top of the chat before the first message.
   Compact on mobile, roomier on desktop; hidden once the chat starts. */
.zw-chat-hero { display: none; }
.zw-chat.zw-has-hero:not(.zw-started) .zw-chat-hero {
  display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center;
  gap: 9px; padding: 2px 2px 12px;
}
/* Let the greeting shrink + scroll (it keeps its base overflow-y:auto) when the
   hero + greeting + chips + composer would otherwise exceed the capped height on
   a narrow phone. On roomy screens there's slack, so it still shows at full size. */
.zw-chat.zw-has-hero:not(.zw-started) .zw-msgs { flex: 0 1 auto; }
@media (min-width: 768px) {
  .zw-chat.zw-has-hero:not(.zw-started) .zw-chat-hero { gap: 12px; padding: 8px 12px 14px; }
}
.zw-hero-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--zw-ink); }
.zw-hero-text { font-size: 12.5px; line-height: 1.5; color: var(--zw-muted); }
.zw-hero-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.zw-hero-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--zw-ink); }
.zw-hero-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; background: var(--zw-accent-soft); color: var(--zw-primary);
}
@media (min-width: 768px) {
  .zw-hero-title { font-size: 18px; line-height: 1.25; }
  .zw-hero-text { font-size: 13px; line-height: 1.55; }
  .zw-hero-steps { gap: 9px; margin-top: 4px; }
  .zw-hero-step { gap: 10px; font-size: 13px; }
  .zw-hero-num { width: 22px; height: 22px; font-size: 11px; }
}

.zw-msg {
  max-width: 88%; padding: 10px 14px; font-size: 13.5px; line-height: 1.5;
  border-radius: 15px; white-space: pre-wrap; word-wrap: break-word;
  animation: zwIn 0.25s ease both;
}
@keyframes zwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zw-msg.bot {
  align-self: flex-start; background: #fff; color: var(--zw-ink);
  border: 1px solid var(--zw-line); border-bottom-left-radius: 5px;
}
.zw-msg.user {
  align-self: flex-end; border-bottom-right-radius: 5px;
  background: var(--zw-accent-soft); color: color-mix(in srgb, var(--zw-primary-deep) 85%, black);
}
.zw-caret {
  display: inline-block; width: 2px; height: 1em; vertical-align: -0.12em; margin-left: 2px;
  background: var(--zw-primary); animation: zwBlink 1s step-end infinite;
}
@keyframes zwBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.zw-typing { align-self: flex-start; display: flex; gap: 6px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--zw-line); border-radius: 15px; border-bottom-left-radius: 5px; }
.zw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--zw-primary); animation: zwBounce 0.7s infinite; }
.zw-typing span:nth-child(2) { animation-delay: 0.12s; }
.zw-typing span:nth-child(3) { animation-delay: 0.24s; }
@keyframes zwBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.zw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.zw-chip {
  padding: 6px 10px; border-radius: 999px; font-size: 11.5px; color: var(--zw-primary);
  background: rgba(20, 32, 44, 0.05); border: 1px solid rgba(20, 32, 44, 0.14);
  transition: background 0.2s;
}
.zw-chip:hover { background: #fff; }

.zw-composer {
  margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(20, 32, 44, 0.14); border-radius: 999px;
  padding: 6px 6px 6px 16px;
}
.zw-composer input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: 13.5px; color: var(--zw-ink);
}
@media (max-width: 640px) { .zw-composer input { font-size: 16px; } } /* no iOS zoom */
.zw-send {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--zw-primary); color: #fff; transition: opacity 0.2s;
}
.zw-send:disabled { opacity: 0.4; cursor: not-allowed; }
.zw-send svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Schedule panel ── */
.zw-panel-desktop { display: none; padding: 20px; background: #fff; }
@media (min-width: 768px) { .zw-panel-desktop { display: block; } }

.zw-svcrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zw-svcrow-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zw-svcic {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--zw-accent), var(--zw-primary));
}
.zw-svcic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.zw-svcrow b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-svcrow small { display: block; font-size: 11.5px; color: var(--zw-muted); }
.zw-panelbadge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--zw-soft); color: var(--zw-primary);
  border: 1px solid color-mix(in srgb, var(--zw-primary) 30%, white);
}

/* Vehicle selector (optional — only when a widget provides vehicleTypes) */
.zw-vehlabel { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zw-dim); margin-bottom: 5px; }
.zw-vehs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.zw-veh {
  padding: 8px 4px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--zw-ink);
  background: #fff; border: 1.5px solid rgba(20, 32, 44, 0.14); transition: all 0.2s;
  text-align: center; line-height: 1.2;
}
.zw-veh.on { background: var(--zw-primary); border-color: var(--zw-primary); color: #fff; }
.zw-veh:hover:not(.on) { border-color: var(--zw-primary); }

.zw-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.zw-svc {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--zw-ink);
  background: #fff; border: 1.5px solid rgba(20, 32, 44, 0.14); transition: all 0.2s;
  text-align: center; line-height: 1.25;
}
.zw-svc-info { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.zw-svc-name { overflow: hidden; text-overflow: ellipsis; }
.zw-svc-dur { display: none; }
.zw-svc-price { font-size: 10px; font-weight: 600; color: var(--zw-dim); }
.zw-svc.on { background: var(--zw-primary); border-color: var(--zw-primary); color: #fff; }
.zw-svc.on .zw-svc-price { color: rgba(255, 255, 255, 0.75); }
.zw-svc:hover:not(.on) { border-color: var(--zw-primary); }

/* "Popular" badge on the featured service */
.zw-svc-feat { position: relative; }
.zw-svc-pop {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.6;
  background: var(--zw-accent); color: #fff; box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--zw-accent) 70%, transparent);
}

/* Flash pulse — the panel visibly reacts when the conversation moves a choice */
@keyframes zwFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--zw-accent) 55%, transparent); }
  35% { transform: scale(1.06); box-shadow: 0 0 0 5px color-mix(in srgb, var(--zw-accent) 28%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.zw-flash { animation: zwFlash 0.7s ease-out; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .zw-flash { animation: none; } }

/* Mobile: services become a clear single-column menu — name + duration on the
   left, price prominent on the right. The 3-col grid is unreadable at ~100px. */
@media (max-width: 767px) {
  .zw-svcs { grid-template-columns: 1fr; gap: 7px; }
  .zw-svc { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 11px 14px; }
  .zw-svc-info { flex-direction: row; align-items: baseline; gap: 8px; flex: 1; }
  .zw-svc-name { font-size: 14px; font-weight: 600; }
  .zw-svc-dur { display: inline; font-size: 11px; font-weight: 500; color: var(--zw-dim); white-space: nowrap; }
  .zw-svc.on .zw-svc-dur { color: rgba(255, 255, 255, 0.7); }
  .zw-svc-price { font-size: 15px; font-weight: 700; color: var(--zw-primary); }
  .zw-svc.on .zw-svc-price { color: #fff; }
  /* Popular badge flows inline next to the name on the wide mobile row */
  .zw-svc-pop { position: static; transform: none; align-self: center; box-shadow: none; }
}

.zw-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.zw-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--zw-ink);
  background: #fff; border: 1.5px solid rgba(20, 32, 44, 0.14); transition: all 0.2s;
  font-variant-numeric: tabular-nums;
}
.zw-day small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zw-dim); }
.zw-day.on { background: var(--zw-primary); border-color: var(--zw-primary); color: #fff; }
.zw-day.on small { color: rgba(255, 255, 255, 0.75); }
.zw-day:hover:not(.on) { border-color: var(--zw-primary); }

.zw-times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.zw-time {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--zw-ink);
  background: #fff; border: 1.5px solid rgba(20, 32, 44, 0.14); transition: all 0.2s;
  font-variant-numeric: tabular-nums;
}
.zw-time small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zw-dim); }
.zw-time.on { background: var(--zw-soft-strong); border-color: var(--zw-primary); box-shadow: inset 0 0 0 1px var(--zw-primary); }
.zw-time:hover:not(.on):not(:disabled) { border-color: var(--zw-primary); }
.zw-time:disabled { color: rgba(20, 32, 44, 0.3); text-decoration: line-through; cursor: not-allowed; }

.zw-fields { display: grid; gap: 6px; margin-bottom: 12px; }
.zw-fields input {
  width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--zw-ink);
  background: #fff; border: 1.5px solid rgba(20, 32, 44, 0.14); outline: none; transition: border-color 0.2s;
}
.zw-fields input:focus { border-color: var(--zw-primary); }
.zw-fields input.err { border-color: #d0021b; background: #fdf3f3; }

.zw-confirm {
  width: 100%; padding: 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  background: var(--zw-accent); color: #fff;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--zw-accent) 70%, transparent);
  transition: transform 0.2s;
}
.zw-confirm:hover { transform: translateY(-1px); }
.zw-trust { text-align: center; font-size: 11px; color: var(--zw-dim); margin-top: 10px; line-height: 1.5; }

/* Booked state */
.zw-done { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px 8px; }
.zw-done-ic {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--zw-soft-strong); color: var(--zw-primary);
  animation: zwPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Celebratory reveal of the booked state */
@keyframes zwPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes zwRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.zw-done b, .zw-done p, .zw-done .zw-again { animation: zwRise 0.5s ease-out both; }
.zw-done b { animation-delay: 0.12s; }
.zw-done p { animation-delay: 0.2s; }
.zw-done .zw-again { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .zw-done-ic, .zw-done b, .zw-done p, .zw-done .zw-again { animation: none; } }
.zw-done-ic svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.zw-done b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.zw-done p { font-size: 14px; color: var(--zw-muted); line-height: 1.55; }
.zw-done .zw-note { font-size: 12px; color: var(--zw-dim); }
.zw-done .zw-demo-note { font-size: 11px; color: rgba(20, 32, 44, 0.35); }
.zw-again {
  margin-top: 8px; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--zw-accent); color: #fff;
}

/* ── Mobile booking bar (day-strip peek) ── */
.zw-barwrap { display: block; background: var(--zw-chat-bg); }
@media (min-width: 768px) { .zw-barwrap { display: none; } }
.zw-bar {
  width: 100%; border-radius: 18px 18px 0 0; padding: 8px 16px 12px;
  background: #fff; border-top: 1px solid rgba(20, 32, 44, 0.08);
  box-shadow: 0 -12px 26px -14px rgba(3, 10, 20, 0.4);
}
.zw-bar-head { display: flex; flex-direction: column; gap: 4px; width: 100%; background: transparent; }
.zw-handle { margin: 0 auto; width: 36px; height: 4px; border-radius: 999px; background: rgba(20, 32, 44, 0.18); }
.zw-bar-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.zw-bar-title {
  flex: 1; min-width: 0; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--zw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zw-bar-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--zw-soft); color: var(--zw-primary);
  border: 1px solid color-mix(in srgb, var(--zw-primary) 30%, white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%;
}
.zw-chev {
  position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--zw-accent); color: #fff;
}
.zw-chev svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.zw-dot {
  position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: #f3902e; border: 2px solid #fff; animation: zwPulse 1.4s infinite;
}
@keyframes zwPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.zw-strip { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; padding: 0 2px 2px; }
.zw-strip .zw-day { flex-direction: row; align-items: baseline; gap: 6px; padding: 8px 12px; flex-shrink: 0; font-size: 13.5px; }
.zw-bar-booked {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px;
  border-radius: 10px; width: 100%; text-align: left;
  background: var(--zw-soft); border: 1px solid color-mix(in srgb, var(--zw-primary) 30%, white);
}
.zw-bar-booked .ic {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--zw-primary); color: #fff;
}
.zw-bar-booked .ic svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.zw-bar-booked span { font-size: 12.5px; color: var(--zw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Bottom sheet ── */
.zw-overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(10, 20, 30, 0.35); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.zw-booker[data-sheet="open"] .zw-overlay { opacity: 1; pointer-events: auto; }
.zw-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  border-radius: 20px 20px 0 0; background: #fff; max-height: 88%;
  overflow-y: auto; box-shadow: 0 -20px 50px -20px rgba(3, 10, 20, 0.4);
  transform: translateY(102%); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.zw-booker[data-sheet="open"] .zw-sheet { transform: translateY(0); }
@media (min-width: 768px) { .zw-overlay, .zw-sheet { display: none; } }
.zw-sheet-top {
  position: sticky; top: 0; background: #fff; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 4px;
}
.zw-sheet-top .sp { width: 36px; }
.zw-sheet-close {
  width: 36px; height: 36px; border-radius: 50%; margin-right: -6px;
  display: flex; align-items: center; justify-content: center; color: var(--zw-muted);
  background: transparent;
}
.zw-sheet-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.zw-sheet-panel { padding: 4px 16px 20px; }

/* ── Powered by ── */
.zw-powered {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; font-size: 11.5px; font-weight: 500; color: var(--zw-dim);
  text-decoration: none; border-top: 1px solid rgba(20, 32, 44, 0.08);
  background: color-mix(in srgb, var(--zw-primary) 2%, #fdfefe);
  transition: color 0.2s;
}
.zw-powered:hover { color: var(--zw-primary); }
.zw-powered b { font-weight: 700; color: var(--zw-muted); }
.zw-orb {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 50% 38%, #ffdca6 0%, #f3902e 45%, #c95f12 100%);
  box-shadow: 0 0 5px rgba(243, 144, 46, 0.55);
}