/* Aban Chat 9.2 — public styles are isolated from the host theme. */
@font-face {
  font-family: AbanChat;
  src: url('./fonts/MorabbaVF.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
#aban-live-widget {
  /* =========================================================================
     WIDGET DESIGN TOKENS
     The brand group (primary/accent/start/end/launch-text) is written inline
     by PHP from the owner's colour settings and must stay authoritative — an
     interior skin never repaints the brand.
     The chrome group below is what a skin restates: two base colours plus a
     radius and elevation scale. Every surface, hairline and text step in this
     file is a mix of surface↔ink, which moves in the right perceptual
     direction in a light AND a dark interior, so a skin can turn the whole
     conversation dark by swapping two values instead of patching components.
     ===================================================================== */

  /* ---- brand: owned by the widget settings ---- */
  --cw-primary: #087f68;
  --cw-accent: #12a98a;
  --cw-start: #087f68;
  --cw-end: #0b8066;
  --cw-launch-text: #fff;

  /* ---- chrome base: the only things an interior skin restates ---- */
  --cw-surface: #ffffff;
  --cw-ink: #20362a;
  --cw-on-accent: #ffffff;
  --cw-shadow: #173624;
  --cw-danger: #c24850;
  --cw-warn: #b07a22;
  --cw-info: #4a6cc4;
  --cw-radius-panel: 20px;
  --cw-radius: 14px;
  --cw-radius-sm: 10px;
  --cw-bubble-radius: 16px;
  --cw-elev-1: 0 2px 8px color-mix(in srgb, var(--cw-shadow) 7%, transparent);
  --cw-elev-2: 0 24px 60px -24px color-mix(in srgb, var(--cw-shadow) 42%, transparent);

  /* ---- derived surfaces: each step one notch toward the ink ---- */
  --cw-sf-1: var(--cw-surface);
  --cw-sf-2: color-mix(in srgb, var(--cw-surface) 97%, var(--cw-ink));
  --cw-sf-3: color-mix(in srgb, var(--cw-surface) 94%, var(--cw-ink));

  /* ---- derived hairlines ---- */
  --cw-ln-1: color-mix(in srgb, var(--cw-surface) 91%, var(--cw-ink));
  --cw-ln-2: color-mix(in srgb, var(--cw-surface) 86%, var(--cw-ink));
  --cw-ln-3: color-mix(in srgb, var(--cw-surface) 76%, var(--cw-ink));

  /* ---- derived text ---- */
  --cw-tx-1: var(--cw-ink);
  --cw-tx-2: color-mix(in srgb, var(--cw-ink) 72%, var(--cw-surface));
  --cw-tx-3: color-mix(in srgb, var(--cw-ink) 56%, var(--cw-surface));

  /* ---- derived brand/status steps ----
     Each family needs TWO derived values: a tint to fill with, and a text
     colour to put on that tint. The text step mixes toward --cw-ink, which is
     the opposite pole from the surface, so the pair stays legible in a light
     interior and in a dark one. Painting a status colour on itself — which is
     what a single token produces — renders the text invisible. */
  --cw-pr-ink: color-mix(in srgb, var(--cw-primary) 55%, var(--cw-ink));
  --cw-pr-soft: color-mix(in srgb, var(--cw-primary) 12%, var(--cw-surface));
  --cw-dg-ink: color-mix(in srgb, var(--cw-danger) 48%, var(--cw-ink));
  --cw-dg-soft: color-mix(in srgb, var(--cw-danger) 12%, var(--cw-surface));
  --cw-dg-line: color-mix(in srgb, var(--cw-danger) 34%, var(--cw-surface));
  --cw-wn-ink: color-mix(in srgb, var(--cw-warn) 44%, var(--cw-ink));
  --cw-wn-soft: color-mix(in srgb, var(--cw-warn) 14%, var(--cw-surface));
  --cw-if-ink: color-mix(in srgb, var(--cw-info) 48%, var(--cw-ink));
  --cw-if-soft: color-mix(in srgb, var(--cw-info) 12%, var(--cw-surface));

  /* ---- legacy aliases so older rules keep resolving ---- */
  --cw-line: var(--cw-ln-1);
  --cw-text: var(--cw-tx-1);
  --cw-muted: var(--cw-tx-3);

  --cw-side: 24px;
  --cw-bottom: 24px;
  --cw-size: 60px;
  position: fixed;
  right: var(--cw-side);
  bottom: var(--cw-bottom);
  z-index: 2147483000;
  font:
    400 14px/1.8 AbanChat,
    Tahoma,
    sans-serif;
  /* The owner can override the first family from the widget settings. */
  font-family: var(--cw-font, AbanChat), Tahoma, sans-serif;
  color: var(--cw-text);
  direction: rtl;
  text-align: right;
  letter-spacing: normal;
  text-transform: none;
  color-scheme: light;
}
#aban-live-widget *,
#aban-live-widget *:before,
#aban-live-widget *:after {
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
}
#aban-live-widget [hidden] {
  display: none !important;
}
#aban-live-widget .aban-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
#aban-live-widget button,
#aban-live-widget input,
#aban-live-widget textarea {
  font: inherit;
  letter-spacing: normal;
  margin: 0;
  box-shadow: none;
  text-transform: none;
  text-decoration: none;
  line-height: 1.7;
  outline-offset: 3px;
}
#aban-live-widget button {
  cursor: pointer;
  touch-action: manipulation;
}
#aban-live-widget button:disabled {
  cursor: wait;
  opacity: 0.6;
}
#aban-live-widget p {
  margin: 0;
  font: inherit;
}
#aban-live-widget h2 {
  font:
    700 21px/1.6 AbanChat,
    Tahoma,
    sans-serif;
  margin: 0;
  color: var(--cw-text);
}
#aban-live-widget a {
  color: var(--cw-pr-ink);
  text-decoration: none;
  font: inherit;
}
#aban-live-widget a:hover {
  text-decoration: underline;
}
#aban-live-widget input,
#aban-live-widget textarea {
  color: var(--cw-text);
  background: var(--cw-surface);
  border: 1px solid var(--cw-ln-2);
  border-radius: 10px;
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  font-size: 14px;
}
#aban-live-widget input:focus,
#aban-live-widget textarea:focus {
  border-color: var(--cw-primary);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-shadow) 10%, transparent);
}
#aban-live-widget input::placeholder,
#aban-live-widget textarea::placeholder {
  color: var(--cw-tx-3);
  opacity: 1;
}
#aban-live-widget :focus-visible {
  outline: 3px solid var(--cw-primary);
  outline-offset: 3px;
}
#aban-live-widget .cw-sr-only,
#aban-live-widget .cw-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}
#aban-live-widget .cw-launch {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  background: linear-gradient(120deg, var(--cw-start), var(--cw-end));
  color: var(--cw-launch-text);
  border: 1px solid color-mix(in srgb, var(--cw-on-accent) 15%, transparent);
  border-radius: 18px;
  height: var(--cw-size);
  min-width: 196px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--cw-shadow) 19%, transparent);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
