/* Veda chat launcher and panel.
   Lifted out of templates/partials/chatbot.php on 2026-09-16 (audit PERF-02).
   It was inline on EVERY page of the site — 14,563 bytes re-sent with
   every single HTML response and never cacheable. The <link> that replaced it sits
   exactly where the <style> did, so the cascade order is unchanged.
   Edit this file, not the template. asset() cache-busts on filemtime. */


/* ── Variables ─────────────────────────────── */
:root{--vn:#0A132B;--vn2:#071428;--vn3:#132645;--vn4:#1a2f57;--vg:#E31937;--vg2:#EBB94A;--vg3:rgba(227,25,55,.15);--vg4:rgba(227,25,55,.08);--vg5:rgba(227,25,55,.35);--vt:rgba(255,255,255,.9);--vt2:rgba(255,255,255,.6);--vt3:rgba(255,255,255,.3);--vt4:rgba(255,255,255,.07);--vr:rgba(227,25,55,.2)}

/* ── Overlay ───────────────────────────────── */
.vd-ov{position:fixed;inset:0;background:rgba(4,9,22,.7);z-index:9998;opacity:0;visibility:hidden;transition:opacity .35s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vd-ov.vd-on{opacity:1;visibility:visible}

/* ── Panel ─────────────────────────────────── */
.vd-box{position:fixed;top:0;right:0;z-index:9999;width:420px;height:100%;display:flex;flex-direction:column;transform:translateX(110%);transition:transform .45s cubic-bezier(.22,1,.36,1);background:linear-gradient(175deg,var(--vn3) 0%,var(--vn) 40%,var(--vn2) 100%);border-left:1px solid var(--vr);box-shadow:-20px 0 80px rgba(0,0,0,.5),-1px 0 0 rgba(227,25,55,.1)}
.vd-box.vd-on{transform:translateX(0)}

/* ── Header ────────────────────────────────── */
.vd-hd{padding:16px 18px;display:flex;align-items:center;gap:13px;flex-shrink:0;background:linear-gradient(135deg,var(--vn2) 0%,var(--vn3) 100%);border-bottom:1px solid var(--vr);position:relative;overflow:hidden}
.vd-hd::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8992E' stroke-width='.3' opacity='.35'%3E%3Cpath d='M10 0v60M20 0v60M30 0v60M40 0v60M50 0v60M0 10h60M0 20h60M0 30h60M0 40h60M0 50h60'/%3E%3C/g%3E%3C/svg%3E");background-size:60px 60px;opacity:.4;pointer-events:none}
.vd-hd::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--vg) 50%,transparent 100%);opacity:.5}

