/* Nua AI assistant — Ngare Digital. Scoped, self-contained, premium navy/emerald. */
.nuaai-root {
  --nua-navy: #0b1220;
  --nua-navy-2: #0e1726;
  --nua-line: #1e2c42;
  --nua-text: #e8eef7;
  --nua-muted: #93a1b8;
  --nua-emerald: #2ee6a6;
  --nua-emerald-strong: #17c98b;
  --nua-emerald-ink: #04150f;
  position: fixed;
  z-index: 950;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Launcher */
.nuaai-launcher {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: var(--nua-launcher-bottom, calc(84px + env(safe-area-inset-bottom, 0px)));
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: #0b1220;
  box-shadow: 0 10px 26px rgba(14, 164, 114, 0.4);
  display: grid;
  place-items: center;
  overflow: visible;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Dragged: positioned via inline left/top, so release the bottom/right anchors. */
.nuaai-launcher.nuaai-dragged { bottom: auto !important; right: auto !important; }

/* Ambient energy field (slow conic sweep) + soft breathing glow.
   Both are pseudo-elements of the fixed launcher, so they never affect
   document layout, page width or scrolling. */
.nuaai-launcher::before,
.nuaai-launcher::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.nuaai-launcher::before {
  inset: -6px;
  background: conic-gradient(from 0deg,
    rgba(46, 230, 166, 0) 0deg,
    rgba(46, 230, 166, 0.40) 42deg,
    rgba(46, 230, 166, 0) 120deg,
    rgba(46, 230, 166, 0.16) 220deg,
    rgba(46, 230, 166, 0) 320deg,
    rgba(46, 230, 166, 0) 360deg);
  filter: blur(2px);
  opacity: 0.5;
  animation: nuaai-spin 9s linear infinite;
}
.nuaai-launcher::after {
  inset: -10px;
  background: radial-gradient(circle at 50% 50%, rgba(46, 230, 166, 0.32), rgba(46, 230, 166, 0) 68%);
  opacity: 0.55;
  animation: nuaai-glow 3.2s ease-in-out infinite;
}
.nuaai-launcher svg,
.nuaai-launcher img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  animation: nuaai-breathe 3.2s ease-in-out infinite;
  will-change: transform;
}
.nuaai-launcher:hover { transform: scale(1.05); box-shadow: 0 15px 34px rgba(46, 230, 166, 0.55); }
.nuaai-launcher:hover::before { opacity: 0.7; }
.nuaai-launcher:hover::after { opacity: 0.9; }
.nuaai-launcher:active { transform: scale(0.97); }
.nuaai-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nuaai-launcher .nuaai-launcher-badge {
  position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--nua-emerald); border: 2px solid #0b1220; box-sizing: content-box;
}

/* Idle: breathing / ambient rotation / glow (GPU: transform + opacity only) */
@keyframes nuaai-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes nuaai-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nuaai-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.75; } }

/* One-shot tap/open pulse (~240ms) */
.nuaai-launcher.nuaai-tap { animation: nuaai-tap 0.24s ease; }
@keyframes nuaai-tap {
  0% { transform: scale(1); box-shadow: 0 10px 26px rgba(14, 164, 114, 0.4); }
  45% { transform: scale(1.08); box-shadow: 0 16px 38px rgba(46, 230, 166, 0.7); }
  100% { transform: scale(1); box-shadow: 0 10px 26px rgba(14, 164, 114, 0.4); }
}

/* New reply while the chat is closed: 3 gentle pulses, then back to idle */
.nuaai-launcher.nuaai-notify { animation: nuaai-notify 3.3s ease; }
@keyframes nuaai-notify {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.06); }
  24% { transform: scale(1); }
  40% { transform: scale(1.06); }
  52% { transform: scale(1); }
  68% { transform: scale(1.06); }
  80% { transform: scale(1); }
}