#aban-live-widget .cw-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cw-shadow) 23%, transparent);
}
#aban-live-widget .cw-launch-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cw-on-accent) 13%, transparent);
}
#aban-live-widget .cw-launch-icon .aban-icon {
  width: 22px;
  height: 22px;
}
#aban-live-widget .cw-launch-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  min-width: 0;
}
#aban-live-widget .cw-launch-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#aban-live-widget .cw-launch-copy small {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.95;
}
#aban-live-widget .cw-launch-chevron {
  font-size: 20px;
  margin-inline-start: 12px;
  line-height: 1;
}
#aban-live-widget.is-open .cw-launch-chevron {
  transform: rotate(180deg);
}
#aban-live-widget .cw-panel {
  position: absolute;
  bottom: calc(var(--cw-size) + 14px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100dvh - var(--cw-bottom) - var(--cw-size) - 35px);
  border: 1px solid var(--cw-ln-2);
  border-radius: var(--cw-radius-panel);
  background: var(--cw-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--cw-elev-2);
  isolation: isolate;
  animation: cw-open 0.18s ease-out;
  min-height: 0;
}
#aban-live-widget .cw-header {
  background: var(--cw-primary);
  color: var(--cw-on-accent);
  min-height: 77px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  flex-shrink: 0;
}
#aban-live-widget .cw-brand-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--cw-on-accent) 13%, transparent);
  flex-shrink: 0;
}
#aban-live-widget .cw-header > div {
  flex: 1;
  min-width: 0;
}
#aban-live-widget .cw-header strong {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cw-on-accent);
  overflow-wrap: anywhere;
}
#aban-live-widget .cw-header small {
  display: block;
  font-size: 11px;
  opacity: 0.9;
  line-height: 1.7;
}
#aban-live-widget .cw-close {
  color: var(--cw-on-accent);
  border: 0;
  border-radius: 9px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: color-mix(in srgb, var(--cw-on-accent) 5%, transparent);
  display: grid;
  place-items: center;
  padding: 7px;
}
#aban-live-widget .cw-close:hover {
  background: color-mix(in srgb, var(--cw-on-accent) 14%, transparent);
}
#aban-live-widget .cw-close:focus-visible {
  outline-color: var(--cw-surface);
}
#aban-live-widget .cw-gate {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 25px 26px 18px;
  scrollbar-width: thin;
}
#aban-live-widget .cw-gate-heading {
  text-align: center;
  margin: 0 0 22px;
}
#aban-live-widget .cw-gate-heading > span {
  font-size: 34px;
  display: block;
  margin-bottom: 8px;
}
#aban-live-widget .cw-gate-heading p {
  color: var(--cw-muted);
  font-size: 13px;
  line-height: 1.9;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
#aban-live-widget .cw-gate label {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--cw-text);
}
#aban-live-widget .cw-gate input {
  margin-bottom: 18px;
  height: 45px;
  font-size: 15px;
}
#aban-live-widget .cw-gate input[aria-invalid='true'] {
  border-color: var(--cw-danger);
}
#aban-live-widget .cw-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--cw-primary);
  color: var(--cw-on-accent);
  border: 0;
  border-radius: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 550;
}
#aban-live-widget .cw-primary:hover {
  filter: brightness(0.94);
}
#aban-live-widget .cw-gate .cw-privacy {
  font-size: 10px;
  line-height: 1.9;
  text-align: center;
  color: var(--cw-muted);
  margin: 14px 0 0;
}
#aban-live-widget .cw-error {
  padding: 10px 13px;
  background: var(--cw-dg-soft);
  border: 1px solid var(--cw-dg-line);
  color: var(--cw-dg-ink);
  border-radius: 9px;
  margin: 8px 0 12px;
  font-size: 12px;
  line-height: 1.9;
}
#aban-live-widget .cw-chat {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
#aban-live-widget .cw-connection {
  font-size: 10px;
  color: var(--cw-wn-ink);
  background: var(--cw-wn-soft);
  padding: 5px 17px;
  flex-shrink: 0;
  line-height: 1.8;
}
#aban-live-widget .cw-connection:empty {
  display: none;
}
#aban-live-widget .cw-thread-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--cw-sf-2);
}
#aban-live-widget .cw-thread {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cw-ln-2) transparent;
  padding: 20px 17px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#aban-live-widget .cw-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 24px 20px;
  color: var(--cw-muted);
}
#aban-live-widget .cw-welcome > span {
  font-size: 33px;
  line-height: 1.5;
}
#aban-live-widget .cw-welcome strong {
  color: var(--cw-text);
  font-size: 17px;
}
#aban-live-widget .cw-welcome p {
  font-size: 13px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
