/* ============================================================
   GRABEE AI v12.3.6 — Production Grade Final
   All fixes: mobile sticky header, tool panel dark theme,
   no hover zoom/shadow, no SSO labels, neon green throughout,
   tool panel overlap fixed, nonce 500 fixed
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');*/

:root {
  --hgai-neon:        #00ff6e;
  --hgai-neon-dim:    #00cc57;
  --hgai-neon-glow:   rgba(0,255,110,.22);
  --hgai-neon-soft:   rgba(0,255,110,.10);
  --hgai-neon-pulse:  rgba(0,255,110,.06);
  --hgai-black:       #030805;
  --hgai-black-2:     #060c08;
  --hgai-surface:     #080e0a;
  --hgai-surface-2:   #0b1410;
  --hgai-surface-3:   #0e1a13;
  --hgai-border:      rgba(255,255,255,.08);
  --hgai-border-h:    rgba(0,255,110,.22);
  --hgai-text:        #e2fcea;
  --hgai-text-2:      #96d9aa;
  --hgai-muted:       #4e7a5e;
  --hgai-danger:      #ff4d6d;
  --hgai-warning:     #ffc947;
  --hgai-radius:      20px;
  --hgai-radius-sm:   13px;
  --hgai-width:       430px;
  --hgai-height:      640px;
  --hgai-z:           2147483000;
  --hgai-font:        'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --hgai-mono:        'JetBrains Mono', monospace;
  --hgai-shadow:      0 28px 72px rgba(0,0,0,.75), 0 0 0 1px var(--hgai-border);
  --hgai-neon-shadow: none;
}

/* ── ROOT ─────────────────────────────────────────────────── */
/* FOUC fix: the template sets display:none on hgai-root to hide it until this
   stylesheet arrives. This rule immediately overrides that inline style so
   there is no visible flash. Works together with the JS fallback in front.js. */
.hgai-root[data-hgai-fouc]:not([data-hgai-delay-pending="1"]) { display: block !important; }
.hgai-root[data-hgai-delay-pending="1"] { display: none !important; visibility: hidden !important; }

.hgai-root {
  font-family: var(--hgai-font);
  color: var(--hgai-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.hgai-root *, .hgai-root *::before, .hgai-root *::after { box-sizing: inherit; }

.hgai-root:not(.hgai-root-embedded) {
  position: fixed !important;
  /* Mobile sticky-nav offset: pushed up 0 by default, JS adds offset if needed */
  bottom: var(--hgai-bottom-offset, 24px) !important;
  z-index: var(--hgai-z) !important;
}
.mwai-open-button.hgai-launcher,
.mwai-chatbot-container.hgai-shell { pointer-events: auto; }

/* ── POSITION CLASSES (replaces old hgai-side-right / hgai-side-left) ── */
.hgai-side-right,
.hgai-pos-bottom-right  { right: 24px !important; left: auto !important; bottom: var(--hgai-bottom-offset, 24px) !important; top: auto !important; }
.hgai-side-left,
.hgai-pos-bottom-left   { left: 24px !important; right: auto !important; bottom: var(--hgai-bottom-offset, 24px) !important; top: auto !important; }
.hgai-pos-bottom-center { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: var(--hgai-bottom-offset, 24px) !important; top: auto !important; }
.hgai-pos-top-right     { right: 24px !important; left: auto !important; top: 24px !important; bottom: auto !important; }
.hgai-pos-top-left      { left: 24px !important; right: auto !important; top: 24px !important; bottom: auto !important; }

/* ── COMPACT ICON LAUNCHER (hgai-launcher-compact) ───────────────────── */
/* Applied by JS on the correct breakpoints based on admin-configured launcher style */
.mwai-open-button.hgai-launcher.hgai-launcher-compact {
  min-width: 0 !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  gap: 0 !important;
}
.mwai-open-button.hgai-launcher.hgai-launcher-compact .hgai-launcher-text { display: none !important; }
.mwai-open-button.hgai-launcher.hgai-launcher-compact .hgai-launcher-icon {
  width: 36px; height: 36px; font-size: 18px;
  box-shadow: 0 0 20px var(--hgai-neon-glow);
}
.hgai-root-embedded { width: 100%; max-width: var(--hgai-width); position: relative; }

.hgai-portal-link {
  width: 100%;
  justify-content: center;
}

/* ── LAUNCHER ─────────────────────────────────────────────── */
.mwai-open-button.hgai-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--hgai-border);
  border-radius: 999px;
  background: var(--hgai-black-2) !important;
  color: var(--hgai-text) !important;
  cursor: pointer;
  /*min-width: 230px;*/
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
  text-decoration: none;
}
.mwai-open-button.hgai-launcher:hover {
  border-color: var(--hgai-border-h);
}
.mwai-open-button.hgai-launcher.is-hidden { display: none !important; }

.hgai-launcher-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,110,.18), rgba(0,255,110,.06));
  border: 1px solid rgba(0,255,110,.28);
  display: grid; place-items: center;
  font-size: 20px; flex: 0 0 auto;
  box-shadow: 0 0 16px var(--hgai-neon-glow);
  position: relative;
}


.hgai-launcher-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; width: auto; height: 18px;
  padding: 0 4px; border-radius: 9px;
  background: var(--hgai-neon);
  border: 2px solid var(--hgai-black-2);
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: var(--hgai-black); animation: hgai-bounce .6s ease;
  box-sizing: border-box;
}

.hgai-launcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left !important; align-items: flex-start; }
.hgai-launcher-label { font-weight: 700; font-size: 14px; color: var(--hgai-text); }
.hgai-launcher-sub {
  font-size: 11px; color: var(--hgai-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.hgai-launcher-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: var(--hgai-neon); margin-top: 2px;
  letter-spacing: .04em;
}
.hgai-launcher-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hgai-neon);
  box-shadow: 0 0 8px var(--hgai-neon);
  animation: hgai-blink 2s ease-in-out infinite;
}
@keyframes hgai-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── SHELL ─────────────────────────────────────────────────── */
.mwai-chatbot-container.hgai-shell {
  display: none;
  width: var(--hgai-width);
  max-width: min(var(--hgai-width), calc(100vw - 28px));
  contain: layout style;
  animation: hgai-slide-up .35s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hgai-slide-up {
  from { opacity:0; transform:translateY(18px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.mwai-chatbot-container.hgai-shell.is-open { display: block; }
.hgai-root-embedded .mwai-chatbot-container.hgai-shell { display:block; width:100%; max-width:100%; }

/* ── WINDOW ────────────────────────────────────────────────── */
.hgai-window {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--hgai-border);
  border-radius: var(--hgai-radius);
  background: var(--hgai-surface) !important;
}
/* Top neon accent line */
.hgai-window::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hgai-neon) 40%, rgba(0,255,110,.4) 70%, transparent);
  z-index: 2; pointer-events: none;
}
/* Scan-line removed for professional look */

/* ── TOP BAR — FULLY DARK ──────────────────────────────────── */
.hgai-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px;
  /* Force full dark — override any theme leakage */
  background: var(--hgai-black) !important;
  background-color: var(--hgai-black) !important;
  border-bottom: 1px solid var(--hgai-border) !important;
  position: relative; z-index: 3; flex: 0 0 auto;
  color: var(--hgai-text) !important;
}
.hgai-bar-left, .hgai-bar-right { display: flex; align-items: center; gap: 8px; }
.hgai-bar-left { justify-content: flex-start; min-width: 0; flex: 1 1 auto; }
.hgai-bar-right { justify-content: flex-end; min-width: 0; flex: 0 0 auto; flex-wrap: nowrap; max-width: min(65%, 280px); }
.hgai-bar-info, .hgai-bar-info * { text-align: left !important; }
.hgai-bar-info { align-items: flex-start; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.hgai-agent-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,110,.2), rgba(0,255,110,.06));
  border: 1.5px solid rgba(0,255,110,.35);
  display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 0 14px rgba(0,255,110,.18); flex: 0 0 auto;
}
.hgai-bar-name { font-weight: 800; font-size: 14px; color: var(--hgai-text) !important; line-height: 1.1; display: inline-flex; align-items: center; gap: 8px; }
.hgai-bar-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hgai-neon); box-shadow: 0 0 10px var(--hgai-neon);
  animation: hgai-blink 2s ease-in-out infinite;
  flex: 0 0 auto;
}
.hgai-bar-sub {
  font-size: 11px; color: var(--hgai-neon); font-weight: 600; letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
}

.hgai-icon-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--hgai-border);
  background: var(--hgai-surface-2) !important;
  color: var(--hgai-text-2) !important;
  display: grid; place-items: center;
  cursor: pointer; font-size: 11px; font-family: var(--hgai-font);
  transition: border-color .2s, color .2s;
  min-width: 28px; min-height: 28px; flex: 0 0 28px;
  flex-shrink: 0;
}
/* Minimize and close always grouped at far right of bar */
#hgai-minimize-btn,
#mwai-close-button {
  margin-left: 2px;
  order: 99;
}
.hgai-icon-btn:hover {
  border-color: var(--hgai-border-h); color: var(--hgai-neon) !important;
}
.hgai-bar-wa {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(37,211,102,.3);
  background: rgba(37,211,102,.07) !important;
  color: #25d366 !important; text-decoration: none;
  font-size: 11px; font-weight: 700; transition: all .2s;
  flex: 0 0 auto; white-space: nowrap;
}
.hgai-bar-wa:hover { background: rgba(37,211,102,.14) !important; border-color: rgba(37,211,102,.5); }
/* ── USER ICON + CALLOUT ──────────────────────────────────────── */
.hgai-user-icon-wrap {
  position: relative;
  flex: 0 0 auto;
}
.hgai-user-icon-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,255,110,.12);
  border: 1px solid rgba(0,255,110,.28);
  color: var(--hgai-neon);
  cursor: pointer;
  padding: 0;
  transition: background .18s, box-shadow .18s;
  flex: 0 0 auto;
}
.hgai-user-icon-btn:hover,
.hgai-user-icon-wrap.hgai-callout-open .hgai-user-icon-btn {
  background: rgba(0,255,110,.22);
  box-shadow: 0 0 0 3px rgba(0,255,110,.15);
}
.hgai-user-icon-btn svg { pointer-events: none; }
/* Callout bubble */
.hgai-user-callout {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--hgai-surface-2);
  border: 1px solid var(--hgai-border);
  border-radius: 10px;
  padding: 10px 12px 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px) scale(.97);
  transition: opacity .15s, transform .15s;
  white-space: nowrap;
}
.hgai-user-icon-wrap.hgai-callout-open .hgai-user-callout {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Arrow tip */
.hgai-user-callout::before {
  content: '';
  position: absolute;
  top: -6px; right: 10px;
  width: 10px; height: 10px;
  background: var(--hgai-surface-2);
  border-left: 1px solid var(--hgai-border);
  border-top: 1px solid var(--hgai-border);
  transform: rotate(45deg);
}
.hgai-user-callout-name {
  font-size: 12px; font-weight: 700;
  color: var(--hgai-text);
  overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.hgai-callout-logout {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--hgai-border);
  border-radius: 6px; padding: 5px 9px;
  font-size: 11px; color: var(--hgai-muted);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  width: 100%; justify-content: center;
}
.hgai-callout-logout:hover { color: var(--hgai-danger); border-color: var(--hgai-danger); background: rgba(255,60,60,.07); }
/* Legacy chip — hide if still present */
.hgai-user-chip { display: none !important; }

/* ── PROMO TICKER ──────────────────────────────────────────── */
.hgai-ticker {
  background: #000000 !important;
  border-bottom: 1px solid var(--hgai-border);
  overflow: hidden; height: 28px; display: flex; align-items: center;
  position: relative; z-index: 2; flex: 0 0 auto;
}
.hgai-ticker-inner {
  display: flex; gap: 44px; white-space: nowrap;
  animation: hgai-scroll 30s linear infinite;
  font-size: 11px; font-weight: 700; color: var(--hgai-neon); letter-spacing: .04em;
  padding: 0 16px;
}
@keyframes hgai-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hgai-ticker-inner:hover { animation-play-state: paused; }
.hgai-ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hgai-neon); opacity: .5; display: inline-block; margin-right: 6px; }

.hgai-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hgai-currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--hgai-black);
  border: 1px solid var(--hgai-border);
}

.hgai-currency-option {
  border: 0;
  background: transparent;
  color: var(--hgai-text-2);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}

.hgai-currency-option.is-active {
  background: rgba(0,255,110,.14);
  color: var(--hgai-text);
  box-shadow: 0 0 12px rgba(0,255,110,.14);
}

.hgai-playbook-list {
  margin: 0;
  padding-left: 18px;
  color: var(--hgai-text);
  display: grid;
  gap: 8px;
}

.hgai-playbook-step {
  color: var(--hgai-text);
  font-size: 12px;
}

.hgai-disclaimer {
  margin-top: 8px;
  font-size: 10px;
  color: var(--hgai-muted);
  text-align: center;
}

/* ── TABS ──────────────────────────────────────────────────── */
.hgai-tabs {
  display: flex;
  border-bottom: 1px solid var(--hgai-border);
  background: var(--hgai-black) !important;
  position: relative; z-index: 2; flex: 0 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.hgai-tabs::-webkit-scrollbar { display: none; }
.hgai-tab {
  flex: 1; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px;
  border: none; background: none;
  color: var(--hgai-muted); cursor: pointer;
  font-size: 9px; font-family: var(--hgai-font); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  transition: color .2s; position: relative;
}
.hgai-tab-icon { font-size: 14px; line-height: 1; }
.hgai-tab::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px; background: var(--hgai-neon); border-radius: 999px;
  transition: width .25s; box-shadow: 0 0 8px var(--hgai-neon);
}
.hgai-tab:hover { color: var(--hgai-text-2); }
.hgai-tab.active { color: var(--hgai-neon); }
.hgai-tab.active::after { width: 55%; }

/* ── HANDOFF ACTIVE BAR ────────────────────────────────────── */
.hgai-handoff-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  background: rgba(0,255,110,.06); border-bottom: 1px solid var(--hgai-border);
  font-size: 12px; font-weight: 600; color: var(--hgai-neon); gap: 8px;
  flex: 0 0 auto; z-index: 2; position: relative;
}
.hgai-handoff-timer { font-family: var(--hgai-mono); font-size: 11px; color: var(--hgai-muted); }
.hgai-handoff-bar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hgai-end-handoff-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255,80,80,.45);
  background: rgba(255,80,80,.08);
  color: #ff7070 !important;
  font-size: 11px; font-weight: 700; font-family: var(--hgai-font);
  cursor: pointer; transition: background .18s, border-color .18s;
  white-space: nowrap; flex-shrink: 0;
}
.hgai-end-handoff-btn:hover {
  background: rgba(255,80,80,.18);
  border-color: rgba(255,80,80,.7);
}
.hgai-visitor-upload-req-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--hgai-border);
  background: var(--hgai-surface-2);
  color: var(--hgai-text-2) !important;
  font-size: 11px; font-weight: 600; font-family: var(--hgai-font);
  cursor: pointer; transition: background .18s; white-space: nowrap; flex-shrink: 0;
}
.hgai-visitor-upload-req-btn:hover { background: var(--hgai-surface-3); }
.hgai-visitor-upload-req-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Meeting invite — dark/neon-green theme, inside the chat message feed ── */
.hgai-video-invite-block { margin: 6px 0 !important; }

.hgai-video-invite {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px;
  background: #0a0f0a;
  border: 1px solid #00ff66;
  box-shadow: 0 0 18px rgba(0,255,102,.22), inset 0 0 12px rgba(0,255,102,.04);
  animation: hgai-fade-in .35s ease;
  position: relative; overflow: hidden;
}

/* Subtle neon glow line at top */
.hgai-video-invite::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #00ff66, #00cc55, transparent);
}

.hgai-video-invite-icon {
  font-size: 28px; flex-shrink: 0; line-height: 1;
  filter: drop-shadow(0 0 6px #00ff66);
}

.hgai-video-invite-text {
  display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 0; min-width: 0;
}

.hgai-video-invite-text strong {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: #00ff66;
  font-family: var(--hgai-font); display: block;
  text-shadow: 0 0 8px rgba(0,255,102,.5);
}

.hgai-video-invite-text span {
  font-size: 11px; color: rgba(0,255,102,.55);
  font-family: var(--hgai-font);
}

.hgai-video-join-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: #00ff66; border: none; border-radius: 8px;
  color: #0a0f0a !important; text-decoration: none;
  flex-shrink: 0; font-family: var(--hgai-font);
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 14px rgba(0,255,102,.5), 0 2px 4px rgba(0,0,0,.4);
  transition: background .18s, box-shadow .18s;
}

.hgai-video-join-btn:hover {
  background: #00cc55 !important;
  color: #0a0f0a !important;
  box-shadow: 0 0 22px rgba(0,255,102,.75), 0 2px 6px rgba(0,0,0,.5);
}

.hgai-video-decline-btn {
  background: transparent;
  border: 1px solid rgba(0,255,102,.25);
  color: rgba(0,255,102,.4);
  border-radius: 50%; width: 26px; height: 26px;
  font-size: 11px; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center;
  transition: all .15s;
}
.hgai-video-decline-btn:hover {
  background: rgba(0,255,102,.1);
  border-color: rgba(0,255,102,.6);
  color: #00ff66;
}

