/**
 * Support Center widget.
 *
 * Two rules govern this file:
 *
 * 1. Inherit, don't impose. Every colour reads a theme token first
 *    (--color-bg-elevated, --color-text, …) with a literal fallback, so the
 *    widget matches the theme's dark/light toggle for free and still looks
 *    deliberate on a theme that defines nothing.
 * 2. Logical properties throughout (inset-inline, margin-inline,
 *    border-start-start-radius). The widget flips for Persian and Arabic
 *    without a separate RTL stylesheet - the only direction-aware bit left is
 *    which corner it sits in, which is a setting rather than a text direction.
 *
 * Everything is scoped under .jsc-root, and every selector is a single class,
 * so no theme rule can leak in and nothing here can leak out.
 */

.jsc-root {
  --jsc-accent: #ff6a00;
  --jsc-accent-contrast: #fff;
  --jsc-surface: var(--color-bg-elevated, #141414);
  --jsc-surface-2: var(--color-surface-glass, rgb(255 255 255 / 4%));
  --jsc-text: var(--color-text, #f5f5f5);
  --jsc-text-muted: var(--color-text-muted, #a3a3a3);
  --jsc-border: var(--color-border, rgb(255 255 255 / 10%));
  --jsc-shadow: var(--shadow-elevated, 0 20px 60px rgb(0 0 0 / 45%));
  --jsc-radius: 18px;
  --jsc-offset-x: 24px;
  --jsc-offset-y: 24px;
  --jsc-panel-width: 380px;
  --jsc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Dozed launcher: the visible dot, and the invisible square around it that
     actually catches the pointer. Keeping them separate is what lets the dot
     be genuinely tiny without becoming a target nobody can hit. */
  --jsc-dot-size: 10px;
  --jsc-dot-hit: 56px;

  position: fixed;
  z-index: 99990;
  inset-block-end: var(--jsc-offset-y);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--jsc-text);
}

/**
 * Physical `left`/`right` here, not the logical equivalents, even though the
 * rest of this file is logical throughout.
 *
 * The class is already the *outcome* of a direction decision: `position: auto`
 * is resolved to a concrete corner in PHP by `is_rtl()`. Using
 * `inset-inline-start` would apply that flip a second time, and an RTL page
 * asking for the left corner would land on the right.
 */
.jsc-root--right {
  right: var(--jsc-offset-x);
}

.jsc-root--left {
  left: var(--jsc-offset-x);
}

.jsc-root *,
.jsc-root *::before,
.jsc-root *::after {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Launcher
 * ---------------------------------------------------------------------- */

.jsc-launcher {
  display: flex;
  align-items: center;
  /* gap: 10px; */
  padding: 0;
  margin: 0;
  margin-inline-start: auto;
  font: inherit;
  color: var(--jsc-accent-contrast);
  cursor: pointer;
  background: var(--jsc-accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
  transition:
    transform 0.28s var(--jsc-ease),
    box-shadow 0.28s var(--jsc-ease),
    background-color 0.2s linear;

  /* Anchor for the hit area and the ping ring below. */
  position: relative;

  /* Grown from zero once the script decides the widget is live, so it never
	   flashes in at full size on a slow connection.

	   `backwards`, not `forwards`: a forwards fill keeps holding the final
	   `transform` after the animation ends, which outranks every later
	   declaration - the hover lift never applied, and any rule that swapped
	   `animation` (the attention nudge, the doze ping) dropped that fill and
	   snapped the button back to the base `scale(0)`, i.e. the launcher
	   vanished a few seconds after load. `backwards` only pre-applies the
	   *from* state, so nothing lingers. */
  animation: jsc-launcher-in 0.5s var(--jsc-ease) backwards;
}

@keyframes jsc-launcher-in {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.jsc-launcher:hover {
  box-shadow: 0 14px 38px rgb(0 0 0 / 32%);
  transform: translateY(-2px);
}

.jsc-launcher:focus-visible {
  outline: 3px solid var(--jsc-accent);
  outline-offset: 3px;
}

/* Invisible pointer target - the reason a 10px dot can still be hovered with a
   mouse and tapped with a thumb.

   Pinned to the corner the widget is anchored in, NOT centred on the button.
   Centred, the box moves as the button grows and shrinks, so the hover
   boundary moves with it: a pointer resting near the edge fell in and out of
   the target and the launcher flickered open/closed. Anchored to the corner
   the box never moves, and the awake bubble is strictly larger than it, so
   hover can only be gained by growing - never lost. */
.jsc-launcher::before {
  position: absolute;
  inset-block-end: 0;
  width: var(--jsc-dot-hit);
  height: var(--jsc-dot-hit);
  content: "";
  border-radius: 999px;
}

.jsc-root--right .jsc-launcher::before {
  right: 0;
}

.jsc-root--left .jsc-launcher::before {
  left: 0;
}

/* Ping ring. Lives on a pseudo-element rather than on the button so the doze
   pulse never has to touch `animation` on .jsc-launcher itself - see the
   `backwards` note above. */
.jsc-launcher::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}

.jsc-launcher__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 58px;
  transition:
    width 0.45s var(--jsc-ease),
    height 0.45s var(--jsc-ease);
}

.jsc-launcher__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.3s var(--jsc-ease),
    opacity 0.2s linear;
}

.jsc-launcher:hover .jsc-launcher__icon svg {
  transform: rotate(-8deg) scale(1.08);
}

/* The label collapses to the bubble on small screens and expands on hover on
   large ones - a full-width pill would cover too much of a phone screen. */
.jsc-launcher__label {
  max-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.4s var(--jsc-ease),
    opacity 0.25s linear,
    padding 0.4s var(--jsc-ease);
}

@media (width >= 782px) and (hover: hover) {
  .jsc-launcher:hover .jsc-launcher__label,
  .jsc-launcher:focus-visible .jsc-launcher__label {
    max-width: 200px;
    padding-inline-end: 22px;
    opacity: 1;

    /* Staged: the bubble finishes growing, then the text slides out of it.
       Collapsing has no delay, so leaving feels immediate. */
    transition-delay: 0.14s;
  }
}

/* Fires once, `attention_delay` seconds in. Three pulses is enough to catch a
   glance; more would be nagging. */
.jsc-launcher--attention {
  animation: jsc-nudge 1.1s var(--jsc-ease) 3;
}

@keyframes jsc-nudge {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 10px 30px rgb(0 0 0 / 25%),
      0 0 0 0 rgb(255 106 0 / 45%);
  }

  40% {
    transform: scale(1.06);
    box-shadow:
      0 10px 30px rgb(0 0 0 / 25%),
      0 0 0 16px rgb(255 106 0 / 0%);
  }
}

/* Unread-reply counter on the closed launcher. */
.jsc-launcher__badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #e02020;
  border: 2px solid var(--color-bg, #0a0a0a);
  border-radius: 999px;
  animation: jsc-pop 0.35s var(--jsc-ease);
}

@keyframes jsc-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* -------------------------------------------------------------------------
 * Doze
 *
 * A launcher nobody clicked shrinks to a dot after a few idle seconds and
 * wakes back to the full bubble on hover, focus or tap. Everything here is a
 * transition on the resting state rather than a keyframe animation, so wake
 * and doze are the same motion played in opposite directions and either one
 * can be interrupted halfway without a snap.
 *
 * The state class lives on .jsc-root (not the button) so the panel and badge
 * can react to it too.
 * ---------------------------------------------------------------------- */

.jsc-root--dozed .jsc-launcher {
  box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
}

.jsc-root--dozed .jsc-launcher__icon {
  width: var(--jsc-dot-size);
  height: var(--jsc-dot-size);
}

.jsc-root--dozed .jsc-launcher__icon svg,
.jsc-root--dozed .jsc-launcher:hover .jsc-launcher__icon svg {
  opacity: 0;
  transform: scale(0.2);
}

/* The :hover / :focus-visible variants are spelled out because the expand rule
   above is a class *and* a pseudo-class - it would otherwise out-specify this
   one and pop the text out of a 10px dot during the wake delay. */
.jsc-root--dozed .jsc-launcher__label,
.jsc-root--dozed .jsc-launcher:hover .jsc-launcher__label,
.jsc-root--dozed .jsc-launcher:focus-visible .jsc-launcher__label {
  max-width: 0;
  padding-inline-end: 0;
  opacity: 0;
  transition-delay: 0s;
}

/* Slow breathing ring - enough to read as "alive and clickable", not enough
   to be the thing you look at while reading the page. */
.jsc-root--dozed .jsc-launcher::after {
  opacity: 1;
  animation: jsc-dot-ping 2.8s var(--jsc-ease) infinite;
}

@keyframes jsc-dot-ping {
  0% {
    box-shadow: 0 0 0 0 rgb(255 106 0 / 50%);
  }

  70%,
  100% {
    box-shadow: 0 0 0 12px rgb(255 106 0 / 0%);
  }
}

/* The badge is what makes an unread reply visible, so it stays legible on the
   dot: JS keeps the widget awake while unread > 0, and this is the belt to
   that braces if the two ever disagree. */
.jsc-root--dozed .jsc-launcher__badge {
  inset-block-start: -18px;
  inset-inline-end: -18px;
}

.jsc-launcher-wrap {
  position: relative;
  display: flex;

  /* Physical keywords: `flex-end` would follow the text direction and undo
	   the corner already resolved in PHP. */
  justify-content: right;
}

.jsc-root--left .jsc-launcher-wrap {
  justify-content: left;
}

/* -------------------------------------------------------------------------
 * Panel
 * ---------------------------------------------------------------------- */

.jsc-panel {
  position: absolute;
  inset-block-end: 74px;
  display: flex;
  flex-direction: column;
  width: min(var(--jsc-panel-width), calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 120px));
  overflow: hidden;
  background: var(--jsc-surface);
  border: 1px solid var(--jsc-border);
  border-radius: var(--jsc-radius);
  box-shadow: var(--jsc-shadow);

  /* Scaled out of the corner it belongs to, so opening reads as the panel
	   growing from the launcher rather than sliding in from nowhere. */
  transform-origin: bottom right;
  transition:
    opacity 0.28s var(--jsc-ease),
    transform 0.32s var(--jsc-ease),
    visibility 0.32s;
}