#aban-live-widget .cw-message {
  display: flex;
  align-self: flex-end;
  flex-direction: column;
  gap: 4px;
  max-width: 86%;
  flex-shrink: 0;
}
#aban-live-widget .cw-message-bubble {
  padding: 10px 14px;
  border-radius: var(--cw-bubble-radius) var(--cw-bubble-radius) var(--cw-bubble-tail, 3px)
    var(--cw-bubble-radius);
  background: var(--cw-surface);
  border: 1px solid var(--cw-ln-1);
  font-size: 14px;
  line-height: 1.9;
  color: var(--cw-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  min-width: 42px;
}
#aban-live-widget .cw-message.is-user {
  align-self: flex-start;
}
#aban-live-widget .cw-message.is-user .cw-message-bubble {
  background: var(--cw-primary);
  color: var(--cw-on-accent);
  border-color: var(--cw-primary);
  border-radius: var(--cw-bubble-radius) var(--cw-bubble-radius) var(--cw-bubble-radius)
    var(--cw-bubble-tail, 3px);
}
#aban-live-widget .cw-message-meta {
  font-size: 10px;
  color: var(--cw-tx-2);
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 0 3px;
}
#aban-live-widget .cw-message.is-pending {
  opacity: 0.65;
}
#aban-live-widget .cw-message.is-failed .cw-message-bubble {
  border-style: dashed;
}
#aban-live-widget .cw-message.is-ai .cw-message-meta:before {
  content: 'دستیار هوشمند';
  border-radius: 4px;
  padding: 0 5px;
  color: var(--cw-if-ink);
  background: var(--cw-if-soft);
  font-size: 9px;
}
#aban-live-widget .cw-load-older {
  font-size: 11px;
  color: var(--cw-pr-ink);
  border: 0;
  background: transparent;
  padding: 7px 15px;
  min-height: 34px;
  align-self: center;
}
#aban-live-widget .cw-new-messages {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cw-surface);
  border: 1px solid var(--cw-ln-3);
  border-radius: 20px;
  color: var(--cw-pr-ink);
  padding: 5px 13px;
  font-size: 11px;
  box-shadow: 0 3px 13px color-mix(in srgb, var(--cw-shadow) 8%, transparent);
  z-index: 2;
  min-height: 32px;
}
#aban-live-widget .cw-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 11px 14px;
  background: var(--cw-surface);
  flex-shrink: 0;
  border-top: 1px solid var(--cw-sf-3);
}
#aban-live-widget .cw-quick button {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--cw-pr-ink);
  border: 1px solid var(--cw-ln-2);
  border-radius: var(--cw-radius-sm);
  background: var(--cw-surface);
  padding: 7px 11px;
  min-height: 34px;
  white-space: nowrap;
}
#aban-live-widget .cw-quick button:hover {
  background: var(--cw-sf-3);
  border-color: var(--cw-primary);
}
#aban-live-widget .cw-compose {
  border-top: 1px solid var(--cw-line);
  padding: 12px 14px 8px;
  background: var(--cw-surface);
  flex-shrink: 0;
}
#aban-live-widget .cw-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--cw-sf-2);
  border: 1px solid var(--cw-ln-2);
  padding: 5px;
  border-radius: var(--cw-radius);
}
#aban-live-widget .cw-compose-row:focus-within {
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cw-shadow) 8%, transparent);
}
#aban-live-widget .cw-compose textarea {
  padding: 8px;
  border: 0;
  background: transparent;
  min-height: 38px;
  height: 38px;
  max-height: 112px;
  resize: none;
  box-shadow: none !important;
  outline: 0;
  font-size: 14px;
  flex: 1;
  line-height: 1.6;
}
#aban-live-widget .cw-voice {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--cw-sf-3);
  color: var(--cw-pr-ink);
  font-size: 16px;
  display: grid;
  place-items: center;
  padding: 0;
}
#aban-live-widget .cw-compose.is-locked {
  opacity: 0.72;
}
#aban-live-widget .cw-voice.is-recording {
  background: var(--cw-danger);
  color: var(--cw-on-accent);
  animation: cw-spin 1.6s linear infinite;
}
#aban-live-widget .cw-send {
  width: 38px;
  min-width: 38px;
  height: 38px;
  background: var(--cw-primary);
  color: var(--cw-on-accent);
  border: 0;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  place-items: center;
}
#aban-live-widget .cw-send.is-loading .aban-icon {
  display: none;
}
#aban-live-widget .cw-send.is-loading:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--cw-surface);
  border-right-color: transparent;
  border-radius: 50%;
  animation: cw-spin 0.8s linear infinite;
}
#aban-live-widget .cw-compose-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--cw-tx-2);
}
#aban-live-widget .cw-compose-footer > span {
  font-size: 9px;
}
#aban-live-widget .cw-forget {
  font-size: 10px;
  color: var(--cw-muted);
  border: 0;
  background: transparent;
  padding: 5px 0;
  min-height: 30px;
  white-space: nowrap;
}
#aban-live-widget .cw-forget:hover {
  color: var(--cw-pr-ink);
  text-decoration: underline;
}
#aban-live-widget .cw-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--cw-sf-3);
  background: var(--cw-surface);
  padding: 7px 16px 9px;
  text-align: center;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--cw-muted);
  font-size: 9px;
}
#aban-live-widget .cw-footer p {
  font-size: 10px;
  line-height: 1.8;
  width: 100%;
  margin-bottom: 4px;
}
#aban-live-widget .cw-footer a {
  font-size: 10px;
}
#aban-live-widget .cw-resources {
  border-top: 1px solid var(--cw-line);
  font-size: 11px;
  background: var(--cw-surface);
  flex-shrink: 0;
}
#aban-live-widget summary {
  cursor: pointer;
  min-height: 36px;
  padding: 7px 15px;
  outline-offset: -3px;
}
#aban-live-widget .cw-resources > summary {
  font-weight: 550;
  color: var(--cw-pr-ink);
}
#aban-live-widget .cw-resource-content {
  max-height: 155px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 15px 12px;
}
#aban-live-widget .cw-faq {
  border: 1px solid var(--cw-line);
  border-radius: 8px;
  margin: 5px 0;
}
#aban-live-widget .cw-faq summary {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 10px;
}
#aban-live-widget .cw-faq p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--cw-muted);
  padding: 8px 11px;
  border-top: 1px solid var(--cw-line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#aban-live-widget .cw-resource-content > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cw-line);
  border-radius: 7px;
  padding: 6px 10px;
  margin: 5px 0 5px 5px;
  font-size: 12px;
}
#aban-live-widget .cw-resource-content .aban-icon {
  width: 12px;
  height: 12px;
}
#aban-live-widget .cw-expert {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cw-line);
  font-size: 12px;
}
#aban-live-widget .cw-expert strong {
  display: block;
  font-weight: 550;
}
#aban-live-widget .cw-expert small {
  display: block;
  color: var(--cw-muted);
  font-size: 10px;
}
#aban-live-widget .cw-expert a {
  align-self: center;
  white-space: nowrap;
}
/* Six display models */
#aban-live-widget.cw-left {
  left: var(--cw-side);
  right: auto;
}
#aban-live-widget.cw-left .cw-panel {
  left: 0;
  right: auto;
}
#aban-live-widget.cw-bubble .cw-launch,
#aban-live-widget.cw-minimal .cw-launch {
  width: var(--cw-size);
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
#aban-live-widget:is(.cw-bubble, .cw-minimal) .cw-launch-copy,
#aban-live-widget:is(.cw-bubble, .cw-minimal) .cw-launch-chevron {
  display: none;
}
#aban-live-widget.cw-bubble .cw-launch-icon {
  background: none;
}
#aban-live-widget.cw-minimal .cw-launch {
  background: var(--cw-surface);
  color: var(--cw-pr-ink);
  border-color: var(--cw-ln-2);
  box-shadow: 0 4px 22px color-mix(in srgb, var(--cw-shadow) 13%, transparent);
}
#aban-live-widget.cw-minimal .cw-launch-icon {
  background: none;
}
#aban-live-widget.cw-bar .cw-launch {
  min-width: 280px;
  border-radius: 12px;
}
#aban-live-widget.cw-card .cw-launch {
  height: calc(var(--cw-size) + 14px);
  min-width: 240px;
  border-radius: 14px;
}
#aban-live-widget.cw-card .cw-panel {
  bottom: calc(var(--cw-size) + 28px);
}
#aban-live-widget.cw-embedded {
  position: relative;
  right: auto;
  left: auto;
  bottom: auto;
  width: 100%;
  max-width: 480px;
  z-index: 1;
  margin: 24px auto;
}
#aban-live-widget.cw-embedded .cw-panel {
  position: relative;
  inset: auto;
  max-width: 100%;
  width: 100%;
  height: 620px;
  max-height: none;
  box-shadow: 0 6px 30px color-mix(in srgb, var(--cw-shadow) 7%, transparent);
}
#aban-live-widget.cw-embedded .cw-forget {
  display: block;
}
#aban-live-widget.cw-delayed:not(.is-open) {
  visibility: hidden;
  pointer-events: none;
}
@keyframes cw-open {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cw-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 700px) {
  #aban-live-widget:not(.cw-embedded) {
    bottom: max(14px, env(safe-area-inset-bottom));
    right: min(var(--cw-side), 18px);
  }
  #aban-live-widget.cw-left:not(.cw-embedded) {
    right: auto;
    left: min(var(--cw-side), 18px);
  }
  #aban-live-widget .cw-panel {
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100dvh - var(--cw-size) - 50px);
    height: 580px;
  }
  #aban-live-widget.cw-fullscreen:not(.cw-embedded) .cw-panel {
    position: fixed;
    inset: 0;
    border: 0;
    border-radius: 0;
    width: 100vw;
    height: var(--cw-viewport-height, 100dvh);
    max-width: none;
    max-height: none;
    bottom: auto;
    top: var(--cw-viewport-top, 0px);
  }
  #aban-live-widget.cw-fullscreen.is-open .cw-launch {
    visibility: hidden;
  }
  #aban-live-widget.cw-fullscreen .cw-header {
    padding-top: max(16px, env(safe-area-inset-top));
    min-height: 76px;
  }
  #aban-live-widget.cw-fullscreen .cw-footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  #aban-live-widget .cw-gate {
    padding: 30px 26px 20px;
  }
  #aban-live-widget .cw-gate-heading {
    margin-bottom: 27px;
  }
  #aban-live-widget .cw-gate input,
  #aban-live-widget .cw-compose textarea {
    font-size: 16px;
  }
  #aban-live-widget .cw-gate .cw-privacy {
    font-size: 11px;
  }
  #aban-live-widget .cw-quick button {
    font-size: 12px;
    min-height: 38px;
  }
  #aban-live-widget .cw-compose {
    padding: 11px 14px 7px;
  }
  #aban-live-widget .cw-compose-footer > span {
    font-size: 9px;
  }
  #aban-live-widget .cw-thread {
    padding: 22px 17px;
  }
  #aban-live-widget .cw-message-bubble {
    font-size: 15px;
  }
  #aban-live-widget .cw-forget {
    min-height: 34px;
    font-size: 11px;
  }
  #aban-live-widget .cw-launch {
    border-radius: 15px;
    min-width: 180px;
    height: min(var(--cw-size), 62px);
  }
  #aban-live-widget .cw-launch-copy strong {
    font-size: 13px;
  }
  #aban-live-widget .cw-launch-copy small {
    font-size: 10px;
  }
  #aban-live-widget.cw-card .cw-launch {
    min-width: 200px;
    height: calc(var(--cw-size) + 8px);
  }
  #aban-live-widget .cw-resources > summary {
    font-size: 12px;
    min-height: 40px;
  }
  #aban-live-widget .cw-send {
    height: 40px;
    width: 40px;
    min-width: 40px;
  }
  #aban-live-widget .cw-footer {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  #aban-live-widget[data-device='desktop'] {
    display: none !important;
  }
}
@media (min-width: 701px) {
  #aban-live-widget[data-device='mobile'] {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #aban-live-widget *,
  #aban-live-widget *:before,
  #aban-live-widget *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

#aban-live-widget .cw-gate-heading > span .aban-icon,
#aban-live-widget .cw-welcome > span .aban-icon {
  width: 34px;
  height: 34px;
  color: var(--cw-pr-ink);
}

