/* ============================================================
   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 Fosse Systems' dark-glass tokens. Only this variable block
     is touched; the structural CSS below is the shared component master.
     Accent kept WhatsApp-green because the button is universally recognised. */
  --livechat-bg: var(--panel-solid, #0E1120);
  --livechat-surface: rgba(255, 255, 255, 0.05);
  --livechat-border: var(--glass-line, rgba(255, 255, 255, 0.12));
  --livechat-text: var(--paper2, #ECEDF6);
  --livechat-muted: var(--paper2-dim, rgba(236, 237, 246, 0.66));
  --livechat-accent: #25d366;          /* WhatsApp green */
  --livechat-accent-ink: #08240f;
  --livechat-online: #34d399;
  --livechat-font-display: var(--font-display, inherit);
  --livechat-font-body: var(--font-body, inherit);
  --livechat-radius: 16px;
  --livechat-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);

  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.4rem;
  margin-left: auto;
  padding: 0;
  height: 48px;
  width: 48px;
  min-width: 48px;
  border: 0;
  border-radius: 50%;
  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 {
  /* icon-only launcher: the label is kept in the markup for screen readers
     but not shown, so the button stays a compact circle in proportion with
     the rest of the site's buttons */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.livechat__launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.livechat__launcher-icon svg { width: 24px; height: 24px; }
.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; }
}