/* Hallmark - component: chat widget - genre: modern-minimal - theme: SST support
 * states: default - hover - focus - active - disabled - loading - error - success
 * contrast: pass
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */
.sst-order-help-chat {
  --sst-ohc-font-body: inherit;
  --sst-ohc-color-accent: var(--sst-ohc-admin-accent, oklch(43% 0.155 345));
  --sst-ohc-color-accent-hover: var(--sst-ohc-admin-accent-hover, oklch(35% 0.13 345));
  --sst-ohc-color-accent-soft: var(--sst-ohc-admin-accent-soft, oklch(95% 0.025 345));
  --sst-ohc-color-accent-ink: var(--sst-ohc-admin-accent-ink, oklch(98% 0.006 345));
  --sst-ohc-color-paper: oklch(98% 0.006 345);
  --sst-ohc-color-panel: oklch(99% 0.004 345);
  --sst-ohc-color-panel-raised: oklch(100% 0.004 345);
  --sst-ohc-color-bot: oklch(95% 0.008 250);
  --sst-ohc-color-ink: oklch(18% 0.012 260);
  --sst-ohc-color-text: oklch(27% 0.016 260);
  --sst-ohc-color-muted: oklch(45% 0.018 260);
  --sst-ohc-color-rule: oklch(87% 0.012 260);
  --sst-ohc-color-rule-strong: oklch(77% 0.018 260);
  --sst-ohc-color-focus: var(--sst-ohc-admin-focus, oklch(60% 0.16 345));
  --sst-ohc-color-success: oklch(42% 0.105 170);
  --sst-ohc-color-success-soft: oklch(94% 0.035 170);
  --sst-ohc-color-error: oklch(50% 0.17 25);
  --sst-ohc-color-error-soft: oklch(95% 0.035 25);
  --sst-ohc-color-transparent: transparent;
  --sst-ohc-shadow-panel: 0 24px 64px oklch(16% 0.012 260 / 0.22), 0 4px 16px oklch(16% 0.012 260 / 0.1);
  --sst-ohc-shadow-launcher: 0 10px 26px oklch(20% 0.03 345 / 0.24);
  --sst-ohc-shadow-card: 0 1px 2px oklch(16% 0.012 260 / 0.06);
  --sst-ohc-gradient-accent: linear-gradient(135deg, var(--sst-ohc-color-accent) 0%, var(--sst-ohc-color-accent-hover) 100%);
  --sst-ohc-space-2xs: 0.25rem;
  --sst-ohc-space-xs: 0.5rem;
  --sst-ohc-space-sm: 0.75rem;
  --sst-ohc-space-md: 1rem;
  --sst-ohc-space-lg: 1.5rem;
  --sst-ohc-radius-sm: 0.375rem;
  --sst-ohc-radius: 0.5rem;
  --sst-ohc-radius-round: 999rem;
  --sst-ohc-text-xs: 0.75rem;
  --sst-ohc-text-sm: 0.875rem;
  --sst-ohc-text-base: 1rem;
  --sst-ohc-text-md: 1.125rem;
  --sst-ohc-dur-micro: 100ms;
  --sst-ohc-dur-short: 180ms;
  --sst-ohc-dur-panel: 260ms;
  --sst-ohc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sst-ohc-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --sst-ohc-z-chat: 1200;
  -webkit-tap-highlight-color: transparent;
  bottom: max(var(--sst-ohc-space-md), env(safe-area-inset-bottom));
  color: var(--sst-ohc-color-ink);
  font-family: var(--sst-ohc-font-body);
  position: fixed;
  right: max(var(--sst-ohc-space-md), env(safe-area-inset-right));
  z-index: var(--sst-ohc-z-chat);
}

.sst-order-help-chat[data-position="bottom-left"] {
  left: max(var(--sst-ohc-space-md), env(safe-area-inset-left));
  right: auto;
}

.sst-order-help-chat[data-position="top-right"] {
  bottom: auto;
  top: max(var(--sst-ohc-space-md), env(safe-area-inset-top));
}

.sst-order-help-chat[data-position="top-left"] {
  bottom: auto;
  left: max(var(--sst-ohc-space-md), env(safe-area-inset-left));
  right: auto;
  top: max(var(--sst-ohc-space-md), env(safe-area-inset-top));
}

