/* =============================================================
   AsterCTI — Floating Contact Widget (Live Chat + WhatsApp)
   Uses the site's existing design tokens (see assets/css/style.css)
   so it matches the rest of the site without touching global styles.

   POSITIONING NOTES (read before editing):
   - This file must NEVER declare `.back-to-top { ... }`. The
     back-to-top button's CSS is owned elsewhere and must stay
     untouched — this widget adapts around it instead of the other
     way around.
   - All bottom-right fixed-position offsets for THIS widget are
     controlled from the single `--cw-gap-*` block below. Do not add
     a second `bottom:`/`right:` declaration for `.cw-widget`
     anywhere else in this file — consolidate here instead.
   - The desktop/mobile offsets assume the standard back-to-top
     button footprint used across the site (~48px circle, 24px inset
     on desktop; ~44px circle, 16px inset on mobile). If the
     back-to-top button's own size/inset is ever changed, bump
     `--cw-bottom` / `--cw-bottom-mobile` to match — that is the only
     place this widget needs to react to it.
============================================================= */

.cw-widget {
  --cw-bottom: 96px;        /* desktop: clears back-to-top with a visual gap */
  --cw-bottom-mobile: 80px; /* mobile: clears back-to-top with a visual gap */
  --cw-right: 24px;
  --cw-right-mobile: 16px;

  position: fixed;
  right: var(--cw-right);
  bottom: var(--cw-bottom);
  z-index: 1000; /* above .back-to-top (900); below the Tawk chat window once opened */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-body, -apple-system, sans-serif);
}

.cw-toggle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--signal, #12C7A8), var(--wire, #3D5AFE));
  color: var(--white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(18, 199, 168, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cw-toggle:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(18, 199, 168, 0.42); }
.cw-toggle:focus-visible { outline: 2px solid var(--wire, #3D5AFE); outline-offset: 3px; }

.cw-toggle-icon { position: absolute; display: flex; transition: opacity 0.15s ease, transform 0.15s ease; }
.cw-toggle-icon--close { opacity: 0; transform: scale(0.7); }
.cw-widget.is-open .cw-toggle-icon--open { opacity: 0; transform: scale(0.7); }
.cw-widget.is-open .cw-toggle-icon--close { opacity: 1; transform: scale(1); }

.cw-toggle-label {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink, #0B1229);
  background: var(--white, #fff);
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(19,27,55,0.06));
  pointer-events: none;
  user-select: none;
}
.cw-widget.is-open .cw-toggle-label { opacity: 0; }

.cw-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  min-width: 220px;
  background: var(--white, #fff);
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-lg, 0 26px 60px rgba(11,18,41,0.18));
  border: 1px solid var(--border, rgba(35,42,61,0.09));
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.cw-widget.is-open .cw-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.cw-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.cw-menu-item:hover, .cw-menu-item:focus-visible { background: var(--cloud, #F6F8FC); }
.cw-menu-item:focus-visible { outline: 2px solid var(--wire, #3D5AFE); outline-offset: 2px; }

.cw-menu-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white, #fff);
}
.cw-menu-icon--chat { background: linear-gradient(135deg, var(--signal, #12C7A8), var(--wire, #3D5AFE)); }
.cw-menu-icon--whatsapp { background: #25D366; }

.cw-menu-title {
  display: block;
  font-family: var(--font-display, inherit);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink, #0B1229);
}
.cw-menu-sub {
  display: block;
  font-size: 0.76rem;
  color: var(--muted, #5B6478);
  margin-top: 1px;
}

/* -------------------------------------------------------------
   Defensive clearance for Tawk's own "We Are Here" greeting /
   minimized bubble, in case it is ever briefly visible before
   Tawk_API.hideWidget() runs (see assets/js/chat-widget.js).
   This targets only Tawk's own injected wrapper via its documented
   iframe title — never our widget, never the Back-to-Top button —
   and only nudges position, nothing else. Safe no-op if the
   selector doesn't match the current Tawk DOM output.
------------------------------------------------------------- */
iframe[title="chat widget"] {
  bottom: 96px !important; /* mirrors --cw-bottom above */
}

@media (max-width: 575.98px) {
  .cw-widget {
    right: var(--cw-right-mobile);
    bottom: var(--cw-bottom-mobile);
  }
  .cw-toggle { width: 50px; height: 50px; }
  .cw-menu { min-width: 200px; }

  iframe[title="chat widget"] {
    bottom: 80px !important; /* mirrors --cw-bottom-mobile above */
  }
}