/* Niwa AI — Dark Mode */

/* ======================= Dark Mode ======================= */
#za-flyout.za-dark {
  background: var(--za-dark-glass-shell) !important;
  border: 1px solid var(--za-dark-glass-soft) !important;
  box-shadow: var(--za-dark-glass-shadow) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}

/* Header */
#za-flyout.za-dark .za-head {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--za-dark-glass-text) !important;
  border-bottom: 1px solid var(--za-dark-glass-soft) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-head .za-head-actions button {
  background: var(--za-dark-glass-panel) !important;
  border: 1px solid var(--za-dark-glass-border) !important;
  color: var(--za-dark-glass-text) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-head .za-head-actions button:hover {
  background: var(--za-dark-glass-soft-strong) !important;
}
#za-flyout.za-dark .za-title {
  color: var(--za-dark-glass-text) !important;
}

/* Window */
#za-flyout.za-dark .za-window {
  background: transparent !important;
  color: var(--za-dark-glass-text) !important;
}

/* Agent-side bubble: smoked dark glass + near-white text */
#za-flyout.za-dark .za-bot,
#za-flyout.za-dark .za-typing .za-bubble {
  background: var(--za-dark-glass-panel) !important;
  color: var(--za-dark-glass-text) !important;
  border-color: var(--za-dark-glass-border) !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  transition-property: width, opacity, transform, padding, background-color, border-color, color, box-shadow !important;
  transition-duration: .2s !important;
  transition-timing-function: cubic-bezier(0, 0, .2, 1) !important;
}
#za-flyout.za-dark .za-bot a,
#za-flyout.za-dark .za-bot strong,
#za-flyout.za-dark .za-bot b,
#za-flyout.za-dark .za-typing .za-bubble a,
#za-flyout.za-dark .za-typing .za-bubble strong,
#za-flyout.za-dark .za-typing .za-bubble b {
  color: var(--za-dark-glass-text) !important;
}
#za-flyout.za-dark .za-user {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--za-dark-glass-text) !important;
  border-color: var(--za-dark-glass-soft) !important;
}

/* Input */
#za-flyout.za-dark .za-input {
  border-top-color: var(--za-dark-glass-soft) !important;
}
#za-flyout.za-dark .za-input input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--za-dark-glass-soft) !important;
  color: var(--za-dark-glass-text) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-input input::placeholder {
  color: var(--za-dark-glass-muted) !important;
}
#za-flyout.za-dark .za-input input:focus {
  border-color: var(--za-dark-glass-border) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
}

/* Send button */
#za-flyout.za-dark .za-send {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-send::before {
  border-color: var(--za-dark-glass-text) !important;
}
#za-flyout.za-dark .za-send:hover {
  background: var(--za-dark-glass-soft-strong) !important;
}

/* Product cards â€" dark mode */
#za-flyout.za-dark .niwa-card,
.za-shortcode.za-dark .niwa-card {
  background: #0a0a0a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
#za-flyout.za-dark .niwa-card:hover,
.za-shortcode.za-dark .niwa-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}
#za-flyout.za-dark .niwa-card-img,
.za-shortcode.za-dark .niwa-card-img {
  background: #0a0a0a !important;
}
/* Dark hazy bottom buffer gradient */
#za-flyout.za-dark .niwa-card-img::after,
.za-shortcode.za-dark .niwa-card-img::after {
  background: linear-gradient(
    to top,
    #0a0a0a 0px,
    #0a0a0a 14px,
    rgba(10,10,10,0.15) 40%,
    rgba(10,10,10,0.06) 65%,
    rgba(10,10,10,0.02) 85%,
    transparent 100%
  ) !important;
}
#za-flyout.za-dark .niwa-card-title,
.za-shortcode.za-dark .niwa-card-title {
  color: #fff !important;
}
#za-flyout.za-dark .niwa-card-desc,
.za-shortcode.za-dark .niwa-card-desc {
  color: #888 !important;
}
#za-flyout.za-dark .niwa-price-current,
.za-shortcode.za-dark .niwa-price-current {
  color: #fff !important;
}
#za-flyout.za-dark .niwa-price-old,
.za-shortcode.za-dark .niwa-price-old {
  color: rgba(255,255,255,0.5) !important;
}
#za-flyout.za-dark .niwa-badge,
.za-shortcode.za-dark .niwa-badge {
  background: #ff3b30 !important;
}
/* Dark footer */
#za-flyout.za-dark .niwa-card-footer,
.za-shortcode.za-dark .niwa-card-footer {
  background: #161616 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#za-flyout.za-dark .niwa-card-rating,
.za-shortcode.za-dark .niwa-card-rating {
  color: #71717a !important;
}
#za-flyout.za-dark .niwa-card-rating .niwa-stars,
.za-shortcode.za-dark .niwa-card-rating .niwa-stars {
  color: #ffb400 !important;
}
#za-flyout.za-dark .niwa-card-rating .niwa-rating-count,
.za-shortcode.za-dark .niwa-card-rating .niwa-rating-count {
  color: #71717a !important;
}
#za-flyout.za-dark .niwa-card-delivery,
.za-shortcode.za-dark .niwa-card-delivery {
  color: #888 !important;
}
#za-flyout.za-dark .niwa-card-delivery strong,
.za-shortcode.za-dark .niwa-card-delivery strong {
  color: #fff !important;
}
/* Pill button â€" inverted in dark mode */
#za-flyout.za-dark .niwa-btn-pill,
.za-shortcode.za-dark .niwa-btn-pill {
  background: #fff !important;
  color: #000 !important;
}
#za-flyout.za-dark .niwa-btn-pill:hover,
.za-shortcode.za-dark .niwa-btn-pill:hover {
  background: #e4e4e7 !important;
}
#za-flyout.za-dark .niwa-btn-pill:disabled,
.za-shortcode.za-dark .niwa-btn-pill:disabled {
  background: #52525b !important;
  color: #a1a1aa !important;
}

/* Suggestion chips */
#za-flyout.za-dark .za-chip {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  color: var(--za-dark-glass-text) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-chip:hover {
  background: var(--za-dark-glass-soft-strong) !important;
}

