#nai-fab{ position:fixed; left:0; top:calc(50% - 28px); z-index:900; width:56px; height:54px; border-radius:0 999px 999px 0; padding-inline-start:5px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; cursor:pointer;
  box-shadow:3px 5px 16px rgba(0,0,0,.22); font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:transform .15s var(--ease); }
#nai-fab:hover{ transform:translateX(3px); }
@media(max-width:600px){ #nai-fab{ width:50px; height:48px; top:calc(50% - 24px); } }
#nai-panel{ position:fixed; bottom:20px; right:20px; z-index:901; width:360px; max-width:calc(100vw - 40px); height:520px; max-height:calc(100vh - 130px);
  background:var(--surface); border:1px solid var(--border-light); border-radius:1.1rem; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; animation:naiPop .25s var(--ease); }
@keyframes naiPop{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.nai-head{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; padding:.9rem 1.1rem; display:flex; align-items:center; justify-content:space-between; }
.nai-head-t{ font-weight:800; font-size:.95rem; display:flex; align-items:center; gap:.5rem; }
.nai-dot{ width:8px; height:8px; border-radius:50%; background:#3ee07a; box-shadow:0 0 0 3px rgba(62,224,122,.3); }
#nai-close{ background:none; border:none; color:#fff; cursor:pointer; font-size:.9rem; opacity:.85; }
#nai-msgs{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--surface-low); }
.nai-msg{ max-width:85%; padding:.65rem .85rem; border-radius:1rem; font-size:.88rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.nai-msg.bot{ background:var(--surface); border:1px solid var(--border-light); color:var(--text); align-self:flex-start; border-bottom-inline-start-radius:.3rem; }
.nai-msg.me{ background:var(--primary); color:#fff; align-self:flex-end; border-bottom-inline-end-radius:.3rem; }
.nai-msg.typing{ color:var(--text-muted); font-style:italic; }
.nai-msg a{ color:var(--primary); font-weight:700; text-decoration:underline; word-break:break-all; }
.nai-msg.me a{ color:#fff; }
#nai-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--border-light); background:var(--surface); }
#nai-input{ flex:1; border:1px solid transparent; background:var(--surface-low); border-radius:999px; padding:.6rem 1rem; font-size:.9rem; outline:none; color:var(--text); font-family:inherit; }
#nai-input:focus{ background:var(--surface); border-color:var(--primary); }
#nai-send{ width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; font-size:1rem; }
#nai-send:disabled{ opacity:.5; cursor:default; }
#nai-panel[hidden]{ display:none; }   /* the hidden attribute must win over display:flex */
#nai-teaser{ position:fixed; left:64px; top:calc(50% - 54px); z-index:898; max-width:220px;
  background:var(--surface); color:var(--text); border:1px solid var(--border-light); box-shadow:var(--shadow-lg);
  border-radius:1rem; padding:.7rem 1.9rem .7rem .9rem; font-size:.85rem; line-height:1.5; cursor:pointer; animation:naiPop .3s var(--ease); }
#nai-teaser[hidden]{ display:none; }
#nai-teaser-x{ position:absolute; top:.35rem; inset-inline-end:.45rem; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.8rem; line-height:1; padding:.1rem; }
@media(max-width:600px){ #nai-teaser{ max-width:160px; left:56px; top:calc(50% - 50px); } }
#nai-esc-bar{ padding:.45rem .7rem 0; text-align:center; background:var(--surface); }
#nai-escalate{ background:none; border:1px solid var(--border-light); color:var(--text-mid); font-size:.78rem; font-weight:600; padding:.35rem .85rem; border-radius:999px; cursor:pointer; transition:.15s; }
#nai-escalate:hover{ border-color:var(--primary); color:var(--primary); }
/* Mobile: full-screen chat using dynamic viewport height so the keyboard never hides the input */
@media(max-width:600px){
  #nai-panel{ inset:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; border-radius:0; }
  #nai-form{ padding-bottom:max(.7rem, env(safe-area-inset-bottom)); }
}