/* Avatar */
.vd-av{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--vg) 0%,var(--vg2) 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 0 0 1px rgba(227,25,55,.3),0 0 20px rgba(227,25,55,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.vd-av::after{content:'';position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid var(--vn2);box-shadow:0 0 8px rgba(34,197,94,.6)}
.vd-av svg{width:20px;height:20px;stroke:var(--vn2);stroke-width:2;fill:none}
.vd-av-pulse{position:absolute;inset:-4px;border-radius:16px;border:1px solid rgba(227,25,55,.3);animation:vdPulse 2.5s ease-in-out infinite}

/* Header text */
.vd-hd-t{flex:1;min-width:0}
.vd-hd-t h4,.vd-hd-t p{color:#fff;font:700 15px/1.2 'DM Sans',sans-serif;margin:0;letter-spacing:-.2px}
.vd-hd-t h4 span,.vd-hd-t p span{color:var(--vg2);font-weight:500;font-style:italic;font-family:'Playfair Display',Georgia,serif}
.vd-hd-sub{color:var(--vt3);font:400 9.5px/1 'DM Sans',sans-serif;margin-top:4px;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.vd-hd-sub::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--vg);opacity:.7;flex-shrink:0}

/* Close btn */
.vd-x{background:var(--vt4);border:1px solid rgba(255,255,255,.08);color:var(--vt3);width:32px;height:32px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.vd-x:hover{background:rgba(227,25,55,.15);border-color:var(--vr);color:var(--vg)}

/* ── Feed ──────────────────────────────────── */
.vd-feed{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.vd-feed::-webkit-scrollbar{width:3px}
.vd-feed::-webkit-scrollbar-track{background:transparent}
.vd-feed::-webkit-scrollbar-thumb{background:var(--vr);border-radius:3px}

/* Messages */
.vd-m{max-width:88%;font:400 13px/1.7 'DM Sans',sans-serif;word-wrap:break-word;animation:vdIn .3s ease forwards;transform-origin:bottom}
.vd-m.vd-b{align-self:flex-start;background:rgba(255,255,255,.04);color:var(--vt);padding:12px 15px;border-radius:4px 16px 16px 16px;border:1px solid rgba(227,25,55,.15);border-left:2px solid rgba(227,25,55,.5);backdrop-filter:blur(12px);position:relative}
.vd-m.vd-b::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(227,25,55,.5),transparent)}
.vd-m.vd-u{align-self:flex-end;background:linear-gradient(135deg,var(--vg) 0%,var(--vg2) 100%);color:var(--vn2);padding:10px 15px;border-radius:16px 4px 16px 16px;font-weight:500;box-shadow:0 4px 15px rgba(227,25,55,.25)}
.vd-m.vd-b a{color:var(--vg2);text-decoration:none;border-bottom:1px solid rgba(227,25,55,.3);transition:border-color .2s}
.vd-m.vd-b a:hover{border-bottom-color:var(--vg2)}
.vd-m.vd-b strong{color:#fff;font-weight:600}
.vd-m.vd-b ul{margin:6px 0 3px 16px;padding:0}
.vd-m.vd-b li{margin-bottom:3px;color:var(--vt2)}
.vd-m.vd-b code{background:rgba(227,25,55,.1);border:1px solid rgba(227,25,55,.2);color:var(--vg2);padding:1px 6px;border-radius:4px;font-size:.9em;font-family:'DM Mono','Courier New',monospace}
/* feedback (thumbs) on bot replies */
.vd-fb{display:flex;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.vd-fb-b{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:2px 9px;font-size:13px;line-height:1.4;cursor:pointer;opacity:.65;transition:.15s}
.vd-fb-b:hover{opacity:1;border-color:rgba(227,25,55,.5);background:rgba(227,25,55,.1)}
.vd-fb-t{font-size:11px;color:var(--vt2);opacity:.8}

/* Tables */
.vd-tbl{width:100%;border-collapse:collapse;font-size:11.5px;margin:8px 0}
.vd-tbl th{background:rgba(227,25,55,.12);color:var(--vg2);padding:6px 9px;text-align:left;border:1px solid rgba(227,25,55,.2);font-weight:600;letter-spacing:.3px;font-size:11px;text-transform:uppercase}
.vd-tbl td{padding:6px 9px;border:1px solid rgba(255,255,255,.06);color:var(--vt2);vertical-align:top}
.vd-tbl tr:hover td{background:rgba(227,25,55,.04)}

/* Typing indicator */
.vd-tp{align-self:flex-start;display:inline-flex;gap:6px;padding:14px 18px;background:rgba(255,255,255,.04);border-radius:4px 16px 16px 16px;border:1px solid rgba(227,25,55,.15);animation:vdIn .3s ease forwards}
.vd-tp i{width:7px;height:7px;border-radius:50%;background:var(--vg);animation:vdBo 1.3s ease-in-out infinite;display:block;box-shadow:0 0 8px rgba(227,25,55,.5)}
.vd-tp i:nth-child(2){animation-delay:.18s}
.vd-tp i:nth-child(3){animation-delay:.36s}

/* Quick options */
.vd-opts{display:flex;flex-wrap:wrap;gap:6px;max-width:92%;align-self:flex-start;animation:vdIn .35s ease forwards}
.vd-opt{padding:7px 14px;border:1px solid rgba(227,25,55,.35);border-radius:24px;font:500 11.5px/1 'DM Sans',sans-serif;cursor:pointer;color:var(--vt2);background:rgba(227,25,55,.05);transition:all .2s;white-space:nowrap;letter-spacing:.1px}
.vd-opt:hover{background:rgba(227,25,55,.15);border-color:var(--vg);color:var(--vg);box-shadow:0 0 12px rgba(227,25,55,.2),inset 0 0 12px rgba(227,25,55,.05)}

/* Timestamp */
.vd-ts{align-self:center;font:400 11px 'DM Sans',sans-serif;color:var(--vt3);margin:2px 0;letter-spacing:.5px}

/* ── Lead form ─────────────────────────────── */
.vd-la{display:none;flex-shrink:0;padding:14px 16px;background:linear-gradient(135deg,var(--vn2) 0%,rgba(10,19,43,.95) 100%);border-top:1px solid var(--vr);position:relative;overflow:hidden}
.vd-la::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--vg),transparent)}
.vd-la.vd-show{display:block}
.vd-la-title{font:600 12px 'DM Sans',sans-serif;color:var(--vg);margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.vd-la-title::before{content:'';width:3px;height:14px;background:var(--vg);border-radius:2px;box-shadow:0 0 8px var(--vg)}
.vd-la-row{display:flex;gap:8px;margin-bottom:8px}
.vd-la input{flex:1;min-width:0;padding:9px 13px;border:1px solid rgba(227,25,55,.25);border-radius:8px;font:400 12.5px 'DM Sans',sans-serif;outline:none;background:rgba(255,255,255,.04);color:#fff;transition:all .2s}
.vd-la input::placeholder{color:var(--vt3)}
.vd-la input:focus{border-color:var(--vg);background:rgba(227,25,55,.08);box-shadow:0 0 0 3px rgba(227,25,55,.1)}
.vd-la-btn{width:100%;padding:10px;background:linear-gradient(135deg,var(--vg),var(--vg2));color:var(--vn2);border:none;border-radius:8px;font:700 12.5px 'DM Sans',sans-serif;cursor:pointer;transition:all .25s;letter-spacing:.3px;box-shadow:0 4px 15px rgba(227,25,55,.3)}
.vd-la-btn:hover{box-shadow:0 6px 24px rgba(227,25,55,.45);transform:translateY(-1px)}
.vd-la-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.vd-la-ok{text-align:center;padding:8px 0}
.vd-la-ok b{font:600 13px 'DM Sans',sans-serif;color:var(--vg)}

/* ── Input bar ─────────────────────────────── */
.vd-bar{padding:11px 13px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));background:var(--vn2);border-top:1px solid var(--vr);flex-shrink:0;display:flex;gap:9px;align-items:flex-end;position:relative}
.vd-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(227,25,55,.4),transparent);pointer-events:none}
.vd-in{flex:1;min-width:0;padding:9px 15px;border:1px solid rgba(227,25,55,.2);border-radius:24px;font:400 13px/1.45 'DM Sans',sans-serif;outline:none;resize:none;max-height:72px;background:rgba(255,255,255,.04);color:#fff;-webkit-appearance:none;transition:all .2s;caret-color:var(--vg)}
.vd-in::placeholder{color:var(--vt3)}
.vd-in:focus{border-color:var(--vg);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(227,25,55,.1)}
.vd-go{width:38px;height:38px;min-width:38px;border-radius:50%;background:linear-gradient(135deg,var(--vg),var(--vg2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s;box-shadow:0 0 16px rgba(227,25,55,.3)}
.vd-go:hover:not(:disabled){box-shadow:0 0 28px rgba(227,25,55,.55);transform:scale(1.08)}
.vd-go:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.vd-go svg{width:15px;height:15px;fill:var(--vn2)}

/* ── Footer ────────────────────────────────── */
.vd-ft{text-align:center;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));font:400 9px 'DM Sans',sans-serif;color:var(--vt3);background:var(--vn2);border-top:1px solid rgba(255,255,255,.04);letter-spacing:.5px;flex-shrink:0}
.vd-ft b{color:var(--vg);font-weight:500}

/* ── Animations ────────────────────────────── */
@keyframes vdBo{0%,80%,100%{transform:translateY(0);opacity:.6}40%{transform:translateY(-7px);opacity:1}}
@keyframes vdIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes vdPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.1;transform:scale(1.15)}}
@keyframes vdGlow{0%,100%{box-shadow:0 0 16px rgba(227,25,55,.3)}50%{box-shadow:0 0 28px rgba(227,25,55,.55)}}

