:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1d2230;
  --text: #eef2ff;
  --muted: #aeb6cf;
  --line: #2c3346;
  --accent: #7aa2ff;
  --accent-2: aliceblue;
  --success: #3ddc97;
  --warn: #ffcc66;
  --danger: #ff7a7a;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-width: 1280px;
  background:
    radial-gradient(circle at top left, rgba(122, 162, 255, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(159, 122, 234, 0.12), transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- FULLSCREEN LAYOUT --- */
body {
  margin: 0;
  min-width: 0; /* Remove 1280px min-width */
  background: var(--bg);
  overflow: hidden; /* Prevent scrolling on body */
  position: relative;
  touch-action: none; /* Helpful for custom gestures */
}

.page, header, .layout, .panel.controls, .panel.image-panel, .panel.makeup {
  display: none; /* Hide old structure completely or just don't use it, but since I removed it from HTML, this CSS is mainly cleaning up. Actually I removed them from HTML so I don't need to hide them. Let's just redefine base styles. */
}

/* Redefine base if needed, but since I replaced HTML, old classes like .layout are gone */

.viewer.fullscreen {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Use dvh for mobile browsers if supported */
  height: 100dvh;
  background: #000;
  z-index: 1;
  overflow: hidden;
}

.viewer.fullscreen video,
.viewer.fullscreen canvas,
.viewer.fullscreen img,
.viewer.fullscreen #placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#video { z-index: 1; }
#previewImage { z-index: 2; display: none; }
#overlay { z-index: 3; pointer-events: none; }
#mesh3dOverlay { z-index: 4; pointer-events: none; }
#bboxOverlay { z-index: 5; pointer-events: none; }

/* Plugin 3D parameters panel — sotto la logbox (la logbox sale via --pp-h) */
#plugin3dParamsPanel {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 20px);
  left: env(safe-area-inset-left, 20px);
  right: 96px;
  z-index: 10;
  background: rgba(15, 17, 21, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: none;
  max-height: 25vh;
  overflow-y: auto;
}
#plugin3dParamsPanel.visible { display: block; }
#plugin3dParamsPanel.collapsed { max-height: none; padding: 8px 14px; }
#plugin3dParamsPanel.collapsed .pp-row { display: none; }
#plugin3dParamsPanel.collapsed .pp-header { margin-bottom: 0; }

#plugin3dParamsPanel .pp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
}
#plugin3dParamsPanel .pp-header:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
#plugin3dParamsPanel .pp-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: inherit;
  margin: 0;
}
#plugin3dParamsPanel .pp-toggle {
  font-size: 14px;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}
#plugin3dParamsPanel .pp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
#plugin3dParamsPanel .pp-row:last-child { margin-bottom: 0; }
#plugin3dParamsPanel .pp-label {
  flex: 0 0 120px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
#plugin3dParamsPanel .pp-control { flex: 1; min-width: 0; }
#plugin3dParamsPanel .pp-value {
  flex: 0 0 50px;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--accent);
}
#plugin3dParamsPanel input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}
#plugin3dParamsPanel select {
  width: 100%;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
#plugin3dParamsPanel input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

#placeholder {
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  padding: 28px;
  background: linear-gradient(180deg, rgba(12, 16, 23, 0.5), rgba(12, 16, 23, 0.8));
}

/* --- FLOATING UI ELEMENTS --- */
.floating-container {
  position: absolute;
  z-index: 10;
  display: flex;
}

