/* ==========================================================================
   az-navbot — floating AI navigation chat + speaker bot for azizsaif.com
   A self-contained widget: a blue mic launcher opens a chat panel that talks
   the visitor through the site (story, ventures, reports, AI services,
   FC SmartCommerce AI, investors) and links them straight there.
   Pure Web Speech API + a scripted knowledge base — no server, works on
   GitHub Pages. Modelled on the /diy-marketing voice coach.
   ========================================================================== */
:root{
  --nb-blue:#2b6cb0; --nb-blue-d:#16466f; --nb-blue-l:#6aa9e0;
  --nb-ink:#15202b; --nb-mute:#5b6b7a; --nb-line:#e3e9f0;
  --nb-soft:#f4f8fc; --nb-card:#ffffff;
}

/* ---- launcher: the blue mic sphere ---- */
.aznb-launch{
  position:fixed; right:22px; bottom:22px; z-index:9998;
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 38% 30%, var(--nb-blue-l) 0%, var(--nb-blue) 52%, var(--nb-blue-d) 100%);
  box-shadow:0 12px 30px -8px rgba(22,70,111,.6), inset 0 2px 6px rgba(255,255,255,.35);
  display:grid; place-items:center; transition:transform .18s;
}
.aznb-launch:hover{transform:scale(1.07)}
.aznb-launch svg{width:28px; height:28px; fill:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.aznb-launch.aznb-pulse{animation:aznbPulse 2.4s infinite}
@keyframes aznbPulse{
  0%{box-shadow:0 12px 30px -8px rgba(22,70,111,.6), 0 0 0 0 rgba(43,108,176,.45)}
  60%{box-shadow:0 12px 30px -8px rgba(22,70,111,.6), 0 0 0 16px rgba(43,108,176,0)}
  100%{box-shadow:0 12px 30px -8px rgba(22,70,111,.6), 0 0 0 0 rgba(43,108,176,0)}
}
.aznb-launch.aznb-hide{display:none}

/* ---- nudge bubble ---- */
.aznb-bubble{
  position:fixed; right:22px; bottom:96px; z-index:9998; max-width:240px;
  background:var(--nb-card); color:var(--nb-ink); border:1px solid var(--nb-line);
  border-radius:14px; padding:12px 34px 12px 14px; font:500 13px/1.5 'Inter',system-ui,sans-serif;
  box-shadow:0 14px 34px -14px rgba(22,70,111,.45);
}
.aznb-bubble b{color:var(--nb-blue-d)}
.aznb-bubble button{position:absolute; top:6px; right:8px; border:none; background:none; cursor:pointer; font-size:16px; color:var(--nb-mute); line-height:1}
.aznb-bubble.aznb-hide{display:none}

/* ---- panel ---- */
.aznb-panel{
  position:fixed; right:22px; bottom:22px; z-index:9999; width:min(380px, calc(100vw - 28px));
  background:var(--nb-card); border:1px solid var(--nb-line); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(22,70,111,.55); display:none; flex-direction:column;
  overflow:hidden; font-family:'Inter',system-ui,sans-serif; max-height:min(620px, calc(100vh - 36px));
}
.aznb-panel.aznb-open{display:flex; animation:aznbIn .2s ease-out}
@keyframes aznbIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.aznb-head{
  display:flex; align-items:center; gap:9px; padding:13px 15px; color:#fff;
  background:linear-gradient(135deg, var(--nb-blue) 0%, var(--nb-blue-d) 100%);
}
.aznb-head .aznb-dot{width:9px; height:9px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 0 3px rgba(110,231,168,.3)}
.aznb-head b{font-size:14px; font-weight:700; flex:1}
.aznb-head .aznb-x{border:none; background:rgba(255,255,255,.16); color:#fff; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1}
.aznb-head .aznb-x:hover{background:rgba(255,255,255,.3)}

.aznb-body{flex:1; overflow-y:auto; padding:14px 14px 4px; background:var(--nb-soft); display:flex; flex-direction:column; gap:12px}

.aznb-msg{display:flex; gap:9px; align-items:flex-start; animation:aznbMsg .22s ease-out}
@keyframes aznbMsg{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.aznb-msg.user{flex-direction:row-reverse}
.aznb-av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; flex-shrink:0}
.aznb-msg.bot .aznb-av{background:linear-gradient(135deg,var(--nb-blue),var(--nb-blue-d)); color:#fff}
.aznb-msg.user .aznb-av{background:#dfe7ef; color:var(--nb-ink)}
.aznb-b{max-width:84%; padding:10px 13px; font-size:14px; line-height:1.55; color:var(--nb-ink)}
.aznb-msg.bot .aznb-b{background:#fff; border:1px solid var(--nb-line); border-radius:14px 14px 14px 4px}
.aznb-msg.user .aznb-b{background:var(--nb-blue); color:#fff; border-radius:14px 14px 4px 14px}
.aznb-b a{color:var(--nb-blue-d); font-weight:700; text-decoration:none; border-bottom:1px solid var(--nb-blue-l)}
.aznb-msg.bot .aznb-b.speaking{box-shadow:0 0 0 2px var(--nb-blue-l)}
.aznb-replay{margin-left:6px; border:none; background:none; cursor:pointer; font-size:12px; opacity:.5; padding:0; vertical-align:middle}
.aznb-replay:hover{opacity:1}

.aznb-chips{display:flex; flex-wrap:wrap; gap:7px; padding:2px 2px 10px}
.aznb-chip{font-family:inherit; padding:7px 12px; border-radius:999px; border:1px solid var(--nb-line); background:#fff; color:var(--nb-ink); font-size:12.5px; cursor:pointer; transition:all .15s}
.aznb-chip:hover{border-color:var(--nb-blue); color:var(--nb-blue-d); background:var(--nb-soft)}

.aznb-foot{border-top:1px solid var(--nb-line); padding:11px 13px; background:var(--nb-card)}
.aznb-row{display:flex; align-items:center; gap:9px}
.aznb-mic{width:42px; height:42px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 30%, var(--nb-blue-l), var(--nb-blue) 60%, var(--nb-blue-d)); }
.aznb-mic svg{width:18px; height:18px; fill:#fff}
.aznb-mic.listening{animation:aznbMic 1.1s infinite}
.aznb-mic.speaking{background:radial-gradient(circle at 38% 30%, #7ee0a6, #34b06d 60%, #1f7a48)}
@keyframes aznbMic{0%{box-shadow:0 0 0 0 rgba(43,108,176,.5)}60%{box-shadow:0 0 0 12px rgba(43,108,176,0)}100%{box-shadow:0 0 0 0 rgba(43,108,176,0)}}
.aznb-in{flex:1; background:var(--nb-soft); border:1px solid var(--nb-line); border-radius:11px; padding:10px 13px; font:14px 'Inter',system-ui,sans-serif; color:var(--nb-ink); outline:none}
.aznb-in:focus{border-color:var(--nb-blue); background:#fff}
.aznb-send{border:none; background:var(--nb-blue); color:#fff; border-radius:11px; padding:10px 15px; font-weight:700; cursor:pointer; font-size:14px}
.aznb-send:hover{background:var(--nb-blue-d)}
.aznb-bar{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.aznb-status{font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--nb-mute)}
.aznb-status.active{color:var(--nb-blue-d)}
.aznb-status.speaking{color:#1f7a48}
.aznb-sound{border:none; background:none; cursor:pointer; font-size:15px}

@media (max-width:560px){
  .aznb-panel{right:8px; bottom:8px; width:calc(100vw - 16px)}
  .aznb-launch{right:14px; bottom:14px}
}
@media print{.aznb-launch,.aznb-bubble,.aznb-panel{display:none !important}}