/* 72HWD AI Chat Widget
   ────────────────────────
   Apple-Messages-inspired bubbles with iOS-style chrome.
   Floating launcher (bottom-right desktop) collapses into a chat panel.
   Mobile gets a full-width footer launcher + full-screen panel.
*/
.hwd-chat-root{position:fixed;z-index:9998;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif}
.hwd-chat-root *{box-sizing:border-box}

/* ── Launcher (collapsed state) ───────────────────────────────────────── */
.hwd-chat-launcher{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#2B5FC1,#1E4AA8);color:#fff;border:none;cursor:pointer;box-shadow:0 10px 28px -8px rgba(43,95,193,.55),0 4px 10px -4px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:transform .18s ease, box-shadow .18s ease;z-index:9998}
.hwd-chat-launcher:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 34px -8px rgba(43,95,193,.65),0 6px 14px -4px rgba(0,0,0,.22)}
.hwd-chat-launcher svg{width:26px;height:26px}
.hwd-chat-launcher .hwd-dot{position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#FF453A;border:2px solid #fff;animation:hwdPulse 1.6s ease-out infinite}
@keyframes hwdPulse{0%{box-shadow:0 0 0 0 rgba(255,69,58,.6)}70%{box-shadow:0 0 0 10px rgba(255,69,58,0)}100%{box-shadow:0 0 0 0 rgba(255,69,58,0)}}

/* ── Panel (expanded state) ───────────────────────────────────────────── */
.hwd-chat-panel{position:fixed;right:22px;bottom:22px;width:380px;height:620px;max-height:calc(100vh - 44px);background:#fff;border-radius:20px;box-shadow:0 24px 60px -16px rgba(14,27,50,.4),0 8px 16px -8px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;pointer-events:none;visibility:hidden;transform:translateY(20px) scale(.96);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.3,1.15), opacity .18s ease, visibility 0s linear .2s;z-index:9999}
.hwd-chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;visibility:visible;transition:transform .22s cubic-bezier(.2,.9,.3,1.15), opacity .18s ease, visibility 0s linear 0s}

/* ── Header ──────────────────────────────────────────────────────────── */
.hwd-chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.86));backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);position:relative}
.hwd-chat-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2B5FC1,#1E4AA8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.02em;overflow:hidden;flex-shrink:0;box-shadow:0 2px 6px -1px rgba(43,95,193,.4)}
.hwd-chat-avatar img{width:100%;height:100%;object-fit:cover}
.hwd-chat-title{flex:1;min-width:0}
.hwd-chat-name{font-weight:700;font-size:15px;color:#0E1B32;letter-spacing:-.01em;line-height:1.15}
.hwd-chat-sub{font-size:11px;color:#34C759;font-weight:600;display:flex;align-items:center;gap:5px;margin-top:1px}
.hwd-chat-sub::before{content:"";width:6px;height:6px;border-radius:50%;background:#34C759}
.hwd-chat-actions{display:flex;gap:4px;align-items:center}
.hwd-chat-iconbtn{appearance:none;border:none;background:transparent;color:#6e6e73;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}
.hwd-chat-iconbtn:hover{background:rgba(0,0,0,.06);color:#0E1B32}
.hwd-chat-iconbtn svg{width:18px;height:18px}

/* ── Thread ──────────────────────────────────────────────────────────── */
.hwd-chat-thread{flex:1;overflow-y:auto;padding:16px 14px 8px;background:#fff;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.hwd-chat-day{align-self:center;font-size:11px;color:#8e8e93;font-weight:600;padding:8px 4px 12px;text-transform:uppercase;letter-spacing:.06em}
.hwd-msg{display:flex;flex-direction:column;max-width:78%;animation:hwdBubble .22s cubic-bezier(.2,.9,.3,1.15)}
@keyframes hwdBubble{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hwd-msg.user{align-self:flex-end;align-items:flex-end}
.hwd-msg.assistant{align-self:flex-start;align-items:flex-start}
.hwd-bubble{padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.38;word-wrap:break-word;position:relative}
.hwd-msg.user .hwd-bubble{background:linear-gradient(180deg,#2B5FC1,#1E4AA8);color:#fff;border-bottom-right-radius:5px}
.hwd-msg.assistant .hwd-bubble{background:#F2F2F7;color:#0E1B32;border-bottom-left-radius:5px}
.hwd-bubble p{margin:0 0 6px}
.hwd-bubble p:last-child{margin-bottom:0}
.hwd-bubble a{color:#2B5FC1;font-weight:600;text-decoration:underline}
.hwd-msg.user .hwd-bubble a{color:#fff;text-decoration:underline}
.hwd-bubble ul,.hwd-bubble ol{margin:6px 0 6px 18px;padding:0}
.hwd-bubble li{margin:3px 0;font-size:14.5px;line-height:1.4}
.hwd-bubble strong{font-weight:700}
.hwd-bubble em{font-style:italic}
.hwd-bubble img{max-width:100%;border-radius:12px;margin-top:6px;display:block}
.hwd-bubble .hwd-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(0,0,0,.05);border-radius:10px;font-size:13px;color:#0E1B32;margin-top:6px;text-decoration:none}
.hwd-meta{font-size:10px;color:#8e8e93;margin-top:3px;padding:0 8px}
.hwd-typing{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;background:#F2F2F7;border-radius:18px;border-bottom-left-radius:5px;align-self:flex-start}
.hwd-typing span{width:7px;height:7px;border-radius:50%;background:#8e8e93;animation:hwdDot 1.2s ease-in-out infinite}
.hwd-typing span:nth-child(2){animation-delay:.18s}
.hwd-typing span:nth-child(3){animation-delay:.36s}
@keyframes hwdDot{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}

/* ── Lead-capture form (pop-in) ───────────────────────────────────────── */
.hwd-lead-form{padding:18px 18px 8px;background:#F8F9FB;border-top:1px solid #E5E5EA;animation:hwdSlide .25s ease-out}
@keyframes hwdSlide{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.hwd-lead-intro{font-size:13px;color:#3a4259;margin-bottom:10px;line-height:1.45}
.hwd-lead-intro p{margin:0}
.hwd-lead-form .hwd-row{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.hwd-lead-form label{font-size:11px;font-weight:600;color:#6e6e73;text-transform:uppercase;letter-spacing:.06em}
.hwd-lead-form input{padding:9px 12px;border:1px solid #d2d2d7;border-radius:10px;font:inherit;font-size:14px;color:#0E1B32;background:#fff;outline:none}
.hwd-lead-form input:focus{border-color:#2B5FC1;box-shadow:0 0 0 3px rgba(43,95,193,.12)}
.hwd-lead-submit{appearance:none;border:none;background:#2B5FC1;color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:10px;cursor:pointer;width:100%;margin-top:4px;transition:background .15s}
.hwd-lead-submit:hover{background:#1E4AA8}
.hwd-lead-skip{appearance:none;border:none;background:transparent;color:#6e6e73;font-size:12px;cursor:pointer;padding:6px;width:100%;margin-top:2px}
.hwd-lead-skip:hover{color:#0E1B32}

/* ── Composer ────────────────────────────────────────────────────────── */
.hwd-composer{border-top:1px solid rgba(0,0,0,.08);background:#fff;padding:10px 12px 12px}
.hwd-input-wrap{display:flex;align-items:flex-end;gap:6px;background:#F2F2F7;border-radius:22px;padding:5px 5px 5px 14px}
.hwd-input{flex:1;border:none;background:transparent;outline:none;resize:none;font:inherit;font-size:15px;color:#0E1B32;padding:7px 0;max-height:120px;line-height:1.35}
.hwd-input::placeholder{color:#8e8e93}
.hwd-send{appearance:none;border:none;background:#2B5FC1;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,opacity .15s}
.hwd-send:hover{background:#1E4AA8}
.hwd-send:disabled{opacity:.4;cursor:not-allowed}
.hwd-send svg{width:16px;height:16px;transform:translateX(1px) translateY(-1px)}
.hwd-tools{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:6px;padding:0 4px}
.hwd-tools-left,.hwd-tools-right{display:flex;gap:4px;align-items:center}
.hwd-tool-btn{appearance:none;border:none;background:transparent;color:#6e6e73;font-size:12px;font-weight:500;padding:5px 9px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,color .15s}
.hwd-tool-btn:hover{background:rgba(0,0,0,.05);color:#0E1B32}
.hwd-tool-btn svg{width:14px;height:14px}
.hwd-tool-btn.danger{color:#FF453A}
.hwd-tool-btn.danger:hover{background:rgba(255,69,58,.08);color:#D70015}
.hwd-attach-input{display:none}

/* ── Toast (errors, status) ──────────────────────────────────────────── */
.hwd-toast{position:absolute;left:50%;top:14px;transform:translateX(-50%) translateY(-8px);background:rgba(14,27,50,.92);color:#fff;font-size:12px;padding:8px 14px;border-radius:18px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;backdrop-filter:blur(8px)}
.hwd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Mobile: app-like floating footer bar + full-screen panel ─────────── */
@media(max-width:680px){
  .hwd-chat-launcher{right:50%;transform:translateX(50%);bottom:calc(14px + env(safe-area-inset-bottom));width:auto;height:auto;padding:11px 22px;border-radius:99px;font-family:inherit;font-weight:700;font-size:14px;gap:8px;display:flex;align-items:center}
  .hwd-chat-launcher::after{content:"Chat with us";display:inline}
  .hwd-chat-launcher svg{width:18px;height:18px}
  .hwd-chat-launcher .hwd-dot{top:-3px;right:-3px}
  /* Full-screen panel pinned to the visible viewport. The fixed inset:0 + 100dvh combo
     keeps it covering the entire viewport including under iOS Safari's floating URL bar.
     JS overrides height via window.visualViewport when the keyboard opens so the composer
     sits flush above it (Apple Messages style). */
  .hwd-chat-panel{position:fixed;inset:0;right:0;left:0;top:0;bottom:0;width:100%;height:100dvh;max-height:100dvh;max-width:100vw;border-radius:0;box-shadow:none;transform:translateY(8px);transition:transform .2s cubic-bezier(.2,.9,.3,1.15), opacity .15s ease}
  .hwd-chat-panel.open{transform:none}
  /* iOS notch / status-bar inset on the header */
  .hwd-chat-head{padding-top:max(14px, calc(14px + env(safe-area-inset-top)))}
  /* Home-indicator inset on the composer */
  .hwd-composer{padding-bottom:max(12px, calc(12px + env(safe-area-inset-bottom)))}
  .hwd-msg{max-width:86%}
  .hwd-bubble{font-size:16px} /* iOS default to prevent zoom on focus */
  .hwd-input{font-size:16px}
}
@media(max-width:560px){
  .hwd-chat-launcher{bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 18px;font-size:13px}
}
/* When JS detects iOS keyboard, it sets data-keyboard="on" on the root and a CSS var
   --hwd-vh so the panel can hug the visible viewport. */
.hwd-chat-root[data-keyboard="on"] .hwd-chat-panel{height:var(--hwd-vh, 100dvh) !important;max-height:var(--hwd-vh, 100dvh) !important}
.hwd-chat-root[data-keyboard="on"] .hwd-composer{padding-bottom:10px !important}