/* ============================================================
   Melo Chat Widget — Styles
   MyTunes Platform · Brand by BGE
   Font: Space Grotesk (loaded from index.html)
   ============================================================ */

/* ── Google Font import (standalone safety net) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

/* ── CSS Custom Properties (Brand Tokens) ── */
:root {
  --melo-violet:      #2D1B69;
  --melo-violet-dark: #1a0f3d;
  --melo-amber:       var(--accent-color, #F97316); /* inherits user's accent colour */
  --melo-cyan:        #06B6D4;
  --melo-white:       #F8FAFC;
  --melo-near-black:  #0F0A1E;
  --melo-purple-border: #C4B5FD;
  --melo-shadow:      rgba(45, 27, 105, 0.35);
  --melo-font:        'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --melo-radius:      16px;
  --melo-radius-sm:   10px;
  --melo-z:           9999;
}

/* ============================================================
   Container
   ============================================================ */
#melo-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--melo-z);
  font-family: var(--melo-font);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* Isolate stacking context */
  isolation: isolate;
}

/* ============================================================
   Collapsed Bubble / Avatar
   ============================================================ */
#melo-bubble {
  width: 64px;
  height: 72px;
  border-radius: 16px;
  background: var(--melo-violet);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 20px var(--melo-shadow), 0 0 0 0 rgba(45,27,105,0.4);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  border: 2px solid rgba(196, 181, 253, 0.25);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#melo-bubble:hover {
  box-shadow: 0 6px 28px var(--melo-shadow), 0 0 0 4px rgba(45,27,105,0.2);
  transform: scale(1.05);
}

#melo-bubble:active {
  transform: scale(0.96);
}

/* Pulse animation — subtle alive feel */
#melo-bubble.melo-pulse {
  animation: melo-pulse-anim 3s ease-in-out infinite;
}

@keyframes melo-pulse-anim {
  0%, 100% { transform: scale(1.0); box-shadow: 0 4px 20px var(--melo-shadow), 0 0 0 0 rgba(45,27,105,0.3); }
  50%       { transform: scale(1.05); box-shadow: 0 6px 28px var(--melo-shadow), 0 0 0 6px rgba(45,27,105,0.1); }
}

/* Avatar icon wrapper — Melo V2 character */
#melo-bubble-icon {
  width: 48px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

#melo-bubble-icon img {
  width: 48px !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(6,182,212,0.5));
}

/* Label under icon */
#melo-bubble-label {
  font-size: 10px;
  font-weight: 500;
  color: rgba(248, 250, 252, 0.9);
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: var(--melo-font);
}

/* Audio indicator dot on bubble (shows when audio playing) */
#melo-bubble .melo-audio-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--melo-cyan);
  border: 2px solid var(--melo-violet);
  animation: melo-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes melo-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

/* ============================================================
   Chat Window
   ============================================================ */
#melo-chat-window {
  width: 380px;
  height: 500px;
  border-radius: var(--melo-radius);
  background: #1A1035; /* BGE fix: dark-mode surface — was #F8FAFC (white) */
  box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(196,181,253,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Entry animation */
  animation: melo-window-enter 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom right;
}

@keyframes melo-window-enter {
  from { opacity: 0; transform: scale(0.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#melo-chat-window.melo-window-closing {
  animation: melo-window-exit 0.2s ease-in forwards;
}

@keyframes melo-window-exit {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(12px); }
}

/* Chat window hidden */
#melo-chat-window[style*="display: none"],
#melo-chat-window.melo-hidden {
  display: none !important;
}

/* ── Header ── */
#melo-header {
  background: linear-gradient(135deg, #F97316 0%, #EA6A0A 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-radius: var(--melo-radius) var(--melo-radius) 0 0;
}

#melo-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#melo-header-avatar {
  width: 36px;
  height: 48px;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

#melo-header-avatar img {
  width: 36px !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(6,182,212,0.4));
}

#melo-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#melo-header-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: var(--melo-font);
  line-height: 1.2;
}