/* ── CHAT BODY ─────────────────────────────────────────────── */
.mwai-chat { display: flex; flex: 1 1 auto; min-height: 0; }
.mwai-chat .mwai-body {
  display: flex; flex: 1 1 auto; flex-direction: column;
  min-height: var(--hgai-height); max-height: var(--hgai-height);
  height: var(--hgai-height); overflow: hidden;
}
.mwai-conversation {
  flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden;
  background:
    radial-gradient(ellipse at top left, rgba(0,255,110,.05) 0%, transparent 42%),
    radial-gradient(ellipse at bottom right, rgba(0,255,110,.03) 0%, transparent 42%),
    var(--hgai-black) !important;
}
.mwai-messages {
  display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column;
  gap: 12px; height: 100%; padding: 16px 13px 20px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: thin; scrollbar-color: rgba(0,255,110,.25) transparent;
  position: relative; z-index: 1;
  /* Critical: force dark even if theme injects body background */
  background: transparent !important;
  color: var(--hgai-text) !important;
}
.mwai-messages::-webkit-scrollbar { width: 4px; }
.mwai-messages::-webkit-scrollbar-track { background: transparent; }
.mwai-messages::-webkit-scrollbar-thumb { background: rgba(0,255,110,.2); border-radius: 999px; }
.mwai-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,255,110,.5); }

/* ── MESSAGES ──────────────────────────────────────────────── */
.mwai-message {
  display: flex; align-items: flex-end; gap: 7px;
  animation: hgai-msg-in .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hgai-msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.mwai-message .mwai-text {
  max-width: 84%; padding: 10px 13px; border-radius: 16px;
  line-height: 1.55; font-size: 13.5px;
  white-space: normal; word-break: break-word; overflow-wrap: break-word;
}
.mwai-message .mwai-text a,
.hgai-plan-insights a,
.hgai-kb-card a {
  color: var(--hgai-neon) !important;
  text-decoration-color: rgba(0,255,110,.55);
}
.mwai-message .mwai-text a:hover,
.hgai-plan-insights a:hover,
.hgai-kb-card a:hover {
  color: #6cffaa !important;
}
.hgai-chat-hero {
  display: block;
  margin-bottom: 2px;
  width: 100%;
}
.hgai-chat-hero-copy {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  background: var(--hgai-surface-2) !important;
  border: 1px solid var(--hgai-border);
  color: var(--hgai-text);
  font-size: 12.5px;
  line-height: 1.45;
}
.mwai-ai  { justify-content: flex-start; }
.mwai-user{ justify-content: flex-end; }

.hgai-ai-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg,rgba(0,255,110,.18),rgba(0,255,110,.05));
  border: 1px solid rgba(0,255,110,.28); display: grid; place-items: center;
  font-size: 12px; flex: 0 0 auto;
}
.mwai-ai .mwai-text {
  background: var(--hgai-surface-2) !important;
  color: var(--hgai-text) !important;
  border: 1px solid var(--hgai-border);
  border-bottom-left-radius: 5px;
}

.mwai-user .mwai-text {
  background: linear-gradient(135deg, rgba(0,255,110,.82), rgba(0,200,87,.88)) !important;
  color: #021008 !important;
  border-bottom-right-radius: 5px; font-weight: 600;
  width: max-content;
  min-width: 0;
  max-width: min(82%, 420px);
  margin-left: auto;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.hgai-msg-meta { font-size: 10px; color: var(--hgai-muted); margin-top: 3px; text-align: right; }

/* Typing dots */
.hgai-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 11px 14px;
  background: var(--hgai-surface-2); border: 1px solid var(--hgai-border);
  border-radius: 16px; border-bottom-left-radius: 5px; width: fit-content;
}
.hgai-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hgai-neon); opacity: .5; }
.hgai-typing-dot:nth-child(1){animation:hgai-dot 1.4s ease-in-out infinite 0s}
.hgai-typing-dot:nth-child(2){animation:hgai-dot 1.4s ease-in-out infinite .2s}
.hgai-typing-dot:nth-child(3){animation:hgai-dot 1.4s ease-in-out infinite .4s}
@keyframes hgai-dot { 0%,60%,100%{opacity:.2;transform:scale(.8)} 30%{opacity:1;transform:scale(1.15);box-shadow:0 0 8px var(--hgai-neon)} }

/* ── BLOCKS ─────────────────────────────────────────────────── */
.hgai-inline-blocks { display: flex; flex-direction: column; gap: 9px; }
.hgai-block {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008)), var(--hgai-surface-2) !important;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--hgai-radius-sm); padding: 13px;
  animation: hgai-block-in .3s cubic-bezier(.22,1,.36,1) both;
  position: relative; /*overflow: hidden;*/
}
.hgai-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg,transparent,rgba(0,255,110,.25),transparent);
}
@keyframes hgai-block-in { from{opacity:0;transform:translateY(5px) scale(.99)} to{opacity:1;transform:none} }

.hgai-block-title {
  font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--hgai-neon); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.hgai-block-title::before {
  content: ''; width: 3px; height: 13px; border-radius: 999px;
  background: var(--hgai-neon); box-shadow: 0 0 8px var(--hgai-neon); flex: 0 0 auto;
}
.hgai-block-copy { font-size: 12.5px; color: var(--hgai-text-2); margin-bottom: 10px; line-height: 1.5; }
.hgai-link { color: var(--hgai-neon-dim); text-decoration: underline; text-underline-offset: 2px; }
.hgai-link:hover { color: var(--hgai-neon); }

/* ── CHIPS ──────────────────────────────────────────────────── */
.hgai-inline-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.hgai-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03) !important;
  color: var(--hgai-text-2) !important;
  cursor: pointer; font-size: 11.5px; font-weight: 700;
  font-family: var(--hgai-font); transition: all .2s;
}
.hgai-chip:hover {
  border-color: var(--hgai-neon); color: var(--hgai-neon) !important;
}

/* ── PRICING CARDS ──────────────────────────────────────────── */
.hgai-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 760px) { .hgai-pricing-grid { grid-template-columns: 1fr 1fr; } }
.hgai-pricing-grid-featured,
.hgai-pricing-grid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hgai-plan-card {
  border: 1px solid var(--hgai-border); border-radius: var(--hgai-radius-sm);
  background: linear-gradient(160deg, rgba(0,255,110,.04) 0%, var(--hgai-surface-3) 100%) !important;
  padding: 12px 11px 11px; position: relative; overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hgai-plan-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,transparent,rgba(0,255,110,.4),transparent);
  opacity:0; transition:opacity .3s;
}
.hgai-plan-card:hover { border-color:var(--hgai-border-h); }
.hgai-plan-card:hover::before { opacity:1; }
.hgai-plan-card.is-popular { border-color: rgba(0,255,110,.38); background: linear-gradient(160deg, rgba(0,255,110,.09) 0%, var(--hgai-surface-3) 100%) !important; }
.hgai-plan-popular-badge {
  position:absolute; top:8px; right:8px;
  background: var(--hgai-neon); color: #020f06;
  font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px;
  max-width: calc(100% - 16px);
}
.hgai-plan-name { font-weight: 800; font-size: 12px; color: var(--hgai-text); padding-right: 62px; line-height: 1.2; }
.hgai-plan-tag  { font-size: 11px; color: var(--hgai-muted); margin-top: 2px; }
.hgai-plan-copy { font-size: 10px; color: var(--hgai-text-2); margin-top: 4px; line-height: 1.3; }
.hgai-plan-price {
  font-size: 20px; font-weight: 800; color: var(--hgai-neon);
  margin-top: 6px; font-family: var(--hgai-mono);
  text-shadow: 0 0 12px var(--hgai-neon-glow); line-height: 1;
}
.hgai-plan-price span { font-size: 11px; font-weight: 500; color: var(--hgai-muted); margin-left: 2px; font-family: var(--hgai-font); }
.hgai-plan-secondary { font-size: 10px; color: var(--hgai-muted); margin-top: 3px; }
.hgai-plan-floor { color: var(--hgai-text-2); }
.hgai-plan-save {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border-radius: 999px; background: rgba(0,255,110,.1);
  border: 1px solid rgba(0,255,110,.2); color: var(--hgai-neon);
  font-size: 10px; font-weight: 700; margin-top: 4px;
}
.hgai-plan-features { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.hgai-plan-feature {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 10px; color: var(--hgai-text-2); line-height: 1.3;
}
.hgai-plan-feature::before { content:'✓'; color:var(--hgai-neon); font-weight:800; font-size:10px; flex:0 0 auto; margin-top:1px; }

.hgai-plan-card .hgai-card-btns {
  flex-direction: column;
}
.hgai-plan-card .hgai-card-btns .hgai-btn {
  width: 100%;
}
.hgai-plans-shell { display: grid; gap: 12px; }
.hgai-plans-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--hgai-radius-sm);
  border: 1px solid rgba(0,255,110,.12);
  background:
    radial-gradient(circle at top left, rgba(0,255,110,.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(0,255,110,.08), transparent 24%),
    linear-gradient(155deg, rgba(7,18,13,.98), rgba(4,9,6,.94));
  overflow: hidden;
}
.hgai-plans-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 34%);
  pointer-events: none;
}
.hgai-plans-hero-main,
.hgai-plans-hero-strip {
  position: relative;
  z-index: 1;
}
.hgai-plans-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  align-items: center;
  text-align: center;
}
.hgai-plans-hero h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--hgai-text);
}
.hgai-plans-hero p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--hgai-text-2);
  text-align: center;
}
.hgai-plans-hero-start {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  width: fit-content;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hgai-plans-hero-start small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hgai-muted);
}
.hgai-plans-hero-start strong {
  margin: 0;
  font-size: 12px;
  line-height: 1.15;
  color: var(--hgai-neon);
}
.hgai-plans-hero-strip {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.hgai-plans-hero-item {
  min-width: 82px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.hgai-plans-hero-item.is-accent {
  background: rgba(0,255,110,.08);
  border-color: rgba(0,255,110,.18);
}
.hgai-plans-hero-item strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--hgai-text);
  line-height: 1.1;
}
.hgai-plans-hero-item.is-accent strong {
  color: var(--hgai-neon);
}
.hgai-plans-hero-item small {
  font-size: 8px;
  color: var(--hgai-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.hgai-plans-promos {
  display: grid;
  gap: 6px;
}
.hgai-plans-promos-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hgai-text-2);
}
.hgai-plans-promos-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.hgai-plans-promos-row::-webkit-scrollbar { display: none; }
.hgai-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,110,.18);
  background: rgba(0,255,110,.06);
  color: var(--hgai-text);
  font-size: 10px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hgai-promo-pill:hover {
  border-color: rgba(0,255,110,.32);
}
.hgai-promo-pill strong { color: var(--hgai-neon); font-size: 10px; }
.hgai-promo-pill span { font-size: 10px; color: var(--hgai-text-2); }
.hgai-promo-pill-copy { font-size: 9px; color: var(--hgai-muted); }
.hgai-promo-pill.is-copied {
  border-color: rgba(0,255,110,.42);
  background: rgba(0,255,110,.11);
}
.hgai-promo-pill.is-copied .hgai-promo-pill-copy { color: var(--hgai-neon); }
.hgai-plans-toolbar {
  display: grid;
  gap: 10px;
}
.hgai-plans-search input {
  width: 100%;
  border: 1px solid var(--hgai-border);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  background: var(--hgai-black);
  color: var(--hgai-text);
}
.hgai-plans-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hgai-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--hgai-text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.hgai-filter-chip small { color: var(--hgai-muted); }
.hgai-filter-chip.is-active,
.hgai-filter-chip:hover {
  color: var(--hgai-neon);
  border-color: rgba(0,255,110,.22);
  box-shadow: 0 0 16px rgba(0,255,110,.07);
}
.hgai-plan-results-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--hgai-text-2);
}
.hgai-plan-insights {
  margin-top: 10px;
  font-size: 11px;
  color: var(--hgai-text-2);
}
.hgai-plan-insights strong { color: var(--hgai-text); }
.hgai-plan-insights a {
  color: var(--hgai-neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,110,.18);
}
.hgai-plan-insights a:hover {
  border-bottom-color: rgba(0,255,110,.55);
}
.hgai-plan-load-more-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.hgai-plan-load-more-wrap .hgai-btn {
  min-width: 180px;
}
.hgai-plans-helper-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.hgai-plans-helper-bar::-webkit-scrollbar { display: none; }
.hgai-plans-helper-bar .hgai-chip {
  justify-content: center;
  min-height: 38px;
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
  background: rgba(0,255,110,.05) !important;
}

/* ── SERVICE / INVOICE / TICKET CARDS ──────────────────────── */
.hgai-card-list { display: grid; grid-template-columns: 1fr; gap: 9px; }
.hgai-card {
  border: 1px solid var(--hgai-border); border-radius: var(--hgai-radius-sm);
  background: var(--hgai-surface-3) !important; padding: 12px;
  transition: border-color .2s;
}
.hgai-card:hover { border-color: var(--hgai-border-h); }
.hgai-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:7px; }
.hgai-card-name { font-weight: 700; font-size: 13px; color: var(--hgai-text); }
.hgai-card-sub  { font-size: 11px; color: var(--hgai-muted); margin-top: 2px; }
.hgai-card-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* ── BADGES ─────────────────────────────────────────────────── */
.hgai-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.hgai-badge::before { content:''; width:5px; height:5px; border-radius:50%; }
.hgai-badge-active,.hgai-badge-paid { background:rgba(0,255,110,.1); color:var(--hgai-neon); border:1px solid rgba(0,255,110,.22); }
.hgai-badge-active::before,.hgai-badge-paid::before { background:var(--hgai-neon); }
.hgai-badge-unpaid,.hgai-badge-overdue,.hgai-badge-suspended { background:rgba(255,77,109,.1); color:#ff6b87; border:1px solid rgba(255,77,109,.22); }
.hgai-badge-unpaid::before,.hgai-badge-overdue::before,.hgai-badge-suspended::before { background:#ff4d6d; }
.hgai-badge-open,.hgai-badge-pending { background:rgba(255,201,71,.1); color:#ffc947; border:1px solid rgba(255,201,71,.22); }
.hgai-badge-open::before,.hgai-badge-pending::before { background:#ffc947; }

/* ── DOMAIN CHECKER ─────────────────────────────────────────── */
.hgai-domain-form { display: flex; }
.hgai-domain-input {
  flex: 1; border: 1px solid var(--hgai-border); border-right: none;
  border-radius: var(--hgai-radius-sm) 0 0 var(--hgai-radius-sm);
  padding: 10px 12px; font: inherit; font-size: 13px;
  background: var(--hgai-black) !important; color: var(--hgai-text) !important;
  font-family: var(--hgai-mono); transition: border-color .2s;
}
.hgai-domain-input::placeholder { color: var(--hgai-muted); }
.hgai-domain-form button {
  border: none; background: var(--hgai-neon) !important; color: #020f06 !important;
  padding: 10px 15px; border-radius: 0 var(--hgai-radius-sm) var(--hgai-radius-sm) 0;
  cursor: pointer; font-weight: 800; font-family: var(--hgai-font); font-size: 13px;
  transition: background .2s, box-shadow .2s; white-space: nowrap;
}
.hgai-domain-form button:hover { background: #33ff88 !important; }
.hgai-domain-result { margin-top: 9px; }
.hgai-dom-ok { color: var(--hgai-neon); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.hgai-dom-ok::before { content:'✓'; }
.hgai-dom-no { color: var(--hgai-danger); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.hgai-dom-no::before { content:'✗'; }
.hgai-tld-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hgai-tld-chip {
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hgai-border);
  background: var(--hgai-surface-3) !important; color: var(--hgai-text-2);
  font-size: 11px; font-weight: 700; cursor: pointer; transition: all .2s;
}
.hgai-tld-chip.available { border-color: rgba(0,255,110,.3); color: var(--hgai-neon); background: rgba(0,255,110,.06) !important; }
.hgai-tld-chip:hover { border-color: var(--hgai-neon); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.mwai-footer {
  border-top: 1px solid var(--hgai-border);
  padding: 11px;
  background: var(--hgai-black) !important;
  background-color: var(--hgai-black) !important;
  flex: 0 0 auto; position: relative; z-index: 2;
}
.hgai-smart-suggestions { display:flex; gap:6px; overflow-x:auto; padding-bottom:9px; scrollbar-width:none; }
.hgai-smart-suggestions::-webkit-scrollbar { display:none; }
.hgai-smart-suggestion {
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hgai-border); background: var(--hgai-surface-3) !important;
  color: var(--hgai-text-2) !important; font-size: 11px; font-weight: 600;
  white-space: nowrap; cursor: pointer; font-family: var(--hgai-font);
  transition: all .2s;
}
.hgai-smart-suggestion:hover { border-color: var(--hgai-border-h); color: var(--hgai-neon) !important; }

.hgai-input-row { display: flex; align-items: center; gap: 8px; }
.mwai-form-input-container { flex: 1; position: relative; display: flex; align-items: center; }
.mwai-form-input {
  width: 100%; min-height: 42px; height: 42px; max-height: 120px;
  resize: none; border: 1px solid var(--hgai-border);
  border-radius: var(--hgai-radius-sm);
  padding: 10px 13px;
  font: inherit; font-size: 13.5px; font-family: var(--hgai-font);
  color: var(--hgai-text) !important;
  background: var(--hgai-surface-2) !important;
  box-sizing: border-box; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.mwai-form-input::placeholder { color: var(--hgai-muted); }

/* Focus glow on all inputs */
.mwai-form-input:focus,
.hgai-domain-input:focus,
.hgai-inline-form input:focus,
.hgai-inline-form textarea:focus,
.hgai-panel input:focus,
.hgai-panel textarea:focus {
  outline: none;
  border-color: rgba(0,255,110,.45) !important;
  box-shadow: 0 0 0 3px rgba(0,255,110,.09), 0 0 16px rgba(0,255,110,.07) !important;
}

#mwai-chat-submit {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: none; background: var(--hgai-neon) !important; color: #020f06;
  cursor: pointer; display: grid; place-items: center; font-size: 15px;
  flex: 0 0 44px; align-self: center; padding: 0; margin: 0; line-height: 1; transition: all .2s;
}
#mwai-chat-submit svg { display: block; width: 20px; height: 20px; }
#mwai-chat-submit:hover { background:#33ff88 !important; box-shadow: 0 0 24px rgba(0,255,110,.5) !important; }
#mwai-chat-submit:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.hgai-footer-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
#hgai-clear-chat {
  border:none; background:none; color:var(--hgai-muted); font-size:11px; font-weight:600;
  font-family:var(--hgai-font); cursor:pointer; padding:0; display:flex; align-items:center; gap:4px;
  transition: color .2s;
}
#hgai-clear-chat:hover { color: var(--hgai-danger); }
.hgai-powered { font-size:10px; color:var(--hgai-muted); display:flex; align-items:center; gap:4px; opacity:.7; }
.hgai-powered span { font-weight:700; color:var(--hgai-neon); }

/* ── FORMS ──────────────────────────────────────────────────── */
.hgai-inline-form { display: flex; flex-direction: column; gap: 8px; }
.hgai-inline-form input,
.hgai-inline-form textarea,
.hgai-panel input,
.hgai-panel textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--hgai-border); border-radius: var(--hgai-radius-sm);
  padding: 9px 11px; font: inherit; font-family: var(--hgai-font); font-size: 13px;
  background: var(--hgai-black) !important; color: var(--hgai-text) !important;
  transition: border-color .2s;
}
.hgai-inline-form input::placeholder,
.hgai-inline-form textarea::placeholder { color: var(--hgai-muted); }
.hgai-inline-form-msg { font-size: 12px; min-height: 16px; font-weight: 600; }
.hgai-inline-form-msg.is-success { color: var(--hgai-neon); }
.hgai-inline-form-msg.is-error   { color: var(--hgai-danger); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.hgai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--hgai-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: 12px;
  font-family: var(--hgai-font); transition: all .2s; white-space: nowrap;
}
.hgai-btn-blue, .hgai-submit-btn {
  background: var(--hgai-neon) !important; color: #020f06 !important;
  border-color: var(--hgai-neon); box-shadow: 0 3px 14px rgba(0,255,110,.18);
}
.hgai-btn-blue:hover, .hgai-submit-btn:hover {
  background: #33ff88 !important;
}
.hgai-btn-outline {
  background: rgba(255,255,255,.015) !important; border-color: rgba(255,255,255,.10);
  color: var(--hgai-text-2) !important;
}
.hgai-btn-outline:hover { border-color: var(--hgai-border-h); color: var(--hgai-neon) !important; }
.hgai-submit-btn { width: 100%; padding: 10px 14px; border: none; border-radius: var(--hgai-radius-sm); cursor: pointer; font-size: 13px; }

/* ── PANELS / OVERLAYS ──────────────────────────────────────── */
.hgai-overlay {
  position: absolute; inset: 0;
  background: rgba(3,8,5,.75); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10; animation: hgai-fade-in .2s ease both;
}
@keyframes hgai-fade-in { from{opacity:0} to{opacity:1} }
.hgai-panel {
  width: min(94%,358px);
  background: var(--hgai-surface-2) !important;
  border: 1px solid var(--hgai-border); border-radius: var(--hgai-radius);
  padding: 22px; position: relative;
  box-shadow: var(--hgai-shadow), var(--hgai-neon-shadow);
  animation: hgai-panel-in .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hgai-panel-in { from{opacity:0;transform:scale(.92) translateY(10px)} to{opacity:1;transform:none} }
.hgai-panel-close {
  position:absolute; top:10px; right:12px;
  border:1px solid var(--hgai-border); background:var(--hgai-surface-3);
  color:var(--hgai-muted); cursor:pointer; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; transition:all .2s;
}
.hgai-panel-close:hover { border-color:var(--hgai-danger); color:var(--hgai-danger); }
.hgai-panel-icon { font-size:30px; text-align:center; margin-bottom:8px; }
.hgai-panel h3 { margin:0 0 5px; text-align:center; font-size:16px; font-weight:800; color:var(--hgai-text); }
.hgai-panel p, .hgai-panel-foot { margin:0 0 12px; text-align:center; color:var(--hgai-text-2); font-size:13px; line-height:1.5; }

/* ── RATING ─────────────────────────────────────────────────── */
.hgai-rating-block { display:flex; flex-direction:column; align-items:center; gap:9px; padding:10px 0; }
.hgai-rating-label { font-size:13px; color:var(--hgai-text-2); }
.hgai-rating-stars { display:flex; gap:7px; }
.hgai-agent-label {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hgai-neon);
}
.hgai-idle-game-block canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0,255,110,.14);
  background: #07110b;
}
.hgai-star {
  width:30px; height:30px; border-radius:8px; border:1px solid var(--hgai-border);
  background:var(--hgai-surface-3) !important; color:var(--hgai-muted);
  display:grid; place-items:center; cursor:pointer; font-size:17px; transition:all .2s;
}
.hgai-star:hover, .hgai-star.selected { border-color:rgba(255,201,71,.4); background:rgba(255,201,71,.08) !important; color:#ffc947; transform:scale(1.1); }

/* ── METRIC ROWS ────────────────────────────────────────────── */
.hgai-metric-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--hgai-border); font-size:11.5px; }
.hgai-metric-row:last-child { border-bottom:none; }
.hgai-metric-label { color:var(--hgai-text-2); flex:1 1 auto; min-width:0; }
.hgai-metric-value { font-weight:800; font-family:var(--hgai-mono); color:var(--hgai-neon); text-shadow:0 0 10px var(--hgai-neon-glow); flex:0 1 auto; text-align:right; max-width:52%; }
.hgai-support-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hgai-support-chip-grid .hgai-chip {
  width: 100%;
  min-width: 0;
  justify-content: center;
  min-height: 40px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}
