/* ═══════════════════════════════════════════════════════════════════════════
   NTRA AI Assistant — floating enterprise chatbot widget
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --nai-red:   #D72638;
  --nai-red2:  #ef4f2a;
  --nai-ink:   #0b1020;
  --nai-text:  #1f2733;
  --nai-muted: #6b7280;
  --nai-line:  #e6e8ee;
}

#nai-root, #nai-root * { box-sizing: border-box; }
#nai-root {
  position: fixed; right: 22px; bottom: 22px; z-index: 2147483000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Floating button ─────────────────────────────────────────────────────── */
.nai-fab {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--nai-red2) 0%, var(--nai-red) 100%);
  box-shadow: 0 10px 26px rgba(215,38,56,0.40), 0 2px 6px rgba(0,0,0,0.18);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.nai-fab:hover { transform: scale(1.07) translateY(-1px);
  box-shadow: 0 16px 34px rgba(215,38,56,0.5); }
.nai-fab svg { width: 27px; height: 27px; }
.nai-fab::before {                       /* pulsing glow ring */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(215,38,56,0.55);
  animation: naiPulse 2s ease-out infinite;
}
@keyframes naiPulse {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}
.nai-fab .nai-ai-spark {                 /* subtle icon shimmer */
  position: absolute; top: 12px; right: 13px; width: 6px; height: 6px;
  background: #fff; border-radius: 50%; opacity: .9;
  animation: naiSpark 2.4s ease-in-out infinite;
}
@keyframes naiSpark { 0%,100%{opacity:.25;transform:scale(.6)} 50%{opacity:1;transform:scale(1)} }

/* Tooltip */
.nai-tip {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--nai-ink); color: #fff; font-size: .8rem; font-weight: 600;
  padding: 8px 13px; border-radius: 9px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: .2s; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.nai-tip::after {
  content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: var(--nai-ink);
}
#nai-root:hover .nai-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
#nai-root.nai-open .nai-tip { display: none; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.nai-panel {
  position: absolute; right: 0; bottom: 76px;
  width: 384px; max-width: calc(100vw - 32px);
  height: 588px; max-height: calc(100vh - 120px);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 28px 70px rgba(11,16,32,0.30), 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(22px) scale(.97);
  pointer-events: none; transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.4,.64,1);
}
#nai-root.nai-open .nai-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Header */
.nai-head {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  background: linear-gradient(135deg, #11162a 0%, #1c2138 100%);
  color: #fff;
}
.nai-head-logo {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--nai-red2), var(--nai-red));
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  letter-spacing: .02em; font-size: .82rem;
}
.nai-head-info { flex: 1; min-width: 0; }
.nai-head-title { font-weight: 700; font-size: .94rem; line-height: 1.1; }
.nai-head-sub {
  font-size: .72rem; color: #a9b2c7; display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.nai-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: naiOnline 1.8s infinite;
}
@keyframes naiOnline { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)} }
.nai-head-btn {
  width: 30px; height: 30px; border: none; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.10); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.nai-head-btn:hover { background: rgba(255,255,255,0.22); }

/* Messages */
.nai-msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.nai-msgs::-webkit-scrollbar { width: 7px; }
.nai-msgs::-webkit-scrollbar-thumb { background: rgba(120,130,150,.35); border-radius: 99px; }
.nai-msgs::-webkit-scrollbar-thumb:hover { background: rgba(120,130,150,.55); }

.nai-row { display: flex; gap: 9px; max-width: 90%; }
.nai-row.user { align-self: flex-end; flex-direction: row-reverse; }
.nai-av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color:#fff;
}
.nai-row.ai   .nai-av { background: linear-gradient(135deg, var(--nai-red2), var(--nai-red)); }
.nai-row.user .nai-av { background: #11162a; }
.nai-bubble {
  padding: 10px 13px; border-radius: 14px; font-size: .87rem; line-height: 1.55;
  color: var(--nai-text); word-wrap: break-word; overflow-wrap: anywhere;
}
.nai-row.ai .nai-bubble {
  background: #fff; border: 1px solid var(--nai-line);
  border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.nai-row.user .nai-bubble {
  background: linear-gradient(135deg, var(--nai-red2), var(--nai-red));
  color: #fff; border-bottom-right-radius: 5px;
}
.nai-bubble p { margin: 0 0 7px; } .nai-bubble p:last-child { margin: 0; }
.nai-bubble ul, .nai-bubble ol { margin: 6px 0; padding-left: 18px; }
.nai-bubble li { margin: 3px 0; }
.nai-bubble code {
  background: rgba(215,38,56,0.08); color: var(--nai-red);
  padding: 1px 5px; border-radius: 4px; font-size: .82em;
}
.nai-bubble a { color: var(--nai-red); font-weight: 600; }
.nai-row.user .nai-bubble a { color: #fff; text-decoration: underline; }

.nai-copy {
  margin-top: 5px; font-size: .7rem; color: var(--nai-muted);
  background: none; border: none; cursor: pointer; padding: 2px 0;
}
.nai-copy:hover { color: var(--nai-red); }

/* Typing indicator */
.nai-typing { display: flex; gap: 4px; padding: 12px 14px; }
.nai-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--nai-red);
  opacity: .4; animation: naiBlink 1.2s infinite;
}
.nai-typing span:nth-child(2){ animation-delay:.18s } .nai-typing span:nth-child(3){ animation-delay:.36s }
@keyframes naiBlink { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }

/* Starter prompts */
.nai-starters { padding: 4px 16px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.nai-chip {
  font-size: .76rem; padding: 7px 11px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--nai-line); color: var(--nai-text);
  transition: .15s;
}
.nai-chip:hover { border-color: var(--nai-red); color: var(--nai-red); transform: translateY(-1px); }

/* Composer */
.nai-input-wrap { padding: 12px 14px 14px; border-top: 1px solid var(--nai-line); background: rgba(255,255,255,0.7); }
.nai-input-box {
  display: flex; align-items: flex-end; gap: 8px; background: #fff;
  border: 1px solid var(--nai-line); border-radius: 14px; padding: 7px 8px 7px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.nai-input-box:focus-within { border-color: var(--nai-red); box-shadow: 0 0 0 4px rgba(215,38,56,.09); }
.nai-input {
  flex: 1; border: none; outline: none; resize: none; font-family: inherit;
  font-size: .87rem; line-height: 1.45; max-height: 96px; color: var(--nai-text);
  background: transparent;
}
.nai-send {
  width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--nai-red2), var(--nai-red)); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.nai-send:hover:not(:disabled) { transform: scale(1.06); }
.nai-send:disabled { opacity: .45; cursor: not-allowed; }
.nai-send svg { width: 17px; height: 17px; }
.nai-foot { text-align: center; font-size: .68rem; color: var(--nai-muted); margin-top: 7px; }

.nai-retry {
  display: inline-block; margin-top: 6px; font-size: .76rem; font-weight: 600;
  color: var(--nai-red); background: rgba(215,38,56,0.07);
  border: 1px solid rgba(215,38,56,0.2); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}

@media (max-width: 480px) {
  #nai-root { right: 14px; bottom: 14px; }
  .nai-panel { width: calc(100vw - 24px); height: calc(100vh - 96px); bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .nai-fab::before, .nai-fab .nai-ai-spark, .nai-dot, .nai-typing span { animation: none; }
}