/* ---------------------------------------------------------------------------
   "Chat with us" FAQ widget. Markup: templates/partials/chat_widget.html
   Logic: static/js/chat.js. Uses brand tokens (--nb-*) from base.html.
--------------------------------------------------------------------------- */
.nb-chat { position: fixed; right: 20px; bottom: 20px; z-index: 48; }

/* Launcher pill ---------------------------------------------------------- */
.nb-chat-launcher {
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: 52px; padding: 0 20px;
  border: none; border-radius: 999px;
  background: var(--nb-accent, #c46649); color: var(--nb-accent-text, #fff);
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nb-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.nb-chat-launcher:focus-visible { outline: 2px solid var(--nb-secondary, #344741); outline-offset: 3px; }
.nb-chat-launcher svg { width: 22px; height: 22px; flex: 0 0 auto; }
.nb-chat-launcher .nb-ico-close { display: none; }
.nb-chat-launcher.is-open .nb-ico-open { display: none; }
.nb-chat-launcher.is-open .nb-ico-close { display: inline; }
.nb-chat-launcher.is-open .nb-chat-launcher-label { display: none; }

/* Panel ------------------------------------------------------------------ */
.nb-chat-panel {
  position: fixed; right: 20px; bottom: 86px;
  width: 372px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.nb-chat-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 15px 18px;
  background: var(--nb-secondary, #344741); color: #fff;
}
.nb-chat-heading { display: flex; align-items: center; gap: 0.6rem; }
.nb-chat-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.15); font-size: 1.05rem;
}
.nb-chat-title { font-weight: 700; font-size: 1.02rem; line-height: 1.1; }
.nb-chat-sub { font-size: 0.72rem; opacity: 0.82; margin-top: 1px; }
.nb-chat-x { background: transparent; border: none; color: #fff; cursor: pointer; opacity: 0.85; padding: 4px; line-height: 0; }
.nb-chat-x:hover { opacity: 1; }
.nb-chat-x svg { width: 20px; height: 20px; }

.nb-chat-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--nb-light, #f3f3f3);
  overscroll-behavior: contain;
}
.nb-chat-row { display: flex; }
.nb-chat-row.is-user { justify-content: flex-end; }
.nb-chat-row.is-bot { justify-content: flex-start; }
.nb-chat-bubble {
  max-width: 84%; padding: 10px 13px; border-radius: 15px;
  font-size: 0.9rem; line-height: 1.45; word-wrap: break-word;
}
.nb-chat-row.is-bot .nb-chat-bubble {
  background: #fff; color: var(--nb-text, #121212);
  border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
.nb-chat-row.is-user .nb-chat-bubble {
  background: var(--nb-accent, #c46649); color: var(--nb-accent-text, #fff);
  border-bottom-right-radius: 5px;
}
.nb-chat-link { color: var(--nb-accent, #c46649); font-weight: 600; text-decoration: underline; }
.nb-chat-row.is-user .nb-chat-link { color: #fff; }

.nb-chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.nb-chat-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.3;
  animation: nb-chat-blink 1.2s infinite ease-in-out;
}
.nb-chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.nb-chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes nb-chat-blink { 0%, 70%, 100% { opacity: 0.25; transform: translateY(0); } 35% { opacity: 0.85; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .nb-chat-typing span { animation: none; } }

/* Quick-reply chips ------------------------------------------------------ */
.nb-chat-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px 2px; background: var(--nb-light, #f3f3f3);
}
.nb-chat-chip {
  border: 1px solid color-mix(in srgb, var(--nb-accent, #c46649) 45%, transparent);
  background: #fff; color: var(--nb-accent, #c46649);
  font-size: 0.8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.nb-chat-chip:hover { background: var(--nb-accent, #c46649); color: #fff; }

/* Input row -------------------------------------------------------------- */
.nb-chat-input {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 6px; background: #fff;
  border-top: 1px solid color-mix(in srgb, var(--nb-text, #121212) 8%, transparent);
}
.nb-chat-input input {
  flex: 1; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--nb-text, #121212) 18%, transparent);
  border-radius: 999px; padding: 10px 15px; font-size: 0.9rem; outline: none;
  background: #fff; color: var(--nb-text, #121212);
}
.nb-chat-input input:focus {
  border-color: var(--nb-accent, #c46649);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nb-accent, #c46649) 25%, transparent);
}
.nb-chat-send {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--nb-accent, #c46649); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease;
}
.nb-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.nb-chat-send svg { width: 18px; height: 18px; }
.nb-chat-foot {
  font-size: 0.68rem; text-align: center; padding: 4px 14px 10px; background: #fff;
  color: color-mix(in srgb, var(--nb-text, #121212) 55%, transparent);
}
.nb-chat-foot a { color: inherit; text-decoration: underline; }

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 480px) {
  .nb-chat { right: 12px; bottom: 12px; }
  .nb-chat-panel {
    right: 12px; left: 12px; bottom: 78px; width: auto; max-width: none;
    height: min(72vh, 560px);
  }
  .nb-chat-launcher { height: 48px; padding: 0 16px; font-size: 0.9rem; }
}