/* OurNetHelps Mortgage Q&A Assistant — Frontend Widget Styles */

/* ── Chat button ─────────────────────────────────────────────────────────── */
#onhmqa-btn{position:fixed;bottom:22px;z-index:99998;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;padding:0;-webkit-tap-highlight-color:transparent}
#onhmqa-btn:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2)}
#onhmqa-btn:active{transform:scale(0.94)}
#onhmqa-btn svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s;pointer-events:none}
#onhmqa-btn .onhmqa-ico-chat{fill:#fff;stroke:none}
#onhmqa-btn .onhmqa-ico-close{position:absolute;opacity:0}
#onhmqa-btn.onhmqa-open .onhmqa-ico-chat{opacity:0}
#onhmqa-btn.onhmqa-open .onhmqa-ico-close{opacity:1}
/* ── Urgency pill ────────────────────────────────────────────────────────── */
#onhmqa-urgency{position:fixed;bottom:90px;z-index:99997;color:#fff;font-size:11px;font-weight:700;padding:5px 13px;border-radius:20px;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.25);pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:.01em}
/* ── Popup bubble ────────────────────────────────────────────────────────── */
#onhmqa-popup{position:fixed;bottom:92px;z-index:99996;background:#fff;color:#1e293b;font-size:13px;font-weight:500;padding:11px 34px 11px 15px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.18),0 1px 4px rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.06);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.45;max-width:210px;opacity:0;transform:translateY(10px) scale(.95);transition:opacity .3s,transform .3s;pointer-events:none;-webkit-tap-highlight-color:transparent}
#onhmqa-popup.onhmqa-popup-show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
#onhmqa-popup-x{position:absolute;top:5px;right:7px;background:none;border:none;font-size:16px;line-height:1;cursor:pointer;color:#9ca3af;padding:2px 4px;font-family:inherit;-webkit-tap-highlight-color:transparent}
#onhmqa-popup-x:hover{color:#374151}
/* ── Chat box ────────────────────────────────────────────────────────────── */
#onhmqa-box{position:fixed;bottom:92px;z-index:99999;width:345px;max-height:min(560px,calc(100vh - 110px));background:#f8fafc;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.30),0 6px 20px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(20px) scale(.96);pointer-events:none;transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .24s cubic-bezier(.4,0,.2,1);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
#onhmqa-box.onhmqa-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
/* ── Header ──────────────────────────────────────────────────────────────── */
#onhmqa-head{padding:12px 14px 11px;display:flex;align-items:center;gap:11px;flex-shrink:0;position:relative}
#onhmqa-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,255,255,.15)}
#onhmqa-head-info{flex:1;min-width:0}
#onhmqa-head-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.35)}
/* ── Messages area ───────────────────────────────────────────────────────── */
#onhmqa-msgs{flex:1;overflow-y:auto;padding:16px 13px 10px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#f8fafc;min-height:80px}
#onhmqa-msgs::-webkit-scrollbar{width:4px}
#onhmqa-msgs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
#onhmqa-msgs::-webkit-scrollbar-track{background:transparent}
/* ── Message bubbles ─────────────────────────────────────────────────────── */
.onhmqa-m{max-width:88%;padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.6;word-break:break-word;position:relative}
.onhmqa-bot{background:#ffffff;color:#1e293b;border-bottom-left-radius:5px;align-self:flex-start;box-shadow:0 1px 4px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.06)}
.onhmqa-m a{color:inherit;text-decoration:underline;opacity:.9}
/* ── Quick-tap chips ─────────────────────────────────────────────────────── */
#onhmqa-chips{padding:6px 12px 8px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;background:#f8fafc;border-top:1px solid #e9eff5}
#onhmqa-chips:empty{padding:0;display:none;border-top:none}
.onhmqa-chip{background:#fff;font-size:12px;font-weight:500;padding:6px 12px;border-radius:20px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;line-height:1.3;box-shadow:0 1px 3px rgba(0,0,0,.08);color:#1e293b}
.onhmqa-chip:active{transform:scale(.97)}
/* ── Input row ───────────────────────────────────────────────────────────── */
#onhmqa-inp-row{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid #e9eff5;flex-shrink:0;align-items:center;background:#fff}
#onhmqa-inp{flex:1;border:1.5px solid #e2e8f0;border-radius:12px;padding:9px 13px;font-size:16px;font-family:inherit;outline:none;resize:none;height:40px;line-height:1.3;overflow:hidden;background:#f8fafc;color:#0f172a;-webkit-appearance:none;transition:border-color .15s,background .15s}
#onhmqa-inp::placeholder{color:#94a3b8}
#onhmqa-snd{border:none;border-radius:12px;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;padding:0;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#onhmqa-snd:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.25)}
#onhmqa-snd:active{transform:scale(.94)}
#onhmqa-snd:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
#onhmqa-snd svg{width:17px;height:17px;fill:#fff;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* ── Footer branding ─────────────────────────────────────────────────────── */
#onhmqa-foot{flex-shrink:0;padding:2px 12px 6px;background:#fff}
/* ── Mobile close button ─────────────────────────────────────────────────── */
#onhmqa-head-close{display:none;background:rgba(255,255,255,.18);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;transition:background .15s}
#onhmqa-head-close:hover{background:rgba(255,255,255,.3)}
#onhmqa-head-close:active{background:rgba(255,255,255,.4);transform:scale(.94)}
#onhmqa-head-close svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;pointer-events:none}
/* ── Responsive: full screen on mobile ──────────────────────────────────── */
@media(max-width:540px){
  #onhmqa-box{width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;bottom:0!important;right:0!important;left:0!important;border-radius:0;transition:opacity .18s,transform .18s;box-shadow:none}
  #onhmqa-btn{bottom:18px}
  #onhmqa-urgency{bottom:84px}
  #onhmqa-popup{bottom:84px;max-width:calc(100vw - 40px)}
  #onhmqa-head{padding:11px 14px 11px}
  #onhmqa-head-close{display:flex}
  .onhmqa-m{font-size:14px;padding:10px 14px}
  .onhmqa-chip{font-size:12.5px;padding:7px 13px}
  #onhmqa-inp{font-size:16px}
  #onhmqa-chips{padding:6px 12px 12px;gap:8px}
}
/* ── Very small screens ─────────────────────────────────────────────────── */
@media(max-width:360px){
  #onhmqa-head{padding:12px 12px 11px;gap:9px}
  #onhmqa-head-name{font-size:12px}
  .onhmqa-chip{font-size:11.5px;padding:6px 10px}
  .onhmqa-m{font-size:13.5px}
}
/* ── WordPress admin bar offset ─────────────────────────────────────────── */
.admin-bar #onhmqa-box{max-height:min(560px,calc(100vh - 152px))}
@media screen and (max-width:782px){
  .admin-bar #onhmqa-box{max-height:min(560px,calc(100vh - 166px))}
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.onhmqa-typing-dots{display:inline-flex;gap:4px;align-items:center;height:20px}
.onhmqa-dot{width:7px;height:7px;background:#94a3b8;border-radius:50%;animation:onhmqab 1.2s infinite ease-in-out}
.onhmqa-dot:nth-child(2){animation-delay:.2s}
.onhmqa-dot:nth-child(3){animation-delay:.4s}
@keyframes onhmqab{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