#melo-header-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--melo-font);
  line-height: 1.2;
}

#melo-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mute toggle button in header */
#melo-mute-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: var(--melo-font);
}

#melo-mute-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Close button */
#melo-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
  font-family: var(--melo-font);
}

#melo-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ── Message area ── */
#melo-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1A1035; /* BGE fix: dark-mode surface — was #F8FAFC (white) */
  scroll-behavior: smooth;
  /* Fix #5: Prevent V1 message area from blocking clicks to V2 Melody image.
     The chat window is inside #melo-container (fixed, z-9999). When V1 is
     hidden or collapsed, #melo-messages still occupies layout space and
     intercepts pointer events destined for V2 (z-9998). Setting pointer-events:
     none here prevents the intercept; melo-widget.js restores auto on open. */
  pointer-events: none;
}

/* Scrollbar styling */
#melo-messages::-webkit-scrollbar {
  width: 4px;
}
#melo-messages::-webkit-scrollbar-track {
  background: transparent;
}
#melo-messages::-webkit-scrollbar-thumb {
  background: var(--melo-purple-border);
  border-radius: 4px;
}

/* ── Message bubbles ── */
.melo-msg {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.melo-msg-melo {
  align-self: flex-start;
}

.melo-msg-user {
  align-self: flex-end;
}

.melo-bubble-inner {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--melo-font);
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Melo's message bubble */
.melo-msg-melo .melo-bubble-inner {
  background: #231548; /* BGE fix: dark surface — was #fff */
  color: var(--melo-white); /* BGE fix: white text on dark */
  border: 1.5px solid rgba(196, 181, 253, 0.30);
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 1px 4px rgba(45,27,105,0.15);
}

/* User's message bubble */
.melo-msg-user .melo-bubble-inner {
  background: var(--melo-violet);
  color: var(--melo-white);
  border-radius: 14px 4px 14px 14px;
  box-shadow: 0 1px 4px rgba(45,27,105,0.2);
}

/* Quick-action buttons inside melo messages */
.melo-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.melo-quick-btn {
  background: transparent;
  border: 1.5px solid var(--melo-violet);
  color: var(--melo-violet);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--melo-font);
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.melo-quick-btn:hover {
  background: var(--melo-violet);
  color: #fff;
}

/* ── Typing indicator ── */
.melo-typing-indicator {
  align-self: flex-start;
  max-width: 72px;
}

.melo-typing-indicator .melo-bubble-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  min-height: 42px;
}

.melo-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--melo-purple-border);
  animation: melo-typing-bounce 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.melo-typing-dot:nth-child(1) { animation-delay: 0s; }
.melo-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.melo-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes melo-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); background: var(--melo-purple-border); }
  40%           { transform: translateY(-6px); background: var(--melo-violet); }
}

/* Thinking state — cyan accent */
.melo-thinking-indicator .melo-typing-dot {
  background: rgba(6, 182, 212, 0.5);
}
.melo-thinking-indicator .melo-typing-dot:nth-child(2) {
  background: var(--melo-cyan);
}

/* ── Input bar ── */
#melo-input-bar {
  padding: 10px 12px;
  background: #1A1035; /* BGE fix: dark-mode surface — was #fff */
  border-top: 1px solid rgba(196, 181, 253, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 0 0 var(--melo-radius) var(--melo-radius);
}

#melo-input {
  flex: 1;
  border: 1.5px solid rgba(196, 181, 253, 0.25);
  border-radius: 22px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: var(--melo-font);
  background: #231548; /* BGE fix: dark surface — was #F8FAFC */
  color: var(--melo-white); /* BGE fix: white text */
  outline: none;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.4;
  max-height: 100px;
  overflow-y: auto;
}

#melo-input::placeholder {
  color: rgba(248, 250, 252, 0.40); /* BGE fix: brand muted white — was #94a3b8 (off-brand gray) */
  font-style: italic;
  font-family: var(--melo-font);
}

