/* Chat widget styles (shared by every page) */
:root{--bg-alt:#F6F5F1;--bg-dark:#111113;--border:#E4E1D9;--muted-on-dark:#A1A1A8;--primary:#1F5A45;--primary-600:#1F5A45;--shadow-lg:0 30px 60px -20px rgba(15,23,42,.35);--text:#0f172a}
/* ===== WhatsApp + chat assistant ===== */
.vx-fabs { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; transition: bottom .3s; font-family: inherit; }
.vx-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .55); transition: transform .2s, box-shadow .2s; }
.vx-fab:hover { transform: translateY(-3px) scale(1.04); }
.vx-fab svg { width: 28px; height: 28px; }
.vx-wa-btn { background: #25d366; }
.vx-wa-btn svg { width: 32px; height: 32px; }
.vx-chat-btn { background: #111113; }
.vx-chat-btn svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vx-chat-btn .vx-close-icon, .vx-is-open .vx-chat-btn .vx-open-icon { display: none; }
.vx-is-open .vx-chat-btn .vx-close-icon { display: block; }
.vx-tip { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: var(--text); color: #fff; font-size: .82rem; font-weight: 600; padding: 7px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vx-wa-btn:hover .vx-tip, .vx-wa-btn:focus-visible .vx-tip { opacity: 1; }
.vx-panel { width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 190px); background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.vx-panel[hidden] { display: none; }
.vx-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-dark); color: #fff; }
.vx-head div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.vx-head span { font-size: .75rem; color: var(--muted-on-dark); }
.vx-close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.vx-close:hover { background: rgba(255, 255, 255, .1); }
.vx-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-alt); }
.vx-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.vx-bot { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.vx-user { align-self: flex-end; background: #111113; color: #fff; border-bottom-right-radius: 4px; }
.vx-bot a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.vx-bot a.vx-wa-inline { color: #128c4b; }
.vx-typing { display: flex; gap: 4px; padding: 14px; }
.vx-typing i { width: 7px; height: 7px; border-radius: 50%; background: #b7c0d4; animation: vx-dot 1s infinite; }
.vx-typing i:nth-child(2) { animation-delay: .15s; }
.vx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vx-dot { 50% { transform: translateY(-4px); opacity: .5; } }
.vx-quick { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 4px; background: #fff; border-top: 1px solid var(--border); scrollbar-width: none; }
.vx-quick button { flex: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary-600); background: #E5EFE9; border: 1px solid rgba(31,90,69,.25); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.vx-quick button:hover { background: #D6E7DD; }
.vx-form { display: flex; gap: 8px; padding: 10px 12px; background: #fff; }
.vx-form input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-alt); color: var(--text); }
.vx-form input:focus { outline: none; border-color: var(--primary); background: #fff; }
.vx-form button { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--primary); cursor: pointer; display: grid; place-items: center; }
.vx-form button svg { width: 18px; height: 18px; fill: #fff; }
.vx-wa-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: .82rem; font-weight: 600; color: #128c4b; background: #effbf3; border-top: 1px solid #d3f3df; }
.vx-wa-bar svg { width: 18px; height: 18px; }
.vx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  .vx-fabs { right: 16px; bottom: 16px; gap: 10px; }
  .vx-fabs.vx-raised { bottom: 84px; }
  .vx-fab { width: 52px; height: 52px; }
  .vx-panel { height: 60vh; max-height: calc(100vh - 240px); min-height: 340px; }}
@media (prefers-reduced-motion: reduce) {
  .vx-typing i { animation: none; }}

/* Keep the assistant readable on dark pages and above fixed headers */
.vx-fabs { z-index: 125; }
.vx-panel { color: #0f172a; }
.vx-bot { color: #1e2638; }
.vx-user { color: #fff; }
.vx-head, .vx-head b { color: #fff; }
.vx-form input { color: #0f172a; background: #fff; }
.vx-quick { scrollbar-width: none; }
@media (max-width: 600px) { .vx-panel { max-height: calc(100svh - 200px); } }