/**
 * Shared map component styles for CuratedCity chat views
 *
 * Used by:
 * - ai-assistant.ejs (full-page AI assistant)
 * - chat-widget.ejs (slide-out chat widget)
 */

/* ============================================
   SCROLLBAR HIDING
   ============================================ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================
   MESSAGE ANIMATIONS
   ============================================ */
@keyframes messageSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.message-animate {
  animation: messageSlide 0.3s ease-out forwards;
}

/* ============================================
   MAP MARKER BASE STYLES
   ============================================ */
.custom-marker {
  background: none;
  border: none;
}
.custom-marker > div {
  transition: transform 0.2s ease;
}
.custom-marker:hover > div {
  transform: scale(1.15);
}

/* Current marker: colored border, white fill */
.qt-marker-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.qt-marker-current {
  width: 32px;
  height: 32px;
  background: white;
  border: 2px solid;
}
.qt-marker-current i {
  font-size: 0.75rem;
}

/* History marker: white/gray dimmed */
.qt-marker-history {
  width: 28px;
  height: 28px;
  background: white;
  border: 2px solid #d1d5db;
  opacity: 0.7;
}
.qt-marker-history i {
  font-size: 0.65rem;
  color: #9ca3af;
}

/* ============================================
   PLACE CARD HIGHLIGHT
   ============================================ */
.place-card-highlight {
  animation: highlightPulse 1s ease;
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }
  50% { box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.3); }
}

/* ============================================
   HOVER PREVIEW CARD (container overlay, NOT Leaflet popup)
   ============================================ */
.qt-preview-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-width: 260px;
  min-width: 200px;
}

/* ============================================
   DETAIL DRAWER (slide-in panel)
   ============================================ */
.qt-detail-drawer {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.qt-detail-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Mobile: slide from bottom */
@media (max-width: 1023px) {
  .qt-detail-drawer {
    transform: translateY(100%);
  }
  .qt-detail-drawer.is-open {
    transform: translateY(0);
  }
}

/* ============================================
   HOVER PREVIEW CONTAINER (positioned over map)
   ============================================ */
#hover-preview {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#hover-preview.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   MOBILE FULLSCREEN MAP
   ============================================ */
.mobile-map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 80px !important; /* below page header */
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================
   SELECTED MARKER HIGHLIGHT
   ============================================ */
.qt-marker-selected > div {
  transform: scale(1.3) !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}