/* Branding logo in widget header */
#aban-live-widget .cw-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline-end: 8px;
  flex: 0 0 auto;
}

/* Online/offline presence banner */
#aban-live-widget .cw-presence {
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
  background: var(--cw-bg, var(--cw-surface));
  color: var(--cw-muted, var(--cw-tx-3));
  border-bottom: 1px solid color-mix(in srgb, var(--cw-shadow) 6%, transparent);
}
#aban-live-widget .cw-presence-offline {
  background: color-mix(in srgb, var(--cw-shadow) 8%, transparent);
  color: var(--cw-dg-ink);
}

/* Typing / read-receipt indicators */
#aban-live-widget #aban-widget-connection.is-typing {
  color: var(--cw-pr-ink);
}
#aban-live-widget .cw-receipt {
  font-size: 11px;
  color: var(--cw-muted, var(--cw-tx-3));
  margin-inline-start: 6px;
}
#aban-live-widget .cw-message.is-user .cw-receipt {
  color: var(--cw-pr-ink);
}

/* Emoji toggle in the widget composer (text-only; no attachment button) */
#aban-live-widget .cw-emoji-toggle {
  order: -1;
  align-self: flex-end;
  width: 38px;
  height: 38px;
  font-size: 18px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cw-muted, var(--cw-tx-3));
}
#aban-live-widget .cw-emoji-toggle:hover {
  background: color-mix(in srgb, var(--cw-shadow) 6%, transparent);
}
#aban-live-widget .cw-emoji-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--cw-bg, var(--cw-surface));
  border-top: 1px solid color-mix(in srgb, var(--cw-shadow) 6%, transparent);
}
#aban-live-widget .cw-emoji-panel button {
  border: none;
  background: transparent;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
}
#aban-live-widget .cw-emoji-panel button:hover {
  background: color-mix(in srgb, var(--cw-shadow) 7%, transparent);
}
.aban-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--cw-shadow) 6%, transparent);
  border-radius: 999px;
  font-size: 12px;
}
.aban-attach-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  line-height: 1;
}
#aban-live-widget .cw-message-bubble .cw-attachment {
  display: block;
  margin-top: 6px;
  max-width: 200px;
}
#aban-live-widget .cw-message-bubble .cw-attachment img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
#aban-live-widget .cw-message-bubble .cw-attachment audio {
  width: 100%;
  max-width: 220px;
  margin-top: 4px;
}
/* Small in-chat order-tracking form (order number + mobile). */
#aban-live-widget .cw-message:has(.cw-depart),
#aban-live-widget .cw-message:has(.cw-track) {
  max-width: 100%;
  width: 100%;
  align-self: stretch;
}
#aban-live-widget .cw-message:has(.cw-depart) .cw-message-bubble,
#aban-live-widget .cw-message:has(.cw-track) .cw-message-bubble {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#aban-live-widget .cw-track {
  margin-top: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--cw-primary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cw-primary) 10%, var(--cw-surface));
}
#aban-live-widget .cw-track-hint {
  margin: 0;
  font-size: 12px;
  color: var(--cw-muted);
}
#aban-live-widget .cw-depart-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#aban-live-widget .cw-depart-chip {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: var(--cw-surface);
  color: var(--cw-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
}
#aban-live-widget .cw-depart-chip.is-on {
  border-color: var(--cw-primary);
  background: var(--cw-pr-soft);
  color: var(--cw-pr-ink);
  font-weight: 700;
}
#aban-live-widget .cw-depart.is-done .cw-depart-chip {
  pointer-events: none;
  opacity: 0.7;
}
#aban-live-widget .cw-track-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cw-pr-ink);
}
#aban-live-widget .cw-track input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--cw-text);
  background: var(--cw-sf-2);
  outline: none;
}
#aban-live-widget .cw-track input:focus {
  border-color: var(--cw-primary);
  background: var(--cw-surface);
}
#aban-live-widget .cw-track select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--cw-text);
  background: var(--cw-sf-2);
  outline: none;
}
#aban-live-widget .cw-track select:focus {
  border-color: var(--cw-primary);
  background: var(--cw-surface);
}
#aban-live-widget .cw-track.is-done select {
  background: var(--cw-sf-3);
}
#aban-live-widget .cw-track-submit {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--cw-start), var(--cw-end));
  color: var(--cw-launch-text, var(--cw-on-accent));
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#aban-live-widget .cw-track-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
#aban-live-widget a.cw-product-link {
  display: inline;
  color: var(--cw-pr-ink);
  font-weight: 700;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  margin: 6px 0 0;
  cursor: pointer;
}
#aban-live-widget a.cw-product-link:hover {
  color: var(--cw-pr-ink);
}

#aban-live-widget .cw-track-note {
  font-size: 12px;
  color: var(--cw-muted);
  min-height: 1.6em;
}
#aban-live-widget .cw-track-note:empty {
  display: none;
}
#aban-live-widget .cw-track.is-done input {
  background: var(--cw-sf-3);
}
#aban-live-widget .cw-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
}
#aban-live-widget .cw-typing-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: cw-typing-bounce 1.2s infinite ease-in-out;
}
#aban-live-widget .cw-typing-bubble span:nth-child(2) {
  animation-delay: 0.15s;
}
#aban-live-widget .cw-typing-bubble span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes cw-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #aban-live-widget .cw-typing-bubble span {
    animation: none;
    opacity: 0.7;
  }
}

/* ==========================================================================
   Launcher models and open styles (aban 10)
   The PHP marks the root with cw-launch-<shape> and cw-open-<style>; these
   rules are the only place the shapes are drawn.
   ========================================================================== */