/* Physical, for the same reason as .jsc-root--right / --left above. */
.jsc-root--right .jsc-panel {
  right: 0;
}

.jsc-root--left .jsc-panel {
  left: 0;
  transform-origin: bottom left;
}

.jsc-panel[hidden] {
  display: flex; /* [hidden] would kill the transition; visibility does the hiding. */
}

.jsc-panel:not(.jsc-panel--open) {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(16px);
}

.jsc-panel--open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* On a phone the panel is the screen - a floating card with 16px margins
   wastes the space where the message list needs to be. */
@media (width <= 600px) {
  .jsc-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    max-height: none;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    transform-origin: bottom center;
  }
}

.jsc-panel__header {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--jsc-accent) 0%,
    color-mix(in srgb, var(--jsc-accent) 70%, #fff) 100%
  );
}

.jsc-panel__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgb(255 255 255 / 20%);
  border-radius: 50%;
}

.jsc-panel__avatar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jsc-panel__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.jsc-panel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

.jsc-panel__subtitle {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 2px 0 0;
  font-size: 12.5px;
  color: inherit;
  opacity: 0.88;
}

.jsc-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: #b7f0c4;
  border-radius: 50%;
}

.jsc-dot--online {
  animation: jsc-breathe 2.4s ease-in-out infinite;
}