/* Panel */
.nuaai-panel {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--nua-launcher-bottom, 84px) + 64px + env(safe-area-inset-bottom, 0px));
  width: 340px;
  max-width: calc(100vw - 24px);
  height: min(500px, calc(100vh - 172px));
  height: min(500px, calc(100dvh - 172px));
  background: var(--nua-navy);
  color: var(--nua-text);
  border: 1px solid var(--nua-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(3, 8, 18, 0.55);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.nuaai-panel.nuaai-open { display: flex; animation: nuaai-in 0.2s ease; }
@keyframes nuaai-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .nuaai-panel.nuaai-open { animation: none; }
  .nuaai-launcher { transition: none; }
  .nuaai-launcher,
  .nuaai-launcher::before,
  .nuaai-launcher::after,
  .nuaai-launcher img,
  .nuaai-launcher.nuaai-tap,
  .nuaai-launcher.nuaai-notify { animation: none !important; }
  .nuaai-launcher { transform: none; }
  /* Keep only a subtle static glow. */
  .nuaai-launcher::before { opacity: 0.35; }
  .nuaai-launcher::after { opacity: 0.5; }
}

.nuaai-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: linear-gradient(140deg, var(--nua-navy-2), var(--nua-navy));
  border-bottom: 1px solid var(--nua-line);
}
.nuaai-head img { width: 30px; height: 30px; border-radius: 50%; background: #0b1220; }
.nuaai-head .nuaai-title { font-weight: 700; font-size: 0.98rem; line-height: 1.1; }
.nuaai-head .nuaai-sub { color: var(--nua-muted); font-size: 0.76rem; }
.nuaai-head .nuaai-status { display: inline-flex; align-items: center; gap: 5px; }
.nuaai-head .nuaai-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nua-emerald); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18); }
.nuaai-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--nua-line);
  background: transparent; color: var(--nua-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.nuaai-close:hover { color: #fff; border-color: var(--nua-emerald); }
.nuaai-close:focus-visible, .nuaai-send:focus-visible, .nuaai-chip:focus-visible, .nuaai-btn:focus-visible, .nuaai-launcher:focus-visible { outline: 2px solid var(--nua-emerald); outline-offset: 2px; }

.nuaai-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.nuaai-body::-webkit-scrollbar { width: 8px; }
.nuaai-body::-webkit-scrollbar-thumb { background: #24344e; border-radius: 8px; }

.nuaai-msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.nuaai-msg.u { align-self: flex-end; background: var(--nua-emerald); color: var(--nua-emerald-ink); border-bottom-right-radius: 4px; font-weight: 500; }
.nuaai-msg.a { align-self: flex-start; background: var(--nua-navy-2); border: 1px solid var(--nua-line); color: var(--nua-text); border-bottom-left-radius: 4px; }
.nuaai-msg.sys { align-self: center; background: transparent; color: var(--nua-muted); font-size: 0.8rem; text-align: center; max-width: 100%; }
.nuaai-msg a { color: var(--nua-emerald); }

.nuaai-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--nua-navy-2); border: 1px solid var(--nua-line); border-radius: 14px; border-bottom-left-radius: 4px; }
.nuaai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--nua-muted); animation: nuaai-blink 1.2s infinite both; }
.nuaai-typing i:nth-child(2) { animation-delay: 0.15s; }
.nuaai-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nuaai-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.nuaai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; }
.nuaai-chip {
  border: 1px solid var(--nua-line); background: var(--nua-navy-2); color: var(--nua-text);
  border-radius: 999px; padding: 8px 12px; font-size: 0.8rem; cursor: pointer; text-align: left;
}
.nuaai-chip:hover { border-color: var(--nua-emerald); color: var(--nua-emerald); }