#aban-live-widget .cw-launcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#aban-live-widget.cw-left .cw-launcher {
  align-items: flex-start;
}
#aban-live-widget .cw-panel {
  width: min(var(--cw-panel-width, 380px), calc(100vw - 32px));
}
/* --- launcher shapes ------------------------------------------------------ */
#aban-live-widget.cw-launch-none .cw-launch {
  display: none;
}
#aban-live-widget:is(.cw-launch-icon, .cw-launch-orb, .cw-launch-avatar, .cw-launch-proactive)
  .cw-launch {
  width: var(--cw-size);
  height: var(--cw-size);
  min-width: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
#aban-live-widget:is(.cw-launch-icon, .cw-launch-orb, .cw-launch-avatar, .cw-launch-proactive)
  :is(.cw-launch-copy, .cw-launch-chevron) {
  display: none;
}
#aban-live-widget.cw-launch-ghost .cw-launch {
  width: var(--cw-size);
  height: var(--cw-size);
  min-width: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cw-on-accent) 85%, transparent);
  color: var(--cw-pr-ink);
  border: 1px solid var(--cw-ln-2);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--cw-shadow) 13%, transparent);
}
#aban-live-widget.cw-launch-ghost :is(.cw-launch-copy, .cw-launch-chevron) {
  display: none;
}
#aban-live-widget.cw-launch-ghost .cw-launch-icon {
  background: none;
  width: auto;
  height: auto;
}
#aban-live-widget.cw-launch-expanded .cw-launch {
  min-width: 0;
  border-radius: 999px;
  padding-inline: 20px;
}
#aban-live-widget.cw-launch-tab .cw-launch {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-width: 0;
  width: auto;
  height: auto;
  min-height: 158px;
  padding: 16px 10px;
  border-radius: 16px 0 0 16px;
  justify-content: flex-end;
  gap: 14px;
}
#aban-live-widget.cw-left.cw-launch-tab .cw-launch {
  border-radius: 0 16px 16px 0;
}
#aban-live-widget.cw-launch-tab .cw-launch-copy {
  text-align: center;
}
#aban-live-widget.cw-launch-tab .cw-launch-chevron {
  display: none;
}
#aban-live-widget.cw-launch-orb .cw-launch {
  background: radial-gradient(circle at 32% 28%, var(--cw-accent), var(--cw-start) 70%);
  animation: cw-orb 2.8s ease-in-out infinite;
}
@keyframes cw-orb {
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--cw-primary) 16%, transparent);
  }
}
#aban-live-widget.cw-launch-avatar .cw-launch {
  background: var(--cw-surface);
  border: 2px solid var(--cw-primary);
  overflow: hidden;
}
#aban-live-widget.cw-launch-avatar .cw-launch-icon {
  background: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#aban-live-widget .cw-launch-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#aban-live-widget.cw-launch-avatar:has(.cw-launch-avatar) .cw-launch-icon {
  visibility: hidden;
}
#aban-live-widget.cw-launch-card .cw-launch {
  min-width: 224px;
  height: auto;
  padding: 14px 16px;
  border-radius: 16px;
  align-items: flex-start;
}
#aban-live-widget.cw-launch-note .cw-launch {
  min-width: 0;
  height: auto;
  border-radius: 14px;
  padding: 12px 16px;
  background: var(--cw-mint, var(--cw-sf-3));
  color: var(--cw-pr-ink);
  border: 1px dashed color-mix(in srgb, var(--cw-primary) 45%, transparent);
  box-shadow: none;
}
#aban-live-widget.cw-launch-dock .cw-launch {
  min-width: 0;
  height: auto;
  padding: 11px 15px;
  border-radius: 15px;
}
#aban-live-widget.cw-launch-dock .cw-launch-copy {
  display: none;
}
#aban-live-widget .cw-dock {
  display: none;
  gap: 6px;
}
#aban-live-widget.cw-launch-dock .cw-dock {
  display: flex;
  flex-direction: column;
}
#aban-live-widget .cw-dock-action {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cw-on-accent) 95%, transparent);
  border: 1px solid var(--cw-ln-2);
  border-radius: 12px;
  color: var(--cw-tx-1);
  font: 500 12px/1.6 inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cw-shadow) 9%, transparent);
  white-space: nowrap;
}
#aban-live-widget .cw-dock-action:hover {
  background: var(--cw-surface);
  border-color: var(--cw-primary);
  color: var(--cw-pr-ink);
}
#aban-live-widget .cw-launch-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--cw-danger);
  color: var(--cw-on-accent);
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cw-shadow) 25%, transparent);
}
#aban-live-widget .cw-teaser {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(280px, calc(100vw - 40px));
  margin-bottom: 4px;
  padding: 11px 14px;
  background: var(--cw-surface);
  border: 1px solid var(--cw-ln-2);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--cw-shadow) 14%, transparent);
  color: var(--cw-tx-1);
  font: 400 12.5px/1.8 inherit;
  text-align: right;
  cursor: pointer;
  animation: cw-teaser 0.24s ease-out;
}
#aban-live-widget.cw-left .cw-teaser {
  border-radius: 16px 16px 16px 4px;
}
@keyframes cw-teaser {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
#aban-live-widget .cw-teaser[hidden] {
  display: none;
}
#aban-live-widget .cw-teaser-close {
  color: var(--cw-tx-3);
  font-size: 16px;
  line-height: 1;
}
/* --- open styles --------------------------------------------------------- */
#aban-live-widget .cw-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cw-shadow) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#aban-live-widget .cw-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}
html.cw-lock-scroll {
  overflow: hidden;
}
#aban-live-widget.cw-open-drawer:not(.cw-embedded) .cw-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: min(var(--cw-panel-width, 380px), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border-inline-width: 1px 0;
  animation: cw-slide-in 0.2s ease-out;
}
#aban-live-widget.cw-left.cw-open-drawer:not(.cw-embedded) .cw-panel {
  right: auto;
  left: 0;
}
@keyframes cw-slide-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
#aban-live-widget.cw-open-sheet:not(.cw-embedded) .cw-panel {
  position: fixed;
  inset: auto 0 0 0;
  width: 100vw;
  max-width: 100vw;
  height: min(88dvh, 720px);
  max-height: 88dvh;
  border-radius: 22px 22px 0 0;
  animation: cw-sheet-in 0.22s ease-out;
}
@keyframes cw-sheet-in {
  from {
    transform: translateY(28px);
  }
}
#aban-live-widget.cw-open-sheet .cw-panel.is-dragging {
  transition: none;
}
#aban-live-widget .cw-sheet-handle {
  display: block;
  width: 100%;
  padding: 8px 0 4px;
  background: var(--cw-surface);
  border: 0;
  cursor: grab;
}
#aban-live-widget .cw-sheet-handle::before {
  content: '';
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 auto;
  border-radius: 4px;
  background: var(--cw-ln-3);
}
#aban-live-widget.cw-open-full:not(.cw-embedded) .cw-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: 0;
}
#aban-live-widget.cw-open-modal:not(.cw-embedded) .cw-panel {
  position: fixed;
  top: 50%;
  right: 50%;
  left: auto;
  bottom: auto;
  transform: translate(50%, -50%);
  height: min(660px, 90dvh);
  max-height: 90dvh;
  width: min(var(--cw-panel-width, 380px), calc(100vw - 28px));
}
#aban-live-widget.cw-open-inline {
  position: static;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
}
#aban-live-widget.cw-open-inline .cw-panel {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: 520px;
  max-height: none;
}
#aban-live-widget.cw-open-note .cw-launcher {
  align-items: stretch;
}
#aban-live-widget.cw-launch-note .cw-panel,
#aban-live-widget.cw-launch-none .cw-panel {
  margin-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  #aban-live-widget.cw-launch-orb .cw-launch {
    animation: none;
  }
  #aban-live-widget .cw-teaser,
  #aban-live-widget .cw-panel {
    animation: none;
  }
}
@media (max-width: 700px) {
  #aban-live-widget:not(.cw-embedded):not(.cw-open-inline) .cw-launcher {
    align-items: flex-end;
  }
  #aban-live-widget.cw-launch-tab .cw-launch {
    writing-mode: horizontal-tb;
    min-height: 0;
    width: var(--cw-size);
    height: var(--cw-size);
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  #aban-live-widget.cw-launch-tab .cw-launch-copy {
    display: none;
  }
  #aban-live-widget:is(.cw-open-sheet, .cw-open-drawer, .cw-open-full, .cw-open-modal) .cw-panel {
    border-radius: 0;
  }
}

/* ==========================================================================
   Launcher models and open styles — aban 15.1
   Ten additional models. Each one is a new drawing or a new choreography on
   the exact same markup (.cw-launch > .cw-launch-icon + .cw-launch-copy),
   so no model can change what the widget can do — only how it arrives.
   ========================================================================== */

