/* =====================================================================
   NESAM — chat.css   (branded AI assistant widget)
   Uses the site's theme tokens, so it adapts to light/dark automatically.
   ===================================================================== */

/* ---- Launcher bubble ---- */
.chat-fab{
  position:fixed; z-index:1200;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  inset-inline-end:22px;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));
  box-shadow:0 14px 34px -8px var(--teal), 0 0 0 1px rgba(255,255,255,.12) inset;
  cursor:pointer; transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.04); }
.chat-fab svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chat-fab__dot{ position:absolute; top:5px; inset-inline-end:5px; width:13px; height:13px; border-radius:50%; background:#27c93f; border:2.5px solid var(--teal-deep); }
.chat-fab__icon--close{ display:none; }
.chat-open .chat-fab__icon--open{ display:none; }
.chat-open .chat-fab__icon--close{ display:block; }
.chat-fab__pulse{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(22,166,164,.5); animation:chatPulse 2.6s infinite; }
@keyframes chatPulse{ 0%{box-shadow:0 0 0 0 rgba(22,166,164,.45)} 70%{box-shadow:0 0 0 16px rgba(22,166,164,0)} 100%{box-shadow:0 0 0 0 rgba(22,166,164,0)} }

/* ---- Panel ---- */
.chat-panel{
  position:fixed; z-index:1200;
  bottom:calc(94px + env(safe-area-inset-bottom,0px));
  inset-inline-end:22px;
  width:min(380px,92vw); height:min(560px,76vh);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:20px;
  box-shadow:0 40px 110px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  transform:translateY(16px) scale(.96); opacity:0; pointer-events:none; transform-origin:bottom right;
  transition:transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.chat-open .chat-panel{ transform:none; opacity:1; pointer-events:auto; }

/* header */
.chat-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:linear-gradient(120deg,var(--teal),var(--teal-deep)); color:#eafffe; }
.chat-head__logo{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; }
.chat-head__logo span{ width:24px; height:18px; background:#eafffe; -webkit-mask:url(../img/logo-mask.png) center/contain no-repeat; mask:url(../img/logo-mask.png) center/contain no-repeat; }
.chat-head__meta{ display:flex; flex-direction:column; line-height:1.2; }
.chat-head__meta b{ font-family:var(--font); font-size:.98rem; }
.chat-head__status{ font-size:.72rem; opacity:.85; display:inline-flex; align-items:center; gap:5px; }
.chat-head__status i{ width:7px; height:7px; border-radius:50%; background:#27c93f; box-shadow:0 0 0 0 rgba(39,201,63,.6); animation:chatPulse 2.4s infinite; }
.chat-close{ margin-inline-start:auto; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#eafffe; background:rgba(255,255,255,.12); transition:background var(--t-fast); }
.chat-close:hover{ background:rgba(255,255,255,.24); }
.chat-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

/* body */
.chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background:var(--bg-2); scroll-behavior:smooth; }
.chat-msg{ display:flex; gap:8px; max-width:86%; }
.chat-msg__b{ padding:10px 13px; border-radius:14px; font-size:.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.chat-msg--bot{ align-self:flex-start; }
.chat-msg--bot .chat-msg__b{ background:var(--surface-3); color:var(--text); border-bottom-left-radius:4px; }
.chat-msg--user{ align-self:flex-end; }
.chat-msg--user .chat-msg__b{ background:linear-gradient(120deg,var(--teal),var(--teal-bright)); color:#fff; border-bottom-right-radius:4px; }
html[dir="rtl"] .chat-msg--bot .chat-msg__b{ border-bottom-left-radius:14px; border-bottom-right-radius:4px; }
html[dir="rtl"] .chat-msg--user .chat-msg__b{ border-bottom-right-radius:14px; border-bottom-left-radius:4px; }
.chat-msg__b a{ color:var(--teal-bright); text-decoration:underline; }

/* typing */
.chat-typing{ display:inline-flex; gap:4px; padding:12px 14px; }
.chat-typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:chatDot 1.2s infinite; }
.chat-typing i:nth-child(2){ animation-delay:.18s } .chat-typing i:nth-child(3){ animation-delay:.36s }
@keyframes chatDot{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }

/* quick replies */
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; background:var(--bg-2); }
.chat-quick button{ font-family:var(--font); font-size:.8rem; color:var(--teal-bright); background:var(--chip-bg); border:1px solid var(--border); border-radius:999px; padding:.5em .9em; transition:transform var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.chat-quick button:hover{ transform:translateY(-2px); border-color:var(--teal-bright); }

/* footer / input */
.chat-foot{ display:flex; align-items:flex-end; gap:8px; padding:12px; border-top:1px solid var(--border); background:var(--surface); }
.chat-foot textarea{ flex:1; resize:none; max-height:96px; min-height:42px; padding:.6em .9em; border-radius:12px; border:1px solid var(--border-2); background:var(--bg); color:var(--text); font-size:.92rem; line-height:1.4; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.chat-foot textarea:focus{ outline:none; border-color:var(--teal-bright); box-shadow:0 0 0 3px var(--glow); }
.chat-send{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(120deg,var(--teal),var(--teal-bright)); transition:transform var(--t-fast), opacity var(--t-fast); }
.chat-send:hover{ transform:translateY(-2px); } .chat-send:disabled{ opacity:.5; cursor:default; transform:none; }
.chat-send svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html[dir="rtl"] .chat-send svg{ transform:scaleX(-1); }
.chat-foot__note{ text-align:center; font-size:.64rem; color:var(--faint); padding:0 12px 8px; background:var(--surface); }

/* mobile */
@media (max-width:520px){
  .chat-panel{ inset-inline:10px; width:auto; bottom:calc(86px + env(safe-area-inset-bottom,0px)); height:72vh; }
  .chat-fab{ width:54px; height:54px; inset-inline-end:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion: reduce){
  .chat-fab__pulse,.chat-head__status i,.chat-typing i{ animation:none; }
  .chat-panel{ transition:opacity .2s; }
}