.floating-btn {
  background: rgba(15, 17, 21, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  padding: 0;
}

.floating-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.floating-btn:active {
  transform: scale(0.92);
}

.floating-btn svg {
  width: 50%;
  height: 50%;
}

/* Top Left: Main Actions */
.top-left {
  top: env(safe-area-inset-top, 20px);
  left: env(safe-area-inset-left, 20px);
  gap: 12px;
}

/* Give top-left a slightly larger margin if no safe area */
@supports not (padding-top: env(safe-area-inset-top)) {
  .top-left { top: 20px; left: 20px; }
}

.main-action {
  width: 44px;
  height: 44px;
}

/* Top Right: Settings */
.top-right {
  top: env(safe-area-inset-top, 20px);
  right: env(safe-area-inset-right, 20px);
}

@supports not (padding-top: env(safe-area-inset-top)) {
  .top-right { top: 20px; right: 20px; }
}

.top-right .floating-btn {
  width: 44px;
  height: 44px;
}

/* Middle Right: Vertical Actions (TikTok style) */
.right-sidebar {
  bottom: 120px; /* Above logbox */
  right: env(safe-area-inset-right, 16px);
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

@supports not (padding-top: env(safe-area-inset-top)) {
  .right-sidebar { right: 16px; }
}

.side-action {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.3); /* Slightly darker for right sidebar */
}

/* Badge for Find Face */
.badge-container {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* Status Pill */
.status-pill {
  position: absolute;
  top: env(safe-area-inset-top, 80px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

@supports not (padding-top: env(safe-area-inset-top)) {
  .status-pill { top: 80px; }
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(255, 204, 102, 0.15);
}

.status-dot.live { background: var(--success); box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.15); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 122, 122, 0.15); }

/* --- LOGS --- */
.floating-logbox {
  position: absolute;
  /* bottom dinamico: cresce di --pp-h (px) quando il panel parametri è visibile */
  bottom: calc(env(safe-area-inset-bottom, 20px) + var(--pp-h, 0px));
  left: env(safe-area-inset-left, 20px);
  right: 80px; /* Space for right sidebar */
  height: 80px;
  z-index: 10;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
  pointer-events: auto; /* Allow clicks to expand */
  cursor: pointer;
  mask-image: linear-gradient(to bottom, transparent, black 40%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-logbox.expanded {
  height: auto;
  top: env(safe-area-inset-top, 20px);
  bottom: env(safe-area-inset-bottom, 20px);
  right: env(safe-area-inset-right, 20px);
  z-index: 9; /* Under floating action buttons which are 10 */
  background: rgba(15, 17, 21, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: none;
  -webkit-mask-image: none;
  justify-content: flex-start;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
}

@supports not (padding-top: env(safe-area-inset-top)) {
  .floating-logbox { bottom: calc(20px + var(--pp-h, 0px)); left: 20px; }
  .floating-logbox.expanded { top: 20px; bottom: 20px; right: 20px; }
}

.log-line {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.3;
  color: #c6d0f5;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  font-size: 11px;
}

/* Collapsed view styles */
.floating-logbox:not(.expanded) .log-line:nth-child(4) { font-size: 12px; font-weight: 700; opacity: 1; }
.floating-logbox:not(.expanded) .log-line:nth-child(3) { font-size: 11px; font-weight: 400; opacity: 0.8; }
.floating-logbox:not(.expanded) .log-line:nth-child(2) { font-size: 10px; font-weight: 450; opacity: 0.6; }
.floating-logbox:not(.expanded) .log-line:nth-child(1) { font-size: 9px; font-weight: 400; opacity: 0.4; }
.floating-logbox:not(.expanded) .log-line:nth-child(n+5) { display: none; }

/* Expanded view styles */
.floating-logbox.expanded .log-line {
  font-size: 12px;
  opacity: 1;
  font-weight: 400;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- SETTINGS DRAWER --- */
.settings-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background: rgba(15, 17, 21, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.settings-drawer.hidden {
  transform: translateX(100%);
}

.drawer-header {
  padding: env(safe-area-inset-top, 20px) 20px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.02);
}

@supports not (padding-top: env(safe-area-inset-top)) {
  .drawer-header { padding-top: 20px; }
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  font-family: 'Outfit', sans-serif;
  color: var(--text);
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Scrollbar per drawer */
.drawer-content::-webkit-scrollbar { width: 6px; }
.drawer-content::-webkit-scrollbar-track { background: transparent; }
.drawer-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

/* Reuse some existing classes for drawer content */
.stack { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel-header { padding: 16px 16px 8px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.small-note { padding: 16px 16px 0; color: var(--muted); font-size: 12px; }

.list-card {
  margin: 0 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 12px 14px;
}

.list-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.metric:last-child { border-bottom: 0; }
.metric span:first-child { color: var(--muted); }
.metric strong { font-weight: 700; color: var(--accent-2); }

/* Buttons inside drawer */
.secondary-btn, .action-btn, .preview-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.secondary-btn:hover { background: rgba(255, 255, 255, 0.08); }

.preview-btn {
  background: linear-gradient(180deg, rgba(159, 122, 234, 0.15), rgba(159, 122, 234, 0.05));
  text-align: left;
}

.preview-btn.active {
  outline: 2px solid rgba(159, 122, 234, 0.6);
  border-color: rgba(159, 122, 234, 0.8);
  background: linear-gradient(180deg, rgba(159, 122, 234, 0.25), rgba(159, 122, 234, 0.15));
}

/* Desktop override: Keep drawer open by default if screen is wide enough */
@media (min-width: 1024px) {
  .settings-drawer {
    transform: translateX(0); /* Always visible */
    border-left: 1px solid rgba(255,255,255,0.1);
    background: rgba(15, 17, 21, 0.95);
  }
  
  .settings-drawer.hidden {
    transform: translateX(100%);
  }

  /* Shift the right sidebar slightly if drawer is open? 
     Actually, let's keep the right sidebar over the video, just left of the drawer. */
  .settings-drawer:not(.hidden) ~ .right-sidebar,
  .right-sidebar {
    /* If drawer is 360px wide, and right sidebar is normally 20px from right. 
       We can either move the right sidebar to 380px or leave it where it is and it will be covered by the drawer if open.
       On desktop, user can close the drawer. If open, it overlays the sidebar or pushes it. Let's push it via JS or CSS. */
    right: 20px;
  }
}

/* --- NUDGING (TUTORIAL) --- */
.nudge-target {
  box-shadow: 0 0 0 4px var(--warn), 0 0 15px rgba(255, 204, 102, 0.4) !important;
  animation: nudge-pulse 1.5s infinite;
  z-index: 20;
}

@keyframes nudge-pulse {
  0% { box-shadow: 0 0 0 4px var(--warn), 0 0 15px rgba(255, 204, 102, 0.4); }
  50% { box-shadow: 0 0 0 6px var(--warn), 0 0 25px rgba(255, 204, 102, 0.6); }
  100% { box-shadow: 0 0 0 4px var(--warn), 0 0 15px rgba(255, 204, 102, 0.4); }
}