.jsc-dot--offline {
  background: rgb(255 255 255 / 55%);
}

@keyframes jsc-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(183 240 196 / 70%);
  }

  70% {
    box-shadow: 0 0 0 7px rgb(183 240 196 / 0%);
  }
}

.jsc-panel__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: rgb(255 255 255 / 15%);
  border: 0;
  border-radius: 50%;
  transition:
    background-color 0.2s linear,
    transform 0.2s var(--jsc-ease);
}

.jsc-panel__close:hover {
  background: rgb(255 255 255 / 30%);
  transform: rotate(90deg);
}

.jsc-panel__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.jsc-panel__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Pre-chat form
 * ---------------------------------------------------------------------- */

.jsc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow-y: auto;
  animation: jsc-fade-up 0.35s var(--jsc-ease);
}

@keyframes jsc-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jsc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.jsc-field__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jsc-text-muted);
}

.jsc-input,
.jsc-textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  color: var(--jsc-text);
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
  border-radius: 10px;
  transition:
    border-color 0.2s linear,
    box-shadow 0.2s linear;
}

.jsc-textarea {
  min-height: 84px;
  resize: vertical;
}

.jsc-input:focus,
.jsc-textarea:focus {
  border-color: var(--jsc-accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jsc-accent) 25%, transparent);
}

.jsc-input::placeholder,
.jsc-textarea::placeholder {
  color: var(--jsc-text-muted);
  opacity: 0.75;
}

/* The honeypot. Kept in the layout (not display:none, which some bots skip)
   but off-screen, unfocusable and hidden from assistive tech. */
