/* =====================================================================
   LIVE CHAT — floating launcher + panel (bottom-right), pairs with
   assets/js/chat.js + the WP-admin "Live Chat" inbox. Light panel (matches
   the shared reference) on the dark site; launcher uses the brand gradient.
   z-index is set above Google's reCAPTCHA v3 badge (~2,000,000,000) so the chat
   launcher + panel always sit ON TOP of it (the badge is bottom-right too).
   Zero inline CSS; reduced-motion guarded.
   ===================================================================== */
/* The source theme defined --gradient/--font-* in :root; TripleMinds doesn't, so the
   launcher background was painting empty (invisible). Scope the brand values to the
   widget here. Red CTA gradient matches the site's buttons (--red-bg #ec2024). */
.asm-chat { --gradient: linear-gradient(135deg, #EF2D3C 0%, #C81F2A 100%); --font-display: inherit; --font-body: inherit; position: fixed; right: clamp(0.85rem, 2.5vw, 1.5rem); bottom: clamp(0.85rem, 2.5vw, 1.5rem); z-index: 2147483647; font-family: var(--font-body, system-ui, sans-serif); }

/* Honeypot field — kept visually hidden off-screen (spam trap; humans must never
   see or fill it). This rule lived in the source theme's GLOBAL style.css, so it
   wasn't part of the extracted widget block — re-added here. */
.asm-chat .asm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Launcher */
.asm-chat__launcher { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--gradient); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; animation: asm-chat-attention 4.5s ease-in-out 1.8s infinite; }
.asm-chat__launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(5, 150, 105, 0.45); animation: none; }
.asm-chat[data-state="open"] .asm-chat__launcher { animation: none; }
.asm-chat__launcher::before, .asm-chat__launcher::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); pointer-events: none; animation: asm-chat-ripple 2.8s ease-out infinite; }
.asm-chat__launcher::after { animation-delay: 1.4s; }
.asm-chat[data-state="open"] .asm-chat__launcher::before, .asm-chat[data-state="open"] .asm-chat__launcher::after { display: none; }
.asm-chat__launcher:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.asm-chat__launcher-ic, .asm-chat__launcher-x { width: 30px; height: 30px; }
.asm-chat__launcher-x { display: none; }
.asm-chat[data-state="open"] .asm-chat__launcher-ic { display: none; }
.asm-chat[data-state="open"] .asm-chat__launcher-x { display: block; }
.asm-chat__launcher-dot { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6); animation: asm-chat-pulse 2.4s ease-out infinite; }
.asm-chat[data-state="open"] .asm-chat__launcher-dot { display: none; }
@keyframes asm-chat-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } }
/* Periodic wave (rotate) + shake (translate) to draw attention; rests between bursts. */
@keyframes asm-chat-attention {
	0%, 64%, 100% { transform: rotate(0) translateX(0); }
	67% { transform: rotate(14deg) translateX(-1px); }
	70% { transform: rotate(-12deg) translateX(2px); }
	73% { transform: rotate(10deg) translateX(-2px); }
	76% { transform: rotate(-8deg) translateX(2px); }
	79% { transform: rotate(6deg) translateX(-1px); }
	82% { transform: rotate(-4deg) translateX(1px); }
	85% { transform: rotate(2deg) translateX(0); }
	88% { transform: rotate(0) translateX(0); }
}
/* Expanding white "wave" ring layers radiating from the launcher. */
@keyframes asm-chat-ripple {
	0% { transform: scale(1); opacity: 0.22; }
	100% { transform: scale(2.3); opacity: 0; }
}

