/**
 * ZP Inbox — chat launcher.
 *
 * Everything is `position: fixed`, so the launcher is out of normal flow and
 * CLS is 0 by construction rather than by tuning — it cannot push a single
 * pixel of the page, whenever it arrives.
 *
 * Selectors are all `.zpi-*` and none of them reach outside the launcher's own
 * root: this stylesheet loads on a customer's front end, next to a theme we
 * have never seen, and it must not be the reason anything else moves.
 */

.zpi-root {
  --zpi-brand: #0a65f7;
  --zpi-z: 99998;
  --zpi-x: 20px;
  --zpi-y: 20px;
  --zpi-surface: #fff;
  --zpi-text: #1f2329;
  --zpi-muted: #646970;
  --zpi-border: #e7e8ec;

  position: fixed;
  bottom: var(--zpi-y);
  z-index: var(--zpi-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* The root is only ever as big as its children; the page behind it stays
     clickable everywhere else. */
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.4;
}

.zpi-right { right: var(--zpi-x); }
.zpi-left { left: var(--zpi-x); align-items: flex-start; }

.zpi-root > * { pointer-events: auto; }

/* ── Button ──────────────────────────────────────────────────────────────── */

.zpi-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 48px clears the 44px minimum touch target with room for a focus ring. */
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--zpi-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zpi-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgb(0 0 0 / 22%); }
.zpi-button:focus-visible { outline: 3px solid var(--zpi-brand); outline-offset: 3px; }
.zpi-button .zpi-icon { width: 22px; height: 22px; fill: currentcolor; flex: none; }
.zpi-button-label:empty { display: none; }

/* On a phone the label is dropped and the button becomes a circle: the corner
   it lives in is small, and a wide pill there is what covers a theme's sticky
   add-to-cart bar. */
@media (max-width: 600px) {
  .zpi-button { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .zpi-button-label { display: none; }
}

/* ── Panel ───────────────────────────────────────────────────────────────── */

.zpi-panel {
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--zpi-border);
  border-radius: 14px;
  background: var(--zpi-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 16%);
  animation: zpi-in 0.16s ease-out;
}

.zpi-panel[hidden] { display: none; }

@keyframes zpi-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.zpi-greeting {
  margin: 0 0 10px;
  color: var(--zpi-text);
  font-size: 14px;
}

.zpi-list { display: flex; flex-direction: column; gap: 6px; }

/* ── Rows ────────────────────────────────────────────────────────────────── */

.zpi-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--zpi-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease;
}

.zpi-item:hover { background: #f4f5f7; }
.zpi-item:focus-visible { outline: 2px solid var(--zpi-brand); outline-offset: 1px; }

/* `--zpi-ic` is set per row by the JS when the channel has a real brand mark,
   and falls back to the site's colour for our own glyphs. Brand marks are never
   recoloured: CC0 waives copyright, not trademark, and every one of these
   brands' guidelines forbids restyling the logo. */
.zpi-item .zpi-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--zpi-ic, var(--zpi-brand)) 12%, transparent);
  fill: var(--zpi-ic, var(--zpi-brand));
  flex: none;
  box-sizing: border-box;
}

.zpi-item-label { display: flex; flex-direction: column; }

.zpi-item-note {
  color: var(--zpi-muted);
  font-size: 12px;
  font-weight: 400;
}

/* Outside its hours a channel stays visible and says when someone will answer.
   A business that answers tomorrow is not a business that is gone. */
.zpi-item.is-closed { cursor: default; opacity: 0.62; }
.zpi-item.is-closed:hover { background: none; }

/* ── Preferences ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .zpi-panel { animation: none; }
  .zpi-button { transition: none; }
  .zpi-button:hover { transform: none; }
}

@media (prefers-color-scheme: dark) {
  .zpi-root {
    --zpi-surface: #1f2329;
    --zpi-text: #f0f0f1;
    --zpi-muted: #a7aaad;
    --zpi-border: #33383d;
  }

  .zpi-item:hover { background: #2c3238; }
}