/**
 * @component Footer Collapse
 * @description Collapsible footer for workspace pages, mirroring the header collapse pattern.
 *   Includes smart slider effects on the footer boundary — same as vertical pane borders.
 * @category Components
 * @file /static/shared/css/components/footer-collapse.css
 * @darkmode true
 */

/* =========================
   Footer Collapse Toggle Button
   Sits ON the boundary line (top edge of footer).
   Hidden by default, reveals on hover near boundary.
   ========================= */

.footer-collapse-toggle {
  position: fixed;
  bottom: 0;
  right: 16px;
  z-index: 1002;
  transition:
    bottom 0.3s ease,
    opacity 0.2s ease,
    background 0.15s ease,
    color 0.15s ease;

  /* Circular button like .resizer-toggle-btn */
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--workspace-bg-secondary, #161b22);
  border: 1px solid var(--workspace-border-default, #30363d);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted, #8b949e);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default — revealed on hover near boundary */
  opacity: 0;
  pointer-events: none;
}

.footer-collapse-toggle i {
  transition: transform 0.3s ease;
}

.footer-collapse-toggle:hover {
  background: var(--workspace-bg-tertiary, #21262d);
  border-color: var(--workspace-icon-primary, #0596697f);
  color: var(--workspace-icon-primary, #059669);
  opacity: 1;
}

/* =========================
   Footer Boundary — Smart Slider
   Horizontal resizer line on the top edge of the footer.
   Mirrors vertical .panel-resizer behavior.
   ========================= */

.site-footer {
  position: relative;
}

/* Invisible hover zone above the footer boundary — expanded hit area */
.site-footer::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 17px; /* 8px above + 1px border + 8px below */
  z-index: 1001;
  cursor: row-resize;
}

/* Highlight the top border on hover (like vertical .panel-resizer:hover) */
.site-footer:hover {
  border-top-color: var(--workspace-border-hover, #8b949e);
}

/* Reveal toggle button when hovering near footer boundary.
   Toggle is a preceding sibling, so use :has() instead of ~ */
body:has(.site-footer:hover) .footer-collapse-toggle,
.footer-collapse-toggle:hover {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Footer Inner Transition
   ========================= */

.site-footer .footer-inner {
  transition: opacity 0.3s ease;
  overflow: hidden;
}

/* =========================
   Collapsed State — minimal, invisible strip
   ========================= */

.site-footer.collapsed {
  height: 6px !important;
  min-height: 6px !important;
  padding: 0 !important;
  border-top-color: transparent;
}

.site-footer.collapsed .footer-inner {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* =========================
   Body-Level Classes (set by JS)
   Toggle repositioning uses body class because
   toggle is a preceding sibling of footer.
   ========================= */

body.footer-collapsed .footer-collapse-toggle {
  bottom: 0;
  /* Semi-visible when collapsed — user needs to find it to expand */
  opacity: 0.4;
  pointer-events: auto;
}

body.footer-collapsed .footer-collapse-toggle:hover {
  opacity: 1;
}

body.footer-collapsed .footer-collapse-toggle i {
  transform: rotate(180deg);
}

/* Collapsed footer: pointer cursor, hover reveals toggle + green glow */
.site-footer.collapsed {
  cursor: pointer;
}

.site-footer.collapsed:hover {
  background: rgba(5, 150, 105, 0.08) !important;
  box-shadow: inset 0 3px 10px -4px var(--workspace-icon-primary, #059669);
  border-top-color: var(--workspace-border-hover, #8b949e);
}

/* When collapsed strip is hovered, fully reveal the toggle */
body:has(.site-footer.collapsed:hover) .footer-collapse-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Workspace Layout — Flex-Based Height
   Instead of hardcoded calc(), use flex so the
   workspace fills remaining space between header and footer
   regardless of the footer's natural height.
   ========================= */

body.workspace-page {
  display: flex;
  flex-direction: column;
}

body.workspace-page .workspace-three-col {
  flex: 1;
  min-height: 0;
}

/* Override hardcoded calc() height from workspace-three-col.css.
   flex: 1 + min-height: 0 (above) fills remaining space between
   header and footer. Use 0 instead of auto to prevent flex children
   from expanding beyond the viewport. */
body.workspace-page:not(.landing-page) .workspace-three-col {
  height: 0 !important;
}

/* =========================
   Responsive: Hide on Mobile
   ========================= */

@media (max-width: 768px) {
  .footer-collapse-toggle {
    display: none;
  }
}