.jsc-honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.jsc-button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--jsc-accent-contrast);
  cursor: pointer;
  background: var(--jsc-accent);
  border: 0;
  border-radius: 10px;
  transition:
    filter 0.2s linear,
    transform 0.15s var(--jsc-ease);
}

.jsc-button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.jsc-button:disabled {
  cursor: progress;
  opacity: 0.65;
}

.jsc-button--whatsapp {
  color: #fff;
  text-decoration: none;
  background: #25d366;
}

.jsc-button--ghost {
  color: var(--jsc-text);
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
}

.jsc-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.jsc-notice {
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 10px;
}

.jsc-notice--offline {
  color: var(--jsc-text);
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
}

.jsc-notice--error {
  color: #ffd9d9;
  background: rgb(224 32 32 / 14%);
  border: 1px solid rgb(224 32 32 / 40%);
  animation: jsc-shake 0.35s ease-in-out;
}

@keyframes jsc-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.jsc-fineprint {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--jsc-text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Thread
 * ---------------------------------------------------------------------- */

.jsc-thread {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.jsc-msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 82%;
  animation: jsc-msg-in 0.32s var(--jsc-ease) both;
}

@keyframes jsc-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.jsc-msg--visitor {
  align-self: flex-end;
  align-items: flex-end;
}

.jsc-msg--agent,
.jsc-msg--system {
  align-self: flex-start;
  align-items: flex-start;
}

.jsc-msg--system {
  max-width: 100%;
  align-self: center;
  align-items: center;
}

.jsc-msg__bubble {
  padding: 10px 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-radius: 16px;
}

.jsc-msg--visitor .jsc-msg__bubble {
  color: var(--jsc-accent-contrast);
  background: var(--jsc-accent);

  /* The "tail" corner: logical, so it stays on the sender's side in RTL. */
  border-end-end-radius: 5px;
}

.jsc-msg--agent .jsc-msg__bubble {
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
  border-end-start-radius: 5px;
}

.jsc-msg--system .jsc-msg__bubble {
  font-size: 13px;
  color: var(--jsc-text-muted);
  text-align: center;
  background: transparent;
  border: 1px dashed var(--jsc-border);
}

.jsc-msg__meta {
  padding-inline: 4px;
  font-size: 11px;
  color: var(--jsc-text-muted);
}

.jsc-typing {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 12px 14px;
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
  border-radius: 16px;
  border-end-start-radius: 5px;
  animation: jsc-msg-in 0.3s var(--jsc-ease);
}

.jsc-typing span {
  width: 7px;
  height: 7px;
  background: var(--jsc-text-muted);
  border-radius: 50%;
  animation: jsc-bounce 1.3s ease-in-out infinite;
}

.jsc-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.jsc-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes jsc-bounce {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* -------------------------------------------------------------------------
 * Composer
 * ---------------------------------------------------------------------- */

.jsc-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  background: var(--jsc-surface);
  border-block-start: 1px solid var(--jsc-border);
}

.jsc-composer__input {
  flex: 1 1 auto;
  max-height: 120px;
  min-height: 44px;
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  color: var(--jsc-text);
  resize: none;
  background: var(--jsc-surface-2);
  border: 1px solid var(--jsc-border);
  border-radius: 12px;
}

.jsc-composer__input:focus {
  border-color: var(--jsc-accent);
  outline: 0;
}

.jsc-composer__send {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--jsc-accent-contrast);
  cursor: pointer;
  background: var(--jsc-accent);
  border: 0;
  border-radius: 12px;
  transition:
    transform 0.18s var(--jsc-ease),
    filter 0.2s linear;
}

.jsc-composer__send:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(1.06);
}

.jsc-composer__send:disabled {
  cursor: default;
  opacity: 0.45;
}

.jsc-composer__send svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The send arrow points along the reading direction, so it mirrors in RTL. */
[dir="rtl"] .jsc-composer__send svg {
  transform: scaleX(-1);
}

.jsc-counter {
  font-size: 11px;
  color: var(--jsc-text-muted);
  text-align: end;
  padding-inline: 12px;
  padding-block-end: 6px;
}

.jsc-counter--warn {
  color: #e08020;
}

.jsc-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-block-start: 1px solid var(--jsc-border);
}

.jsc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Reduced motion - keep the state changes, drop the movement. The widget is
 * still fully usable with every animation disabled.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .jsc-root *,
  .jsc-root *::before,
  .jsc-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* The dot still shrinks and grows, it just does so instantly. */
  .jsc-root--dozed .jsc-launcher::after {
    opacity: 0;
  }
}