.hgai-offer-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,110,.26);
  background: rgba(0,255,110,.08);
  color: var(--hgai-neon);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.hgai-offer-popover-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 140px;
  max-width: 210px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,255,110,.16);
  background: var(--hgai-black);
  color: var(--hgai-text);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  font-family: var(--hgai-font);
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}
.hgai-offer-popover:hover .hgai-offer-popover-panel,
.hgai-offer-popover:focus .hgai-offer-popover-panel,
.hgai-offer-popover:focus-within .hgai-offer-popover-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── KB CARDS ───────────────────────────────────────────────── */
.hgai-kb-card { border:1px solid var(--hgai-border); border-radius:var(--hgai-radius-sm); background:var(--hgai-surface-3) !important; padding:11px; cursor:pointer; transition:all .2s; }
.hgai-kb-card:hover { border-color:var(--hgai-border-h); transform:translateX(3px); }
.hgai-kb-card-title { font-weight:700; font-size:13px; margin-bottom:3px; color:var(--hgai-text); }
.hgai-kb-card-excerpt { font-size:12px; color:var(--hgai-muted); line-height:1.4; }

/* ── HELP CENTRE (support tab) ──────────────────────────────── */
/* Grid of KB article cards rendered in the support panel */
.hgai-kb-grid { display:flex; flex-direction:column; gap:8px; }
/* Clickable link version of KB card used in the Help Centre grid */
a.hgai-kb-card-link {
  display:block; text-decoration:none;
  border:1px solid var(--hgai-border);
  border-radius:var(--hgai-radius-sm);
  background:var(--hgai-surface-3);
  padding:13px 14px;
  transition:border-color .18s, transform .18s;
}
a.hgai-kb-card-link:hover { border-color:var(--hgai-border-h); transform:translateX(3px); }
a.hgai-kb-card-link .hgai-kb-card-title { font-weight:700; font-size:13px; margin-bottom:3px; color:var(--hgai-text); }
a.hgai-kb-card-link .hgai-kb-card-excerpt { font-size:12px; color:var(--hgai-muted); line-height:1.4; }
.hgai-kb-cat { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--hgai-neon-dim); margin-bottom:4px; }
.hgai-kb-meta { font-size:10px; color:var(--hgai-muted); margin-top:5px; }
/* Search toggle button inside block title */
.hgai-block-title-split {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 7px;
}
.hgai-block-title-split .hgai-kb-search-toggle {
  margin-left: auto;
}
.hgai-kb-search-toggle {
  background:none; border:none; cursor:pointer;
  font-size:13px; padding:0 2px; color:var(--hgai-muted);
  line-height:1; transition:color .15s;
}
.hgai-kb-search-toggle:hover { color:var(--hgai-neon); }

#hgai-panel-support .mwai-conversation {
  background: linear-gradient(180deg, rgba(5, 12, 8, .98), rgba(4, 9, 7, .94));
}
#hgai-panel-support .mwai-messages {
  display: grid;
  gap: 9px;
  padding: 11px;
}
#hgai-panel-support .hgai-block {
  padding: 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11, 20, 15, .96), rgba(6, 12, 9, .94)) !important;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#hgai-panel-support .hgai-block-title {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
#hgai-panel-support .mwai-message .mwai-text {
  max-width: min(100%, 520px);
}
#hgai-panel-support .hgai-block-copy {
  margin-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.42;
}
#hgai-panel-support .hgai-metric-row {
  padding: 5px 0;
  font-size: 10.5px;
}
#hgai-panel-support .hgai-metric-label {
  font-size: 10.5px;
}
#hgai-panel-support .hgai-metric-value {
  max-width: 50%;
  font-size: 10.5px;
}
#hgai-panel-support #hgai-kb-articles-container {
  min-height: 48px;
}
#hgai-panel-support .hgai-support-boosters .hgai-support-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#hgai-panel-support .hgai-support-actions .hgai-support-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#hgai-panel-support .hgai-chip {
  min-height: 36px;
  padding: 8px;
  font-size: 10.5px;
  line-height: 1.15;
}
#hgai-panel-support .hgai-kb-card-link {
  padding: 10px 11px;
}
#hgai-panel-support .hgai-kb-card-link .hgai-kb-card-title {
  font-size: 12px;
  line-height: 1.35;
}
#hgai-panel-support .hgai-kb-card-link .hgai-kb-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.38;
}
#hgai-panel-support .hgai-kb-cat,
#hgai-panel-support .hgai-kb-meta {
  font-size: 9.5px;
}

/* ── LOADING ────────────────────────────────────────────────── */
.hgai-loading { text-align:center; padding:16px; color:var(--hgai-muted); font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; }
.hgai-loading::before { content:''; width:14px; height:14px; border:2px solid var(--hgai-border); border-top-color:var(--hgai-neon); border-radius:50%; animation:hgai-spin .8s linear infinite; }
@keyframes hgai-spin { to{transform:rotate(360deg)} }
.hgai-empty { text-align:center; padding:18px 14px; color:var(--hgai-muted); font-size:13px; }

/* ── AI FEATURES: SPEED WIDGET ──────────────────────────────── */
.hgai-speed-result { display:flex; align-items:center; gap:12px; padding:8px 0; }
.hgai-speed-score {
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background: conic-gradient(var(--hgai-neon) calc(var(--score,90)*1%), var(--hgai-border) 0);
  display:grid; place-items:center; font-size:14px; font-weight:800;
  font-family:var(--hgai-mono); color:var(--hgai-neon);
  box-shadow:0 0 14px var(--hgai-neon-glow);
}

/* ── SHORTCODE EMBED WRAPPER ────────────────────────────────── */
.hgai-embed-wrap { max-width:var(--hgai-width); margin:0 auto; }

/* ═══════════════════════════════════════════════════════════
   MOBILE — Sticky nav awareness & responsive fixes
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Widget sits above any sticky bottom nav — JS sets --hgai-bottom-offset dynamically */
  .hgai-root:not(.hgai-root-embedded) {
    left: 8px !important; right: 8px !important;
    /* FIX v12.3.6: Push root below sticky top header; JS sets --hgai-top-offset */
    top: var(--hgai-top-offset, 12px) !important;
    bottom: var(--hgai-bottom-offset, 16px) !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    /* FIX v12: ensure popup sits above sticky headers/navbars */
    z-index: var(--hgai-z) !important;
  }
  .hgai-side-left, .hgai-side-right { left: 8px !important; right: 8px !important; }
  /* New pos classes on mobile — respect compact icon positioning */
  .hgai-pos-bottom-right { right: 16px !important; left: auto !important; }
  .hgai-pos-bottom-left  { left: 16px !important; right: auto !important; }
  .mwai-open-button.hgai-launcher { width: 100%; min-width: 0; margin-top: auto; }
  /* Compact icon launcher must NOT stretch full-width on mobile */
  .mwai-open-button.hgai-launcher.hgai-launcher-compact {
    width: 56px !important; height: 56px !important;
    margin-top: auto; align-self: flex-end;
  }
  /* Align compact to its side */
  .hgai-pos-bottom-right .hgai-launcher-compact,
  .hgai-side-right .hgai-launcher-compact { margin-left: auto; }
  .hgai-pos-bottom-left  .hgai-launcher-compact,
  .hgai-side-left  .hgai-launcher-compact { margin-right: auto; }
  .mwai-chatbot-container.hgai-shell { width: 100%; max-width: 100%; max-height: 100%; }
  .hgai-window {
    /* FIX v12.3.6: Hard clamp height so popup never overlaps sticky header above */
    border-radius: 16px !important;
    max-height: calc(100svh - var(--hgai-top-offset, 12px) - var(--hgai-bottom-offset, 16px) - 60px);
    overflow: hidden;
  }
  .hgai-bar {
    display: flex !important;
    position: relative;
    top: auto;
    z-index: 8;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    gap: 8px;
    /* FIX v12: single row — never wrap the control buttons */
    align-items: center;
    flex-wrap: nowrap;
  }
  .hgai-bar-left { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .hgai-bar-right {
    margin-left: auto;
    gap: 5px;
    /* FIX v12: flex-shrink: 0 + no wrap keeps buttons on ONE row */
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    max-width: none;
  }
  /* FIX v12: Slightly smaller icon buttons on mobile so they always fit — bar only */
  .hgai-bar .hgai-icon-btn,
  .hgai-bar-right .hgai-icon-btn {
    width: 26px; height: 26px;
    min-width: 26px; min-height: 26px;
    flex: 0 0 26px;
    font-size: 10px;
  }
  .hgai-bar-wa {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    flex: 0 0 auto;
  }
  .hgai-bar-wa svg {
    width: 14px;
    height: 14px;
  }
  .hgai-ticker,
  .hgai-tabs {
    position: relative;
    top: auto;
    z-index: 7;
  }

  /* Full-viewport height minus offset on mobile */
  .mwai-chat .mwai-body {
    min-height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
    max-height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
    height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
  }

  .mwai-message .mwai-text { max-width: 91%; }
  .hgai-pricing-grid { grid-template-columns: 1fr; }
  .hgai-pricing-grid-featured,
  .hgai-pricing-grid-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hgai-block-head { align-items: flex-start; flex-direction: column; }
  .hgai-tab {
    min-width: 68px;
    white-space: nowrap;
  }
  .hgai-plans-hero {
    gap: 8px;
    padding: 10px;
  }
  .hgai-plans-hero-main {
    gap: 4px;
    min-width: 0;
  }
  .hgai-plans-hero h3 {
    font-size: 15px;
    line-height: 1.03;
  }
  .hgai-plans-hero p {
    font-size: 9px;
  }
  .hgai-plans-hero-start {
    padding: 7px 9px;
  }
  .hgai-plans-hero-start strong {
    font-size: 10px;
  }
  .hgai-plans-hero-strip {
    gap: 6px;
  }
  .hgai-plans-hero-item {
    min-width: 74px;
    padding: 6px 8px;
    gap: 2px;
  }
  .hgai-plans-hero-item strong {
    font-size: 10px;
  }
  .hgai-plans-hero-item small {
    font-size: 7px;
  }
  .mwai-messages { padding: 12px 11px 16px; }
  .hgai-chat-hero-copy { font-size: 12px; padding: 8px 11px; }
  .hgai-block { padding: 11px; }
  #hgai-panel-support .mwai-body {
    min-height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
    max-height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
    height: min(var(--hgai-mobile-height, 760px), calc(100svh - var(--hgai-top-offset, 8px) - var(--hgai-bottom-offset, 16px) - 8px));
  }
  #hgai-panel-support .mwai-messages { gap: 8px; padding: 9px 9px 11px; }
  #hgai-panel-support .hgai-block { padding: 10px; border-radius: 12px; }
  #hgai-panel-support .mwai-message { gap: 6px; }
  #hgai-panel-support .mwai-message .mwai-text { max-width: calc(100% - 34px); font-size: 11px; line-height: 1.45; padding: 8px 10px; }
  #hgai-panel-support .hgai-block-title { margin-bottom: 7px; font-size: 11px; }
  #hgai-panel-support .hgai-support-chip-grid { gap: 7px; }
  #hgai-panel-support .hgai-chip { min-height: 34px; padding: 8px 9px; font-size: 10.5px; line-height: 1.2; border-radius: 999px; }
  #hgai-panel-support .hgai-metric-row { padding: 6px 0; font-size: 10.5px; }
  #hgai-panel-support .hgai-metric-label { font-size: 10.5px; }
  #hgai-panel-support .hgai-metric-value { max-width: 48%; font-size: 10.5px; }
  #hgai-panel-support .hgai-rating-block { gap: 5px; padding: 2px 0 0; }
  #hgai-panel-support .hgai-rating-label { font-size: 10px; }
  #hgai-panel-support .hgai-star { width: 22px; height: 22px; font-size: 12px; }
  #hgai-panel-support #hgai-rating-block { padding-bottom: 5px; }
  .hgai-plan-card { padding: 11px 10px 10px; }
  .hgai-plan-name { padding-right: 58px; }
  .hgai-plan-price { font-size: 18px; }
  .hgai-card-btns { gap: 6px; }
  .hgai-btn { padding: 7px 11px; font-size: 11px; }
  .hgai-plans-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .hgai-plans-filters::-webkit-scrollbar { display: none; }
  .hgai-metric-row { align-items: flex-start; }
  .hgai-metric-value { max-width: 46%; font-size: 11px; }
  /* Tighter tab labels on mobile */
  .hgai-tab { min-width: 62px; padding: 7px 3px; font-size: 8px; }
  .hgai-tab-icon { font-size: 12px; }
  .hgai-bar { padding: 12px 10px; }
  .hgai-bar-right { gap: 5px; }
  .hgai-bar-wa { padding: 5px 8px; font-size: 10px; }
  #hgai-panel-account .hgai-inline-actions { grid-template-columns: 1fr; }
  /* Full-width suggest suggestions on mobile */
  .hgai-smart-suggestions { flex-wrap: nowrap; }
}