/* --- magnet: the button leans toward the pointer ------------------------- */
#aban-live-widget.cw-launch-magnet .cw-launch {
  width: var(--cw-size);
  height: var(--cw-size);
  min-width: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  /* --mx/--my are written by widget.js within a small radius; absent them the
     button is simply a round launcher, which is the touch behaviour too. */
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
  transition: transform 0.28s cubic-bezier(0.2, 1.2, 0.4, 1);
}
#aban-live-widget.cw-launch-magnet :is(.cw-launch-copy, .cw-launch-chevron) {
  display: none;
}
#aban-live-widget.cw-launch-magnet .cw-launch-icon {
  transform: translate3d(calc(var(--mx, 0) * 0.45px), calc(var(--my, 0) * 0.45px), 0);
  transition: transform 0.34s cubic-bezier(0.2, 1.2, 0.4, 1);
}
#aban-live-widget.cw-launch-magnet .cw-launch::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cw-primary) 35%, transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
#aban-live-widget.cw-launch-magnet .cw-launch:hover::after {
  opacity: 1;
}

/* --- beam: a gradient ring rotating around the button -------------------- */
#aban-live-widget.cw-launch-beam .cw-launch {
  width: var(--cw-size);
  height: var(--cw-size);
  min-width: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  isolation: isolate;
}
#aban-live-widget.cw-launch-beam :is(.cw-launch-copy, .cw-launch-chevron) {
  display: none;
}
#aban-live-widget.cw-launch-beam .cw-launch::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--cw-accent) 70deg,
    var(--cw-surface) 140deg,
    var(--cw-primary) 210deg,
    transparent 300deg
  );
  animation: cw-beam-spin 3.4s linear infinite;
  filter: blur(0.5px);
}
#aban-live-widget.cw-launch-beam .cw-launch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--cw-start), var(--cw-end));
}
@keyframes cw-beam-spin {
  to {
    transform: rotate(1turn);
  }
}

/* --- glass: frosted capsule with a shine sweep --------------------------- */
#aban-live-widget.cw-launch-glass .cw-launch {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 10px 20px 10px 14px;
  background: color-mix(in srgb, var(--cw-primary) 24%, var(--cw-surface));
  color: var(--cw-tx-1);
  border: 1px solid color-mix(in srgb, var(--cw-on-accent) 70%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cw-on-accent) 85%, transparent),
    0 14px 34px -18px color-mix(in srgb, var(--cw-shadow) 50%, transparent);
}
#aban-live-widget.cw-launch-glass .cw-launch-icon {
  background: color-mix(in srgb, var(--cw-on-accent) 55%, transparent);
  color: var(--cw-pr-ink);
  border-radius: 50%;
}
#aban-live-widget.cw-launch-glass .cw-launch::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--cw-on-accent) 65%, transparent), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}
#aban-live-widget.cw-launch-glass .cw-launch:hover::after {
  inset-inline-start: 110%;
}

/* --- stack: three cards that fan out on hover ---------------------------- */
#aban-live-widget.cw-launch-stack .cw-launch {
  position: relative;
  border-radius: 16px;
  padding: 12px 18px;
  text-align: start;
}
#aban-live-widget.cw-launch-stack .cw-launch-chevron {
  display: none;
}
#aban-live-widget.cw-launch-stack .cw-launch::before,
#aban-live-widget.cw-launch-stack .cw-launch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cw-primary) 70%, var(--cw-surface));
  transition: transform 0.32s cubic-bezier(0.2, 1.1, 0.35, 1);
}
#aban-live-widget.cw-launch-stack .cw-launch::before {
  transform: translateY(5px) scale(0.965);
}
#aban-live-widget.cw-launch-stack .cw-launch::after {
  background: color-mix(in srgb, var(--cw-primary) 45%, var(--cw-surface));
  transform: translateY(10px) scale(0.93);
}
#aban-live-widget.cw-launch-stack .cw-launch:hover::before {
  transform: translateY(-4px) rotate(-3.5deg) scale(0.985);
}
#aban-live-widget.cw-launch-stack .cw-launch:hover::after {
  transform: translateY(-13px) rotate(4.5deg) scale(0.955);
}

/* --- wave: an equalizer that says "a human is here" ---------------------- */
#aban-live-widget.cw-launch-wave .cw-launch {
  border-radius: 999px;
  padding: 10px 18px 10px 12px;
  gap: 12px;
}
#aban-live-widget.cw-launch-wave .cw-launch-chevron {
  display: none;
}
#aban-live-widget.cw-launch-wave .cw-launch-copy::after {
  content: '';
  display: block;
  margin-top: 5px;
  height: 11px;
  width: 34px;
  /* Four bars drawn with one gradient; the mask keeps it to four columns. */
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 4px,
    transparent 4px 10px
  );
  opacity: 0.85;
  animation: cw-wave-bars 1.1s ease-in-out infinite alternate;
  transform-origin: bottom;
}
@keyframes cw-wave-bars {
  from {
    clip-path: polygon(0 40%, 25% 0, 50% 55%, 75% 10%, 100% 45%, 100% 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 5%, 25% 50%, 50% 0, 75% 60%, 100% 15%, 100% 100%, 0 100%);
  }
}

/* --- ticker: a slim edge bar rotating its two lines ---------------------- */
#aban-live-widget.cw-launch-ticker .cw-launch {
  border-radius: 999px 999px 0 0;
  padding: 9px 20px;
  min-height: 42px;
  gap: 10px;
  box-shadow: 0 -8px 26px -12px color-mix(in srgb, var(--cw-shadow) 45%, transparent);
}
#aban-live-widget.cw-launch-ticker .cw-launch-chevron {
  transform: rotate(0);
}
#aban-live-widget.cw-launch-ticker .cw-launch-copy {
  position: relative;
  height: 22px;
  overflow: hidden;
  min-width: 150px;
}
#aban-live-widget.cw-launch-ticker .cw-launch-copy > * {
  display: block;
  height: 22px;
  line-height: 22px;
  animation: cw-ticker 7s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes cw-ticker {
  0%,
  42% {
    transform: translateY(0);
  }
  50%,
  92% {
    transform: translateY(-22px);
  }
  100% {
    transform: translateY(0);
  }
}

/* --- blob: an organic shape that keeps morphing -------------------------- */
#aban-live-widget.cw-launch-blob .cw-launch {
  width: calc(var(--cw-size) + 4px);
  height: calc(var(--cw-size) + 4px);
  min-width: 0;
  padding: 0;
  justify-content: center;
  background: linear-gradient(140deg, var(--cw-start), var(--cw-end));
  border-radius: 58% 42% 40% 60% / 52% 48% 52% 48%;
  animation: cw-blob 9s ease-in-out infinite;
}
#aban-live-widget.cw-launch-blob :is(.cw-launch-copy, .cw-launch-chevron) {
  display: none;
}
@keyframes cw-blob {
  0%,
  100% {
    border-radius: 58% 42% 40% 60% / 52% 48% 52% 48%;
  }
  33% {
    border-radius: 42% 58% 62% 38% / 44% 60% 40% 56%;
  }
  66% {
    border-radius: 50% 50% 38% 62% / 62% 38% 56% 44%;
  }
}

/* --- open: island — docks top-centre and grows out of a pill ------------- */
#aban-live-widget.cw-open-island:not(.cw-embedded) .cw-panel {
  position: fixed;
  top: 14px;
  bottom: auto;
  right: 50%;
  left: auto;
  transform: translateX(50%);
  width: min(var(--cw-panel-width, 380px), calc(100vw - 24px));
  height: min(620px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  border-radius: 26px;
  box-shadow: 0 26px 70px -18px color-mix(in srgb, var(--cw-shadow) 40%, transparent);
  transform-origin: top center;
  animation: cw-island-in 0.42s cubic-bezier(0.2, 1.05, 0.3, 1);
}
@keyframes cw-island-in {
  from {
    opacity: 0;
    height: 48px;
    border-radius: 999px;
    transform: translateX(50%) translateY(-6px) scaleX(0.55);
  }
}

