/**
 * The stand-in launcher, and nothing else.
 *
 * This stylesheet is enqueued only on pages that can render the launcher, which is every mode
 * except `immediate`. It styles one button and one status message and deliberately touches no other
 * selector, because it is loaded into somebody else's theme.
 *
 * Two custom properties carry the operator's brand colour and the text colour the plugin computed
 * to sit on it. They are declared here with the defaults from the product's own configuration, so
 * the launcher is legible even when the inline override is stripped by an optimisation plugin.
 */

.sdcc-chat-launcher {
  --sdcc-chat-color: #000000;
  --sdcc-chat-text: #ffffff;

  position: fixed;
  bottom: 20px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100vw - 40px);
  font-family: inherit;
}

.sdcc-chat-launcher--right {
  right: 20px;
  align-items: flex-end;
}

.sdcc-chat-launcher--left {
  left: 20px;
  align-items: flex-start;
}

.sdcc-chat-launcher__button {
  /*
   * 44px rather than the 24px WCAG 2.2 AA actually asks for (2.5.8, Target Size (Minimum)). This is
   * the AAA figure (2.5.5, Target Size (Enhanced)), and it is what a thumb needs on a phone at a
   * venue, which is where most of this button's presses come from.
   */
  min-height: 44px;
  box-sizing: border-box;
  padding: 11px 22px;
  border: 0;
  border-radius: 24px;
  background: var(--sdcc-chat-color);
  color: var(--sdcc-chat-text);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/*
 * A visible focus ring in both directions: the brand colour reads against a light page, and the
 * white offset ring reads against a dark one, so the pair survives whatever the theme puts behind
 * the launcher. `:focus` first for the ring itself, then the standard opt-out so a mouse click does
 * not leave one behind on browsers that support `:focus-visible`.
 */
.sdcc-chat-launcher__button:focus {
  outline: 3px solid var(--sdcc-chat-color);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px #ffffff,
    0 4px 14px rgba(0, 0, 0, 0.28);
}

.sdcc-chat-launcher__button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.sdcc-chat-launcher__button[disabled] {
  cursor: progress;
  opacity: 0.75;
}

/*
 * The failure message. `:empty` is what keeps it invisible for the whole of a normal page view:
 * the element exists from the start so that assistive technology has a live region to watch, and it
 * has nothing to announce until something goes wrong.
 */
.sdcc-chat-launcher__status {
  max-width: 280px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #767676;
  border-radius: 10px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 20px;
}

.sdcc-chat-launcher__status:empty {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sdcc-chat-launcher__button {
    transition:
      transform 120ms ease-out,
      box-shadow 120ms ease-out;
  }

  .sdcc-chat-launcher__button:hover:not([disabled]) {
    transform: translateY(-1px);
  }
}

@media print {
  .sdcc-chat-launcher {
    display: none;
  }
}