/* shared.css — Chat widget + Music player styles */
/* Extracted from index.html for use by both dashboard and landing page */

/* ═══ BUKSBOT FAB ═══ */
.buksbot-float {
  position: fixed; bottom: 18px; right: 18px; z-index: 99;
  width: 120px; height: 120px; border-radius: 50%;
  background: transparent; cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(14,26,43,0.3));
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.buksbot-float:hover { transform: scale(1.08); filter: drop-shadow(0 6px 16px rgba(14,26,43,0.45)); }
.buksbot-float img { width: 110px; height: 110px; object-fit: contain; }
.float-tooltip {
  position: absolute; bottom: 130px; right: 0;
  background: white; border-radius: 12px; padding: 0.75rem 1rem;
  box-shadow: 0 4px 16px rgba(14,26,43,0.1);
  font-size: 0.82rem; color: var(--graphite);
  white-space: nowrap; opacity: 0; transform: translateY(8px);
  transition: all 0.3s; pointer-events: none;
  border: 1px solid rgba(199,107,75,0.12);
}
.buksbot-float:hover .float-tooltip { opacity: 1; transform: translateY(0); }
.buksbot-float.chat-open .float-tooltip { display: none; }

/* ═══ CHAT WIDGET ═══ */
.chat-widget {
  position: fixed; bottom: 96px; right: 24px; z-index: 100;
  width: 360px; max-height: 480px;
  background: white; border-radius: 20px;
  box-shadow: 0 12px 48px rgba(14,26,43,0.25), 0 0 0 1px rgba(199,107,75,0.1);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-widget.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid rgba(199,107,75,0.1);
  background: var(--navy); border-radius: 20px 20px 0 0; color: white;
}
.chat-header-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(247,245,239,0.92); padding: 2px; flex-shrink: 0;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: contain; }
.chat-header-info { flex: 1; }
.chat-header-name { font-weight: 700; font-size: 0.88rem; }
.chat-header-status { font-size: 0.65rem; color: var(--mint); }
.chat-close {
  background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer;
  font-size: 1.2rem; padding: 4px 8px; border-radius: 8px; transition: all 0.2s;
}
.chat-close:hover { color: white; background: rgba(255,255,255,0.1); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
  max-height: 320px; min-height: 200px;
  scrollbar-width: thin; scrollbar-color: rgba(199,107,75,0.2) transparent;
}
.chat-msg {
  max-width: 85%; padding: 0.6rem 0.85rem;
  border-radius: 14px; font-size: 0.84rem; line-height: 1.5;
  animation: chatPop 0.25s ease;
}
@keyframes chatPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.bot {
  align-self: flex-start; background: rgba(199,107,75,0.08); color: var(--graphite);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  align-self: flex-end; background: var(--navy); color: white;
  border-bottom-right-radius: 4px;
}
.chat-msg.bot strong { color: var(--teal); }
.chat-typing {
  align-self: flex-start; padding: 0.6rem 0.85rem;
  background: rgba(199,107,75,0.08); border-radius: 14px;
  font-size: 0.8rem; color: var(--slate-light); display: none;
}
.chat-typing.show { display: block; }
.chat-typing span { display: inline-block; animation: typeDot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typeDot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.chat-input-row {
  display: flex; gap: 0.5rem; padding: 0.75rem 1rem;
  border-top: 1px solid rgba(199,107,75,0.08); background: rgba(199,107,75,0.02);
  border-radius: 0 0 20px 20px;
}
.chat-input {
  flex: 1; border: 1px solid rgba(199,107,75,0.15); border-radius: 10px;
  padding: 0.55rem 0.8rem; font-size: 0.84rem; font-family: inherit;
  outline: none; transition: border-color 0.2s; background: white; color: var(--graphite);
}
.chat-input::placeholder { color: var(--slate-light); }
.chat-input:focus { border-color: var(--teal); }
.chat-send {
  background: var(--teal); color: white; border: none; border-radius: 10px;
  padding: 0 0.85rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s;
}
.chat-send:hover { background: #A85A3D; }
@media (max-width: 768px) {
  .chat-widget { width: calc(100vw - 32px); right: 16px; bottom: 90px; max-height: 60vh; }
}

/* ═══ MUSIC ═══ */
/* Corner cluster: toggle + DJ bubble + compact player */
.music-corner {
  position: fixed; bottom: 16px; left: 16px; z-index: 201;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.music-btn-row, .music-player-popup.open { pointer-events: auto; }
/* Compact player — pops up above the button row */
.music-player-popup {
  background: var(--navy);
  border: 1.5px solid rgba(199,107,75,0.18);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 6px 24px rgba(14,26,43,0.45);
  opacity: 0; transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 300px;
}
.music-player-popup.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: all;
}
.music-player-popup iframe {
  border-radius: 10px; width: 100%; height: 166px; border: none; display: block;
}
.music-player-popup .music-stop-row {
  display: flex; justify-content: flex-end; padding: 4px 2px 0;
}
.music-stop {
  background: none; border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer; font-size: 0.65rem; padding: 2px 6px; transition: color 0.2s;
  font-family: inherit;
}
.music-stop:hover { color: var(--coral); }
/* Button row: toggle + DJ bubble */
.music-btn-row {
  display: flex; align-items: center; gap: 10px;
}
.music-bar-toggle {
  background: var(--navy); color: white;
  border: 2px solid rgba(199,107,75,0.25);
  border-radius: 50px; padding: 8px 16px;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: all 0.3s; letter-spacing: 0.3px;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(14,26,43,0.3);
  flex-shrink: 0;
}
.music-bar-toggle:hover { background: var(--navy-light); border-color: var(--teal); transform: scale(1.04); }
.music-bar-toggle .eq-icon { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.music-bar-toggle .eq-bar { width: 3px; background: var(--teal); border-radius: 1px; }
.music-bar-toggle.playing .eq-bar { animation: eqBounce 0.6s ease-in-out infinite alternate; }
.music-bar-toggle.playing .eq-bar:nth-child(1) { animation-delay: 0s; }
.music-bar-toggle.playing .eq-bar:nth-child(2) { animation-delay: 0.15s; }
.music-bar-toggle.playing .eq-bar:nth-child(3) { animation-delay: 0.3s; }
.music-bar-toggle.playing .eq-bar:nth-child(4) { animation-delay: 0.1s; }
@keyframes eqBounce {
  0% { height: 4px; } 100% { height: 14px; }
}
/* DJ bubble — always visible next to toggle */
.music-dj-bubble {
  display: flex; align-items: center; gap: 8px;
  background: var(--navy);
  border: 1.5px solid rgba(199,107,75,0.15);
  border-radius: 16px; padding: 6px 14px 6px 6px;
  box-shadow: 0 4px 16px rgba(14,26,43,0.3);
  transition: opacity 0.4s ease;
}
.music-dj-bubble img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: rgba(247,245,239,0.92); padding: 2px; }
.music-dj-speech {
  font-size: 0.7rem; color: rgba(255,255,255,0.7);
  line-height: 1.35; max-width: 200px;
}
@media (max-width: 768px) {
  .music-dj-bubble { display: none; }
  .music-corner { left: 10px; right: 10px; bottom: 10px; }
  .music-player-popup { width: auto; max-width: 100%; }
  .music-player-popup iframe { height: 152px; }
  .music-bar-toggle { padding: 7px 14px; font-size: 0.75rem; }
  .music-btn-row { width: 100%; }
}

/* ═══ FOCUS-VISIBLE ═══ */
.music-bar-toggle:focus-visible, .chat-send:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ═══ DASHBOARD-SCOPED OVERRIDES ═══ */
body.view-dashboard .buksbot-float { border: 1.5px solid rgba(199,107,75,0.15); }
body.view-dashboard .float-tooltip { background: rgba(255,255,255,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.1); color: var(--dash-text, var(--slate-light)); }
body.view-dashboard .chat-widget { background: #F7F5EF; box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(199,107,75,0.08); }
body.view-dashboard .chat-header-status { color: var(--teal); }
body.view-dashboard .chat-msg.bot { color: #1F2A36; }
body.view-dashboard .chat-msg.user { background: var(--teal); }
body.view-dashboard .chat-input-row { background: rgba(233,223,207,0.4); }
body.view-dashboard .chat-input { background: white; color: #1F2A36; }
body.view-dashboard .chat-input::placeholder { color: rgba(74,108,130,0.4); }
body.view-dashboard .music-player-popup { box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
body.view-dashboard .music-bar-toggle { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
body.view-dashboard .music-dj-bubble { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
@media (max-width: 768px) {
  body.view-dashboard .music-dj-bubble { display: none; }
  body.view-dashboard .music-corner { left: 10px; right: 10px; bottom: 10px; }
  body.view-dashboard .music-player-popup { width: auto; max-width: 100%; }
  body.view-dashboard .music-player-popup iframe { height: 152px; }
  body.view-dashboard .music-bar-toggle { padding: 7px 14px; font-size: 0.75rem; }
  body.view-dashboard .music-btn-row { width: 100%; }
}