/* Base layout */ 
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #eef1f8;
  overscroll-behavior: none; /* prevent rubber-banding on iOS */
}

/* Canvas */
#glcanvas {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100dvh;             /* use dynamic vh so it fits under mobile browser chrome */
  display: block;

  /* Mobile/iPhone friendliness */
  touch-action: none;              /* allow custom pinch/drag */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Sidebar (collapsible) */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;                 /* fit visible viewport on mobile */
  max-height: 100dvh;
  width: 300px;
  max-width: 82vw;
  background: rgba(16, 20, 28, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  border-right: 1px solid rgba(255,255,255,0.1);
  transform: translateX(0);
  transition: transform 200ms ease;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); /* avoid bottom cut-off */
  overflow: hidden;               /* keep overall panel fixed; inner list scrolls */
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

.sidebar .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Right-align the title & paused chip so they don't sit under the toggle button */
.sidebar .row.align-right {
  justify-content: flex-end;
}

/* Keep the title row height static so the layout doesn't jump when PAUSED appears */
.sidebar .row.title-row {
  min-height: 34px;
}

.sidebar .muted { opacity: 0.85; font-size: 0.92em; }
.sidebar .heading { font-weight: 700; font-size: 16px; }

.sidebar label { font-size: 0.92em; opacity: 0.98; }
.sidebar select, .sidebar input[type="range"] {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: #121725;
  border: 1px solid #2f3a54;
  color: #eef1f8;
}
.sidebar button, .sidebar .chip {
  background: #1a2240;
  border: 1px solid #2f3a54;
  color: #eef1f8;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.sidebar button:hover, .sidebar .chip:hover {
  background: #212b53;
}
.sidebar .danger { background:#3b1320; border-color:#6b2138; }
.sidebar .danger:hover { background:#4c1930; }

/* Toggle handle */
#toggleSidebar {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 30;
  background: rgba(16,20,28,0.90);
  backdrop-filter: blur(8px);
  color: #eef1f8;
  border: 1px solid #2f3a54;
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  touch-action: manipulation; /* eliminate 300ms tap delay */
}

/* Readout chip at bottom-left (non-blocking) */
.hud-chip {
  position: fixed;
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  background: rgba(16, 20, 28, 0.80);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.3;
  color: #eef1f8;
  user-select: none;
  pointer-events: none;
  max-width: min(60vw, 560px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
kbd {
  background:#202639;
  border:1px solid #2f3a54;
  border-radius:4px;
  padding:1px 4px;
  font-size:0.85em;
}

/* Records list */
.records {
  display: flex;
  flex-direction: column;
  gap: 6px;

  /* Make records occupy remaining space and scroll smoothly on mobile */
  flex: 1 1 auto;
  min-height: 0;                 /* crucial so it can shrink inside flex container */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;

  /* --- FIX: ensure last item can scroll fully above mobile browser bars --- */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  scrollbar-gutter: stable both-edges;
}
.record-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #2f3a54;
  background: #0f1528;
  cursor: pointer;
}
.record-item:hover { background: #141c36; }
.record-name { font-weight: 600; }
.record-meta { font-size: 12px; opacity: 0.9; }
.record-actions {
  display: flex; gap: 6px;
}
.record-actions .btn {
  padding: 4px 6px; border-radius: 6px; border: 1px solid #2f3a54; background: #1a2240; color: #eef1f8; cursor: pointer;
}
.record-actions .btn:hover { background: #212b53; }

/* Small text blocks */
.small { font-size: 12px; opacity: 0.95; }

/* In-app confirm modal (no browser dialogs) */
.confirm-overlay {
  position: fixed;
  inset: 0;
  display: none;            /* toggled to flex when open */
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}
.confirm-dialog {
  background: rgba(16, 20, 28, 0.96);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 16px;
  width: min(88vw, 360px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.confirm-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.confirm-desc {
  opacity: 0.9;
  margin-bottom: 12px;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-actions .btn {
  background: #1a2240;
  border: 1px solid #2f3a54;
  color: #eef1f8;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.confirm-actions .btn:hover { background: #212b53; }
.confirm-actions .btn.danger { background:#3b1320; border-color:#6b2138; }
.confirm-actions .btn.danger:hover { background:#4c1930; }

/* Hint: allow multiline with \n */
#hint { white-space: pre-line; }

/* Keep space reserved for PAUSED chip so the title row doesn't jump */
#pausedBadge {
  background:#ffb703;
  color:#111;
  border-color:#ffb703;
  visibility: hidden; /* reserve space while hidden */
}