.floating-panel {
  position: fixed;
  width: calc(16px + 2 * 1.25rem);
  max-height: 70vh;
  border-radius: var(--bs-border-radius);
  display: none;
  transition: width 0.3s ease;
}

.floating-panel,
.floating-panel .accordion-item,
.floating-panel .accordion-header,
.floating-panel .accordion-button {
  background: rgba(var(--bs-body-bg-rgb), 0.25);
}

.floating-panel.active {
  display: block;
}

.floating-panel--navigation {
  top: 110px;
  left: 30px;
}

.floating-panel--user-content {
  top: 110px;
  right: 30px;
}

.floating-panel__body {
  max-height: calc(70vh - 3.5rem);
  overflow-y: auto;
  border-radius: var(--bs-border-radius);
  /* Ensure proper scrolling behavior */
  scroll-behavior: smooth;
  /* Ensure content is properly contained */
  position: relative;
}

/* Ensure navigation content within floating panel is scrollable */
.floating-panel__body .navigation-content {
  overflow-y: auto;
  max-height: 100%;
}

/* Ensure column-main within floating panel has proper scroll behavior */
.floating-panel__body .column-main {
  overflow-y: auto;
  max-height: 100%;
}

/* Ensure the card-body within floating panel navigation is scrollable */
.floating-panel__body .card-body {
  overflow-y: auto;
  max-height: 100%;
}

/* Ensure the floating panel body itself can scroll if needed */
.floating-panel__body {
  /* Force scrollbar to always be visible for consistent behavior */
  overflow-y: scroll;
  /* Ensure smooth scrolling */
  scroll-behavior: smooth;
}

.floating-panel .accordion-button {
  padding: 0.5rem 1.25rem;
  width: 100%;
  justify-content: start;
}

.floating-panel .accordion-button.collapsed,
.floating-panel .accordion-button:not(.collapsed) {
  color: var(--bs-black);
}

.floating-panel .accordion-button:not(.collapsed),
.floating-panel .accordion-button:focus {
  box-shadow: unset;
  background: unset;
}

/* Hide accordion arrow */
.floating-panel .accordion-button::after {
  display: none !important;
}

/* [data-bs-theme='dark'] {
  .floating-panel .accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }
}
.floating-panel .accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
} */

/* Expanded state - panels expand when accordion is open */
.floating-panel.expanded {
  width: 350px; /* Desktop expanded width */
}

.floating-panel.expanded,
.floating-panel.expanded .accordion-item,
.floating-panel.expanded .accordion-header,
.floating-panel.expanded .accordion-button {
  border-radius: var(--bs-border-radius);
  background: rgba(var(--bs-body-bg-rgb), 1);
}

/* Media queries */
@media (max-width: 767.98px) {
  .floating-panel {
    width: calc(16px + 2 * 1rem);
    max-height: 55vh;
  }

  .floating-panel__body {
    max-height: calc(55vh - 3.5rem);
  }

  .floating-panel.expanded {
    width: 175px; /* Mobile expanded width */
  }

  .floating-panel.expanded,
  .floating-panel.expanded .accordion-item,
  .floating-panel.expanded .accordion-header,
  .floating-panel.expanded .accordion-button {
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-body-bg-rgb), 1);
  }

  .floating-panel .card-navigation .nav-link {
    padding: 0.5rem;
  }

  .floating-panel--navigation {
    left: 20px;
  }

  .floating-panel--user-content {
    right: 20px;
  }

  .floating-panel .accordion-button {
    padding: 0.5rem 1rem;
  }
}

@media (min-width: 992px) {
  .floating-panel {
    top: 60px;
  }
}