/* Bottom results panel that overlaps the map (responsive) */
#results-panel {
  position: fixed;
  left: 0;
  /* by default avoid covering the chat column on wide screens */
  right: 480px;
  left: 8px;
  height: 260px;
  width: calc(100% - 552px) !important; /* reduced by 40px to narrow the table */
  max-height: 50vh;
  /* Match the chatbox container background color so the table appears consistent */
  background: var(--container-bg);
  color: var(--text-primary);
  border-radius: 24px !important;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.6);
  z-index: 60;
  /* remove any visible border on the panel (user requested border to 0) */
  border: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* hide by positioning below the viewport instead of using transform so
     fixed-position descendants remain viewport-relative */
  bottom: -320px; /* hidden state: push the panel well below the bottom edge */
  opacity: 0;
  transition: bottom 300ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 220ms ease;
}

#results-panel.open {
  bottom: 24px;
  opacity: 1;
}

/* results panel header removed */

.panel-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.panel-btn:hover {
  color: var(--text-primary);
}

.panel-body {
  /* remove top padding as requested; keep horizontal and bottom padding */
  padding: 0 12px 10px;
  overflow-y: auto;
  /* ensure panel-body background matches container so the table area is uniform */
  background: transparent;
}

#results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  /* let the table inherit the container background so it matches chatbox */
  background: transparent;
}

#results-table thead th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Keep table headers visible when scrolling the panel */
#results-panel .panel-body thead th {
  position: sticky;
  top: 0;
  z-index: 4; /* sit above rows */
  /* Use the same background as the chatbox so the header is not transparent */
  background: var(--container-bg);
  /* Keep a subtle divider so the header separates visually from rows */
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Sort button inside table headers */
#results-table thead th .sort-btn {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#results-table thead th .sort-btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.08);
  outline-offset: 2px;
  border-radius: 6px;
}

#results-table thead th .sort-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

/* Single SVG per column: hidden by default, shown when active. */
#results-table thead th .sort-icon .chevron {
  display: none;
  color: var(--text-secondary);
  opacity: 0.9;
  transition: transform 140ms ease, opacity 140ms ease;
}

/* Show the chevron only for the active sorted column */
#results-table thead th .sort-btn.sort-active .sort-icon .chevron {
  display: inline-block;
  opacity: 1;
}

/* When descending, rotate the chevron 180deg */
#results-table thead th .sort-btn.sort-active.sort-desc .sort-icon .chevron {
  transform: rotate(180deg);
}

#results-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}

#results-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Make rows slightly highlighted on hover and show pointer cursor */
#results-table tbody tr {
  transition: background-color 160ms ease;
}
#results-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

/* Highlight applied when the map hover targets a climb row */
/* Highlight applied when the map hover targets a climb row — match row :hover */
#results-table tbody tr.map-hover,
#results-table tbody tr.map-hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Scrollbar styling for the results panel body: narrow and darker to match the panel */
#results-panel .panel-body {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}

/* WebKit scrollbar appearance */
#results-panel .panel-body::-webkit-scrollbar {
  width: 8px;
}
#results-panel .panel-body::-webkit-scrollbar-track {
  background: transparent;
}
#results-panel .panel-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* darker thumb */
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.02); /* subtle inset */
}
#results-panel .panel-body:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.6);
}

/* Tablet breakpoint: chat column is narrower */
@media (max-width: 900px) {
  #results-panel {
    right: 420px;
  }
}

/* Mobile: stacked layout - allow the panel to be full width */
@media (max-width: 600px) {
  #results-panel {
    right: 0;
    left: 0;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}

/* Floating handle removed — use the centered bottom toggle instead */

/* Bottom-only toggle button (visible when panel is closed).
   The toggle now lives in the panel body but is fixed to the viewport so
   it remains reachable when the panel is closed. A small JS helper will
   horizontally center it above the #map element. */
#results-toggle-bottom {
  position: fixed; /* keep visible even when #results-panel is translated off-screen */
  bottom: 24px !important; /* small gap from viewport bottom */
  left: calc(36%) !important;
  transform: translateX(-50%); /* JS will adjust `left` to center over #map when available */
  z-index: 85;
  background: linear-gradient(180deg, #12293b, #0b1724);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.5);
  font-weight: 600;
  min-width: 60px; /* ensure a comfortable touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: left 240ms cubic-bezier(0.2, 0.9, 0.2, 1), bottom 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
  /* Visible by default so the toggle appears immediately after page load */
  visibility: visible;
}

#results-toggle-bottom.open {
  bottom: 274px !important;
}

/* animate the chevron inside the bottom toggle when panel opens/closes */
#results-toggle-bottom svg {
  display: block;
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
  transform-origin: 50% 50%;
}
#results-toggle-bottom.open svg {
  transform: rotate(180deg);
}

/* Responsive behavior handled by centering within the #map container */