/* Live chat */
.chatbtn{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:62px;height:62px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);background:var(--dark);color:var(--gold);display:grid;place-items:center;box-shadow:0 18px 40px -12px rgba(14,13,11,.55);transition:transform .35s var(--ease)}
.chatbtn:hover{transform:translateY(-3px)}
.chatbtn svg{width:26px;height:26px}
.chatbtn .dot{position:absolute;top:4px;right:4px;min-width:20px;height:20px;border-radius:10px;background:var(--brand);color:var(--dark);font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px}
.chatbtn .tip{position:absolute;right:74px;white-space:nowrap;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:9px 14px;font-size:13px;box-shadow:0 10px 30px -12px rgba(0,0,0,.25);animation:rise .6s var(--ease) both}
.chatbox{position:fixed;right:20px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:61;width:min(390px,calc(100vw - 32px));height:min(600px,calc(100vh - 130px));background:var(--bg);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(14,13,11,.5);display:flex;flex-direction:column;animation:rise .45s var(--ease)}
.chathead{background:var(--dark);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:12px;position:relative}
.chathead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--foil)}
.chathead .av{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);display:grid;place-items:center;color:var(--gold);font-family:var(--display);font-size:18px;flex:none}
.chathead b{font-family:var(--display);font-weight:400;font-size:19px;display:block;line-height:1.2}
.chathead small{font-size:12px;color:#c9c0ab;display:flex;align-items:center;gap:6px}
.chathead small i{width:7px;height:7px;border-radius:50%;background:#8a8272}
.chathead small i.on{background:#2fa36b}
.chathead .cx{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:50%;width:34px;height:34px;flex:none}
.chatlog{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.msg{max-width:84%;padding:10px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.them{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-radius:2px 14px 14px 14px}
.msg.me{background:var(--dark);color:#fff;align-self:flex-end;border-radius:14px 2px 14px 14px}
.msg small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.msg.sys{align-self:center;background:none;border:0;color:var(--muted);font-size:12.5px;text-align:center;padding:4px}
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.qchips button{background:var(--bg);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);padding:7px 12px;font-size:13px;border-radius:16px;text-align:left}
.qchips button:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.chatwho{padding:12px 16px;border-top:1px solid var(--line);display:grid;gap:8px;background:var(--bg)}
.chatwho p{margin:0;font-size:13px;color:var(--muted)}
.chatwho input{font:inherit;font-size:15px;border:0;border-bottom:1px solid var(--line);padding:8px 2px;background:transparent;color:var(--ink)}
.chatwho input:focus,.chatin textarea:focus{outline:none;border-color:var(--gold)}
.chatin{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--bg);align-items:flex-end}
.chatin textarea{flex:1;font:inherit;font-size:15px;border:1px solid var(--line);padding:10px 12px;resize:none;max-height:120px;background:var(--bg);color:var(--ink)}
.chatin button{width:44px;height:44px;border-radius:50%;border:0;background:var(--dark);color:var(--gold);display:grid;place-items:center;flex:none}
.chatin button svg{width:20px;height:20px}
.chatin button:disabled{opacity:.4}
@media (max-width:520px){.chatbox{right:0;left:0;bottom:0;width:100%;height:calc(100svh - 0px);border:0}.chatbtn .tip{display:none}}
body:has(.drawer:not([hidden])) .chatbtn,body:has(.modal:not([hidden])) .chatbtn{display:none}
@media print{.chatbtn,.chatbox{display:none!important}}
/* assistant / team switch, typing dots, follow strip, WhatsApp */
.chatmodes{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);background:var(--bg)}
.chatmodes button{background:none;border:0;border-bottom:2px solid transparent;padding:11px 8px;font:inherit;font-size:13px;letter-spacing:.02em;color:var(--muted);cursor:pointer}
.chatmodes button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--gold);font-weight:500}
.msg.ai a{color:inherit;text-decoration:underline}
.msg.typing{display:flex;gap:4px;padding:14px 16px}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:ffdot 1s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes ffdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.follow{margin-top:6px;padding:12px 14px;background:var(--dark);color:#efe9da;font-size:12.5px;line-height:1.5;display:grid;gap:6px}
.follow p{margin:0}
.follow .live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.2em;color:#ff6b5e;font-weight:600}
.follow .live i{width:7px;height:7px;border-radius:50%;background:#ff3b2f;animation:ffdot 1.4s infinite}
.follow div{display:flex;flex-wrap:wrap;gap:6px}
.follow a{color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);padding:4px 10px;border-radius:14px;text-decoration:none;font-size:12px}
.follow a:hover{background:var(--gold);color:var(--dark)}
.msg.sys.wa{display:grid;gap:8px;justify-items:center}
.wabtn{display:inline-block;background:#25d366;color:#fff!important;text-decoration:none;padding:8px 14px;border-radius:18px;font-size:13px;font-weight:500}
/* floating LIVE bar (closable) */
.livebar{position:relative;margin:0 10px 8px;background:var(--dark);color:#efe9da;border-radius:12px;padding:9px 34px 9px 12px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;font-size:12px;line-height:1.4;box-shadow:0 10px 24px -12px rgba(0,0,0,.55);animation:rise .4s var(--ease)}
.livebar[hidden]{display:none}
.livebar p{margin:0}
.livebar .live{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.18em;color:#ff6b5e;font-weight:700}
.livebar .live i{width:7px;height:7px;border-radius:50%;background:#ff3b2f;animation:ffdot 1.4s infinite}
.livebar .ll{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.livebar .ll a{color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);padding:3px 9px;border-radius:12px;text-decoration:none;font-size:11.5px}
.livebar .lx{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:11px;line-height:1}
/* chat on phones: full screen, roomy tap targets, no zoom on focus */
@media (max-width:520px){
  .chatbox{height:100dvh;max-height:100dvh}
  .chathead{padding:14px 16px}.chathead b{font-size:17px}
  .chatmodes button{padding:12px 6px;font-size:13px}
  .chatlog{padding:14px 12px}
  .msg{max-width:90%;font-size:15px}
  .qchips button{font-size:13.5px;padding:8px 12px}
  .chatin{padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .chatin textarea,.chatwho input{font-size:16px}
}