.nuaai-form { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; background: var(--nua-navy-2); border: 1px solid var(--nua-line); border-radius: 14px; }
.nuaai-form h4 { margin: 0 0 2px; font-size: 0.9rem; }
.nuaai-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--nua-muted); }
.nuaai-field input, .nuaai-field select, .nuaai-field textarea {
  width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--nua-line);
  background: var(--nua-navy); color: var(--nua-text); padding: 10px 11px; font: inherit; font-size: 0.88rem;
}
.nuaai-field textarea { resize: vertical; min-height: 64px; }
.nuaai-field input:focus, .nuaai-field select:focus, .nuaai-field textarea:focus { outline: none; border-color: var(--nua-emerald); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.15); }
.nuaai-row { display: flex; gap: 9px; }
.nuaai-row > * { flex: 1; }
.nuaai-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.nuaai-btn {
  border: 1px solid var(--nua-line); background: var(--nua-navy); color: var(--nua-text);
  border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.nuaai-btn.primary { background: var(--nua-emerald); color: var(--nua-emerald-ink); border-color: var(--nua-emerald); }
.nuaai-btn.primary:hover { background: var(--nua-emerald-strong); }
.nuaai-btn.ghost { background: transparent; }
.nuaai-btn[disabled] { opacity: 0.55; cursor: default; }

.nuaai-summary { font-size: 0.86rem; }
.nuaai-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.nuaai-summary dt { color: var(--nua-muted); }
.nuaai-summary dd { margin: 0; word-break: break-word; }

.nuaai-compose { border-top: 1px solid var(--nua-line); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; background: var(--nua-navy-2); }
.nuaai-compose textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 42px; border-radius: 12px;
  border: 1px solid var(--nua-line); background: var(--nua-navy); color: var(--nua-text);
  padding: 11px 12px; font: inherit; font-size: 0.9rem; line-height: 1.35;
}
.nuaai-compose textarea:focus { outline: none; border-color: var(--nua-emerald); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.15); }
.nuaai-send {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--nua-emerald); color: var(--nua-emerald-ink); display: grid; place-items: center;
}
.nuaai-send[disabled] { opacity: 0.5; cursor: default; }
.nuaai-send svg { width: 20px; height: 20px; }
.nuaai-foot { padding: 0 12px 8px; color: #6f7d92; font-size: 0.68rem; text-align: center; }

.nuaai-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mobile — full-screen chat shell. Also applies to short landscape phones
   (so landscape isn't a tiny window); normal desktop (>640 wide, taller) is untouched. */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .nuaai-root { z-index: 1600; } /* above the site header (1000) and floats */
  .nuaai-launcher { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* Fill the visual viewport. Height/top are refined by JS (visualViewport)
     so the composer stays above the on-screen keyboard. */
  .nuaai-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .nuaai-panel.nuaai-open { display: flex; }

  /* Compact header, safe areas, 44px touch target */
  .nuaai-head {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    border-radius: 0;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.9);
  }
  .nuaai-head img { width: 34px; height: 34px; }
  .nuaai-head .nuaai-title { font-size: 1.02rem; }
  .nuaai-close { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }

  /* Conversation: the single flexible scroll region */
  .nuaai-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    gap: 10px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nuaai-body::-webkit-scrollbar { width: 0; height: 0; }
  .nuaai-msg { max-width: 88%; padding: 11px 13px; font-size: 0.95rem; }
  .nuaai-form { padding: 12px; }

  .nuaai-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 2px 0 6px;
    gap: 8px;
    scroll-snap-type: x proximity;
  }
  .nuaai-chips::-webkit-scrollbar { height: 0; }
  .nuaai-chips .nuaai-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 13px;
    font-size: 0.79rem;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }

  /* Composer + disclaimer anchored at the bottom, above the safe area */
  .nuaai-compose {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 8px;
  }
  .nuaai-compose textarea { min-height: 44px; padding: 11px 12px; font-size: 16px; max-height: 40vh; }
  .nuaai-send { width: 46px; height: 46px; }
  .nuaai-foot { flex: 0 0 auto; padding: 0 max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left)); }

  /* Don't let the page scroll behind the open assistant. */
  body.nuaai-open .nuaai-launcher { display: none; }
  body.nuaai-open { overflow: hidden; overscroll-behavior: none; }
}