boris/src/styles/layout/app.css

/* App-level layout and panes */
.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Two-pane layout (legacy support) */
.two-pane {
  display: grid;
  grid-template-columns: 360px 1fr;
  column-gap: 0;
  height: calc(100vh - 4rem);
  transition: grid-template-columns 0.3s ease;
}

.two-pane.sidebar-collapsed { grid-template-columns: 60px 1fr; }

/* Three-pane layout */
.three-pane {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--highlights-width);
  column-gap: 0;
  height: calc(100vh - 2rem);
  transition: grid-template-columns 0.3s ease;
  position: relative;
}

@supports (height: 100dvh) {
  .three-pane { height: calc(100dvh - 2rem); }
}

.three-pane.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-width); }
.three-pane.highlights-collapsed { grid-template-columns: var(--sidebar-width) 1fr var(--highlights-collapsed-width); }
.three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width); }

/* Mobile three-pane layout */
@media (max-width: 768px) {
  .three-pane {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100vh;
    height: 100dvh;
  }
  .three-pane.sidebar-collapsed,
  .three-pane.highlights-collapsed,
  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
}

.pane.sidebar { overflow-y: auto; height: 100%; }
.pane.main {
  overflow-y: auto;
  height: 100%;
  max-width: var(--main-max-width);
  margin: 0 auto;
  padding: 0 var(--main-horizontal-padding);
  overflow-x: hidden;
  contain: layout style;
}

/* Remove padding when sidebar is collapsed for zero gap */
.three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
.three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }
.pane.highlights { overflow-y: auto; height: 100%; }

/* Ensure panes are stacked in the correct order on desktop */
@media (min-width: 769px) {
  /* Desktop stacking to keep highlights above main without overlap */
  .three-pane .pane.sidebar { z-index: 1; }
  .three-pane .pane.main { z-index: 1; }
  .three-pane .pane.highlights { z-index: 2; }
}

/* Mobile pane styles */
@media (max-width: 768px) {
  /* Both sidepanes slide in as overlays */
  .pane.sidebar,
  .pane.highlights {
    position: fixed;
    top: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #1a1a1a;
    z-index: 1001; /* Above backdrop */
    transition: transform 0.3s ease;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }
  /* Ensure content fills the mobile sidepanes */
  .pane.sidebar > *,
  .pane.highlights > * { width: 100%; height: 100%; }
  /* Remove borders from containers in mobile overlays */
  .pane.sidebar .bookmarks-container,
  .pane.highlights .highlights-container { border: none; border-radius: 0; flex: 1; min-height: 0; }
  /* Bookmarks sidebar from left */
  .pane.sidebar { left: 0; transform: translateX(-100%); }
  .pane.sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5); }
  /* Highlights sidebar from right */
  .pane.highlights { right: 0; transform: translateX(100%); }
  .pane.highlights.mobile-open { transform: translateX(0); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5); }
  .pane.main { grid-column: 1; grid-row: 1; padding: 0.5rem; max-width: 100%; transition: opacity 0.2s ease; }
  /* Hide main content when sidepanes are open on mobile */
  .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }
  .mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999; /* Below sidepanes */
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .mobile-sidebar-backdrop.visible { display: block; opacity: 1; }
  .mobile-highlights-btn {
    display: none;
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
    z-index: 900;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #ddd;
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  .mobile-highlights-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
  .mobile-highlights-btn.visible { opacity: 1; visibility: visible; }
  @media (max-width: 768px) { .mobile-highlights-btn { display: flex; } }
}