/* --- open: spotlight — radial reveal over a blurred page ----------------- */
#aban-live-widget.cw-open-spotlight .cw-scrim {
  background: color-mix(in srgb, var(--cw-shadow) 65%, transparent);
  backdrop-filter: blur(7px) saturate(120%);
}
#aban-live-widget.cw-open-spotlight:not(.cw-embedded) .cw-panel {
  position: fixed;
  top: 50%;
  right: 50%;
  left: auto;
  bottom: auto;
  transform: translate(50%, -50%);
  width: min(var(--cw-panel-width, 380px), calc(100vw - 28px));
  height: min(660px, 88dvh);
  max-height: 88dvh;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cw-on-accent) 15%, transparent),
    0 40px 110px -24px color-mix(in srgb, var(--cw-shadow) 65%, transparent);
  animation: cw-spotlight-in 0.42s cubic-bezier(0.2, 0.95, 0.25, 1);
}
@keyframes cw-spotlight-in {
  from {
    opacity: 0;
    clip-path: circle(16% at 50% 50%);
    transform: translate(50%, -50%) scale(0.94);
  }
  to {
    clip-path: circle(85% at 50% 50%);
  }
}

/* --- open: unfold — hinges open from the launcher corner ----------------- */
#aban-live-widget.cw-open-unfold:not(.cw-embedded) .cw-panel {
  transform-origin: bottom right;
  animation: cw-unfold 0.46s cubic-bezier(0.2, 1, 0.3, 1);
}
#aban-live-widget.cw-left.cw-open-unfold:not(.cw-embedded) .cw-panel {
  transform-origin: bottom left;
}
@keyframes cw-unfold {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateX(-38deg) rotateY(16deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: perspective(1200px) rotateX(0) rotateY(0) scale(1);
  }
}
#aban-live-widget.cw-left.cw-open-unfold:not(.cw-embedded) .cw-panel {
  animation-name: cw-unfold-left;
}
@keyframes cw-unfold-left {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateX(-38deg) rotateY(-16deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: perspective(1200px) rotateX(0) rotateY(0) scale(1);
  }
}

/* --- shared guards ------------------------------------------------------- */
@media (max-width: 700px) {
  /* The ticker would eat a phone's width; it falls back to a round button. */
  #aban-live-widget.cw-launch-ticker .cw-launch {
    border-radius: 999px;
    padding: 0;
    width: var(--cw-size);
    height: var(--cw-size);
    justify-content: center;
  }
  #aban-live-widget.cw-launch-ticker .cw-launch-copy,
  #aban-live-widget.cw-launch-ticker .cw-launch-chevron {
    display: none;
  }
  #aban-live-widget.cw-open-island:not(.cw-embedded) .cw-panel {
    top: 8px;
    height: calc(100dvh - 16px);
    border-radius: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #aban-live-widget.cw-launch-beam .cw-launch::before,
  #aban-live-widget.cw-launch-blob .cw-launch,
  #aban-live-widget.cw-launch-wave .cw-launch-copy::after,
  #aban-live-widget.cw-launch-ticker .cw-launch-copy > *,
  #aban-live-widget:is(.cw-open-island, .cw-open-spotlight, .cw-open-unfold) .cw-panel {
    animation: none !important;
  }
  #aban-live-widget.cw-launch-magnet :is(.cw-launch, .cw-launch-icon) {
    transform: none !important;
  }
}

/* ============================================================================
   INTERIOR SKINS  —  «نمای داخل گفتگو»
   ----------------------------------------------------------------------------
   The launcher model decides how the widget is summoned; an interior skin
   decides how the conversation itself looks once it is open: the shell, the
   header, the bubbles, the quick replies and the composer.

   A skin restates the chrome tokens (surface, ink, radii, elevation) and adds
   only the structure the tokens cannot express. It never touches the brand
   group — primary/accent/start/end are the owner's colours and keep flowing
   through, so every skin still looks like the owner's brand.

   `classic` is the stock 15.x interior and ships no rules at all, so it stays
   a pixel-for-pixel no-op.
   ========================================================================== */

/* ------------------------------------------------------------------ aurora */
/* Frosted shell, a brand halo behind the header, pill composer. */
#aban-live-widget.cw-skin-aurora .cw-panel {
  --cw-surface: #ffffff;
  --cw-ink: #18252f;
  --cw-radius-panel: 26px;
  --cw-radius: 18px;
  --cw-radius-sm: 999px;
  --cw-bubble-radius: 20px;
  --cw-bubble-tail: 7px;
  --cw-elev-2: 0 30px 70px -26px color-mix(in srgb, var(--cw-shadow) 46%, transparent);
}
#aban-live-widget.cw-skin-aurora .cw-panel {
  background: color-mix(in srgb, var(--cw-surface) 88%, transparent);
  backdrop-filter: blur(22px) saturate(165%);
  border-color: color-mix(in srgb, var(--cw-surface) 70%, transparent);
}
#aban-live-widget.cw-skin-aurora .cw-header {
  position: relative;
  background: linear-gradient(135deg, var(--cw-start), var(--cw-accent));
  overflow: hidden;
}
#aban-live-widget.cw-skin-aurora .cw-header::after {
  content: '';
  position: absolute;
  inset: -60% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cw-on-accent) 26%, transparent), transparent 68%);
  pointer-events: none;
}
#aban-live-widget.cw-skin-aurora .cw-brand-icon {
  border-radius: 999px;
}
#aban-live-widget.cw-skin-aurora .cw-thread-area {
  background: linear-gradient(180deg, var(--cw-sf-3), var(--cw-sf-1));
}
#aban-live-widget.cw-skin-aurora .cw-message-bubble {
  border: 0;
  box-shadow: var(--cw-elev-1);
}
#aban-live-widget.cw-skin-aurora .cw-message.is-user .cw-message-bubble {
  background: linear-gradient(135deg, var(--cw-start), var(--cw-accent));
  box-shadow: 0 10px 22px -12px var(--cw-primary);
}
#aban-live-widget.cw-skin-aurora .cw-quick,
#aban-live-widget.cw-skin-aurora .cw-compose,
#aban-live-widget.cw-skin-aurora .cw-footer {
  background: transparent;
}
#aban-live-widget.cw-skin-aurora .cw-compose-row {
  background: var(--cw-surface);
  border-radius: 999px;
  padding: 5px 5px 5px 14px;
  box-shadow: var(--cw-elev-1);
}
#aban-live-widget.cw-skin-aurora .cw-send {
  border-radius: 999px;
}

/* ----------------------------------------------------------------- minimal */
/* No gradients, no shadows, no fills: hairlines and type carry everything. */
#aban-live-widget.cw-skin-minimal .cw-panel {
  --cw-surface: #ffffff;
  --cw-ink: #16181d;
  --cw-radius-panel: 12px;
  --cw-radius: 8px;
  --cw-radius-sm: 6px;
  --cw-bubble-radius: 8px;
  --cw-bubble-tail: 8px;
  --cw-elev-1: none;
  --cw-elev-2: 0 16px 40px -28px color-mix(in srgb, var(--cw-shadow) 55%, transparent);
}
/* The header drops the brand fill and becomes a quiet title bar; the brand
   survives as a single accent dot, which is all this language allows. */
