/* Make sure we can detect mouse events easily */
.sectionable {
  position: relative;
  /* Useful but not strictly needed for global button */
  cursor: text;
}

.sectionable:not(:has(.highlight-text)) {
  // content-visibility: auto;
  // contain-intrinsic-height: auto 500px;
}

.section-header {
  // content-visibility: auto;
  // contain-intrinsic-height: 60px;

  scroll-margin-top: 270px;
}

.play-btn {
  transition: all 0.2s ease;
  position: relative;
  width: 18px;
  height: 18px;
}

.play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.play-btn:active {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}

.current-utterance {
  background-color: rgba(255, 215, 0, 0.3) !important;
  transition: background-color 0.3s ease;
}

/* Container: Lets clicks pass through EXCEPT where we explicitly enable them */
.section-split-overlay {
  position: fixed;
  z-index: 1020;
  height: 20px;
  transform: translateY(calc(-50% + 2px));
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the text horizontally */
  pointer-events: none;
}

/* The actual hit area for the user */
.split-line-clickable {
  position: relative;
  width: 100%;
  height: 16px; /* Adjust this to make it easier/harder to click vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* CRITICAL: Enable clicking just for this horizontal band */
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.3; /* Subtle by default */
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 1; /* Brighten the whole line and text on hover */
  }
}

/* The visual dashed line behind the text */
.line-dash {
  position: absolute;
  width: 100%;
  height: 0;
  border-top: 2px dashed #F44174;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

/* The indicator text */
.line-text {
  position: relative;
  z-index: 2; /* Sits above the dashed line */
  
  background: $light; /* Blocks out the dashed line behind the letters */
  color: #F44174;
  font-size: 11px;
  font-weight: 600;
  padding: 0 12px;
  border-radius: 50px;
  
  /* Optional: gives it a tiny lift so it separates from transcript text */
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}


.nav-panel {
  z-index: 1030 !important;
  width: 48px;
  min-width: 48px;
  height: 48px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.1s;

  /* Ensure nothing bleeds out when collapsed */
  overflow: hidden;

  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  border-left: 4px solid #F44174;
}

.nav-panel:hover {
  width: 280px;
  height: 400px;
}

/* Header stability */
.nav-panel-header {
  height: 48px;
  flex-shrink: 0;
  overflow: hidden;
  /* Prevent title from bleeding */
}

.icon-box {
  width: 24px;
  /* Width minus border-left */
  height: 48px;
  flex-shrink: 0;
}

/* Hide title box completely when collapsed */
.title-box {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
}

.nav-panel:hover .title-box {
  opacity: 1;
}

/* Hide content completely when collapsed */
.nav-panel-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Prevents accidental clicks when closed */
  transition: opacity 0.2s ease-in-out;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.nav-panel:hover .nav-panel-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-sections-list {
  max-height: 330px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
}

/* HOVER EFFECT ON SECTIONS */
.nav-link-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 6px;
  color: #F44174 !important;
  transition: all 0.2s ease;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.nav-link-item:hover {
  background-color: rgba(13, 110, 253, 0.08);
  /* Light blue tint */
  padding-left: 14px;
  /* Subtle "push" effect */
  text-decoration: none;
}

.nav-link-item i {
  margin-top: 3px;
  transition: transform 0.2s ease;
}

.nav-link-item:hover i {
  transform: translateX(2px);
  /* Chevron moves slightly */
}

/* Scrollbar Visibility */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* Custom Dropdown Styling */
.dropdown-menu {

  /* Ensure icons are consistently sized inside the dropdown */
  svg,
  i {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
}

.custom-dropdown-item {
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease-in-out;

  &:hover,
  &:focus {
    /* Uses Bootstrap's subtle primary background and primary text variables */
    background-color: var(--bs-primary-bg-subtle, #e7f1ff);
    color: var(--bs-primary, #0d6efd);

    svg,
    i {
      opacity: 1;
      color: var(--bs-primary, #0d6efd);
    }
  }
}

/* Target the specific menu for a thin primary border */
.custom-dropdown-border {
  border: 1px solid var(--bs-primary) !important;
  min-width: 180px;
  margin-top: 8px !important;
  /* Slight gap from the trigger button */

  .dropdown-item {
    color: var(--bs-gray-700);
    transition: all 0.2s ease;
    font-weight: 500;

    svg,
    i {
      width: 16px;
      height: 16px;
      stroke-width: 2px;
    }

    /* Hover State: White background stays, but text/icons go Primary */
    &:hover {
      background-color: var(--bs-primary-bg-subtle);
      color: var(--bs-primary);

      svg,
      i {
        color: var(--bs-primary);
      }
    }
  }
}

/* Adjust the trigger icon size */
.icon-sm {
  width: 20px;
  height: 20px;
}