/* ==========================================================================
   little simple looper - Stylesheet
   Aesthetic: Minimalist, Tactile Paper & Graphite Pencil
   ========================================================================== */

:root {
  /* Paper Palette */
  --paper-bg: #f9f7f2;
  --header-bg: #ece7dc;          /* Slightly darker tactile paper for header */
  --paper-card: rgba(246, 243, 236, 0.85);
  --paper-panel: #f6f3ec;        /* Solid paper panel for pills, buttons & cards */
  --paper-border: rgba(100, 95, 88, 0.22);
  --paper-border-focus: rgba(60, 56, 52, 0.45);
  
  /* Graphite Palette */
  --graphite-dark: #23211f;       /* Dark 4B pencil */
  --graphite-medium: #45423e;     /* Medium 2B pencil */
  --graphite-light: #736d64;      /* Light HB pencil */
  --graphite-faint: #b8b2a7;      /* Faint 2H guide line */
  --graphite-hover: rgba(50, 47, 44, 0.08);
  --graphite-active: rgba(50, 47, 44, 0.16);

  /* Pencil Accent Colors */
  --pencil-red: #bd3a33;          /* Red Caran d'Ache pencil for REC */
  --pencil-red-bg: rgba(189, 58, 51, 0.08);
  --pencil-red-border: rgba(189, 58, 51, 0.35);
  --pencil-gold: #c78932;         /* Amber pencil for Armed/Sync state */
  --pencil-green: #3f7e58;        /* Soft green for Playing */

  /* Dimensions & Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Georgia", "Cambria", "Times New Roman", serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
}

/* Dark Theme - Tactile Charcoal Slate (Softened 15% for optimal contrast) */
[data-theme="dark"] {
  --paper-bg: #403d38;
  --header-bg: #35312d;          /* Slightly darker charcoal for header */
  --paper-card: rgba(72, 68, 63, 0.88);
  --paper-panel: #484540;        /* Solid charcoal panel for pills, buttons & cards */
  --paper-border: rgba(230, 225, 215, 0.18);
  --paper-border-focus: rgba(240, 235, 225, 0.38);

  --graphite-dark: #f0ede6;       /* White chalk / crisp paper */
  --graphite-medium: #c5beb3;     /* Silver graphite */
  --graphite-light: #948d82;      /* Medium pencil */
  --graphite-faint: #5a544c;      /* Faint guide lines */
  --graphite-hover: rgba(255, 255, 255, 0.08);
  --graphite-active: rgba(255, 255, 255, 0.16);

  --pencil-red: #e04a42;
  --pencil-red-bg: rgba(224, 74, 66, 0.18);
  --pencil-red-border: rgba(224, 74, 66, 0.45);
  --pencil-gold: #e2a042;
  --pencil-green: #56a877;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--paper-bg);
  color: var(--graphite-dark);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Paper Grain Background Simulation
   -------------------------------------------------------------------------- */
#paper-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

[data-theme="dark"] #paper-overlay {
  opacity: 0.22;
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   Fullscreen Webcam Background Video
   -------------------------------------------------------------------------- */
.webcam-bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: scaleX(-1) translateZ(0);
  -webkit-transform: scaleX(-1) translateZ(0);
  image-rendering: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.webcam-bg-video.is-active {
  opacity: 1;
  visibility: visible;
}

/* Hide procedural paper grain noise over video to ensure camera feed is crystal clear */
body.has-webcam-bg #paper-overlay {
  opacity: 0;
  visibility: hidden;
}

[data-theme="dark"] body.has-webcam-bg #paper-overlay {
  opacity: 0;
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Main App Container Grid (Stage Center fills 100% of viewport width)
   -------------------------------------------------------------------------- */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100vw;
  padding: 0;
  z-index: 10;
  justify-content: space-between;
  overflow: hidden;
}

.scroll-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}