/* Custom styles for NewsAggregator map app */

/* Custom minimalist dark scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.8);
}

/* MapLibre Canvas reset */
.maplibregl-canvas {
  outline: none;
}

.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left {
  display: none !important;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article card hover transition */
.article-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-card:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.5);
  background-color: rgba(30, 41, 59, 0.7);
}

/* Choropleth pulse animation for clicked features */
@keyframes highlight-pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Collapsible Panels (Left Filters & Right News Drawer) */
#iptc-panel {
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.2s ease;
}

#iptc-panel.is-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right-width: 0 !important;
  border-right-color: transparent !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-100%) !important;
}

#news-drawer {
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.2s ease;
}

#news-drawer.is-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-left-width: 0 !important;
  border-left-color: transparent !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(100%) !important;
}

/* Floating re-open buttons hover animations */
.floating-panel-toggle {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-panel-toggle:hover {
  transform: scale(1.04);
}