/**
 * Salesy storefront chat — the floating panel shell: the launcher button, the
 * panel it opens, the header controls, the merchant's size presets, and the
 * full-screen treatment below the tablet breakpoint.
 *
 * Everything INSIDE the panel is widget-core.css. This file only positions and
 * frames it.
 *
 * The same three isolation mechanisms bind here as in core — every rule scoped
 * `#salesy-root …`, `!important` on any forced property the reset would
 * otherwise zero, and a priority-9999 enqueue. See widget-core.css's header
 * for why, and for the sweep that enforces it across every widget*.css.
 *
 * This file also satisfies core's one contract: `.salesy-panel` declares
 * `container-type: inline-size`, which is what makes core's `@container`
 * queries — the intro's two-column switch and the collage fan — match at all.
 *
 * The 768px breakpoint at the bottom is stated in TWO places on purpose and
 * they are coupled: here, and `wideEnoughToReopen()` in widget-shell-panel.js.
 * Below it the panel IS the screen, so a boot-time reopen would cover the page
 * the shopper just navigated to. Moving one without the other is the bug that
 * pairing guards against.
 */

/* Size presets. Landscape on purpose: the opening screen is a two-column
   intro, and a portrait box cannot hold one. (Must follow the root block:
   same specificity, later wins.) */
#salesy-root.salesy-size-compact {
  --salesy-panel-width: 520px;
  --salesy-panel-height: 400px;
}

#salesy-root.salesy-size-standard {
  --salesy-panel-width: 680px;
  --salesy-panel-height: 520px;
}

#salesy-root.salesy-size-tall {
  --salesy-panel-width: 720px;
  --salesy-panel-height: 640px;
}

/* Expanded: the shopper's own choice, replacing whichever preset the merchant
   picked. Still a class, still bounded by the panel's max-width/max-height. */
#salesy-root.salesy-size-expanded {
  --salesy-panel-width: 1040px;
  --salesy-panel-height: 720px;
}

#salesy-root .salesy-panel {
  width: var(--salesy-panel-width);
  height: var(--salesy-panel-height);
  max-width: calc(100vw - 2 * var(--salesy-offset-side));
  max-height: calc(100vh - var(--salesy-offset-bottom) - 88px);
  max-height: calc(100dvh - var(--salesy-offset-bottom) - 88px);
  background-color: var(--salesy-canvas);
  background-image: radial-gradient(
    130% 90% at 80% -10%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  color: var(--salesy-ink);
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--salesy-radius-panel);
  box-shadow: var(--salesy-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* The intro's one/two-column switch keys off the PANEL's width, not the
     viewport's — width here is a merchant preset, not a device fact. */
  container-type: inline-size;
}

/* Header: no rule, no fill, no title. The store's name is the panel's
   aria-label and the launcher's — putting it on screen as well spent the widest
   row in the panel on something the shopper had just clicked. */
#salesy-root .salesy-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 14px 4px;
}

/* The close glyph is a dash, not a cross, because that is what the control
   does: the conversation survives (see the on-device log), so this minimises
   the panel rather than ending anything. The accessible name is unchanged. */
#salesy-root .salesy-close {
  font-size: 20px !important;
}

/* Below tablet the panel IS the screen: a floating 680px rectangle over a
   phone's product page helps nobody, and the launcher would float on top of
   its own panel, so it goes. Gated on .salesy-open (set by setOpen) rather
   than on the panel, because CSS cannot reach a parent from a child's state.
   Nothing here is a dimension written from a setting — offsets still come from
   the validated custom properties, they are simply unused while full screen. */
@media (max-width: 767px) {
  #salesy-root.salesy-open .salesy-panel {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  #salesy-root.salesy-open .salesy-toggle {
    display: none;
  }

  #salesy-root .salesy-header {
    padding: calc(14px + env(safe-area-inset-top)) 12px 4px;
  }

  #salesy-root .salesy-log {
    padding: 6px 14px 12px;
  }

  #salesy-root .salesy-chips,
  #salesy-root .salesy-disclaimer,
  #salesy-root .salesy-cart,
  #salesy-root .salesy-deliverysummary {
    padding-left: 14px;
    padding-right: 14px;
  }

  #salesy-root .salesy-form {
    margin: 2px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  }
}