/* modou dsp — floating "Ask MODU AI" widget (site-wide)
   Checkbox-driven, same zero-JS pattern as the mobile nav — no script
   needed to open/close it. The iframe loads /support-chat/ lazily, only
   once the panel is actually opened, so it costs nothing on pages where
   nobody clicks it. */

.modou-chat-toggle { display: none; }

.chat-fab {
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-mint); color: var(--bg-obsidian);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent-mint) 60%, transparent);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.chat-fab svg { width: 24px; height: 24px; }
.chat-fab .icon-close { display: none; }
.modou-chat-toggle:checked ~ .chat-fab .icon-chat { display: none; }
.modou-chat-toggle:checked ~ .chat-fab .icon-close { display: block; }

.chat-panel {
  position: fixed; right: var(--space-md); bottom: calc(56px + var(--space-md) + 0.75rem); z-index: 998;
  width: min(380px, calc(100vw - 2 * var(--space-md)));
  height: min(560px, calc(100vh - 140px));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg-charcoal) 96%, transparent);
  border: 1px solid var(--border-overlay);
  backdrop-filter: blur(20px);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.modou-chat-toggle:checked ~ .chat-panel {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}

.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--space-md); border-bottom: 1px solid var(--border-overlay);
}
.chat-panel-header strong { font-size: var(--text-sm); }
.chat-panel-header .chat-close { color: var(--text-faint); cursor: pointer; }
.chat-panel-header .chat-close:hover { color: var(--text-primary); }

.chat-panel iframe { flex: 1; width: 100%; border: 0; background: var(--bg-obsidian); }

.chat-panel-signedout {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-lg); gap: var(--space-sm);
}
.chat-panel-signedout p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

@media (max-width: 520px) {
  .chat-panel {
    right: var(--space-sm); left: var(--space-sm); bottom: calc(56px + var(--space-sm) + 0.75rem);
    width: auto; height: min(70vh, 560px);
  }
  .chat-fab { right: var(--space-sm); bottom: var(--space-sm); }
}