/* Panel */
.asm-chat__panel { position: absolute; right: 0; bottom: 74px; width: min(380px, calc(100vw - 1.7rem)); max-height: min(90vh, 760px); display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1f2430; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.asm-chat__panel[hidden] { display: none; }

/* Header */
.asm-chat__header { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: #0ea5e9; color: #fff; }
.asm-chat__avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gradient); }
.asm-chat__avatar::before { content: attr(data-initial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; }
.asm-chat__avatar img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.asm-chat__id { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.asm-chat__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.asm-chat__role { font-size: 0.78rem; opacity: 0.85; }
.asm-chat__status { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.asm-chat__status-line { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; opacity: 0.95; }
.asm-chat__reply { font-size: 0.62rem; opacity: 0.8; white-space: nowrap; }
.asm-chat__status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px rgba(46, 204, 113, 0.8); }
.asm-chat__close { flex: none; width: 28px; height: 28px; margin-left: 2px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0.7; border-radius: 6px; }
.asm-chat__close:hover { opacity: 1; }

/* Pre-chat form */
.asm-chat__form { display: flex; flex-direction: column; gap: 13px; padding: 18px 16px 16px; overflow-y: auto; }
.asm-chat__form[hidden] { display: none; }
.asm-chat__intro { margin: 0 0 2px; font-size: 0.92rem; color: #4a4f5e; }
.asm-chat__field { display: flex; flex-direction: column; gap: 5px; }
.asm-chat__label { font-size: 0.82rem; font-weight: 600; color: #2a2f3a; }
.asm-chat__field input { width: 100%; padding: 11px 12px; font-size: 0.95rem; color: #1f2430; background: #eef0f4; border: 1px solid #dde0e7; border-radius: 9px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.asm-chat__field input:focus { outline: 0; border-color: #10B981; background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.asm-req { color: #0D9488; }
.asm-chat__start { margin-top: 4px; padding: 12px 16px; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: #fff; background: var(--gradient); border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.asm-chat__start:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(5, 150, 105, 0.4); }
.asm-chat__start:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; }
.asm-chat__formmsg { margin: 2px 0 0; min-height: 1em; font-size: 0.82rem; color: #4a4f5e; }

/* Conversation */
.asm-chat__convo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.asm-chat__convo[hidden] { display: none; }
.asm-chat__messages { flex: 1; min-height: 240px; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: #f4f5f8; }
.asm-chat__msg { max-width: 80%; padding: 9px 13px; font-size: 0.9rem; line-height: 1.45; border-radius: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
.asm-chat__msg-body { white-space: pre-wrap; }
.asm-chat__msg-time { display: block; margin-top: 3px; font-size: 0.66rem; opacity: 0.6; }
.asm-chat__msg--agent { align-self: flex-start; background: #fff; color: #23262f; border: 1px solid #e3e6ec; border-bottom-left-radius: 5px; }
.asm-chat__msg--visitor { align-self: flex-end; background: var(--gradient); color: #fff; border-bottom-right-radius: 5px; }
.asm-chat__msg--system { align-self: center; background: #e7e9ef; color: #555b68; font-size: 0.8rem; border-radius: 12px; }

/* Composer */
.asm-chat__send { display: flex; align-items: flex-end; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #e6e8ee; }
.asm-chat__input { flex: 1; max-height: 96px; min-height: 42px; padding: 10px 12px; font-family: inherit; font-size: 0.92rem; color: #1f2430; background: #eef0f4; border: 1px solid #dde0e7; border-radius: 12px; resize: none; }
.asm-chat__input:focus { outline: 0; border-color: #10B981; background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13); }
.asm-chat__send-btn { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--gradient); cursor: pointer; }
.asm-chat__send-btn svg { width: 20px; height: 20px; }
.asm-chat__send-btn:hover { filter: brightness(1.06); }
.asm-chat__end { display: block; width: 100%; padding: 8px; border: 0; border-top: 1px solid #e6e8ee; background: #fff; color: #9aa0ad; font-size: 0.72rem; letter-spacing: 0.02em; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; }
.asm-chat__end:hover { color: #0D9488; background: #fdf3f3; }
.asm-chat__end:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }

/* Mobile */
@media (max-width: 480px) {
	.asm-chat__panel { width: calc(100vw - 1.4rem); bottom: 72px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.asm-chat__launcher, .asm-chat__start, .asm-chat__field input, .asm-chat__input { transition: none; }
	.asm-chat__launcher, .asm-chat__launcher-dot { animation: none; }
	.asm-chat__launcher::before, .asm-chat__launcher::after { display: none; }
}