/* Chat with a rep (2026-10-05): the corner button and the chat box, on every page, in the website's own colors
   (owner 9:12 PM: "the website doesnt need this green color from the mdm its very ugly"): ink #071b2a, button #143e54, paper #f4f7f8, ice #d9edf7. Phone first. */
.hl-chat{position:fixed;right:16px;bottom:16px;z-index:9000;font-family:'Inter Variable',Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;color:#071b2a}
.hl-chat-open{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:6px;background:#143e54;color:#fff;font:inherit;font-weight:600;letter-spacing:.01em;box-shadow:0 10px 28px rgba(7,27,42,.28);cursor:pointer}
.hl-chat-open:hover{background:#0f3043}
.hl-chat-open.has-new::after{content:"";width:10px;height:10px;border-radius:50%;background:#55b9ed;margin-left:2px}
.hl-chat.is-open .hl-chat-open{display:none}
.hl-chat-box{width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 32px));display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(7,27,42,.32);overflow:hidden}
.hl-chat-box header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#071b2a;color:#fff}
.hl-chat-box header strong{font-size:16px}
.hl-chat-box header span{flex:1;font-size:12px;opacity:.8}
.hl-chat-close{margin-left:auto;width:36px;height:36px;border:0;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.hl-chat-start{display:flex;flex-direction:column;gap:12px;padding:16px}
.hl-chat-start p{margin:0;color:#3f5361;font-size:14px}
.hl-chat-start label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.hl-chat-start label small{font-weight:400;color:#6a7d89}
.hl-chat-box input,.hl-chat-box textarea{width:100%;box-sizing:border-box;border:1px solid #c6d4dd;border-radius:6px;padding:10px 12px;font:inherit;font-size:16px;color:#071b2a;background:#fff}
.hl-chat-box input:focus,.hl-chat-box textarea:focus{outline:2px solid #55b9ed;outline-offset:1px}
.hl-chat-box textarea{resize:none}
.hl-chat-send{min-height:46px;padding:0 18px;border:0;border-radius:6px;background:#143e54;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.hl-chat-send:hover{background:#0f3043}
.hl-chat-send:disabled{opacity:.6;cursor:default}
.hl-chat-lines{flex:1;min-height:200px;overflow:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;background:#f4f7f8}
.hl-chat-line{display:flex;flex-direction:column;gap:3px;max-width:85%}
.hl-chat-line.me{align-self:flex-end;align-items:flex-end}
.hl-chat-line.rep{align-self:flex-start}
.hl-chat-bubble{padding:9px 12px;border-radius:10px;line-height:1.4;overflow-wrap:anywhere}
.hl-chat-line.me .hl-chat-bubble{background:#143e54;color:#fff;border-bottom-right-radius:3px}
.hl-chat-line.rep .hl-chat-bubble{background:#fff;border:1px solid #d9edf7;border-bottom-left-radius:3px}
.hl-chat-line small{font-size:11px;color:#6a7d89}
.hl-chat-wait{align-self:center;font-size:12px;color:#6a7d89;padding:4px 0}
.hl-chat-reply{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e2eaef;background:#fff}
.hl-chat-reply textarea{flex:1}
.hl-chat-ended{padding:16px;text-align:center}
.hl-chat-ended p{margin:0 0 10px;color:#3f5361}
.hl-chat-again{min-height:44px;padding:0 16px;border:1px solid #c6d4dd;border-radius:6px;background:#fff;font:inherit;color:#143e54;cursor:pointer}
.hl-chat-note{margin:0;padding:8px 16px 12px;font-size:13px;color:#a23b2a}
@media(max-width:600px){.hl-chat{right:10px;bottom:10px}.hl-chat-box{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}}
/* ON A PHONE THE BUTTON IS A ROUND ICON (2026-10-14: the phone audit found the wide "Chat with a rep" button lying over a plan's
   button at 7 of 8 phone sizes, and over the try-it phone's bottom bar). The words stay for screen readers (the button's own label). */
@media(max-width:600px){
  .hl-chat-open{width:56px;height:56px;min-height:56px;padding:0;border-radius:50%;justify-content:center;position:relative}
  .hl-chat-open svg{width:24px;height:24px}
  .hl-chat-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hl-chat-open.has-new::after{position:absolute;top:8px;right:8px;margin:0}
}