.sst-order-help-chat,
.sst-order-help-chat *,
.sst-order-help-chat *::before,
.sst-order-help-chat *::after {
  box-sizing: border-box;
}

.sst-ohc-launcher {
  align-items: center;
  cursor: grab;
  touch-action: manipulation;
  background: var(--sst-ohc-gradient-accent);
  border: 1px solid var(--sst-ohc-color-accent);
  border-radius: var(--sst-ohc-radius-round);
  box-shadow: var(--sst-ohc-shadow-launcher);
  color: var(--sst-ohc-color-accent-ink);
  cursor: pointer;
  display: inline-flex;
  height: 3.5rem;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  position: relative;
  transition: background-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    border-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    transform var(--sst-ohc-dur-micro) var(--sst-ohc-ease-out);
  width: 3.5rem;
}

.sst-order-help-chat[data-dragging="1"] .sst-ohc-launcher {
  cursor: grabbing;
}

.sst-order-help-chat[data-dragging="1"] .sst-ohc-panel {
  transition: none;
}

.sst-ohc-launcher__icon {
  border: 2px solid currentColor;
  border-radius: var(--sst-ohc-radius);
  display: block;
  height: 1.25rem;
  position: relative;
  width: 1.45rem;
}

.sst-ohc-launcher__icon::after {
  background: var(--sst-ohc-color-accent);
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  bottom: -0.34rem;
  content: "";
  height: 0.42rem;
  position: absolute;
  right: 0.2rem;
  transform: rotate(45deg);
  width: 0.42rem;
}

.sst-ohc-launcher__label {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sst-ohc-panel {
  background: var(--sst-ohc-color-panel);
  border: 0;
  border-radius: 0.875rem;
  bottom: 4.25rem;
  box-shadow: var(--sst-ohc-shadow-panel);
  color: var(--sst-ohc-color-ink);
  display: flex;
  flex-direction: column;
  max-height: min(35rem, calc(100dvh - 6rem));
  max-width: calc(100dvw - 1.5rem);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(0.5rem) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--sst-ohc-dur-panel) var(--sst-ohc-ease-out),
    transform var(--sst-ohc-dur-panel) var(--sst-ohc-ease-out),
    visibility 0ms linear var(--sst-ohc-dur-panel);
  visibility: hidden;
  width: 23.5rem;
}

.sst-order-help-chat[data-position="bottom-left"] .sst-ohc-panel {
  left: 0;
  right: auto;
  transform-origin: bottom left;
}

.sst-order-help-chat[data-position="top-right"] .sst-ohc-panel,
.sst-order-help-chat[data-position="top-left"] .sst-ohc-panel {
  bottom: auto;
  top: 4.25rem;
  transform: translateY(-0.5rem) scale(0.98);
  transform-origin: top right;
}

.sst-order-help-chat[data-position="top-left"] .sst-ohc-panel {
  left: 0;
  right: auto;
  transform-origin: top left;
}

.sst-order-help-chat[data-open="1"] .sst-ohc-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0ms;
  visibility: visible;
}

.sst-ohc-header {
  align-items: center;
  background: var(--sst-ohc-gradient-accent);
  border-bottom: 0;
  color: var(--sst-ohc-color-accent-ink);
  display: flex;
  gap: var(--sst-ohc-space-sm);
  justify-content: space-between;
  padding: var(--sst-ohc-space-md) var(--sst-ohc-space-md) 0.9rem;
}

.sst-ohc-heading {
  align-items: center;
  display: flex;
  gap: var(--sst-ohc-space-sm);
  min-width: 0;
}

.sst-ohc-heading__copy {
  min-width: 0;
}

.sst-ohc-avatar {
  align-items: center;
  background: var(--sst-ohc-color-accent);
  border-radius: var(--sst-ohc-radius-round);
  color: var(--sst-ohc-color-accent-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  width: 2rem;
}

.sst-ohc-header .sst-ohc-avatar {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--sst-ohc-color-accent-ink);
  height: 2.35rem;
  width: 2.35rem;
}

.sst-ohc-status-dot {
  background: #2ecc71;
  border-radius: var(--sst-ohc-radius-round);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  display: inline-block;
  height: 0.45rem;
  margin-inline-end: 0.32rem;
  vertical-align: 0.05rem;
  width: 0.45rem;
}

