#nx-chatbot-root { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: inherit; }

#nx-chat-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
#nx-chat-toggle:hover { background: var(--brand-hover); transform: scale(1.05); }
#nx-chat-toggle svg { width: 26px; height: 26px; }
#nx-chatbot-root.nx-open #nx-chat-toggle { display: none; }

#nx-chat-panel {
  position: fixed; right: 20px; bottom: 20px;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 100px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; overflow: hidden;
}
#nx-chat-panel[hidden] { display: none; }

#nx-chat-header {
  background: var(--feature); color: var(--feature-ink);
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#nx-chat-header-title { font-weight: 600; font-size: 0.95rem; }
#nx-chat-header-actions { display: flex; align-items: center; gap: 12px; }
#nx-chat-founder-link {
  color: var(--feature-ink-soft); font-size: 0.8rem; text-decoration: underline;
  white-space: nowrap;
}
#nx-chat-founder-link:hover { color: var(--feature-ink); }
#nx-chat-close {
  background: transparent; border: none; color: var(--feature-ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px;
}

#nx-chat-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
}
.nx-msg { max-width: 85%; padding: 9px 12px; border-radius: 10px; font-size: 0.88rem; line-height: 1.45; word-wrap: break-word; }
.nx-msg-assistant { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 2px; }
.nx-msg-user { background: var(--brand); color: var(--brand-ink); align-self: flex-end; border-bottom-right-radius: 2px; }
.nx-msg a { color: inherit; text-decoration: underline; }
.nx-msg-assistant a { color: var(--brand); }
.nx-msg-typing { display: flex; gap: 4px; align-items: center; padding: 10px 12px; }
.nx-msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: nx-blink 1.2s infinite ease-in-out; }
.nx-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.nx-msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nx-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

#nx-chat-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; flex-shrink: 0; background: var(--paper); }
.nx-prompt-chip {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 6px 11px; font-size: 0.78rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nx-prompt-chip:hover { border-color: var(--brand); background: var(--surface-tint); }

#nx-chat-form {
  display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
  background: var(--surface); flex-shrink: 0;
}
#nx-chat-input {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 11px; font-size: 0.88rem; font-family: inherit; color: var(--ink); background: var(--surface);
}
#nx-chat-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
#nx-chat-send {
  background: var(--brand); color: var(--brand-ink); border: none; border-radius: var(--radius);
  width: 38px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#nx-chat-send:hover { background: var(--brand-hover); }
#nx-chat-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 820px) {
  /* The mobile bottom nav is visible at this width (~60px incl. safe-area); clear it. */
  #nx-chatbot-root { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #nx-chat-panel { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  /* Narrow phone widths: let the panel use the full available width instead of a fixed 360px. */
  #nx-chat-panel { left: 12px; width: auto; height: calc(100vh - 150px); }
}