/* Email form */
#za-flyout.za-dark .za-email-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--za-dark-glass-soft) !important;
  color: var(--za-dark-glass-text) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-email-submit {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  color: var(--za-dark-glass-text) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.za-dark .za-typing-dots span {
  background: var(--za-dark-glass-muted) !important;
}

/* Copy code button */
#za-flyout.za-dark .za-copy-code-btn {
  background: #d2ef9a !important;
  color: #020c0a !important;
}

/* Scrollbar */
#za-flyout.za-dark .za-window::-webkit-scrollbar {
  width: 6px;
}
#za-flyout.za-dark .za-window::-webkit-scrollbar-track {
  background: transparent;
}
#za-flyout.za-dark .za-window::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

/* Launcher dark mode */
#za-launcher.za-dark .za-badge {
  background: var(--za-dark-glass-shell) !important;
  border-color: var(--za-dark-glass-soft) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-launcher.za-dark .za-label {
  background: var(--za-dark-glass-panel) !important;
  border: 1px solid var(--za-dark-glass-border) !important;
  color: var(--za-dark-glass-text) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}

/* Centerstage pill dark mode */
#za-launcher.za-dark.za-centerstage .za-pill {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-flyout.active ~ #za-launcher.za-dark.za-centerstage .za-pill,
#za-launcher.za-dark.za-centerstage .za-pill.chat-open,
#za-launcher.za-dark.za-centerstage.za-pill.chat-open {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
#za-launcher.za-dark.za-centerstage .za-pill:hover {
  background: var(--za-dark-glass-soft-strong) !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4),
    0 12px 48px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
#za-flyout.active ~ #za-launcher.za-dark.za-centerstage .za-pill:hover,
#za-launcher.za-dark.za-centerstage .za-pill.chat-open:hover {
  background: var(--za-dark-glass-soft-strong) !important;
}
#za-launcher.za-dark.za-centerstage .za-pill-text {
  color: var(--za-dark-glass-text) !important;
}
#za-launcher.za-dark.za-centerstage .za-pill-arrow {
  background: rgba(255, 255, 255, 0.08) !important;
}
#za-launcher.za-dark.za-centerstage .za-pill:hover .za-pill-arrow {
  background: rgba(255, 255, 255, 0.14) !important;
}
#za-launcher.za-dark.za-centerstage .za-pill-arrow::before {
  border-color: var(--za-dark-glass-text) !important;
}

/* Attention capture bubble dark mode */
.za-dark ~ .za-attention-bubble,
.za-attention-bubble.za-dark {
  background: var(--za-dark-glass-panel) !important;
  border-color: var(--za-dark-glass-border) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--za-dark-glass-blur)) !important;
}
.za-dark ~ .za-attention-bubble .za-bubble-title,
.za-attention-bubble.za-dark .za-bubble-title {
  color: var(--za-dark-glass-text) !important;
}
.za-dark ~ .za-attention-bubble .za-bubble-text,
.za-attention-bubble.za-dark .za-bubble-text {
  color: var(--za-dark-glass-muted) !important;
}