/* "How can we help you?" — shared site-wide help widget (CHAT-WIDGET-BUILD-BRIEF.md, redesigned
   2026-08-15 in the style of Dell's support widget, extracted 2026-08-15 into shared css/js so it
   is consistent across every page instead of living only inline in account.html).
   Paired with js/help-widget.js, which injects the markup and owns all behavior. Include on every
   real site page (not login/signup/logout/forgot-password/reset-password/no-access) with:
     <link rel="stylesheet" href="css/help-widget.css">
     <script src="js/help-widget.js"></script>
   Hidden entirely until GET /api/chat/presence reports configured:true; the real "bought a package"
   gate for Chat with Promod is enforced server-side on POST /api/chat/start (a 403 there switches
   that pane to a gated message instead of the chat UI, rather than duplicating the check client-side).
   Ask Sumi and Schedule a call are both reachable regardless of Promod's online status — Ask Sumi
   opens inline (same /api/quote/sumi endpoint quote.html's old standalone Sumi used); Schedule a call
   deep-links to contact.html's "Schedule a Call with Our Team" Bookings scheduler (#schedBox). */
#chatFab{position:fixed;right:24px;bottom:24px;z-index:400;width:60px;height:60px;border-radius:50%;
  background:var(--ink,#0f172a);color:#fff;border:none;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:none;align-items:center;justify-content:center;font-size:24px}
#chatFab .dot{position:absolute;top:4px;right:4px;width:12px;height:12px;border-radius:50%;background:#9ca3af;border:2px solid #fff}
#chatFab .dot.on{background:#22c55e}
#chatPanel{position:fixed;right:24px;bottom:96px;z-index:400;width:340px;max-width:calc(100vw - 32px);
  height:460px;max-height:calc(100vh - 140px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:none;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb}
#chatPanel.open{display:flex}
.cw-head{padding:14px 16px;background:var(--ink,#0f172a);color:#fff;display:flex;align-items:center;gap:10px;flex:none}
.cw-head .back{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.85;padding:0 2px 0 0;flex:none}
.cw-head .ttl{flex:1;min-width:0}
.cw-head .ttl .t{font-weight:700;font-size:14px}
.cw-head .ttl .s{font-size:14px;opacity:.75;display:flex;align-items:center;gap:6px;margin-top:2px}
.cw-head .ttl .s .dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;flex:none}
.cw-head .ttl .s .dot.on{background:#22c55e}
.cw-head .x{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.8;flex:none}
#helpMenuList{padding:10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;background:#f8fafc;flex:1}
.help-opt{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;border:1px solid #e5e7eb;
  background:#fff;text-decoration:none;color:inherit;cursor:pointer;text-align:left;font:inherit;width:100%}
.help-opt:hover{background:#f0f6ff;border-color:#93c5fd}
.help-opt .ic{font-size:20px;line-height:1;flex:none;margin-top:1px}
.help-opt .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.help-opt .tx b{font-size:14px;color:var(--ink,#0f172a)}
.help-opt .tx .d{font-size:14px;color:#6b7280;line-height:1.35;display:flex;align-items:center;gap:5px}
.help-opt .tx .d .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9ca3af;flex:none}
.help-opt .tx .d .dot.on{background:#22c55e}
#chatBody,#sumiBody{flex:1;overflow-y:auto;padding:12px;background:#f8fafc;display:flex;flex-direction:column;gap:8px}
#chatBody .msg,#sumiBody .msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.4;word-wrap:break-word}
#chatBody .msg.me,#sumiBody .msg.me{align-self:flex-end;background:var(--ink,#0f172a);color:#fff;border-bottom-right-radius:3px}
#chatBody .msg.them,#sumiBody .msg.them{align-self:flex-start;background:#fff;border:1px solid #e5e7eb;border-bottom-left-radius:3px}
#chatBody .msg .ts,#sumiBody .msg .ts{display:block;font-size:14px;opacity:.6;margin-top:3px}
#chatGate,#chatIntro{padding:16px;font-size:14px;color:#374151;line-height:1.5}
#chatForm,#sumiForm{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb;background:#fff;flex:none}
#chatText,#sumiText{flex:1;border:1px solid #d1d5db;border-radius:20px;padding:9px 14px;font-size:14px;resize:none;font-family:inherit}
#chatSendBtn,#sumiSendBtn{background:var(--ink,#0f172a);color:#fff;border:none;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:15px;flex:none}
#chatSendBtn:disabled,#sumiSendBtn:disabled{opacity:.5;cursor:default}
#chatOfflineActions{margin-top:2px;padding:10px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;display:flex;flex-direction:column;gap:6px}
#chatOfflineActions .lbl{font-size:14px;color:#6b7280;text-align:center;margin-bottom:2px}
#chatOfflineActions .opt,#sumiSignIn .opt{display:block;width:100%;text-align:center;padding:7px 10px;border-radius:8px;background:#f8fafc;
  border:1px solid #e5e7eb;color:var(--ink,#0f172a);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
#chatOfflineActions .opt:hover,#sumiSignIn .opt:hover{background:#eef2f7}
#sumiSugg{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 4px}
#sumiSugg button{border:1.5px solid #c7d2fe;background:#fff;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600;color:var(--ink,#0f172a);cursor:pointer;font-family:inherit}
#sumiSugg button:hover{background:#eef2ff;border-color:#a5b4fc}