/*@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");*/

/* View Transitions API styles */
/* ::view-transition-old(root) { */
/*   animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out; */
/* } */

/* ::view-transition-new(root) { */
/*   animation: 90ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in; */
/* } */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Audio player styles */
wave-audio-path-player {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  width: 100%;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
}

/* Target the shadow host to remove any internal spacing */
wave-audio-path-player:host {
  margin: 0 !important;
  padding: 0 !important;
}

wave-audio-path-player::part(player) {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
}

wave-audio-path-player::part(play) {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

wave-audio-path-player::part(button) {
  fill: #333;
  width: 100%;
  height: 100%;
}

wave-audio-path-player::part(currenttime),
wave-audio-path-player::part(duration) {
  color: #666;
  font-size: 14px;
  font-family: inherit;
  min-width: 35px;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  margin: 0;
}

wave-audio-path-player::part(slider) {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  height: 30px;
  margin: 0 4px;
  padding: 0;
  box-sizing: border-box;
}

wave-audio-path-player::part(svg) {
  width: 100%;
  height: 30px;
}

wave-audio-path-player::part(path1) {
  stroke: #d1d5db;
  stroke-width: 1.5;
  fill: none;
}

wave-audio-path-player::part(path2) {
  stroke: #6b7280;
  stroke-width: 1.5;
  fill: none;
}

wave-audio-path-player::part(input) {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* #demo1::part(button) { */
/*   stroke: white; */
/*   fill: white; */
/* } */

/* #demo1::part(currenttime), */
/* #demo1::part(duration) { */
/*   color: white; */
/*   font-weight: bold; */
/* } */

/* #demo1::part(path1) { */
/*   stroke: white; */
/* } */

/* #demo1::part(path2) { */
/*   stroke: fuchsia; */
/* } */

/* Loading animation */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Pulse animation for dots */
.loading-pulse {
  display: inline-block;
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-pulse:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-pulse:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0%,
  60%,
  100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}

/* 
 * EDGE CASE FOR MATTHEW GRIFFITH (elm-ui maintainer):
 * 
 * ISSUE: Cross-browser flexbox scrolling inconsistency
 * Chrome and Firefox handle flexbox minimum sizing differently when:
 * 1. A flex column container has `height fill` 
 * 2. Contains a scrollable child with `scrollable` attribute
 * 3. The parent chain includes multiple nested flex containers
 * 
 * REPRODUCTION:
 * 1. Create nested structure: viewport-constrained container > flex column (height fill) > flex item (height fill) > scrollable column
 * 2. Add enough content to overflow the available height
 * 3. Chrome: scrollable container expands beyond viewport, no scrollbar appears
 * 4. Firefox: scrollable container is constrained, scrollbar appears correctly
 * 
 * ROOT CAUSE: Chrome's flexbox algorithm doesn't apply min-height: 0 automatically to 
 * flex items in nested hierarchies, causing content-based sizing instead of constraint-based
 * 
 * ARCHITECTURAL FIX: Remove nested scrolling contexts and use MainLayout page-level scrolling
 * with fixed sidebar positioning to prevent sidebar from scrolling away
 */

/* Main layout container - ensure viewport height constraint */
.main-app-layout {
  /* height: 100vh !important; /\* Lock to viewport height *\/ */
  /* max-height: 100vh !important; /\* Prevent expansion beyond viewport *\/ */
  /* min-height: 0 !important; /\* Allow flex shrinking *\/ */
  /* overflow: hidden !important; /\* Prevent container-level scrolling conflicts *\/ */
}

/* Sidebar - allow Elm-UI flexbox to control positioning */
.main-app-sidebar-container {
  /* height: 100vh !important; */
  /* overflow: visible !important; /\* Let sidebar manage its own scrolling *\/ */
  /* /\* Remove fixed positioning to allow Elm-UI flexbox layout to work *\/ */
}

/* Main content area - let flexbox handle the width */
.main-app-content {
  /* max-height: 100vh !important; */
  /* min-height: 0 !important; /\* Allow flex shrinking *\/ */
}

.main-app-content-no-scrollbar {
  /* /\* height: 100vh !important; *\/ */
  /* overflow-y: hidden !important; /\* Enable scrolling for main content *\/ */
  /* overflow-x: hidden !important; */
  /* max-height: 100vh !important; */
  /* /\* Fix for proper scrolling constraint *\/ */
  /* min-height: 0 !important; /\* Allow flex shrinking *\/ */
  /* /\* Remove margin-left to allow flexbox to control positioning *\/ */
}

/* Simple panel scrolling */
.panel-scrollable {
  /* overflow-y: auto !important; */
  /* height: 100% !important; */
  /* flex-shrink: 1 !important; */
  /* min-height: 0 !important; /\* Allow flex shrinking *\/ */
  /* contain: size layout !important; /\* CSS containment for consistent height calculation *\/ */
  contain-intrinsic-height: auto !important; /* Intrinsic size hint for layout stability */
}

/* Hidden scrollbar variant if needed */
.elm-ui-scrollable-hidden {
  /* scrollbar-width: none; /\* Firefox *\/ */
  /* -ms-overflow-style: none; /\* IE/Edge *\/ */
  /* overflow-y: auto !important; /\* Force scrollbar when needed *\/ */
  /* height: 100% !important; /\* Take full available height from parent *\/ */
  /* max-height: 100% !important; /\* Prevent expansion beyond parent *\/ */
  /* min-height: 0 !important; /\* Allow shrinking below content size *\/ */
}

.elm-ui-scrollable-hidden::-webkit-scrollbar {
  /* width: 0px; /\* Chrome/Safari *\/ */
  /* background: transparent; */
}