.sst-ohc-title {
  color: var(--sst-ohc-color-accent-ink);
  font-size: var(--sst-ohc-text-md);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.18;
  margin: 0 0 var(--sst-ohc-space-2xs);
  overflow-wrap: anywhere;
}

.sst-ohc-subtitle {
  color: var(--sst-ohc-color-accent-ink);
  font-size: var(--sst-ohc-text-xs);
  line-height: 1.45;
  margin: 0;
  opacity: 0.82;
  overflow-wrap: anywhere;
}

.sst-ohc-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--sst-ohc-radius-round);
  color: var(--sst-ohc-color-accent-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--sst-ohc-text-sm);
  font-weight: 800;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-align: center;
  transition: background-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    border-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    transform var(--sst-ohc-dur-micro) var(--sst-ohc-ease-out);
  width: 2.75rem;
}

.sst-ohc-body {
  background: var(--sst-ohc-color-paper);
  display: flex;
  flex-direction: column;
  gap: var(--sst-ohc-space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sst-ohc-space-md);
}

.sst-ohc-row {
  align-items: flex-end;
  display: flex;
  gap: var(--sst-ohc-space-xs);
}

.sst-ohc-row--bot .sst-ohc-avatar {
  height: 1.75rem;
  width: 1.75rem;
}

.sst-ohc-row--bot .sst-ohc-avatar::before,
.sst-ohc-row--bot .sst-ohc-avatar::after {
  top: 0.77rem;
}

.sst-ohc-row--bot .sst-ohc-avatar::before {
  left: 0.59rem;
}

.sst-ohc-row--bot .sst-ohc-avatar::after {
  right: 0.59rem;
}

.sst-ohc-message {
  background: var(--sst-ohc-color-bot);
  border: 1px solid var(--sst-ohc-color-rule);
  border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
  color: var(--sst-ohc-color-text);
  max-width: 18.75rem;
  padding: var(--sst-ohc-space-sm) var(--sst-ohc-space-md);
  position: relative;
}

.sst-ohc-message--intro {
  background: var(--sst-ohc-color-accent-soft);
  border-color: color-mix(in oklab, var(--sst-ohc-color-accent) 18%, white);
}

.sst-ohc-message--intro::before {
  background: var(--sst-ohc-color-accent-soft);
  border-block-end-color: color-mix(in oklab, var(--sst-ohc-color-accent) 18%, white);
  border-inline-start-color: color-mix(in oklab, var(--sst-ohc-color-accent) 18%, white);
}

.sst-ohc-message::before {
  background: var(--sst-ohc-color-bot);
  border-block-end: 1px solid var(--sst-ohc-color-rule);
  border-inline-start: 1px solid var(--sst-ohc-color-rule);
  bottom: 0.72rem;
  content: "";
  height: 0.52rem;
  left: -0.28rem;
  position: absolute;
  transform: rotate(45deg);
  width: 0.52rem;
}

.sst-ohc-message__title {
  color: var(--sst-ohc-color-ink);
  font-size: var(--sst-ohc-text-sm);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.32;
  margin: 0 0 var(--sst-ohc-space-xs);
  min-width: 0;
  overflow-wrap: anywhere;
}