#melo-input:focus {
  border-color: var(--melo-violet);
  box-shadow: 0 0 0 3px rgba(45, 27, 105, 0.1);
}

#melo-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--melo-amber);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

#melo-send-btn:hover {
  background: #ea6c0e;
  transform: scale(1.06);
  box-shadow: 0 3px 12px rgba(249, 115, 22, 0.45);
}

#melo-send-btn:active {
  transform: scale(0.95);
}

#melo-send-btn:disabled {
  background: rgba(196, 181, 253, 0.15); /* BGE fix: brand muted — was #cbd5e1 (off-brand Tailwind gray) */
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Struggling User Bubble
   ============================================================ */
#melo-help-bubble {
  width: 270px;
  background: #1A1035; /* BGE fix: dark surface — was #fff */
  border-radius: var(--melo-radius-sm);
  border: 1.5px solid rgba(196, 181, 253, 0.30);
  box-shadow: 0 6px 24px rgba(45,27,105,0.35), 0 2px 8px rgba(0,0,0,0.25);
  padding: 14px 16px;
  font-family: var(--melo-font);
  /* Entry animation */
  animation: melo-bubble-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom right;
  /* Exit */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes melo-bubble-enter {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#melo-help-bubble.melo-fading {
  opacity: 0;
  transform: scale(0.9) translateY(8px);
}

#melo-help-bubble-text {
  font-size: 14px;
  color: var(--melo-white); /* BGE fix: white text on dark bubble — was #1e1340 */
  line-height: 1.5;
  margin-bottom: 12px;
  font-weight: 400;
}

#melo-help-bubble-actions {
  display: flex;
  gap: 8px;
}

.melo-help-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--melo-font);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.melo-help-btn:hover {
  opacity: 0.88;
  transform: scale(1.02);
}

.melo-help-btn:active {
  transform: scale(0.97);
}

.melo-help-btn-yes {
  background: var(--melo-amber);
  color: #fff;
  box-shadow: 0 2px 6px rgba(249,115,22,0.3);
}

.melo-help-btn-no {
  background: rgba(196, 181, 253, 0.12); /* BGE fix: brand muted purple — was #e2e8f0 (off-brand gray) */
  color: rgba(248, 250, 252, 0.65); /* BGE fix: brand muted white — was #475569 */
  border: 1px solid rgba(196, 181, 253, 0.20);
}

/* ============================================================
   Notification badge on closed bubble
   ============================================================ */
#melo-bubble .melo-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  background: var(--melo-amber);
  border-radius: 50%;
  border: 2px solid var(--melo-near-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Tour step progress dots
   ============================================================ */
.melo-tour-dots {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  justify-content: center;
}

.melo-tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--melo-purple-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.melo-tour-dot.active {
  background: var(--melo-violet);
  transform: scale(1.2);
}

.melo-tour-dot.done {
  background: var(--melo-amber);
}

/* ============================================================
   Responsive — narrow screens
   ============================================================ */
@media (max-width: 440px) {
  #melo-chat-window {
    width: calc(100vw - 24px);
    height: 70vh;
    bottom: 80px;
    right: 12px;
  }

  #melo-container {
    right: 12px;
    bottom: 16px;
  }
}

/* ============================================================
   Thinking state — cyan tinge on header
   ============================================================ */
#melo-header.melo-thinking {
  background: linear-gradient(135deg, #F97316 40%, rgba(6,182,212,0.4) 100%);
  transition: background 0.5s ease;
}

/* ============================================================
   Streaming text cursor
   ============================================================ */
.melo-streaming-cursor::after {
  content: '▌';
  display: inline;
  color: var(--melo-cyan);
  animation: melo-cursor-blink 0.7s step-end infinite;
}

@keyframes melo-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Melody waiting pulse — shows before first user gesture unlocks audio ── */
.melody-waiting-pulse {
  animation: melodyWaitPulse 2s ease-in-out infinite;
}
@keyframes melodyWaitPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
  50%  { box-shadow: 0 0 0 12px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}