/* ── Mobile ────────────────────────────────── */
@media(max-width:640px){
  .vd-box{width:100%;height:100%}
  .vd-hd{padding:12px 14px;gap:11px}.vd-av{width:38px;height:38px}.vd-av svg{width:18px;height:18px}.vd-hd-t h4,.vd-hd-t p{font-size:14px}.vd-x{width:30px;height:30px}
  .vd-feed{padding:13px 12px;gap:9px}.vd-m{max-width:93%;font-size:12.5px}.vd-opts{max-width:94%;gap:5px}.vd-opt{padding:6px 12px;font-size:11px}
  .vd-la{padding:11px 13px}.vd-la-row{gap:6px}.vd-la input{padding:8px 11px;font-size:12px}.vd-la-btn{padding:10px;font-size:12.5px}
  .vd-bar{padding:9px 11px;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));gap:7px}.vd-in{padding:9px 13px;font-size:12.5px}.vd-go{width:36px;height:36px;min-width:36px}.vd-go svg{width:13px;height:13px}
  .vd-ft{font-size:10px;padding:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
}

/* ══ LIGHT THEME (ivory · navy ink · crimson + amber accents) — overrides the dark rules above ══ */
:root{
  --vn:#FCFBF8;--vn2:#F4EEE2;--vn3:#FFFFFF;--vn4:#EFE7D6;
  --vg2:#B45309;                       /* amber accent — readable on light */
  --vt:#0A132B;                        /* primary navy ink */
  --vt2:rgba(10,19,43,.66);            /* secondary */
  --vt3:rgba(10,19,43,.72);            /* muted — was .42, only 2.73:1 on the light
                                        chat surface. .72 gives 7.1:1 (audit 2026-09-04) */
  --vt4:rgba(10,19,43,.05);            /* subtle wash */
  --vr:rgba(227,25,55,.18);            /* crimson border */
}
.vd-ov{background:rgba(10,19,43,.38)}
.vd-box{background:linear-gradient(175deg,#FFFFFF 0%,#FBFAF7 45%,#F4EEE2 100%);box-shadow:-20px 0 80px rgba(10,19,43,.18),-1px 0 0 rgba(227,25,55,.10)}
.vd-hd{background:linear-gradient(135deg,rgba(227,25,55,.06) 0%,rgba(227,25,55,.015) 100%)}
.vd-av svg{stroke:#fff}
.vd-av::after{border-color:#fff}
.vd-hd-t h4,.vd-hd-t p{color:var(--vt)}
.vd-hd-t h4 span,.vd-hd-t p span{color:var(--vg2)}
.vd-x{border-color:rgba(10,19,43,.10)}
.vd-m.vd-b{background:#fff;color:var(--vt);border-color:rgba(227,25,55,.14)}
.vd-m.vd-b strong{color:var(--vt)}
.vd-m.vd-u{background:linear-gradient(135deg,#E31937 0%,#C01530 100%);color:#fff}
.vd-tbl td{border-color:rgba(10,19,43,.10)}
.vd-tp{background:#fff;border-color:rgba(227,25,55,.14)}
.vd-la{background:linear-gradient(135deg,#F4EEE2 0%,#FCFBF8 100%)}
.vd-la input{background:#fff;color:var(--vt)}
.vd-la-btn{background:linear-gradient(135deg,#E31937 0%,#C01530 100%);color:#fff}
.vd-bar{background:#FBFAF7}
.vd-in{background:#fff;color:var(--vt)}
.vd-in:focus{background:#fff}
.vd-go{background:linear-gradient(135deg,#E31937 0%,#C01530 100%)}
.vd-go svg{fill:#fff}
.vd-ft{background:#FBFAF7;border-top-color:rgba(10,19,43,.08)}