/* ============================================================
   LIVE CHAT / WHATSAPP WIDGET — reusable component.
   A fixed-position floating launcher + contact panel. Structural
   CSS travels unmodified between templates; re-skin only the
   --livechat-* variables below (colours, fonts, sizing).

   This is a contact launcher, not a hosted chat inbox — the
   WhatsApp/tel/mailto links are live, but no chat server sits
   behind it. See live-chat.js.
   ============================================================ */

.livechat {
  /* Re-skinned to trymysite's navy brand tokens — only this variable
     block is touched, the structural CSS below is unchanged from the
     component-library master build. Accent kept WhatsApp-green (the
     button is universally recognised) with an orange-tinted panel head. */
  --livechat-bg: var(--navy-3);
  --livechat-surface: var(--navy-4);
  --livechat-border: var(--border-med);
  --livechat-text: var(--text);
  --livechat-muted: var(--muted);
  --livechat-accent: #25d366;          /* WhatsApp green */
  --livechat-accent-ink: #08240f;
  --livechat-online: var(--green);
  --livechat-font-display: var(--font-display);
  --livechat-font-body: var(--font-body);
  --livechat-radius: var(--radius);
  --livechat-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

  position: fixed;
  right: clamp(1rem, 4vw, 2rem);
  bottom: clamp(1rem, 4vw, 2rem);
  z-index: 900;
  font-family: var(--livechat-font-body);
}

.livechat[data-position="left"] {
  right: auto;
  left: clamp(1rem, 4vw, 2rem);
}

/* ---- Launcher bubble ---- */
.livechat__launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  padding: 0;
  height: 60px;
  min-width: 60px;
  border: 0;
  border-radius: 999px;
  background: var(--livechat-accent);
  color: var(--livechat-accent-ink);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.livechat__launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.livechat__launcher:focus-visible { outline: 3px solid var(--livechat-accent); outline-offset: 3px; }

.livechat__launcher-text {
  padding-right: 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.livechat__launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.livechat__launcher-icon svg { width: 30px; height: 30px; }
.livechat__launcher-icon--close { position: absolute; left: 0; top: 0; font-size: 2rem; line-height: 1; opacity: 0; transform: rotate(-90deg); }

.livechat[data-open="true"] .livechat__launcher-icon--open { opacity: 0; transform: rotate(90deg); }
.livechat[data-open="true"] .livechat__launcher-icon--close { opacity: 1; transform: rotate(0); }
.livechat[data-open="true"] .livechat__launcher-text { display: none; }

/* ---- Panel ---- */
.livechat__panel {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: min(340px, calc(100vw - 2rem));
  background: var(--livechat-bg);
  border: 1px solid var(--livechat-border);
  border-radius: var(--livechat-radius);
  box-shadow: var(--livechat-shadow);
  overflow: hidden;
  color: var(--livechat-text);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.livechat[data-position="left"] .livechat__panel { right: auto; left: 0; transform-origin: bottom left; }

.livechat[data-open="true"] .livechat__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.livechat__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  border-bottom: 1px solid var(--livechat-border);
}

.livechat__head-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--livechat-surface) center/cover no-repeat;
  border: 1px solid var(--livechat-border);
}

.livechat__head-text { display: flex; flex-direction: column; min-width: 0; }
.livechat__head-title {
  font-family: var(--livechat-font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.livechat__head-status { font-size: 0.78rem; color: var(--livechat-online); margin-top: 2px; }
.livechat__head-status.is-offline { color: var(--livechat-muted); }

.livechat__greeting { padding: 1rem 1.15rem 0.4rem; }
.livechat__greeting p {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--livechat-surface);
  border: 1px solid var(--livechat-border);
  border-radius: 4px 14px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--livechat-text);
}

.livechat__channels { padding: 0.75rem 0.85rem 0.4rem; display: flex; flex-direction: column; gap: 0.45rem; }

.livechat__channel {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: var(--livechat-surface);
  border: 1px solid var(--livechat-border);
  color: var(--livechat-text);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.livechat__channel:hover { transform: translateY(-1px); border-color: var(--livechat-accent); }

.livechat__channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.livechat__channel-icon svg { width: 22px; height: 22px; }
.livechat__channel--whatsapp .livechat__channel-icon { background: rgba(37, 211, 102, 0.16); color: #25d366; }
.livechat__channel--phone .livechat__channel-icon { background: rgba(74, 144, 217, 0.16); color: #6ba8e6; }
.livechat__channel--email .livechat__channel-icon { background: rgba(217, 164, 65, 0.16); color: #e0b25a; }

.livechat__channel-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.livechat__channel-label { font-weight: 600; font-size: 0.9rem; }
.livechat__channel-detail { font-size: 0.78rem; color: var(--livechat-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livechat__channel-go { font-size: 1.4rem; color: var(--livechat-muted); line-height: 1; }

.livechat__foot {
  padding: 0.7rem 1.15rem 0.9rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--livechat-muted);
}

@media (max-width: 480px) {
  .livechat__launcher-text { display: none; }
  .livechat__panel { width: calc(100vw - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .livechat__panel, .livechat__launcher, .livechat__launcher-icon, .livechat__channel { transition: none; }
}

/* ============================================================
   SHOWCASE-ONLY containment (trymysite services.php demo).
   The real widget is position:fixed so it floats over a whole
   site. For the on-page demo we drop it into a mock "mini-site"
   stage and pin it to that box instead of the viewport, so it
   doesn't hover over the marketing page itself. This block is
   specific to the showcase and is NOT part of the reusable
   component — a real client site keeps the fixed default above.
   ============================================================ */
.livechat-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-med);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(249,115,22,.10), transparent 60%),
    var(--navy-2);
  min-height: 460px;
  padding: 26px 26px 90px;
}
.livechat-stage .livechat {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 5;
}
.livechat-stage__mock { max-width: 380px; }
.livechat-stage__mock .lh-mock-bar {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.livechat-stage__mock .lh-mock-bar span {
  width: 11px; height: 11px; border-radius: 50%; background: var(--border-med);
}
.livechat-stage__mock h4 {
  font-family: var(--font-display); font-size: 20px; color: var(--text); margin-bottom: 10px;
}
.livechat-stage__mock p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.livechat-stage__hint {
  position: absolute; left: 26px; bottom: 24px;
  font-size: 12.5px; color: var(--dim);
}
@media (max-width: 560px) {
  .livechat-stage { min-height: 420px; padding: 20px 18px 84px; }
  .livechat-stage__hint { display: none; }
}