@media (max-width: 420px) {
  .hgai-plans-hero {
    padding: 8px;
    gap: 7px;
  }
  .hgai-plans-hero h3 {
    font-size: 14px;
  }
  .hgai-plans-hero p {
    font-size: 8.5px;
  }
  .hgai-plans-hero-start strong {
    font-size: 9px;
  }
  .hgai-plans-hero-item {
    min-width: 68px;
    padding: 5px 7px;
    gap: 2px;
  }
  .hgai-plans-hero-item strong {
    font-size: 9px;
  }
  #hgai-panel-support .hgai-block {
    padding: 8px;
  }
  #hgai-panel-support .hgai-support-actions .hgai-support-chip-grid,
  #hgai-panel-support .hgai-support-boosters .hgai-support-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #hgai-panel-support .hgai-chip {
    min-height: 32px;
    font-size: 10px;
    padding: 7px 8px;
  }
  #hgai-panel-support .hgai-metric-row {
    gap: 7px;
  }
}

/* Ensure widget beats sticky theme navbars in z-order */
.hgai-root { z-index: var(--hgai-z) !important; isolation: isolate; }
/* FIX v12: No box-shadow on window; z-index override kept for sticky headers */
.hgai-window { z-index: var(--hgai-z) !important; }
/* FIX v12.4: Force the chat shell above any theme sticky nav */
#mwai-chatbot-container.hgai-shell {
  z-index: var(--hgai-z) !important;
  position: relative;
}
.hgai-inline-actions-standalone {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
 * Grabee AI v7 — New Component Styles
 * ═══════════════════════════════════════════════════════════ */

/* ── Proactive Bubble ─────────────────────────────────────── */
.hgai-proactive-bubble {
  position: fixed;
  bottom: calc(var(--hgai-bottom-offset, 16px) + 80px);
  right: 20px;
  z-index: calc(var(--hgai-z, 2147482999) + 1);
  background: var(--hgai-black, #0b0f0d);
  border: 1px solid var(--hgai-accent, #39ff88);
  border-radius: 16px;
  padding: 14px 16px 12px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(57,255,136,0.18);
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.hgai-proactive-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.hgai-proactive-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--hgai-muted, #8fbca2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}
.hgai-proactive-text {
  font-size: 13px;
  color: var(--hgai-text, #e9fff2);
  line-height: 1.5;
  margin: 0 0 10px;
}
.hgai-proactive-cta {
  width: 100%;
}

/* ── NPS Survey ───────────────────────────────────────────── */
.hgai-nps-survey {
  background: var(--hgai-surface-2, #0d1b14);
  border: 1px solid var(--hgai-border, #173322);
  border-radius: 12px;
  padding: 14px;
  margin: 4px 0;
}
.hgai-nps-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--hgai-text, #e9fff2);
  margin-bottom: 10px;
}
.hgai-nps-scores {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hgai-nps-scores::-webkit-scrollbar { display: none; }
.hgai-nps-score {
  flex: 1 0 auto;
  min-width: 26px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--hgai-border, #173322);
  background: var(--hgai-surface-3, #111d16);
  color: var(--hgai-text, #e9fff2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 600;
  font-family: var(--hgai-font);
  padding: 0;
}
.hgai-nps-score:hover,
.hgai-nps-score.selected {
  background: var(--hgai-accent, #39ff88);
  color: #000;
  border-color: var(--hgai-accent, #39ff88);
}
.hgai-nps-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--hgai-muted, #8fbca2);
  margin-bottom: 8px;
}
.hgai-nps-comment { margin-top: 8px; }
.hgai-nps-comment-text {
  width: 100%;
  background: var(--hgai-surface-3, #111d16);
  border: 1px solid var(--hgai-border, #173322);
  border-radius: 8px;
  color: var(--hgai-text, #e9fff2);
  font-size: 12px;
  padding: 8px;
  resize: none;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: 8px;
}
.hgai-nps-thanks {
  text-align: center;
  color: var(--hgai-accent, #39ff88);
  padding: 8px;
  font-size: 13px;
}

/* ── Typing Indicator ────────────────────────────────────── */
.hgai-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.hgai-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--hgai-surface-2, #0d1b14);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 52px;
}
.hgai-typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--hgai-accent, #39ff88);
  border-radius: 50%;
  animation: hgai-bounce 1.2s infinite ease-in-out;
  opacity: 0.5;
}
.hgai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.hgai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hgai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Voice Button ────────────────────────────────────────── */
.hgai-voice-btn {
  color: var(--hgai-muted, #8fbca2);
  transition: color 0.2s;
  font-size: 16px;
}
.hgai-voice-btn.recording {
  color: #ff4d4d;
  animation: hgai-pulse 0.8s infinite;
}
@keyframes hgai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Uptime Panel ────────────────────────────────────────── */
.hgai-uptime-panel {
  padding: 12px;
}
.hgai-uptime-overall {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  text-align: center;
}
.hgai-uptime-operational { background: rgba(57,255,136,0.1); color: #39ff88; border: 1px solid rgba(57,255,136,0.25); }
.hgai-uptime-partial      { background: rgba(255,200,0,0.1);  color: #ffc800; border: 1px solid rgba(255,200,0,0.25); }
.hgai-uptime-degraded     { background: rgba(255,77,77,0.1);  color: #ff4d4d; border: 1px solid rgba(255,77,77,0.25); }
.hgai-uptime-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--hgai-border, #173322);
  font-size: 13px;
}
.hgai-uptime-label { flex: 1; color: var(--hgai-text, #e9fff2); }
.hgai-uptime-status { color: var(--hgai-muted, #8fbca2); font-size: 11px; text-transform: capitalize; }
.hgai-latency {
  font-size: 10px;
  color: var(--hgai-muted, #8fbca2);
  margin-left: 4px;
}
.hgai-uptime-updated {
  font-size: 10px;
  color: var(--hgai-muted, #8fbca2);
  text-align: right;
  margin-top: 8px;
}

/* ── Checklist Block ─────────────────────────────────────── */
.hgai-checklist {
  background: var(--hgai-surface-2, #0d1b14);
  border: 1px solid var(--hgai-border, #173322);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0;
}
.hgai-checklist-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--hgai-accent, #39ff88);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hgai-checklist-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hgai-checklist-items li {
  font-size: 12.5px;
  color: var(--hgai-text, #e9fff2);
  padding-left: 2px;
  line-height: 1.4;
}

/* ── Status List Block ───────────────────────────────────── */
.hgai-status-list {
  background: var(--hgai-surface-2, #0d1b14);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
}
.hgai-status-list-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--hgai-muted, #8fbca2);
  margin-bottom: 6px;
}
.hgai-status-list-item {
  font-size: 13px;
  color: var(--hgai-text, #e9fff2);
  padding: 3px 0;
  line-height: 1.4;
}

/* ── Portal Button Block ─────────────────────────────────── */
.hgai-portal-block {
  text-align: center;
  padding: 10px 0 4px;
}
.hgai-portal-note {
  font-size: 10.5px;
  color: var(--hgai-muted, #8fbca2);
  margin: 6px 0 0;
}

/* ── GDPR Notice ─────────────────────────────────────────── */
.hgai-gdpr-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--hgai-surface-3, #111d16);
  border-top: 1px solid var(--hgai-border, #173322);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--hgai-muted, #8fbca2);
}
.hgai-btn-xs {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  min-width: 30px;
}

/* ── Quick Replies ───────────────────────────────────────── */
.hgai-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--hgai-border, #173322);
}
.hgai-qr-chip {
  background: var(--hgai-surface-2, #0d1b14);
  border: 1px solid var(--hgai-border, #173322);
  border-radius: 20px;
  color: var(--hgai-text, #e9fff2);
  font-size: 11.5px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.hgai-qr-chip:hover {
  background: rgba(57,255,136,0.08);
  border-color: rgba(57,255,136,0.4);
  color: var(--hgai-accent, #39ff88);
}

/* ── Forgot Password link ────────────────────────────────── */
.hgai-forgot-password {
  font-size: 11.5px;
  color: var(--hgai-accent, #39ff88);
  text-decoration: none;
  cursor: pointer;
  display: block;
  text-align: right;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.hgai-forgot-password:hover { text-decoration: underline; }

/* ── Enhanced Login Form (v7) ────────────────────────────── */
.hgai-login-note {
  font-size: 11px;
  color: var(--hgai-muted, #8fbca2);
  background: rgba(57,255,136,0.04);
  border: 1px solid rgba(57,255,136,0.1);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* ── Side-by-side uptime tab ─────────────────────────────── */
#hgai-panel-uptime { overflow-y: auto; }


/* ═══════════════════════════════════════════════════════════
 * Grabee AI v7 — New Components + UI Fixes
 * Does NOT override any original layout rules.
 * ═══════════════════════════════════════════════════════════ */

/* ─── Welcome message (AI bubble on initial load) ─────────── */
.hgai-welcome-msg-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0 6px;
}
.hgai-welcome-text {
  background: var(--hgai-surface-2) !important;
  border: 1px solid var(--hgai-border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hgai-text);
  max-width: calc(100% - 38px);
  word-break: break-word;
}

/* ─── Starter chips section ────────────────────────────────── */
.hgai-starter-section {
  padding: 8px 0 4px 0;
}
.hgai-starter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hgai-muted);
  margin-bottom: 8px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hgai-starter-label::before {
  content: '';
  width: 3px; height: 10px;
  border-radius: 999px;
  background: var(--hgai-neon);
  flex: 0 0 auto;
}
.hgai-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* starter chips reuse .hgai-chip style — just override size */
.hgai-starter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04) !important;
  color: var(--hgai-text-2) !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--hgai-font);
  transition: all .2s;
  white-space: nowrap;
  line-height: 1.3;
}
.hgai-starter-chip:hover {
  border-color: rgba(0,255,110,.35);
  background: rgba(0,255,110,.08) !important;
  color: var(--hgai-neon) !important;
  box-shadow: 0 0 10px rgba(0,255,110,.08);
}

/* ─── Smart suggestions: hidden initially, shown after first reply ─ */
#hgai-smart-suggestions:empty { display: none; }

/* ─── Mic / Voice button ───────────────────────────────────── */
#hgai-voice-btn {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: var(--hgai-radius-sm);
  border: 1px solid var(--hgai-border);
  background: var(--hgai-surface-2) !important;
  color: var(--hgai-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s, color .2s, background .2s;
  line-height: 1;
}
#hgai-voice-btn:hover {
  border-color: rgba(0,255,110,.4);
  color: var(--hgai-neon);
  background: rgba(0,255,110,.06) !important;
}
#hgai-voice-btn.recording {
  border-color: #ff4d4d !important;
  color: #ff4d4d !important;
  background: rgba(255,77,77,.08) !important;
  animation: hgai-voice-pulse .8s infinite;
}
#hgai-voice-btn svg { pointer-events: none; display: block; }
@keyframes hgai-voice-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ─── Disclaimer — make sure it stays below input ─────────── */
.hgai-disclaimer {
  font-size: 10px;
  color: var(--hgai-muted);
  text-align: center;
  padding: 4px 0 0;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Typing indicator ─────────────────────────────────────── */
.hgai-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--hgai-surface-2);
  border: 1px solid var(--hgai-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 9px 14px;
}
.hgai-typing-dots span {
  width: 6px; height: 6px;
  background: var(--hgai-neon);
  border-radius: 50%;
  animation: hgai-bounce 1.2s infinite ease-in-out;
  opacity: .45;
}
.hgai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.hgai-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes hgai-bounce {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ─── NPS survey ───────────────────────────────────────────── */
.hgai-nps-survey {
  background: var(--hgai-surface-2);
  border: 1px solid var(--hgai-border);
  border-radius: 13px;
  padding: 14px;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0;
}
.hgai-nps-title { font-size: 13px; font-weight: 600; color: var(--hgai-text); margin-bottom: 10px; }
.hgai-nps-scores { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hgai-nps-scores::-webkit-scrollbar { display: none; }
.hgai-nps-score {
  flex: 1 0 auto; min-width: 24px; height: 28px; border-radius: 5px;
  border: 1px solid var(--hgai-border);
  background: var(--hgai-surface-3);
  color: var(--hgai-text); font-size: 11px;
  cursor: pointer; font-weight: 600;
  font-family: var(--hgai-font); padding: 0;
  transition: all .15s;
}
.hgai-nps-score:hover, .hgai-nps-score.selected {
  background: var(--hgai-neon); color: #000; border-color: var(--hgai-neon);
}
.hgai-nps-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--hgai-muted); margin-bottom: 8px; }
.hgai-nps-comment { margin-top: 8px; }
.hgai-nps-comment-text {
  width: 100%; box-sizing: border-box;
  background: var(--hgai-surface-3); border: 1px solid var(--hgai-border);
  border-radius: 8px; color: var(--hgai-text); font-size: 12px;
  padding: 8px; resize: none; font-family: inherit; margin-bottom: 8px;
}
.hgai-nps-thanks { text-align: center; color: var(--hgai-neon); padding: 8px; font-size: 13px; }

/* ─── Proactive bubble ─────────────────────────────────────── */
.hgai-proactive-bubble {
  position: fixed;
  bottom: calc(var(--hgai-bottom-offset, 16px) + 84px);
  right: 20px;
  z-index: 2147483646;
  background: var(--hgai-black);
  border: 1px solid var(--hgai-neon);
  border-radius: 16px;
  padding: 14px 16px 12px;
  max-width: min(280px, calc(100vw - 32px));
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px var(--hgai-border);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.hgai-proactive-bubble.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.hgai-side-left .hgai-proactive-bubble,
.hgai-pos-bottom-left .hgai-proactive-bubble,
.hgai-pos-top-left .hgai-proactive-bubble { right: auto; left: 20px; }
.hgai-proactive-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--hgai-muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px;
}
.hgai-proactive-text { font-size: 13px; color: var(--hgai-text); line-height: 1.5; margin: 0 0 10px; }
.hgai-proactive-cta { width: 100%; }

/* ─── GDPR notice ──────────────────────────────────────────── */
.hgai-gdpr-notice {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: var(--hgai-surface-3);
  border-top: 1px solid var(--hgai-border);
  padding: 5px 10px; font-size: 11px; color: var(--hgai-muted);
}
.hgai-btn-xs { padding: 3px 8px !important; font-size: 11px !important; border-radius: 5px !important; }

/* ─── Uptime status panel ──────────────────────────────────── */
.hgai-uptime-panel { padding: 12px; }
.hgai-uptime-overall {
  font-size: 13.5px; font-weight: 700;
  padding: 10px 14px; border-radius: 10px;
  margin-bottom: 12px; text-align: center;
}
.hgai-uptime-operational { background: rgba(0,255,110,.1); color: #39ff88; border: 1px solid rgba(0,255,110,.2); }
.hgai-uptime-partial     { background: rgba(255,200,0,.1);  color: #ffc800; border: 1px solid rgba(255,200,0,.2); }
.hgai-uptime-degraded    { background: rgba(255,77,77,.1);  color: #ff4d4d; border: 1px solid rgba(255,77,77,.2); }
.hgai-uptime-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px; border-bottom: 1px solid var(--hgai-border); font-size: 13px;
}
.hgai-uptime-label { flex: 1; color: var(--hgai-text); }
.hgai-uptime-status { color: var(--hgai-muted); font-size: 11px; text-transform: capitalize; }
.hgai-latency { font-size: 10px; color: var(--hgai-muted); margin-left: 4px; }
.hgai-uptime-updated { font-size: 10px; color: var(--hgai-muted); text-align: right; margin-top: 8px; }

/* ─── Checklist block ──────────────────────────────────────── */
.hgai-checklist {
  background: var(--hgai-surface-2); border: 1px solid var(--hgai-border);
  border-radius: 10px; padding: 12px 14px; margin: 4px 0;
}
.hgai-checklist-title {
  font-size: 10px; font-weight: 700; color: var(--hgai-neon);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.hgai-checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.hgai-checklist-items li { font-size: 12.5px; color: var(--hgai-text); line-height: 1.4; }

/* ─── Login form enhancements ──────────────────────────────── */
.hgai-login-note {
  font-size: 11px; color: var(--hgai-muted);
  background: rgba(0,255,110,.04); border: 1px solid rgba(0,255,110,.1);
  border-radius: 6px; padding: 6px 9px; margin-bottom: 10px; line-height: 1.4;
}
.hgai-forgot-password {
  font-size: 11.5px; color: var(--hgai-neon);
  background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit;
  display: block; text-align: right; margin-top: 4px;
}
.hgai-forgot-password:hover { text-decoration: underline; }
.hgai-auth-success { text-align: center; padding: 10px 4px 4px; }
.hgai-auth-success strong { font-size: 15px; display: block; margin-bottom: 4px; color: var(--hgai-text); }

/* ─── Portal button block ──────────────────────────────────── */
.hgai-portal-block { text-align: center; padding: 8px 0 4px; }
.hgai-portal-note { font-size: 10.5px; color: var(--hgai-muted); margin: 6px 0 0; }
.hgai-btn.hgai-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--hgai-neon) !important; color: #020f06 !important;
  border: none; border-radius: 9px;
  padding: 9px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--hgai-font); transition: all .15s;
}
.hgai-btn.hgai-btn-primary:hover { opacity: .88; }

/* ─── Status list block ────────────────────────────────────── */
.hgai-status-list { background: var(--hgai-surface-2); border-radius: 10px; padding: 10px 12px; margin: 4px 0; }
.hgai-status-list-title { font-size: 11px; font-weight: 600; color: var(--hgai-muted); margin-bottom: 6px; }
.hgai-status-list-item { font-size: 13px; color: var(--hgai-text); padding: 3px 0; line-height: 1.4; }

/* ─── Loading spinner ──────────────────────────────────────── */
.hgai-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px 12px; color: var(--hgai-muted); font-size: 13px;
}
.hgai-loading::before {
  content: ''; width: 16px; height: 16px;
  border: 2px solid var(--hgai-border); border-top-color: var(--hgai-neon);
  border-radius: 50%; animation: hgai-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes hgai-spin { to { transform: rotate(360deg); } }

/* ─── Thin scrollbars ──────────────────────────────────────── */
.mwai-messages::-webkit-scrollbar,
#hgai-panel-uptime::-webkit-scrollbar { width: 3px; }
.mwai-messages::-webkit-scrollbar-thumb { background: rgba(0,255,110,.2); border-radius: 99px; }

/* ─── Mobile adjustments for v7 new components only ───────── */
@media (max-width: 640px) {
  #hgai-voice-btn { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; }
  .hgai-starter-chip { font-size: 11.5px; padding: 6px 11px; }
  .hgai-proactive-bubble { right: 12px; left: auto; bottom: calc(var(--hgai-bottom-offset,16px) + 76px); }
  .hgai-side-left .hgai-proactive-bubble,
  .hgai-pos-bottom-left .hgai-proactive-bubble,
  .hgai-pos-top-left .hgai-proactive-bubble { left: 12px; right: auto; }
}

/* ═══ v7 Final Fixes ══════════════════════════════════════ */

/* User messages: natural wrapping, no forced pre-wrap */
.mwai-message.mwai-user .mwai-text {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* AI messages: allow <br> from markdown, but still wrap */
.mwai-message.mwai-ai .mwai-text {
  white-space: normal;
  word-wrap: break-word;
}

/* Markdown link → styled inline button */
.hgai-btn-link {
  color: var(--hgai-neon);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  word-break: break-all;
}
.hgai-btn-link:hover { opacity: .8; }
.hgai-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #25d366 !important;
  text-decoration: none !important;
}
.hgai-wa-link:hover { background: rgba(37,211,102,.2); }

/* Inline code from markdown */
.hgai-inline-code {
  background: var(--hgai-surface-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--hgai-mono);
  font-size: 12px;
  color: var(--hgai-neon);
}

/* Promo deal grid inside chat */
.hgai-promo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 6px;
}
.hgai-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-direction: column;
  background: rgba(0,255,110,.07);
  border: 1px dashed rgba(0,255,110,.3);
  border-radius: 8px;
  padding: 7px 11px;
  cursor: pointer;
  font-family: var(--hgai-font);
  transition: all .15s;
  text-align: center;
  min-width: 80px;
}
.hgai-promo-pill:hover {
  background: rgba(0,255,110,.14);
  border-color: var(--hgai-neon);
}
.hgai-promo-pill.is-copied {
  background: rgba(0,255,110,.2);
  border-color: var(--hgai-neon);
}
.hgai-promo-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--hgai-neon);
  font-family: var(--hgai-mono);
  letter-spacing: 0.5px;
  display: block;
}
.hgai-promo-val {
  font-size: 11px;
  color: var(--hgai-text-2);
  display: block;
  margin-top: 1px;
}
.hgai-promo-pill-copy {
  font-size: 9px;
  color: var(--hgai-muted);
  display: block;
  margin-top: 2px;
  font-family: var(--hgai-font);
  letter-spacing: 0;
  font-weight: 500;
}
.hgai-promo-hint {
  font-size: 10.5px;
  color: var(--hgai-muted);
  margin: 4px 0 0;
}

/* WhatsApp CTA strip above input */
.hgai-wa-cta-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(37,211,102,.07);
  border-top: 1px solid rgba(37,211,102,.15);
  font-size: 12px;
  color: var(--hgai-text-2);
}
.hgai-wa-cta-strip span { flex: 1; }
.hgai-wa-cta-btn {
  background: #25d366;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--hgai-font);
  text-decoration: none;
}
.hgai-wa-cta-close {
  background: none;
  border: none;
  color: var(--hgai-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}

/* NPS inline in support tab (single row, full width) */
.hgai-nps-inline { padding: 4px 0; }
#hgai-support-nps-scores {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
#hgai-support-nps-scores::-webkit-scrollbar { display: none; }
#hgai-support-nps-scores .hgai-nps-score {
  flex: 1;
  min-width: 0;
  height: 32px;
  font-size: 12px;
  padding: 0;
  border-radius: 6px;
}

/* Promo in ticker: clean, no internal codes */
.hgai-ticker-inner .hgai-ticker-dot { opacity: .4; }

/* ═══ v8 Game Engine CSS ═══════════════════════════════════ */

/* Game menu */
.hgai-game-menu { padding: 4px 0; }
.hgai-game-menu-block { overflow: hidden; }
.hgai-game-menu-title { font-size: 12px; font-weight: 700; color: var(--hgai-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.hgai-game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hgai-game-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--hgai-surface-2); border: 1px solid var(--hgai-border); border-radius: 10px; padding: 10px 6px 8px; cursor: pointer; font-family: inherit; transition: all .2s; }
.hgai-game-tile:hover { border-color: rgba(0,255,110,.4); background: rgba(0,255,110,.06); }
.hgai-game-tile-icon { font-size: 22px; line-height: 1; }
.hgai-game-tile-label { font-size: 11px; font-weight: 700; color: var(--hgai-text); }
.hgai-game-tile-desc { font-size: 9.5px; color: var(--hgai-muted); text-align: center; line-height: 1.3; }

/* Game block wrapper */
.hgai-game-block { background: var(--hgai-surface-2); border: 1px solid var(--hgai-border); border-radius: 12px; padding: 10px; margin: 4px 0; }
.hgai-game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hgai-game-name { font-size: 12px; font-weight: 700; color: var(--hgai-neon); }
.hgai-game-score-disp { font-size: 12px; color: var(--hgai-text-2); }
.hgai-game-controls { margin-top: 6px; }
.hgai-game-over { text-align: center; padding: 16px 8px 10px; }
.hgai-game-over-title { font-size: 15px; font-weight: 800; color: var(--hgai-neon); margin-bottom: 6px; }
.hgai-game-over-score { font-size: 32px; font-weight: 800; color: var(--hgai-text); line-height: 1.1; }
.hgai-game-over-score span { font-size: 13px; color: var(--hgai-muted); font-weight: 500; }
.hgai-game-over-best { font-size: 11px; color: var(--hgai-muted); margin: 4px 0 12px; }
.hgai-game-over-btns { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.hgai-game-replay, .hgai-game-other, .hgai-game-close-btn { font-size: 12px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--hgai-border); background: var(--hgai-surface-2); color: var(--hgai-text); cursor: pointer; font-family: inherit; }

.hgai-account-overview {
  background: linear-gradient(135deg, rgba(0,255,110,.08), rgba(8,18,12,.94));
}
.hgai-account-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.hgai-account-summary-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--hgai-text);
  margin-bottom: 6px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hgai-account-summary-copy {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hgai-text-2);
}
#hgai-account-content,
#hgai-account-cards {
  display: grid;
  gap: 12px;
  min-width: 0;
}
#hgai-account-content > *,
#hgai-account-cards > * {
  min-width: 0;
}
#hgai-panel-account .mwai-body,
#hgai-panel-account .mwai-conversation,
#hgai-panel-account .mwai-messages {
  min-width: 0;
}
#hgai-panel-account .mwai-messages {
  padding: 16px 14px 20px;
}
#hgai-panel-account .hgai-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#hgai-panel-account .hgai-chip {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
#hgai-panel-account .hgai-card-btns {
  align-items: stretch;
}
#hgai-panel-account .hgai-card-btns .hgai-btn {
  width: 100%;
}

/* Server Snap */
.hgai-snap-game { }
.hgai-snap-timer { font-size: 12px; font-weight: 700; color: var(--hgai-neon); }
.hgai-snap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.hgai-snap-card { position: relative; height: 44px; border-radius: 8px; border: 1px solid var(--hgai-border); background: var(--hgai-surface-3); cursor: pointer; overflow: hidden; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.hgai-snap-card .hgai-snap-front { display: none; font-size: 11px; font-weight: 700; color: var(--hgai-text); }
.hgai-snap-card .hgai-snap-back { font-size: 16px; color: var(--hgai-muted); }
.hgai-snap-card.flipped .hgai-snap-front { display: flex; }
.hgai-snap-card.flipped .hgai-snap-back { display: none; }
.hgai-snap-card.matched { background: rgba(0,255,110,.12); border-color: rgba(0,255,110,.35); }
.hgai-snap-card.matched .hgai-snap-front { color: var(--hgai-neon); }
.hgai-snap-status { font-size: 11px; color: var(--hgai-muted); text-align: center; }

/* Domain Typer */
.hgai-typer-input { width: 100%; box-sizing: border-box; background: var(--hgai-surface-3); border: 1px solid var(--hgai-border); border-radius: 8px; color: var(--hgai-text); font-size: 14px; padding: 9px 12px; font-family: var(--hgai-mono); margin-top: 6px; }
.hgai-typer-input.shake { animation: hgai-shake .3s; }
@keyframes hgai-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.hgai-tld-drop { position: absolute; font-size: 13px; font-weight: 700; color: var(--hgai-neon); font-family: var(--hgai-mono); background: rgba(0,255,110,.1); border: 1px solid rgba(0,255,110,.2); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }

/* Trivia */
.hgai-trivia-block { background: var(--hgai-surface-2); border: 1px solid var(--hgai-border); border-radius: 12px; padding: 14px; margin: 4px 0; }
.hgai-trivia-progress { font-size: 10px; color: var(--hgai-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.hgai-trivia-q { font-size: 13.5px; font-weight: 600; color: var(--hgai-text); margin-bottom: 12px; line-height: 1.5; }
.hgai-trivia-opts { display: flex; flex-direction: column; gap: 7px; }
.hgai-trivia-opt { background: var(--hgai-surface-3); border: 1px solid var(--hgai-border); border-radius: 8px; color: var(--hgai-text); font-size: 12.5px; padding: 9px 12px; text-align: left; cursor: pointer; font-family: inherit; transition: all .15s; }
.hgai-trivia-opt:hover:not(:disabled) { border-color: rgba(0,255,110,.4); background: rgba(0,255,110,.06); }
.hgai-trivia-opt.correct { background: rgba(0,255,110,.12) !important; border-color: var(--hgai-neon) !important; color: var(--hgai-neon) !important; }
.hgai-trivia-opt.wrong { background: rgba(255,77,77,.1) !important; border-color: #ff4d4d !important; color: #ff4d4d !important; }

/* v8 Recommendation cards */
.hgai-rec-cards { display: flex; flex-direction: column; gap: 8px; }
.hgai-rec-card { background: var(--hgai-surface-3); border: 1px solid var(--hgai-border); border-radius: 10px; padding: 12px; }
.hgai-rec-name { font-size: 13px; font-weight: 700; color: var(--hgai-text); }
.hgai-rec-group { font-size: 10px; color: var(--hgai-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.hgai-rec-price { font-size: 14px; font-weight: 800; color: var(--hgai-neon); margin-bottom: 4px; }
.hgai-rec-pitch { font-size: 11.5px; color: var(--hgai-text-2); margin-bottom: 8px; line-height: 1.4; }
.hgai-rec-order { display: block; text-align: center; width: 100%; box-sizing: border-box; text-decoration: none !important; font-size: 12px !important; padding: 8px 12px !important; }

/* Alert row */
.hgai-alert-row { font-size: 12.5px; color: var(--hgai-text); padding: 5px 2px; border-bottom: 1px solid var(--hgai-border); line-height: 1.4; }
.hgai-alert-row:last-child { border-bottom: none; }

/* TLD table */
.hgai-tld-table { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.hgai-tld-row { display: flex; justify-content: space-between; align-items: center; background: var(--hgai-surface-3); border-radius: 7px; padding: 6px 10px; font-size: 12px; }
.hgai-tld-name { font-weight: 700; color: var(--hgai-neon); font-family: var(--hgai-mono); }
.hgai-tld-price { color: var(--hgai-text-2); font-size: 11.5px; }

@media (max-width: 480px) {
  .hgai-game-grid { grid-template-columns: repeat(2,1fr); }
  .hgai-snap-grid { grid-template-columns: repeat(3,1fr); }
  .hgai-tld-table { grid-template-columns: 1fr; }
}

/* ═══ v9 UI/UX Fixes & Enhancements ══════════════════════════════════════ */

/* CRITICAL: Prevent widget flash on page load */
.mwai-chatbot-container.hgai-shell:not(.is-open) { display: none !important; }

/* ── Launcher: always visible above content ──────────────────────────── */
.hgai-root { z-index: var(--hgai-z, 2147483000); }

/* ── Smooth open/close transitions ─────────────────────────────────────── */
.mwai-chatbot-container.hgai-shell {
  transition: none; /* JS handles open/close - no CSS transition needed */
}
.mwai-chatbot-container.hgai-shell.is-open {
  display: block;
  animation: hgai-slide-up .28s cubic-bezier(.22,1,.36,1) both;
}

/* ── User message bubble: natural wrapping, no orphaned words ────────── */
.mwai-message.mwai-user .mwai-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal !important;
  hyphens: auto;
  max-width: 100%;
}
/* Tight single-word/short user messages should look natural */
.mwai-message.mwai-user .mwai-bubble,
.mwai-message.mwai-user > div > .mwai-text {
  display: inline-block;
  max-width: 82%;
}

/* ── AI message text: proper paragraph spacing ───────────────────────── */
.mwai-message.mwai-ai .mwai-text {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.62;
}
.mwai-message.mwai-ai .mwai-text br + br {
  display: block;
  content: '';
  margin-top: 6px;
}

/* ── Markdown links as styled buttons ────────────────────────────────── */
.hgai-md-link {
  color: var(--hgai-neon);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.hgai-md-link:hover { opacity: .8; }
.hgai-wa-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25);
  border-radius: 6px; padding: 3px 10px;
  font-size: 12px; font-weight: 700; color: #25d366 !important;
  text-decoration: none !important;
}
.hgai-wa-link:hover { background: rgba(37,211,102,.18); }

/* ── Responsive: Mobile full-screen experience ───────────────────────── */
@media (max-width: 520px) {
  .hgai-root:not(.hgai-root-embedded) {
    position: fixed !important; inset: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    max-width: 100vw !important; max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mwai-chatbot-container.hgai-shell.is-open {
    position: fixed !important; inset: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    max-width: 100vw !important; border-radius: 0 !important;
    animation: hgai-mobile-in .25s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes hgai-mobile-in {
    from { opacity:0; transform:translateY(100%); }
    to   { opacity:1; transform:translateY(0); }
  }
  .mwai-open-button.hgai-launcher {
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
  .hgai-game-grid { grid-template-columns: repeat(2,1fr); }
  .hgai-snap-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── Tablet: slightly wider ─────────────────────────────────────────── */
@media (min-width: 521px) and (max-width: 768px) {
  .mwai-chatbot-container.hgai-shell.is-open {
    width: min(420px, calc(100vw - 24px)) !important;
  }
}

/* ── Promo chip: clean display ───────────────────────────────────────── */
.hgai-promo-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.hgai-promo-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,255,110,.07); border: 1px dashed rgba(0,255,110,.28);
  border-radius: 10px; padding: 8px 13px; cursor: pointer;
  font-family: var(--hgai-font); transition: all .18s; min-width: 78px;
}
.hgai-promo-pill:hover, .hgai-promo-pill.is-copied {
  background: rgba(0,255,110,.15); border-color: var(--hgai-neon);
}
.hgai-promo-code { font-size:13px; font-weight:800; color:var(--hgai-neon); font-family:var(--hgai-mono); letter-spacing:.5px; }
.hgai-promo-val  { font-size:10px; color:var(--hgai-text-2); margin-top:2px; }
.hgai-promo-hint { font-size:10px; color:var(--hgai-muted); margin-top:4px; }

/* ── WhatsApp CTA strip ──────────────────────────────────────────────── */
.hgai-wa-cta-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(37,211,102,.07); border-top: 1px solid rgba(37,211,102,.13);
  font-size: 12px; color: var(--hgai-text-2);
}
.hgai-wa-cta-strip span { flex: 1; }
.hgai-wa-cta-btn {
  background: #25d366; color: #000; border: none; border-radius: 7px;
  padding: 5px 11px; font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.hgai-wa-cta-close {
  background: none; border: none; color: var(--hgai-muted);
  cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1;
}

/* ── NPS row: compact single line ──────────────────────────────────────── */
.hgai-nps-inline { padding: 2px 0; }
#hgai-support-nps-scores {
  display: flex !important; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
#hgai-support-nps-scores::-webkit-scrollbar { display: none; }
#hgai-support-nps-scores .hgai-nps-score {
  flex: 1; min-width: 0; height: 32px; font-size: 11px;
  padding: 0; border-radius: 6px;
}
.hgai-nps-thanks { font-size: 13px; font-weight: 600; color: var(--hgai-neon); padding: 8px 0; }

/* ── TLD pricing table ────────────────────────────────────────────────── */
.hgai-tld-table { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.hgai-tld-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--hgai-surface-3); border-radius: 6px; padding: 5px 9px; font-size: 12px;
}
.hgai-tld-name { font-weight: 700; color: var(--hgai-neon); font-family: var(--hgai-mono); }
.hgai-tld-price { color: var(--hgai-text-2); font-size: 11px; }

/* ── Recommendation cards ──────────────────────────────────────────────── */
.hgai-rec-cards { display: flex; flex-direction: column; gap: 8px; }
.hgai-rec-card {
  background: var(--hgai-surface-3); border: 1px solid var(--hgai-border);
  border-radius: 10px; padding: 12px;
}
.hgai-rec-name  { font-size: 13px; font-weight: 700; color: var(--hgai-text); }
.hgai-rec-group { font-size: 10px; color: var(--hgai-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.hgai-rec-price { font-size: 15px; font-weight: 800; color: var(--hgai-neon); margin-bottom: 4px; }
.hgai-rec-pitch { font-size: 11.5px; color: var(--hgai-text-2); margin-bottom: 8px; line-height: 1.4; }
.hgai-rec-order {
  display: block; text-align: center; width: 100%; box-sizing: border-box;
  text-decoration: none !important; font-size: 12px !important; padding: 8px 12px !important;
}

/* ── Alert row ──────────────────────────────────────────────────────────── */
.hgai-alert-row {
  font-size: 12.5px; color: var(--hgai-text); padding: 5px 2px;
  border-bottom: 1px solid var(--hgai-border); line-height: 1.4;
}
.hgai-alert-row:last-child { border-bottom: none; }

/* ── Inline code ──────────────────────────────────────────────────────── */
.hgai-inline-code {
  background: var(--hgai-surface-3); padding: 1px 5px; border-radius: 4px;
  font-family: var(--hgai-mono); font-size: 12px; color: var(--hgai-neon);
}

/* ── Game menu grid ───────────────────────────────────────────────────── */
.hgai-game-menu-title { font-size:11px; font-weight:700; color:var(--hgai-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.hgai-game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hgai-game-tile {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--hgai-surface-2); border:1px solid var(--hgai-border);
  border-radius:10px; padding:10px 6px 8px; cursor:pointer;
  font-family:inherit; transition:all .2s;
}
.hgai-game-tile:hover { border-color:rgba(0,255,110,.4); background:rgba(0,255,110,.06); }
.hgai-game-tile-icon  { font-size:22px; line-height:1; }
.hgai-game-tile-label { font-size:11px; font-weight:700; color:var(--hgai-text); }
.hgai-game-tile-desc  { font-size:9.5px; color:var(--hgai-muted); text-align:center; line-height:1.3; }

/* ── v9 Typing animation for launcher ───────────────────────────────── */
.hgai-launcher-status { display:flex; align-items:center; gap:3px; }
.hgai-launcher-status::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:#25d366; display:inline-block;
  animation: hgai-pulse 2s infinite;
}
@keyframes hgai-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.85); }
}

/* ── v9 Scroll to bottom button ─────────────────────────────────────── */
#hgai-scroll-btn {
  position:absolute; bottom:70px; right:12px;
  background:var(--hgai-surface-2); border:1px solid var(--hgai-border);
  border-radius:50%; width:32px; height:32px;
  display:none; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition: opacity .2s;
}
#hgai-scroll-btn.visible { display:flex; }

/* ── v9 Thinking dots animation improvement ─────────────────────────── */
.hgai-thinking {
  display:inline-flex; gap:4px; align-items:center; padding:2px 0;
}
.hgai-thinking span {
  width:8px; height:8px; border-radius:50%;
  background:var(--hgai-neon); opacity:.3;
  animation: hgai-think .9s ease-in-out infinite;
}
.hgai-thinking span:nth-child(2) { animation-delay:.2s; }
.hgai-thinking span:nth-child(3) { animation-delay:.4s; }
@keyframes hgai-think {
  0%,60%,100% { opacity:.2; transform:scale(.8); }
  30%          { opacity:1; transform:scale(1.2); box-shadow:0 0 6px var(--hgai-neon); }
}

/* ── v9 Smooth scrollbar ─────────────────────────────────────────────── */
.mwai-messages::-webkit-scrollbar { width:3px; }
.mwai-messages::-webkit-scrollbar-track { background:transparent; }
.mwai-messages::-webkit-scrollbar-thumb { background:var(--hgai-border); border-radius:3px; }

/* ── v9 Input area polish ───────────────────────────────────────────── */
.hgai-input-row textarea,
.mwai-input textarea {
  transition: border-color .2s, box-shadow .2s;
}
.hgai-input-row textarea:focus,
.mwai-input textarea:focus {
  border-color: var(--hgai-neon) !important;
  box-shadow: 0 0 0 2px rgba(57,255,136,.12) !important;
  outline: none;
}

/* === v9 PURE BLACK NEON GREEN FINAL ===================================== */

/* ── Override: Pure Black surfaces ──────────────────────────────────────── */
:root {
  --hgai-neon:       #00ff6e;
  --hgai-neon-dim:   #00cc55;
  --hgai-neon-glow:  rgba(0,255,110,.25);
  --hgai-neon-soft:  rgba(0,255,110,.09);
  --hgai-black:      #000000;
  --hgai-surface:    #030303;
  --hgai-surface-2:  #080808;
  --hgai-surface-3:  #0d0d0d;
  --hgai-border:     rgba(0,255,110,.12);
  --hgai-border-h:   rgba(0,255,110,.3);
  --hgai-text:       #e8ffe8;
  --hgai-text-2:     #85c890;
  --hgai-muted:      #3a6644;
  --hgai-shadow:     0 32px 80px rgba(0,0,0,.92), 0 0 0 1px rgba(0,255,110,.1);
}

/* Shell: pure black glass - NO border on shell (no radius = square edge) */
.mwai-chatbot-container.hgai-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hgai-window {
  background: #000 !important;
  border: 1px solid rgba(0,255,110,.18) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.92), 0 0 40px rgba(0,255,110,.07) !important;
  border-radius: var(--hgai-radius, 20px) !important;
  overflow: hidden !important;
}

/* Top bar */
.hgai-bar {
  background: #000 !important;
  border-bottom: 1px solid rgba(0,255,110,.1) !important;
}

/* Neon status dot pulse */
.hgai-bar-status-dot {
  background: var(--hgai-neon) !important;
  box-shadow: 0 0 8px var(--hgai-neon) !important;
  animation: hgai-neon-pulse 2s ease-in-out infinite !important;
}
@keyframes hgai-neon-pulse {
  0%,100%{ opacity:1; box-shadow:0 0 6px var(--hgai-neon); }
  50%     { opacity:.6; box-shadow:0 0 14px var(--hgai-neon), 0 0 28px rgba(0,255,110,.3); }
}

/* Ticker bar */
.hgai-ticker { background: #000 !important; border-bottom: 1px solid rgba(0,255,110,.08) !important; }

/* Tabs */
.hgai-tabs { background: #000 !important; border-bottom: 1px solid rgba(0,255,110,.1) !important; }
.hgai-tab.active {
  color: var(--hgai-neon) !important;
  border-bottom-color: var(--hgai-neon) !important;
  text-shadow: 0 0 12px rgba(0,255,110,.4) !important;
}

/* Messages area */
.mwai-messages, .mwai-body, .mwai-conversation { background: #000 !important; }

/* AI message bubble */
.mwai-message.mwai-ai .mwai-text,
.mwai-message.mwai-ai > div > .mwai-text {
  background: #0a0a0a;
  border: 1px solid rgba(0,255,110,.1);
  border-radius: 14px 14px 14px 4px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #e8ffe8;
}

/* User message bubble */
.mwai-message.mwai-user .mwai-text,
.mwai-message.mwai-user > div > .mwai-text {
  background: rgba(0,255,110,.08) !important;
  border: 1px solid rgba(0,255,110,.2) !important;
  border-radius: 14px 14px 4px 14px !important;
  padding: 10px 14px !important;
  color: #e8ffe8 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  display: inline-block !important;
  max-width: 82% !important;
}

/* AI avatar: neon ring */
.hgai-ai-avatar {
  width: 30px; height: 30px; min-width: 30px;
  background: #000;
  border: 1px solid rgba(0,255,110,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: 0 0 10px rgba(0,255,110,.15);
}

/* User avatar */
.hgai-user-avatar {
  width: 30px; height: 30px; min-width: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,255,110,.2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.hgai-message-attachments {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.hgai-attachment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: inherit !important;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.hgai-attachment-card:hover {
  border-color: rgba(0,255,110,.34);
  box-shadow: 0 0 0 1px rgba(0,255,110,.12), 0 10px 20px rgba(0,0,0,.18);
}

.hgai-attachment-icon {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,110,.1);
  border: 1px solid rgba(0,255,110,.18);
  color: var(--hgai-neon);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.hgai-attachment-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hgai-attachment-copy strong {
  color: var(--hgai-text);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.hgai-attachment-copy small {
  color: var(--hgai-text-2);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hgai-live-system-message .mwai-text.hgai-system-upload-request {
  border-color: rgba(0,255,110,.24);
  box-shadow: 0 0 0 1px rgba(0,255,110,.08);
}

/* Input area */
.mwai-footer { background: #000 !important; border-top: 1px solid rgba(0,255,110,.1) !important; }
.mwai-input textarea,
.hgai-input-row textarea {
  background: #080808 !important;
  border: 1px solid rgba(0,255,110,.15) !important;
  color: #e8ffe8 !important;
  caret-color: var(--hgai-neon) !important;
}
.mwai-input textarea:focus,
.hgai-input-row textarea:focus {
  border-color: rgba(0,255,110,.4) !important;
  box-shadow: 0 0 0 2px rgba(0,255,110,.08), 0 0 16px rgba(0,255,110,.06) !important;
}

.hgai-upload-btn[hidden],
.hgai-handoff-upload-banner[hidden] {
  display: none !important;
}

.hgai-handoff-upload-banner {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,255,110,.16);
  background: linear-gradient(180deg, rgba(0,255,110,.08), rgba(0,255,110,.03));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hgai-handoff-upload-copy {
  display: grid;
  gap: 4px;
}

.hgai-handoff-upload-copy strong {
  color: var(--hgai-text);
  font-size: 12px;
  font-weight: 700;
}

.hgai-handoff-upload-copy span {
  color: var(--hgai-text-2);
  font-size: 11px;
  line-height: 1.45;
}

.hgai-handoff-upload-cta {
  white-space: nowrap;
}

/* Submit button */
/* ── INPUT ROW BUTTON SIZING (mic, upload, send) ─────────────────────
   These live inside .hgai-input-row, NOT in the top bar.
   They need to be larger and consistently sized on all screen sizes.
   ─────────────────────────────────────────────────────────────────── */
.hgai-input-row .hgai-icon-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
}
.hgai-input-row .hgai-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
}
#mwai-chat-submit {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
}
#mwai-chat-submit svg {
  width: 20px !important;
  height: 20px !important;
}

/* Chips / action buttons */
.hgai-chip {
  background: #0a0a0a !important;
  border: 1px solid rgba(0,255,110,.2) !important;
  color: var(--hgai-text-2) !important;
  transition: all .18s !important;
}
.hgai-chip:hover {
  background: rgba(0,255,110,.08) !important;
  border-color: rgba(0,255,110,.4) !important;
  color: var(--hgai-neon) !important;
}

/* Primary button */
.hgai-btn-primary {
  background: var(--hgai-neon) !important;
  color: #000 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(0,255,110,.25) !important;
  border: none !important;
}
.hgai-btn-primary:hover { box-shadow: 0 0 24px rgba(0,255,110,.45) !important; }

/* Plan cards */
.hgai-plan-card {
  background: #080808 !important;
  border: 1px solid rgba(0,255,110,.12) !important;
}
.hgai-plan-card:hover, .hgai-plan-card.is-featured {
  border-color: rgba(0,255,110,.35) !important;
  box-shadow: 0 0 20px rgba(0,255,110,.1) !important;
}

/* Launcher button */
.mwai-open-button.hgai-launcher {
  background: #000 !important;
  border: 1px solid rgba(0,255,110,.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 20px rgba(0,255,110,.12) !important;
}
.mwai-open-button.hgai-launcher:hover {
  border-color: rgba(0,255,110,.45) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 28px rgba(0,255,110,.22) !important;
}

/* Promo pill */
.hgai-promo-pill {
  background: rgba(0,255,110,.05) !important;
  border: 1px dashed rgba(0,255,110,.25) !important;
}
.hgai-promo-pill:hover { background: rgba(0,255,110,.12) !important; }

/* Blocks */
.hgai-block {
  background: #080808 !important;
  border: 1px solid rgba(0,255,110,.1) !important;
  border-radius: 12px !important;
}
.hgai-block-title { color: var(--hgai-neon) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .08em !important; }

/* Scroll bubble */
.hgai-scroll-bubble {
  position: fixed;
  bottom: 110px;
  right: 24px;
  max-width: 260px;
  background: #000;
  border: 1px solid rgba(0,255,110,.3);
  border-radius: 14px 14px 4px 14px;
  padding: 12px 14px;
  font-size: 13px;
  color: #e8ffe8;
  font-family: var(--hgai-font, sans-serif);
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 20px rgba(0,255,110,.1);
  z-index: 2147483001;
  animation: hgai-bubble-in .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hgai-bubble-in {
  from { opacity:0; transform:translateY(12px) scale(.95); }
  to   { opacity:1; transform:none; }
}
.hgai-scroll-bubble:hover { border-color: rgba(0,255,110,.5); }
.hgai-scroll-bubble-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--hgai-muted);
  cursor: pointer; font-size: 13px; padding: 0; line-height: 1;
}

/* ── CRITICAL: Flash prevention (no inline style needed) ─────────────── */
.mwai-chatbot-container.hgai-shell:not(.is-open) { display: none !important; }
.mwai-open-button.hgai-launcher.is-hidden { display: none !important; }

/* ── Mobile: full screen, under sticky header fix ────────────────────── */
@media (max-width: 520px) {
  .hgai-root:not(.hgai-root-embedded) {
    right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
  }
  .mwai-open-button.hgai-launcher {
    right: 16px !important;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
  .mwai-chatbot-container.hgai-shell.is-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    max-width: 100vw !important; max-height: 100dvh !important;
    border-radius: 20px 20px 0 0 !important;
    animation: hgai-mobile-slide-up .25s cubic-bezier(.22,1,.36,1) both !important;
    z-index: var(--hgai-z, 2147483000) !important;
  }
  @keyframes hgai-mobile-slide-up {
    from { opacity:0; transform:translateY(100%); }
    to   { opacity:1; transform:none; }
  }
  .hgai-window { height: 100dvh !important; border-radius: 20px 20px 0 0 !important; overflow: hidden; }
}

/* ── User message bubble: single line for short text, wrap for long ────────
   The trick: white-space: nowrap + max-width cap so short words/phrases
   never orphan onto a second line. overflow-wrap kicks in only when the
   content genuinely exceeds the max-width (long sentences / URLs).
   ─────────────────────────────────────────────────────────────────────── */
.mwai-message.mwai-user .mwai-text,
.mwai-message.mwai-user > div > .mwai-text,
.mwai-user .mwai-text {
  white-space: nowrap !important;        /* keep short text on one line */
  overflow-wrap: break-word !important;  /* break very long URLs / words */
  word-break: break-word !important;
  max-width: min(82%, 420px) !important; /* cap width so it wraps correctly */
  /* Once content exceeds max-width the block wraps itself naturally */
}
/* When the bubble is actually wide (long message), allow normal wrapping */
.mwai-message.mwai-user .mwai-text:not(:empty) {
  display: inline-block;
  white-space: normal !important;
  /* nowrap above set inline-block width; this re-enables wrap inside */
}
/* Cleaner approach using CSS content-based sizing */
.mwai-user .mwai-text {
  width: max-content !important;
  max-width: min(82%, 420px) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* ── Chip: disabled/loading state ─────────────────────────────────────────── */
.hgai-chip:disabled {
  cursor: wait !important;
  pointer-events: none;
}

/* ── Game menu block ──────────────────────────────────────────────────────── */
.hgai-game-menu-block {
  background: var(--hgai-surface-2);
  border: 1px solid var(--hgai-border);
  border-radius: 14px;
  padding: 14px;
  margin: 4px 0;
}

/* ── Promo grid hint ──────────────────────────────────────────────────────── */
.hgai-promo-hint {
  font-size: 10px;
  color: var(--hgai-muted);
  margin: 6px 0 0;
}

/* ============================================================
   HGAI v11 — Mini Tools UI
   16 hosting tools with AI analysis, data-driven results
   ============================================================ */

/* ── Tool menu grid ─────────────────────────────────────────── */
.hgai-tools-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 0 8px;
}

.hgai-tool-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--hgai-border, rgba(0,255,110,0.10));
  border-radius: 14px;
  background: var(--hgai-surface-2, #0b1410);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
  text-align: left;
  color: var(--hgai-text, #e2fcea);
  font-family: var(--hgai-font, inherit);
  font-size: 13px;
  line-height: 1.35;
}

.hgai-tool-card:hover {
  border-color: var(--hgai-neon, #00ff6e);
  background: rgba(0,255,110,0.06);
}

.hgai-tool-card-icon {
  font-size: 20px;
  flex: 0 0 auto;
  line-height: 1;
}

.hgai-tool-card-body {}
.hgai-tool-card-label { font-weight: 700; display: block; color: var(--hgai-text, #e2fcea); }
.hgai-tool-card-desc  { font-size: 11px; color: var(--hgai-muted, #4e7a5e); display: block; margin-top: 1px; }

/* ── Tool panel wrapper ─────────────────────────────────────── */
.hgai-tool-panel {
  border: 1px solid var(--hgai-border, rgba(0,255,110,0.12));
  border-radius: 18px;
  overflow: hidden;
  background: var(--hgai-black-2, #060c08);
  margin: 4px 0 8px;
}

.hgai-tool-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,255,110,0.05);
  border-bottom: 1px solid var(--hgai-border, rgba(0,255,110,0.10));
}

.hgai-tool-panel-icon  { font-size: 20px; }
.hgai-tool-panel-title { font-weight: 700; font-size: 14px; flex: 1 1 auto; color: var(--hgai-text, #e2fcea); }
.hgai-tool-panel-back  {
  background: none; border: 1px solid var(--hgai-border);
  color: var(--hgai-text-2, #96d9aa);
  border-radius: 8px;
  cursor: pointer; font-size: 15px; padding: 2px 9px; line-height: 1.4;
  font-family: inherit; transition: border-color .18s, color .18s;
}
.hgai-tool-panel-back:hover { color: var(--hgai-neon, #00ff6e); border-color: var(--hgai-neon, #00ff6e); }

/* ── Tool input area ────────────────────────────────────────── */
.hgai-tool-inputs {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hgai-tool-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hgai-tool-input {
  flex: 1 1 auto;
  background: var(--hgai-surface-2, #0b1410);
  border: 1px solid var(--hgai-border, rgba(0,255,110,0.12));
  border-radius: 12px;
  color: var(--hgai-text, #e2fcea);
  padding: 10px 13px;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 160ms;
}

.hgai-tool-input:focus {
  border-color: var(--hgai-neon, #00ff6e);
  box-shadow: 0 0 0 2px rgba(0,255,110,0.10);
}

.hgai-tool-input::placeholder { color: var(--hgai-muted, #4e7a5e); opacity: 1; }

.hgai-tool-select {
  background: var(--hgai-surface-2, #0b1410);
  border: 1px solid var(--hgai-border, rgba(0,255,110,0.12));
  border-radius: 10px;
  color: var(--hgai-text, #e2fcea);
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hgai-tool-run-btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  background: var(--hgai-neon, #00ff6e);
  color: var(--hgai-black, #030805);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 160ms;
  white-space: nowrap;
  flex: 0 0 auto;
}

.hgai-tool-run-btn:hover   { filter: brightness(1.1); }
.hgai-tool-run-btn:disabled{ opacity: 0.55; cursor: not-allowed; }

/* ── Results area ─────────────────────────────────────────────── */
.hgai-tool-results {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hgai-tool-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  color: var(--hgai-text-dim, rgba(233,245,245,0.55));
  font-size: 13px;
}

.hgai-tool-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(77,232,207,0.2);
  border-top-color: var(--hgai-neon, #00ff6e);
  border-radius: 50%;
  animation: hgaiSpin 0.7s linear infinite;
}

@keyframes hgaiSpin { to { transform: rotate(360deg); } }

.hgai-tool-error {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5;
  font-size: 13px;
}

/* ── Score card ─────────────────────────────────────────────── */
.hgai-score-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.08));
}

.hgai-score-ring {
  position: relative;
  width: 60px; height: 60px;
  flex: 0 0 60px;
}

.hgai-score-ring svg { transform: rotate(-90deg); }

.hgai-score-ring-bg    { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 5; }
.hgai-score-ring-fill  { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.hgai-score-ring-fill.score-green  { stroke: #34d399; }
.hgai-score-ring-fill.score-yellow { stroke: #fbbf24; }
.hgai-score-ring-fill.score-red    { stroke: #f87171; }

.hgai-score-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.hgai-score-meta { flex: 1 1 auto; min-width: 0; }
.hgai-score-label { font-weight: 700; font-size: 14px; }
.hgai-score-sub   { font-size: 12px; opacity: 0.6; margin-top: 2px; }

.hgai-score-grade {
  font-size: 28px;
  font-weight: 800;
  flex: 0 0 auto;
}

.hgai-score-grade.grade-A { color: #34d399; }
.hgai-score-grade.grade-B { color: #86efac; }
.hgai-score-grade.grade-C { color: #fbbf24; }
.hgai-score-grade.grade-D { color: #fb923c; }
.hgai-score-grade.grade-F { color: #f87171; }

/* ── AI analysis block ─────────────────────────────────────── */
.hgai-tool-ai {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,255,110,0.05);
  border: 1px solid rgba(0,255,110,0.15);
  font-size: 13px;
  line-height: 1.6;
  color: var(--hgai-text, #e2fcea);
}

.hgai-tool-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hgai-neon, #00ff6e);
  margin-bottom: 8px;
}

.hgai-tool-ai-head::before {
  content: '⚡';
  font-size: 14px;
}

/* ── Records table ─────────────────────────────────────────── */
.hgai-records-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hgai-record-row {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.06));
  font-size: 12px;
}

.hgai-record-type {
  font-family: monospace;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(56,189,248,0.15);
  color: var(--hgai-neon, #00ff6e);
  text-align: center;
}

.hgai-record-data { word-break: break-all; font-family: monospace; font-size: 11.5px; }
.hgai-record-ttl  { font-size: 11px; opacity: 0.5; white-space: nowrap; }

/* ── Status chips ─────────────────────────────────────────── */
.hgai-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.hgai-status-chip.chip-good    { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.hgai-status-chip.chip-warn    { background: rgba(251,191,36,0.15); color: #fde68a; }
.hgai-status-chip.chip-bad     { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.hgai-status-chip.chip-info    { background: rgba(56,189,248,0.15); color: #bae6fd; }

.hgai-status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Recommendations list ─────────────────────────────────── */
.hgai-recs-list { display: flex; flex-direction: column; gap: 6px; }

.hgai-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
}

.hgai-rec-item.sev-critical { background: rgba(239,68,68,0.1);  border-left: 3px solid #f87171; }
.hgai-rec-item.sev-high     { background: rgba(251,146,60,0.1); border-left: 3px solid #fb923c; }
.hgai-rec-item.sev-medium   { background: rgba(251,191,36,0.1); border-left: 3px solid #fbbf24; }
.hgai-rec-item.sev-low      { background: rgba(52,211,153,0.08);border-left: 3px solid #6ee7b7; }

.hgai-rec-sev-icon { font-size: 14px; flex: 0 0 auto; margin-top: 1px; }

/* ── Speed test vitals ─────────────────────────────────────── */
.hgai-cwv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.hgai-cwv-item {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.07));
  text-align: center;
}

.hgai-cwv-label  { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.06em; }
.hgai-cwv-value  { font-size: 15px; font-weight: 800; margin: 4px 0 2px; }
.hgai-cwv-score  { font-size: 10px; }

.hgai-cwv-item.score-good   .hgai-cwv-value { color: #34d399; }
.hgai-cwv-item.score-ok     .hgai-cwv-value { color: #fbbf24; }
.hgai-cwv-item.score-bad    .hgai-cwv-value { color: #f87171; }

/* ── Propagation resolver rows ─────────────────────────────── */
.hgai-prop-rows { display: flex; flex-direction: column; gap: 4px; }

.hgai-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.06));
  font-size: 12px;
}

.hgai-prop-flag   { font-size: 16px; flex: 0 0 20px; text-align: center; }
.hgai-prop-name   { flex: 0 0 90px; font-weight: 600; }
.hgai-prop-val    { flex: 1 1 auto; font-family: monospace; font-size: 11px; opacity: 0.8; word-break: break-all; }
.hgai-prop-ms     { flex: 0 0 45px; font-size: 11px; opacity: 0.5; text-align: right; }
.hgai-prop-dot    { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.hgai-prop-dot.resolved   { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.hgai-prop-dot.unresolved { background: #6b7280; }

/* ── Port scan grid ─────────────────────────────────────────── */
.hgai-port-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.hgai-port-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.06));
}

.hgai-port-item.is-open   { background: rgba(52,211,153,0.06); }
.hgai-port-item.is-open.is-risky { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.2); }
.hgai-port-item.is-closed { background: rgba(255,255,255,0.015); opacity: 0.6; }

.hgai-port-num  { font-family: monospace; font-weight: 700; }
.hgai-port-svc  { opacity: 0.7; }
.hgai-port-dot  { width: 7px; height: 7px; border-radius: 50%; }
.hgai-port-item.is-open   .hgai-port-dot { background: #34d399; }
.hgai-port-item.is-open.is-risky .hgai-port-dot { background: #f87171; }
.hgai-port-item.is-closed .hgai-port-dot { background: #4b5563; }

/* ── Blacklist check rows ─────────────────────────────────── */
.hgai-bl-rows { display: flex; flex-direction: column; gap: 3px; max-height: 260px; overflow-y: auto; }

.hgai-bl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid transparent;
}

.hgai-bl-row.is-listed { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
.hgai-bl-row.is-clean  { background: rgba(255,255,255,0.02); }

.hgai-bl-name  { font-weight: 600; }
.hgai-bl-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.hgai-bl-row.is-listed .hgai-bl-badge { background: rgba(239,68,68,0.2); color: #fca5a5; }
.hgai-bl-row.is-clean  .hgai-bl-badge { background: rgba(52,211,153,0.15); color: #6ee7b7; }

/* ── Headers table ─────────────────────────────────────────── */
.hgai-headers-grid { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }

.hgai-header-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 11.5px;
}

.hgai-header-name  { font-family: monospace; color: var(--hgai-neon, #00ff6e); word-break: break-all; }
.hgai-header-value { font-family: monospace; opacity: 0.8; word-break: break-all; }

/* ── Redirect chain ─────────────────────────────────────────── */
.hgai-redirect-chain { display: flex; flex-direction: column; }

.hgai-redirect-hop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
}

.hgai-redirect-hop:not(:last-child) {
  border-bottom: 1px solid var(--hgai-border, rgba(255,255,255,0.06));
}

.hgai-redirect-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(56,189,248,0.15);
  color: var(--hgai-neon, #00ff6e);
  font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
  flex: 0 0 22px;
}

.hgai-redirect-url { word-break: break-all; flex: 1; }

.hgai-redirect-status {
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  flex: 0 0 auto;
}

.hgai-redirect-status.s-2xx { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.hgai-redirect-status.s-3xx { background: rgba(251,191,36,0.15);  color: #fde68a; }
.hgai-redirect-status.s-4xx,
.hgai-redirect-status.s-5xx { background: rgba(239,68,68,0.15);   color: #fca5a5; }

/* ── Password generator ─────────────────────────────────────── */
.hgai-pw-gen { display: flex; flex-direction: column; gap: 10px; }

.hgai-pw-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.hgai-pw-opt-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.hgai-pw-opt-label input { accent-color: var(--hgai-neon, #00ff6e); }

.hgai-pw-len-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.hgai-pw-len-range { flex: 1; accent-color: var(--hgai-neon, #00ff6e); }
.hgai-pw-len-val   { font-weight: 700; min-width: 28px; text-align: right; }

.hgai-pw-result-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hgai-pw-result {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 13px;
  color: var(--hgai-neon, #00ff6e);
  word-break: break-all;
  min-height: 40px;
}

.hgai-pw-strength {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.hgai-pw-strength.str-weak   { background: rgba(239,68,68,0.15); color: #fca5a5; }
.hgai-pw-strength.str-fair   { background: rgba(251,191,36,0.15); color: #fde68a; }
.hgai-pw-strength.str-strong { background: rgba(52,211,153,0.15); color: #6ee7b7; }
.hgai-pw-strength.str-super  { background: rgba(56,189,248,0.15); color: #bae6fd; }

/* ── .htaccess generator ─────────────────────────────────────── */
.hgai-ht-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hgai-ht-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.08));
  cursor: pointer;
  transition: border-color 160ms;
}

.hgai-ht-opt:hover { border-color: rgba(77,232,207,0.3); }
.hgai-ht-opt input { accent-color: var(--hgai-neon, #00ff6e); margin-top: 2px; }
.hgai-ht-opt-body { flex: 1; }
.hgai-ht-opt-title { font-size: 13px; font-weight: 600; }
.hgai-ht-opt-desc  { font-size: 11px; opacity: 0.6; margin-top: 2px; }

.hgai-ht-result {
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.1));
  border-radius: 12px;
  padding: 12px;
  font-family: monospace;
  font-size: 11px;
  color: #86efac;
  white-space: pre;
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
  line-height: 1.6;
}

/* ── SSL cert details ─────────────────────────────────────── */
.hgai-ssl-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 10px;
  font-size: 12.5px;
}

.hgai-ssl-key   { opacity: 0.6; }
.hgai-ssl-val   { word-break: break-all; font-weight: 600; }

.hgai-ssl-expiry-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 4px;
}

.hgai-ssl-expiry-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.hgai-ssl-expiry-fill.days-ok   { background: #34d399; }
.hgai-ssl-expiry-fill.days-warn { background: #fbbf24; }
.hgai-ssl-expiry-fill.days-crit { background: #f87171; }

/* ── IP map placeholder ─────────────────────────────────────── */
.hgai-ip-location {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hgai-ip-flag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.08));
}

.hgai-ip-flag { font-size: 32px; }
.hgai-ip-place-main { font-size: 16px; font-weight: 700; }
.hgai-ip-place-sub  { font-size: 12px; opacity: 0.6; }

/* ── WHOIS result ─────────────────────────────────────────── */
.hgai-whois-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 10px;
  font-size: 12.5px;
}

.hgai-whois-key { opacity: 0.6; }
.hgai-whois-val { word-break: break-all; font-weight: 600; }

/* ── Uptime result ─────────────────────────────────────────── */
.hgai-uptime-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.02);
}

.hgai-uptime-icon { font-size: 36px; }
.hgai-uptime-status { font-size: 18px; font-weight: 800; }
.hgai-uptime-detail { font-size: 12px; opacity: 0.6; }
.hgai-uptime-ms    { font-size: 13px; font-weight: 700; margin-top: 4px; }

.hgai-uptime-hero.is-online  { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.2); }
.hgai-uptime-hero.is-offline { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.2); }

/* ── Section title ─────────────────────────────────────────── */
.hgai-result-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.55;
  margin-bottom: 6px;
}

/* ── Copy button ─────────────────────────────────────────── */
.hgai-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--hgai-border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--hgai-text, #e9f5f5);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms;
  font-family: inherit;
}

.hgai-copy-btn:hover { border-color: var(--hgai-neon, #00ff6e); color: var(--hgai-neon, #00ff6e); }

/* ── Modernized polish & responsive UX ────────────────────── */
.mwai-open-button.hgai-launcher {
  backdrop-filter: blur(20px);
  /*background:
    radial-gradient(circle at top left, rgba(0,255,110,.14), transparent 42%),
    linear-gradient(135deg, rgba(6,14,10,.96), rgba(3,8,5,.92)) !important;*/
}

.mwai-chatbot-container.hgai-shell {
  width: min(460px, calc(100vw - 24px));
  max-width: min(460px, calc(100vw - 24px));
}

.hgai-window {
  min-height: min(720px, calc(100dvh - var(--hgai-top-offset, 0px) - 36px));
  background:
    radial-gradient(circle at top left, rgba(0,255,110,.08), transparent 34%),
    radial-gradient(circle at top right, rgba(0,174,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(10,18,14,.98), rgba(4,10,7,.98)) !important;
  backdrop-filter: blur(18px);
}

.hgai-bar,
.hgai-ticker,
.hgai-tabs,
.mwai-footer {
  backdrop-filter: blur(18px);
}

.hgai-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5,10,7,.96), rgba(9,16,12,.92));
}

.hgai-tab.active {
  background: linear-gradient(135deg, rgba(0,255,110,.16), rgba(0,174,255,.14));
  border-color: rgba(0,255,110,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.22);
}

.hgai-messages {
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
    transparent;
}

.hgai-starter-section,
.hgai-smart-suggestions,
.hgai-handoff-upload-banner,
.hgai-block,
.hgai-inline-actions,
.hgai-tool-panel,
.hgai-game-menu-block {
  backdrop-filter: blur(18px);
}

.hgai-block,
.hgai-tool-panel,
.hgai-game-menu-block {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.hgai-idle-game-block {
  overflow: hidden;
}

.hgai-idle-game-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,255,110,.12), rgba(0,174,255,.08));
  border: 1px solid rgba(255,255,255,.08);
}

.hgai-idle-game-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(5,12,9,.72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  flex: 0 0 auto;
}

.hgai-idle-game-copy {
  min-width: 0;
}

.hgai-idle-game-copy .hgai-block-copy {
  margin-top: 4px;
}

.hgai-input-row {
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.mwai-form-input-container {
  border-radius: 18px;
  overflow: hidden;
}

.hgai-input-row textarea {
  min-height: 48px;
}

.hgai-smart-suggestion,
.hgai-chip,
.hgai-starter-chip {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.hgai-smart-suggestion:hover,
.hgai-chip:hover,
.hgai-starter-chip:hover {
  border-color: var(--hgai-border-h);
}

.hgai-live-agent-message .mwai-text,
.hgai-live-system-message .mwai-text,
.hgai-live-visitor-message .mwai-text {
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}

@media (max-width: 768px) {
  .hgai-root:not(.hgai-root-embedded) {
    left: 12px !important;
    right: 12px !important;
  }

  .mwai-chatbot-container.hgai-shell {
    width: 100%;
    max-width: 100%;
  }

  .hgai-window {
    min-height: 100dvh;
    border-radius: 26px;
  }

  .hgai-bar {
    padding: 12px;
  }

  .hgai-bar-right {
    max-width: none;
    gap: 6px;
  }

  .hgai-idle-game-hero {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .hgai-window {
    border-radius: 22px;
    min-height: 100dvh;
  }

  .hgai-bar {
    flex-wrap: nowrap;
    align-items: center;
  }

  .hgai-bar-left,
  .hgai-bar-right {
    max-width: none;
    width: auto;
  }

  .hgai-bar-right {
    justify-content: space-between;
  }

  .hgai-tabs {
    padding-inline: 8px;
  }

  .hgai-input-row {
    gap: 6px;
    padding: 7px;
    border-radius: 20px;
  }

  .hgai-smart-suggestions {
    padding-bottom: 2px;
  }
}

@media (max-width: 480px) {
  .hgai-root:not(.hgai-root-embedded) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .hgai-window {
    min-height: 100dvh;
    border-radius: 20px 20px 0 0;
  }

  .hgai-idle-game-hero {
    flex-direction: column;
    text-align: left;
  }

  .hgai-card-btns {
    flex-direction: column;
  }

  .hgai-card-btns .hgai-btn {
    width: 100%;
  }
}

/* ── Elementor compatibility ──────────────────────────────────
 * Elementor's sticky header uses position:sticky with z-index
 * up to 9999. Our widget must always sit above it.
 * We also prevent the widget from inheriting Elementor's
 * global CSS reset which can break flex layouts inside .e-*
 * ─────────────────────────────────────────────────────────── */

/* Prevent Elementor column/container CSS from leaking into widget */
.elementor .hgai-root,
.elementor-section .hgai-root,
.e-container .hgai-root,
.e-con .hgai-root {
  width: unset !important;
  max-width: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force widget above any Elementor sticky header (z-index: 9999+) */
.hgai-root:not(.hgai-root-embedded) {
  z-index: 2147483000 !important;
  isolation: isolate;
}

/* Prevent Elementor global font override from applying inside widget */
.hgai-root,
.hgai-root * {
  box-sizing: border-box;
}

/* Prevent theme/Elementor box-shadow rules from adding shadows to widget */
.hgai-window,
.hgai-shell,
.hgai-launcher,
.hgai-block,
.mwai-chatbot-container {
  box-shadow: none !important;
}

/* Elementor image-box widget sometimes adds margin/padding resets */
.hgai-root .mwai-message { margin: 0; padding: 0; }
.hgai-root img { max-width: unset; height: auto; }

/* Desktop: allow sticky header offset. Mobile: handled separately with 100dvh. */
@media (min-width: 769px) {
  .hgai-root:not(.hgai-root-embedded) .hgai-shell {
    /*max-height: calc(100dvh - var(--hgai-top-offset, 0px) - var(--hgai-bottom-offset, 24px) - 72px);*/
  }
}

/* OceanWP / Astra / Hello theme header specificity fixes */
.hgai-root[data-hgai-fouc],
.hgai-root {
  font-family: var(--hgai-font) !important;
}

/* Upload trigger: only hidden via the [hidden] attribute set by JS (syncHandoffUploadUi) */
#hgai-handoff-upload-trigger[hidden] {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════
   GRABEE AI — COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL
   Replaces and extends fragmented breakpoint rules above.
   All fixes here use !important only where specificity battles
   theme styles, otherwise plain specificity is used.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared mobile base (≤ 768px) ──────────────────────────── */
@media (max-width: 768px) {

  /* Full-width shell, no side gap */
  .hgai-root:not(.hgai-root-embedded) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
  }

  .mwai-chatbot-container.hgai-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Window fills full screen height — bottom-sheet overlay, sticky header irrelevant */
  .hgai-window {
    border-radius: 20px 20px 0 0 !important;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Shell max-height matches window — full screen */
  .hgai-root:not(.hgai-root-embedded) .hgai-shell {
    max-height: 100dvh !important;
  }

  /* Top bar — always single row, never wraps */
  .hgai-bar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    flex: 0 0 auto;
  }

  .hgai-bar-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .hgai-bar-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hgai-bar-sub {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hgai-bar-right {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    max-width: none !important;
  }

  /* Compact icon buttons — BAR ONLY, not input row */
  .hgai-bar .hgai-icon-btn,
  .hgai-bar-right .hgai-icon-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  /* WhatsApp button — icon only on mobile */
  .hgai-bar-wa {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 0 !important;
    flex: 0 0 28px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  .hgai-bar-wa svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* User callout: always opens downward, anchored to right */
  .hgai-user-callout {
    top: calc(100% + 6px);
    bottom: auto;
    right: 0;
    left: auto;
    /* ensure it doesn't overflow right edge on narrow screens */
    max-width: calc(100vw - 20px);
  }
  .hgai-user-callout::before {
    top: -6px;
    bottom: auto;
    transform: rotate(45deg);
  }

  /* Tabs — scrollable single row */
  .hgai-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 10px !important;
    gap: 2px !important;
    flex: 0 0 auto;
  }
  .hgai-tabs::-webkit-scrollbar { display: none; }

  .hgai-tab {
    flex: 0 0 auto !important;
    min-width: 58px !important;
    padding: 7px 4px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  .hgai-tab-icon { font-size: 13px !important; }

  /* Ticker stays compact */
  .hgai-ticker { height: 24px !important; }
  .hgai-ticker-inner { font-size: 10px !important; }

  /* Panel body — fills remaining space */
  .mwai-chat .mwai-body,
  #hgai-panel-support .mwai-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Messages area padding */
  .mwai-messages { padding: 12px 10px 16px !important; }
  .mwai-message .mwai-text { max-width: 90% !important; }

  /* Input area */
  .hgai-input-row {
    padding: 7px 8px !important;
    border-radius: 18px !important;
    gap: 6px !important;
    flex: 0 0 auto;
    margin: 0 8px 8px !important;
    margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hgai-input-row textarea {
    min-height: 40px !important;
    font-size: 16px !important; /* ≥16px prevents iOS zoom-on-focus */
  }

  /* Smart suggestions — horizontal scroll */
  .hgai-smart-suggestions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 10px 6px !important;
    gap: 6px !important;
  }
  .hgai-smart-suggestions::-webkit-scrollbar { display: none; }
  .hgai-smart-suggestion {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 5px 11px !important;
  }

  /* Starter chips — wrap + full usage of width */
  .hgai-starter-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .hgai-starter-chip {
    font-size: 11px !important;
    padding: 6px 10px !important;
    flex: 1 1 calc(50% - 3px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Plan cards — full width stacked */
  .hgai-pricing-grid,
  .hgai-pricing-grid-featured,
  .hgai-pricing-grid-catalog {
    grid-template-columns: 1fr !important;
  }

  .hgai-plan-card {
    padding: 12px 11px 11px !important;
  }
  .hgai-plan-name {
    font-size: 14px !important;
    padding-right: 52px !important;
  }
  .hgai-plan-price { font-size: 20px !important; }
  .hgai-card-btns { gap: 6px !important; }
  .hgai-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Plans hero */
  .hgai-plans-hero { gap: 8px !important; padding: 10px !important; }
  .hgai-plans-hero h3 { font-size: 15px !important; }
  .hgai-plans-hero p { font-size: 10px !important; }
  .hgai-plans-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  .hgai-plans-filters::-webkit-scrollbar { display: none; }

  /* Blocks */
  .hgai-block { padding: 11px !important; border-radius: 14px !important; }
  .hgai-block-head { flex-direction: column !important; align-items: flex-start !important; }

  /* Support panel */
  #hgai-panel-support .mwai-messages { gap: 8px !important; padding: 9px 9px 10px !important; }
  #hgai-panel-support .mwai-message .mwai-text {
    max-width: calc(100% - 32px) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 8px 10px !important;
  }
  #hgai-panel-support .hgai-chip {
    font-size: 11px !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
  }
  #hgai-panel-support .hgai-metric-row { font-size: 11px !important; }
  #hgai-panel-support .hgai-star { width: 24px !important; height: 24px !important; font-size: 13px !important; }

  /* Account panel */
  #hgai-panel-account .hgai-inline-actions { grid-template-columns: 1fr !important; }

  /* Metric rows */
  .hgai-metric-row { align-items: flex-start !important; }
  .hgai-metric-value { max-width: 50% !important; font-size: 11px !important; }
  .hgai-metric-label { font-size: 11px !important; }

  /* Chat hero copy */
  .hgai-chat-hero-copy { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── Extra-small (≤ 480px) ──────────────────────────────────── */
@media (max-width: 480px) {

  .hgai-bar {
    padding: 8px 10px !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    gap: 6px !important;
  }

  .hgai-bar-name { font-size: 12px !important; }
  .hgai-bar-sub { display: none !important; } /* hide subtitle to save space */
  .hgai-agent-avatar { width: 28px !important; height: 28px !important; }

  .hgai-bar .hgai-icon-btn,
  .hgai-bar-right .hgai-icon-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex: 0 0 26px !important;
    font-size: 10px !important;
  }

  .hgai-bar-wa {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  .hgai-user-icon-btn {
    width: 26px !important;
    height: 26px !important;
  }

  .mwai-messages { padding: 10px 8px 14px !important; }
  .mwai-message .mwai-text { max-width: 93% !important; font-size: 13px !important; }

  .hgai-input-row {
    margin: 0 6px 6px !important;
    margin-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hgai-tab { min-width: 52px !important; font-size: 8px !important; }

  .hgai-plan-card { padding: 10px 9px 9px !important; }
  .hgai-card-btns { flex-direction: column !important; }
  .hgai-card-btns .hgai-btn { width: 100% !important; text-align: center !important; }

  .hgai-plans-hero h3 { font-size: 13px !important; }
  .hgai-plans-hero-start { padding: 6px 8px !important; }
  .hgai-plans-hero-start strong { font-size: 10px !important; }

  .hgai-block { padding: 9px !important; border-radius: 12px !important; }
}

/* ── Landscape phone (short height) ───────────────────────── */
@media (max-height: 500px) and (max-width: 900px) {
  .hgai-ticker { display: none !important; }
  .hgai-chat-hero-copy { display: none !important; }
  .hgai-plans-hero { padding: 7px 8px !important; }
  .mwai-messages { padding: 8px 10px 10px !important; }
  .hgai-block { padding: 8px !important; }
}

/* ── iOS safe-area / notch fixes ──────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .hgai-window {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GRABEE AI — FINAL AUDIT RESPONSIVE FIXES (v2)
   Addresses: pricing grids, video invite, offer popover, handoff bar,
   input row touch targets, missing safe-area on narrow screens,
   tablet intermediate layout, and sub-360px micro-screens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── User message: clean max-content width, no orphan words ── */
.mwai-user .mwai-text {
  width: max-content !important;
  max-width: min(82%, 400px) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}

/* ── Input row: always consistent size on all devices ───────── */
.hgai-input-row {
  align-items: center !important;
}
.hgai-input-row .hgai-icon-btn,
.hgai-input-row #mwai-chat-submit {
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── Video invite: stack on narrow screens ──────────────────── */
@media (max-width: 400px) {
  .hgai-video-invite {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hgai-video-join-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Featured / catalog pricing grid: 1-col on small screens ── */
@media (max-width: 400px) {
  .hgai-pricing-grid-featured,
  .hgai-pricing-grid-catalog {
    grid-template-columns: 1fr !important;
  }
}

/* ── Offer popover: ensure doesn't clip on narrow screens ────── */
@media (max-width: 480px) {
  .hgai-offer-popover-panel {
    right: auto;
    left: 0;
    max-width: calc(100vw - 32px);
  }
}

/* ── Handoff bar: wrap text on small screens ─────────────────── */
@media (max-width: 480px) {
  .hgai-handoff-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: 11px;
  }
  .hgai-handoff-bar-right {
    gap: 6px;
  }
  .hgai-end-handoff-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ── Chat manager: improve touch targets on mobile ───────────── */
@media (max-width: 640px) {
  .hgai-btn {
    min-height: 36px;
    padding: 8px 12px !important;
  }
  .hgai-manager-filter-btn {
    min-height: 34px;
  }
  .hgai-manager-thread-topbar {
    gap: 8px;
  }
}

/* ── Sub-360px micro screen fallbacks ────────────────────────── */
@media (max-width: 360px) {
  .hgai-bar {
    padding: 8px !important;
    gap: 4px !important;
  }
  .hgai-agent-avatar {
    display: none !important; /* saves 40px on the bar */
  }
  .hgai-tab {
    min-width: 44px !important;
    font-size: 7.5px !important;
    padding: 6px 2px !important;
  }
  .hgai-tab-icon {
    font-size: 11px !important;
  }
  .hgai-input-row {
    margin: 0 4px 4px !important;
    margin-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mwai-messages {
    padding: 8px 7px 12px !important;
  }
  .hgai-bar-wa {
    display: none !important; /* only on truly tiny screens */
  }
}

/* ── Tablet (481–768px): intermediate layout optimisations ──── */
@media (min-width: 481px) and (max-width: 768px) {
  .hgai-pricing-grid-featured,
  .hgai-pricing-grid-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hgai-plan-card {
    padding: 13px 12px;
  }
  .hgai-tab {
    min-width: 68px !important;
    font-size: 10px !important;
  }
}

/* ── Ensure the launcher FAB is always reachable ─────────────── */
@media (max-width: 768px) {
  .mwai-open-button.hgai-launcher {
    right: 16px !important;
    bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    left: auto !important;
  }
}

/* ── Prevent theme box-sizing from leaking into widget ──────── */
.hgai-input-row *,
.hgai-bar *,
.hgai-window * {
  box-sizing: border-box;
}

/* ── Fix: account panel inline actions already single-col,
   but also ensure the grid doesn't overflow ─────────────────── */
#hgai-panel-account .hgai-inline-actions {
  width: 100%;
  overflow: hidden;
}

/* ── Fix: smart suggestion chips — prevent text truncation ──── */
.hgai-smart-suggestion {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .hgai-smart-suggestion {
    max-width: 180px;
  }
}

/* ── Fix: KB search input on narrow screens ──────────────────── */
#hgai-kb-search-input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ── Fix: domain checker input row ──────────────────────────── */
.hgai-domain-row {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
@media (max-width: 480px) {
  .hgai-domain-row input,
  .hgai-domain-row .hgai-domain-input {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .hgai-domain-row button {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   GRABEE AI — FINAL COMPREHENSIVE RESPONSIVE AUDIT PATCH
   Covers all remaining elements identified in the full audit pass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Launcher button: no hard min-width on phones ────────── */
@media (max-width: 480px) {
  .mwai-open-button.hgai-launcher {
    min-width: 0 !important;
    width: auto !important;
  }
}

/* ── 2. Snap-grid (4-col) → 2-col on phones ─────────────────── */
@media (max-width: 480px) {
  .hgai-snap-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 3. Core Web Vitals 3-col → 1-col on phones ─────────────── */
@media (max-width: 640px) {
  .hgai-cwv-grid {
    grid-template-columns: 1fr !important;
  }
  .hgai-cwv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 8px 12px;
  }
  .hgai-cwv-label { margin-bottom: 0; }
}

/* ── 4. Port-scan grid: 2-col → 1-col on very small screens ─── */
@media (max-width: 380px) {
  .hgai-port-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. DNS record row: tighten fixed 55px col on mobile ─────── */
@media (max-width: 480px) {
  .hgai-record-row {
    grid-template-columns: 44px 1fr auto !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* ── 6. Analytics / stats grids ────────────────────────────────
   The 1fr 2fr two-col row → stack on phones                     */
@media (max-width: 480px) {
  .hgai-stat-row,
  .hgai-analytics-row {
    grid-template-columns: 1fr !important;
  }
  .hgai-stat-label { font-size: 11px !important; }
  .hgai-stat-bar { height: 6px !important; }
}

/* ── 7. Account panel inline-actions: always 1-col on mobile ─── */
@media (max-width: 640px) {
  #hgai-panel-account .hgai-inline-actions,
  .hgai-inline-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ── 8. Bar-right: remove 280px cap completely on narrow screens */
@media (max-width: 768px) {
  .hgai-bar-right {
    max-width: none !important;
  }
}

/* ── 9. Handoff meeting invite: stack on small screens ──────── */
@media (max-width: 480px) {
  .hgai-video-invite {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .hgai-video-invite-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 10. NPS scores: ensure row scrolls without overflow ─────── */
@media (max-width: 480px) {
  .hgai-nps-scores {
    gap: 3px !important;
  }
  .hgai-nps-score {
    min-width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }
}

/* ── 11. Block titles / headings don't overflow ──────────────── */
.hgai-block-title,
.hgai-section-title,
.hgai-account-summary-title {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* ── 12. Smart suggestion pills: consistent tap target ───────── */
@media (max-width: 640px) {
  .hgai-smart-suggestion {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── 13. Pricing plan badge: don't overlap price on tiny screens */
@media (max-width: 360px) {
  .hgai-plan-badge {
    position: static !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
  }
  .hgai-plan-name {
    padding-right: 0 !important;
  }
}

/* ── 14. KB / article cards: text wrapping ──────────────────── */
.hgai-kb-card,
.hgai-article-item {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 15. Input row: ensure textarea shrinks properly ─────────── */
@media (max-width: 360px) {
  .hgai-input-row {
    gap: 4px !important;
    padding: 5px 6px !important;
  }
  .hgai-input-row .hgai-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
  }
  #mwai-chat-submit {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
  }
}

/* ── 16. Uptime monitor timeline bar: clip properly ─────────── */
.hgai-uptime-bar-wrap {
  overflow: hidden;
  min-width: 0;
}

/* ── 17. Ticket / support form: full-width inputs on mobile ──── */
@media (max-width: 640px) {
  .hgai-ticket-form input,
  .hgai-ticket-form textarea,
  .hgai-ticket-form select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 18. Proactive / retention popover: no overflow on phones ── */
@media (max-width: 480px) {
  .hgai-proactive-bubble {
    max-width: calc(100vw - 32px) !important;
    right: 8px !important;
    left: auto !important;
  }
}

/* ── 19. Footer / "Powered by" line: centre on mobile ──────────*/
@media (max-width: 640px) {
  .mwai-footer {
    text-align: center !important;
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
}

/* ── 20. Ensure no child of .hgai-window escapes horizontally ── */
.hgai-window,
.hgai-window * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Re-allow overflow on scrollable containers */
.hgai-window .mwai-messages,
.hgai-window .hgai-plans-filters,
.hgai-window .hgai-smart-suggestions,
.hgai-window .hgai-tabs,
.hgai-window .hgai-nps-scores {
  max-width: 100%;
  overflow-x: auto;
}


/* ═══════════════════════════════════════════════════════════════
   CHAT BUSY STATE — visual feedback while AI is processing
   ═══════════════════════════════════════════════════════════════ */

/* Send button: subtle pulse while busy, no spinning */
#mwai-chat-submit.hgai-btn-busy {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  animation: hgai-pulse-busy 1.4s ease-in-out infinite !important;
}
@keyframes hgai-pulse-busy {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.35; }
}

/* Textarea: dimmed, not-allowed cursor */
.mwai-form-input.hgai-input-busy,
#mwai-chat-input.hgai-input-busy {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Voice button: greyed out */
#hgai-voice-btn.hgai-btn-busy {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Suggestion chips & starter chips: faded, not-allowed */
.hgai-smart-suggestion.hgai-chip-busy,
.hgai-chip[data-suggestion].hgai-chip-busy,
.hgai-starter-chip.hgai-chip-busy {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4) !important;
}

/* Subtle pulsing glow on the typing indicator while busy */
#hgai-typing {
  animation: hgai-msg-in .28s cubic-bezier(.22,1,.36,1) both;
}