/* ═══════════════════════════════════════════════════════════
   HISTORY VISUALIZER — Layout
   ═══════════════════════════════════════════════════════════ */

/* ── Root container ──────────────────────────────────────── */
#app {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 54px 1fr 200px;
  grid-template-columns: 260px 1fr 320px;
  grid-template-areas:
    "topbar  topbar  topbar"
    "sidebar center  drawer"
    "timeline timeline timeline";
  overflow: hidden;
  position: relative;
}

/* ── Background layers ───────────────────────────────────── */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(120,53,15,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(109,40,217,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 0%, rgba(7,5,4,0.8) 0%, transparent 70%);
}

/* ── Panel glass base ────────────────────────────────────── */
.glass {
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  position: relative;
  z-index: 1;
}

/* ── Top bar ─────────────────────────────────────────────── */
#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  border-bottom: 1px solid var(--glass-border);
  z-index: 10;
}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

/* ── Center area ─────────────────────────────────────────── */
#center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── View switcher tabs (inside center) ──────────────────── */
#view-tabs {
  display: flex;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  background: rgba(0,0,0,0.30);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

/* ── Panorama view ───────────────────────────────────────── */
#panorama-view {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#panorama-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Geo map view ────────────────────────────────────────── */
#geo-view {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#geo-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Detail drawer ───────────────────────────────────────── */
#detail-drawer {
  grid-area: drawer;
  border-left: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

/* ── Timeline bar ────────────────────────────────────────── */
#timeline-bar {
  grid-area: timeline;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}

#timeline-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#timeline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Correlation overlay (floating panel) ────────────────── */
#correlation-panel {
  position: fixed;
  bottom: 210px;
  right: 328px;
  width: 400px;
  height: 240px;
  z-index: 20;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--dur-normal) var(--ease-out-expo);
}

#correlation-canvas {
  width: 100%;
  height: 100%;
}

/* ── Global tooltip ──────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--bg-panel);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  max-width: 260px;
  box-shadow: var(--shadow-panel);
  transition: opacity var(--dur-fast);
}

/* ── Media modal backdrop ────────────────────────────────── */
#media-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#media-modal {
  background: var(--bg-panel);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--radius-xl);
  width: min(90vw, 900px);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-panel), var(--glow-amber);
}