.sst-ohc-message__text {
  color: var(--sst-ohc-color-text);
  font-size: var(--sst-ohc-text-sm);
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.sst-ohc-message__text + .sst-ohc-message__text {
  margin-top: var(--sst-ohc-space-xs);
}

.sst-ohc-choices,
.sst-ohc-actions {
  display: grid;
  gap: var(--sst-ohc-space-xs);
}

.sst-ohc-choices {
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-choice,
.sst-ohc-action,
.sst-ohc-back {
  border-radius: var(--sst-ohc-radius);
  cursor: pointer;
  touch-action: manipulation;
  font-size: var(--sst-ohc-text-sm);
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    border-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    transform var(--sst-ohc-dur-micro) var(--sst-ohc-ease-out),
    opacity var(--sst-ohc-dur-short) var(--sst-ohc-ease-out);
  white-space: normal;
}

.sst-ohc-choice {
  align-items: center;
  background: var(--sst-ohc-color-panel-raised);
  border: 1px solid var(--sst-ohc-color-rule);
  border-radius: 0.625rem;
  box-shadow: var(--sst-ohc-shadow-card);
  color: var(--sst-ohc-color-ink);
  display: flex;
  font-weight: 600;
  gap: var(--sst-ohc-space-xs);
  justify-content: space-between;
  padding: 0.78rem var(--sst-ohc-space-sm);
  text-align: left;
  width: 100%;
}

.sst-ohc-choice__label {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sst-ohc-choice__arrow {
  color: var(--sst-ohc-color-accent);
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

.sst-ohc-actions {
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-action {
  align-items: center;
  background: var(--sst-ohc-color-panel);
  border: 1px solid var(--sst-ohc-color-accent);
  color: var(--sst-ohc-color-accent);
  display: inline-flex;
  justify-content: center;
  padding: 0.68rem var(--sst-ohc-space-sm);
  text-align: center;
  width: 100%;
}

.sst-ohc-action {
  border-radius: 0.625rem;
}

.sst-ohc-action--link {
  background: var(--sst-ohc-gradient-accent);
  border-color: var(--sst-ohc-color-accent);
  color: var(--sst-ohc-color-accent-ink);
}

.sst-ohc-action--whatsapp {
  background: linear-gradient(135deg, #1eb980 0%, #128c7e 100%);
  border-color: #128c7e;
  border-radius: 0.625rem;
  color: #ffffff;
  gap: 0.5rem;
  white-space: normal;
}

.sst-ohc-action--whatsapp svg {
  flex: 0 0 auto;
  height: 1.1rem;
  width: 1.1rem;
}

.sst-ohc-escalate {
  display: grid;
  justify-items: start;
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-choice--lookup {
  background: var(--sst-ohc-color-accent-soft);
  border-color: color-mix(in oklab, var(--sst-ohc-color-accent) 32%, white);
  color: var(--sst-ohc-color-accent-hover);
}

.sst-ohc-lookup {
  display: grid;
  gap: var(--sst-ohc-space-xs);
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-input {
  background: var(--sst-ohc-color-panel-raised);
  border: 1px solid var(--sst-ohc-color-rule-strong);
  border-radius: 0.625rem;
  color: var(--sst-ohc-color-ink);
  font-family: inherit;
  font-size: var(--sst-ohc-text-sm);
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  width: 100%;
}

.sst-ohc-input:focus {
  outline: 0;
}

.sst-ohc-input:focus-visible {
  border-color: var(--sst-ohc-color-accent);
  outline: 2px solid var(--sst-ohc-color-focus);
  outline-offset: 1px;
}

.sst-ohc-lookup__note {
  color: var(--sst-ohc-color-error);
  font-size: var(--sst-ohc-text-xs);
  font-weight: 600;
  margin: 0;
}

.sst-ohc-lookup__note:empty {
  display: none;
}

.sst-ohc-lookup-result:empty {
  display: none;
}

.sst-ohc-message--result {
  background: var(--sst-ohc-color-success-soft);
  border-color: color-mix(in oklab, var(--sst-ohc-color-success) 26%, white);
}

.sst-ohc-message--result::before {
  background: var(--sst-ohc-color-success-soft);
  border-block-end-color: color-mix(in oklab, var(--sst-ohc-color-success) 26%, white);
  border-inline-start-color: color-mix(in oklab, var(--sst-ohc-color-success) 26%, white);
}

.sst-ohc-message__text--status {
  color: var(--sst-ohc-color-ink);
  font-weight: 600;
}

.sst-ohc-feedback {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sst-ohc-space-xs);
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-feedback__prompt {
  color: var(--sst-ohc-color-muted);
  flex-basis: 100%;
  font-size: var(--sst-ohc-text-xs);
  font-weight: 600;
}

.sst-ohc-feedback__btn {
  background: var(--sst-ohc-color-panel-raised);
  border: 1px solid var(--sst-ohc-color-rule);
  border-radius: var(--sst-ohc-radius-round);
  box-shadow: var(--sst-ohc-shadow-card);
  color: var(--sst-ohc-color-text);
  cursor: pointer;
  font-size: var(--sst-ohc-text-xs);
  font-weight: 700;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  touch-action: manipulation;
  transition: background-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    border-color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
    color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out);
}

.sst-ohc-feedback__btn--no {
  border-color: color-mix(in oklab, var(--sst-ohc-color-accent) 34%, white);
  color: var(--sst-ohc-color-accent);
}

.sst-ohc-feedback__btn:focus {
  outline: 0;
}

.sst-ohc-feedback__btn:focus-visible {
  outline: 2px solid var(--sst-ohc-color-focus);
  outline-offset: 2px;
}

.sst-ohc-feedback__thanks {
  color: var(--sst-ohc-color-success);
  font-size: var(--sst-ohc-text-xs);
  font-weight: 700;
}

.sst-ohc-hours {
  color: var(--sst-ohc-color-muted);
  font-size: var(--sst-ohc-text-xs);
  line-height: 1.5;
  margin: 0;
  padding-inline-start: calc(1.75rem + var(--sst-ohc-space-xs));
}

.sst-ohc-escalate-trigger {
  background: var(--sst-ohc-color-transparent);
  border: 0;
  touch-action: manipulation;
  border-radius: var(--sst-ohc-radius);
  color: var(--sst-ohc-color-muted);
  cursor: pointer;
  font-size: var(--sst-ohc-text-xs);
  font-weight: 700;
  min-height: 2.25rem;
  padding: 0.35rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--sst-ohc-dur-short) var(--sst-ohc-ease-out);
}

.sst-ohc-escalate-trigger:focus {
  outline: 0;
}

.sst-ohc-escalate-trigger:focus-visible {
  outline: 2px solid var(--sst-ohc-color-focus);
  outline-offset: 3px;
}

.sst-ohc-back {
  align-self: center;
  background: var(--sst-ohc-color-transparent);
  border: 0;
  color: var(--sst-ohc-color-muted);
  min-height: 2.75rem;
  padding: 0.55rem var(--sst-ohc-space-sm);
  text-align: center;
}

.sst-ohc-launcher:focus,
.sst-ohc-close:focus,
.sst-ohc-choice:focus,
.sst-ohc-action:focus,
.sst-ohc-back:focus {
  outline: 0;
}

.sst-ohc-launcher:focus-visible,
.sst-ohc-close:focus-visible,
.sst-ohc-choice:focus-visible,
.sst-ohc-action:focus-visible,
.sst-ohc-back:focus-visible {
  outline: 2px solid var(--sst-ohc-color-focus);
  outline-offset: 3px;
}

.sst-ohc-launcher:active,
.sst-ohc-close:active,
.sst-ohc-choice:active,
.sst-ohc-action:active,
.sst-ohc-back:active {
  transform: translateY(1px);
}

.sst-ohc-launcher:disabled,
.sst-ohc-close:disabled,
.sst-ohc-choice:disabled,
.sst-ohc-action:disabled,
.sst-ohc-back:disabled,
.sst-ohc-launcher[aria-disabled="true"],
.sst-ohc-close[aria-disabled="true"],
.sst-ohc-choice[aria-disabled="true"],
.sst-ohc-action[aria-disabled="true"],
.sst-ohc-back[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.54;
  pointer-events: none;
}

.sst-ohc-choice[data-state="loading"]::after,
.sst-ohc-action[data-state="loading"]::after {
  animation: sst-ohc-spin 700ms linear infinite;
  border: 2px solid var(--sst-ohc-color-rule);
  border-block-start-color: var(--sst-ohc-color-accent);
  border-radius: var(--sst-ohc-radius-round);
  content: "";
  height: 0.9rem;
  margin-inline-start: var(--sst-ohc-space-xs);
  width: 0.9rem;
}

.sst-ohc-choice[data-state="error"],
.sst-ohc-action[data-state="error"] {
  background: var(--sst-ohc-color-error-soft);
  border-color: var(--sst-ohc-color-error);
  color: var(--sst-ohc-color-error);
}

.sst-ohc-choice[data-state="success"],
.sst-ohc-action[data-state="success"] {
  background: var(--sst-ohc-color-success-soft);
  border-color: var(--sst-ohc-color-success);
  color: var(--sst-ohc-color-success);
}

@media (hover: hover) and (pointer: fine) {
  .sst-ohc-launcher:hover {
    background: var(--sst-ohc-color-accent-hover);
    border-color: var(--sst-ohc-color-accent-hover);
    transform: translateY(-1px);
  }

  .sst-ohc-launcher:hover .sst-ohc-launcher__icon::after {
    background: var(--sst-ohc-color-accent-hover);
  }

  .sst-ohc-close:hover,
  .sst-ohc-choice:hover,
  .sst-ohc-action:hover,
  .sst-ohc-back:hover {
    transform: translateY(-1px);
  }

  .sst-ohc-close:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--sst-ohc-color-accent-ink);
  }

  .sst-ohc-choice:hover {
    border-color: var(--sst-ohc-color-accent);
    color: var(--sst-ohc-color-accent);
  }

  .sst-ohc-action:hover {
    background: var(--sst-ohc-color-accent-soft);
    color: var(--sst-ohc-color-accent-hover);
  }

  .sst-ohc-action--link:hover {
    background: var(--sst-ohc-color-accent-hover);
    border-color: var(--sst-ohc-color-accent-hover);
    color: var(--sst-ohc-color-accent-ink);
  }

  .sst-ohc-action--whatsapp:hover {
    background: var(--sst-ohc-color-whatsapp-hover, #0e766d);
    border-color: var(--sst-ohc-color-whatsapp-hover, #0e766d);
    color: #ffffff;
  }

  .sst-ohc-back:hover {
    color: var(--sst-ohc-color-accent);
  }

  .sst-ohc-escalate-trigger:hover {
    color: var(--sst-ohc-color-accent);
  }
}

@keyframes sst-ohc-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sst-order-help-chat *,
  .sst-order-help-chat *::before,
  .sst-order-help-chat *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  .sst-ohc-panel {
    transform: none;
  }
}

@media (max-width: 32.5rem) {
  /* While the sheet is open the page behind is frozen: no background text
   * movement while the customer is choosing a topic. */
  html.sst-ohc-lock,
  html.sst-ohc-lock body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .sst-order-help-chat {
    bottom: calc(6.25rem + env(safe-area-inset-bottom));
    right: max(var(--sst-ohc-space-sm), env(safe-area-inset-right));
  }

  .sst-order-help-chat[data-position="bottom-left"] {
    bottom: calc(6.25rem + env(safe-area-inset-bottom));
    left: max(var(--sst-ohc-space-sm), env(safe-area-inset-left));
    right: auto;
  }

  .sst-order-help-chat[data-position="top-right"] {
    bottom: auto;
    top: max(var(--sst-ohc-space-sm), env(safe-area-inset-top));
  }

  .sst-order-help-chat[data-position="top-left"] {
    bottom: auto;
    left: max(var(--sst-ohc-space-sm), env(safe-area-inset-left));
    right: auto;
    top: max(var(--sst-ohc-space-sm), env(safe-area-inset-top));
  }

  /* Bottom sheet: fixed to the viewport so the panel always fits, no matter
   * where the launcher has been dragged. The launcher hides while open.
   * No slide/zoom animation on phones: text must not move while the customer
   * is about to tap a choice — fade only. */
  .sst-order-help-chat[data-position] .sst-ohc-panel {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 0.75rem;
    max-height: min(34rem, calc(100dvh - 4.5rem));
    max-width: none;
    position: fixed;
    right: 0.75rem;
    top: auto;
    transform: none;
    transition: opacity var(--sst-ohc-dur-short) var(--sst-ohc-ease-out),
      visibility 0ms linear var(--sst-ohc-dur-short);
    width: auto;
  }

  .sst-order-help-chat[data-position][data-open="1"] .sst-ohc-panel {
    transform: none;
    transition-delay: 0ms;
  }

  /* Press feedback must not displace text on touch screens. */
  .sst-ohc-launcher:active,
  .sst-ohc-close:active,
  .sst-ohc-choice:active,
  .sst-ohc-action:active,
  .sst-ohc-back:active,
  .sst-ohc-escalate-trigger:active {
    transform: none;
  }

  .sst-ohc-choice:active,
  .sst-ohc-action:active {
    background: var(--sst-ohc-color-accent-soft);
  }

  .sst-order-help-chat[data-open="1"] .sst-ohc-launcher {
    opacity: 0;
    pointer-events: none;
  }

  .sst-ohc-body,
  .sst-ohc-header {
    padding: var(--sst-ohc-space-sm);
  }

  /* Vertical panning only inside the sheet: no sideways gestures. */
  .sst-ohc-body {
    touch-action: pan-y;
  }

  .sst-ohc-message {
    max-width: min(20rem, calc(100dvw - 6rem));
  }
}