#aban-live-widget.cw-skin-minimal .cw-header {
  background: var(--cw-surface);
  color: var(--cw-tx-1);
  min-height: 60px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cw-ln-1);
}
#aban-live-widget.cw-skin-minimal .cw-header strong {
  color: var(--cw-tx-1);
  font-size: 14px;
}
#aban-live-widget.cw-skin-minimal .cw-header small {
  color: var(--cw-tx-3);
  opacity: 1;
}
#aban-live-widget.cw-skin-minimal .cw-brand-icon {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: var(--cw-primary);
  color: transparent;
  overflow: hidden;
}
#aban-live-widget.cw-skin-minimal .cw-brand-icon > * {
  display: none;
}
#aban-live-widget.cw-skin-minimal .cw-close {
  color: var(--cw-tx-3);
}
#aban-live-widget.cw-skin-minimal .cw-thread-area {
  background: var(--cw-surface);
}
#aban-live-widget.cw-skin-minimal .cw-thread {
  gap: 14px;
}
#aban-live-widget.cw-skin-minimal .cw-message-bubble {
  background: var(--cw-sf-3);
  border: 0;
}
#aban-live-widget.cw-skin-minimal .cw-message.is-user .cw-message-bubble {
  background: var(--cw-primary);
}
#aban-live-widget.cw-skin-minimal .cw-message-meta {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
/* Quick replies become plain links on a rule, not a row of chips. */
#aban-live-widget.cw-skin-minimal .cw-quick {
  border-top: 1px solid var(--cw-ln-1);
  padding: 8px 14px;
}
#aban-live-widget.cw-skin-minimal .cw-quick button {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  min-height: 30px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#aban-live-widget.cw-skin-minimal .cw-quick button:hover {
  background: var(--cw-sf-3);
}
#aban-live-widget.cw-skin-minimal .cw-compose-row {
  background: var(--cw-surface);
}

/* ----------------------------------------------------------------- nightly */
/* A dark conversation for dark sites: two token swaps, every component. */
#aban-live-widget.cw-skin-nightly .cw-panel {
  --cw-surface: #141a21;
  --cw-ink: #e8f1f6;
  --cw-on-accent: #ffffff;
  --cw-shadow: #000000;
  --cw-danger: #d93a4e;
  --cw-warn: #f0b45a;
  --cw-info: #7fb0ff;
  --cw-radius-panel: 22px;
  --cw-radius: 14px;
  --cw-bubble-radius: 16px;
  /* Dark plates need their hairlines pushed, or every border disappears. */
  --cw-ln-1: color-mix(in srgb, var(--cw-surface) 90%, var(--cw-ink));
  --cw-ln-2: color-mix(in srgb, var(--cw-surface) 84%, var(--cw-ink));
  --cw-ln-3: color-mix(in srgb, var(--cw-surface) 72%, var(--cw-ink));
  --cw-elev-1: 0 2px 10px #0006;
  --cw-elev-2: 0 28px 70px -24px #000000d9;
  color-scheme: dark;
}
#aban-live-widget.cw-skin-nightly .cw-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cw-start) 70%, #000), var(--cw-surface));
  border-bottom: 1px solid var(--cw-ln-2);
}
#aban-live-widget.cw-skin-nightly .cw-thread-area {
  background: color-mix(in srgb, var(--cw-surface) 94%, #000);
}
#aban-live-widget.cw-skin-nightly .cw-message-bubble {
  background: var(--cw-sf-3);
  border-color: var(--cw-ln-2);
}
#aban-live-widget.cw-skin-nightly .cw-message.is-user .cw-message-bubble {
  background: var(--cw-primary);
  box-shadow: 0 10px 26px -14px var(--cw-accent);
}
#aban-live-widget.cw-skin-nightly .cw-quick button {
  color: var(--cw-pr-ink);
  background: var(--cw-sf-3);
}
#aban-live-widget.cw-skin-nightly .cw-compose-row:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-accent) 24%, transparent);
}
#aban-live-widget.cw-skin-nightly ::placeholder {
  color: var(--cw-tx-3);
}

/* ------------------------------------------------------------------ bubbly */
/* Warm and friendly: tall rounded bubbles, soft tinted thread, chunky keys. */
#aban-live-widget.cw-skin-bubbly .cw-panel {
  --cw-surface: #ffffff;
  --cw-ink: #2b2433;
  --cw-radius-panel: 28px;
  --cw-radius: 20px;
  --cw-radius-sm: 999px;
  --cw-bubble-radius: 22px;
  --cw-bubble-tail: 22px;
  --cw-elev-1: 0 4px 14px color-mix(in srgb, var(--cw-shadow) 9%, transparent);
}
#aban-live-widget.cw-skin-bubbly .cw-header {
  min-height: 86px;
  background: linear-gradient(120deg, var(--cw-start), var(--cw-end));
}
#aban-live-widget.cw-skin-bubbly .cw-brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cw-on-accent) 20%, transparent);
}
#aban-live-widget.cw-skin-bubbly .cw-thread-area {
  background: color-mix(in srgb, var(--cw-primary) 5%, var(--cw-surface));
}
#aban-live-widget.cw-skin-bubbly .cw-thread {
  gap: 12px;
}
#aban-live-widget.cw-skin-bubbly .cw-message-bubble {
  padding: 12px 17px;
  border: 0;
  box-shadow: var(--cw-elev-1);
  line-height: 2;
}
#aban-live-widget.cw-skin-bubbly .cw-message.is-user .cw-message-bubble {
  background: linear-gradient(135deg, var(--cw-start), var(--cw-end));
}
#aban-live-widget.cw-skin-bubbly .cw-quick button {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 12px;
  background: var(--cw-surface);
  box-shadow: var(--cw-elev-1);
  border-color: transparent;
}
#aban-live-widget.cw-skin-bubbly .cw-compose-row {
  padding: 6px;
  border-color: transparent;
  background: var(--cw-surface);
  box-shadow: var(--cw-elev-1);
}
#aban-live-widget.cw-skin-bubbly .cw-send,
#aban-live-widget.cw-skin-bubbly .cw-voice {
  border-radius: 999px;
}

/* ----------------------------------------------------------------- console */
/* Dense and technical, for support desks: tight rhythm, visible structure,
   tabular timestamps, square corners and no decorative depth at all. */
#aban-live-widget.cw-skin-console .cw-panel {
  --cw-surface: #ffffff;
  --cw-ink: #11161c;
  --cw-radius-panel: 6px;
  --cw-radius: 5px;
  --cw-radius-sm: 4px;
  --cw-bubble-radius: 5px;
  --cw-bubble-tail: 5px;
  --cw-elev-1: none;
  --cw-elev-2: 0 10px 30px -20px color-mix(in srgb, var(--cw-shadow) 60%, transparent);
}
#aban-live-widget.cw-skin-console .cw-panel {
  border-width: 1px;
  border-color: var(--cw-ln-3);
}
#aban-live-widget.cw-skin-console .cw-header {
  min-height: 52px;
  padding: 10px 14px;
}
#aban-live-widget.cw-skin-console .cw-brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}
#aban-live-widget.cw-skin-console .cw-header strong {
  font-size: 13px;
  letter-spacing: 0.2px;
}
#aban-live-widget.cw-skin-console .cw-thread {
  gap: 8px;
  padding: 12px 12px;
}
#aban-live-widget.cw-skin-console .cw-message {
  max-width: 94%;
}
#aban-live-widget.cw-skin-console .cw-message-bubble {
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.85;
  background: var(--cw-sf-3);
  border-color: var(--cw-ln-2);
}
/* The timestamp column is monospaced and aligned, so a long thread can be
   read as a log rather than as a chat. */
#aban-live-widget.cw-skin-console .cw-message-meta {
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
#aban-live-widget.cw-skin-console .cw-quick {
  padding: 7px 12px;
  border-top: 1px solid var(--cw-ln-2);
}
#aban-live-widget.cw-skin-console .cw-quick button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 10.5px;
}
#aban-live-widget.cw-skin-console .cw-compose {
  padding: 9px 12px 6px;
}
#aban-live-widget.cw-skin-console .cw-compose-row {
  padding: 3px;
}
#aban-live-widget.cw-skin-console .cw-compose textarea {
  min-height: 34px;
  height: 34px;
  font-size: 13px;
}
#aban-live-widget.cw-skin-console .cw-footer {
  padding: 5px 12px 7px;
}

/* A skin must never fight the reader's accessibility settings. */
@media (prefers-reduced-motion: reduce) {
  #aban-live-widget[class*='cw-skin-'] .cw-panel {
    animation: none;
  }
}