/* 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;
  position: relative !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;
}
/* Full-card gradient overlay — covers from bottom up through the image */
#za-flyout.za-dark .niwa-card::after,
.za-shortcode.za-dark .niwa-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 75% !important;
  background: linear-gradient(
    to top,
    #0a0a0a 0%,
    rgba(10,10,10,0.92) 20%,
    rgba(10,10,10,0.70) 40%,
    rgba(10,10,10,0.40) 60%,
    rgba(10,10,10,0.15) 80%,
    transparent 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}
/* Disable the image-only gradient in dark mode (card gradient handles it) */
#za-flyout.za-dark .niwa-card-img::after,
.za-shortcode.za-dark .niwa-card-img::after {
  display: none !important;
}
#za-flyout.za-dark .niwa-card-img,
.za-shortcode.za-dark .niwa-card-img {
  background: #0a0a0a !important;
}
/* Content & footer transparent — text sits above the gradient */
#za-flyout.za-dark .niwa-card-content,
.za-shortcode.za-dark .niwa-card-content {
  position: relative !important;
  z-index: 2 !important;
}
#za-flyout.za-dark .niwa-card-footer,
.za-shortcode.za-dark .niwa-card-footer {
  background: transparent !important;
  border-top: none !important;
  position: relative !important;
  z-index: 2 !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: rgba(255,255,255,0.7) !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;
  position: relative !important;
  z-index: 2 !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;
}
/* 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;
}