/* assets/ui.css - THE DEFINITIVE REWRITE */

/* --- 1. DESIGN SYSTEM: The Single Source of Truth --- */
:root {
  --font-family: 'Share Tech Mono', monospace;
  --font-size-base: 15px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  --color-text: #ebebeb;
  --color-text-muted: #999;
  --color-accent: #2cc5e4;
  --color-bg-dark: #000;
  --color-bg-card: rgba(20, 20, 20, 0.85);
  --color-bg-widget: #333;
  --color-bg-widget-hover: #444;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-widget: #555;
  --color-border-widget-hover: #777;

  --padding-card: 10px 15px;
  --padding-btn: 8px 18px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --gap: 10px;
  --width:100%;
}

/* --- 2. GLOBAL STYLES & LAYOUT --- */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}

.ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9999; /* Below panels (10000), above hover-zones (9998) */
  display: none; /* Hidden by default */
}

.hover-zone { position: absolute; z-index: 9998; }
.hover-zone.top { top: 0; left: 0; right: 0; height: 40px; }
.hover-zone.left { top: 0; left: 0; bottom: 0; width: 40px; }
.hover-zone.right { top: 0; right: 0; bottom: 0; width: 40px; }
.hover-zone.bottom { bottom: 0; left: 0; right: 0; height: 40px; }

.ui-panel {
  position: absolute;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  opacity: 0;
  pointer-events: none;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s;
}
.ui-panel.visible { opacity: 1; pointer-events: auto; }

/* Make side panels scrollable when content overflows */
.ui-panel.left, .ui-panel.right {
  overflow-y: auto;
}

.ui-panel.top, .ui-panel.bottom {
  height: auto;
  flex-direction: row;
  justify-content: center;
  left: 50%; /* Position the panel's left edge at the screen's center */
}
.ui-panel.top { top: 0; transform: translate(-50%, -120%); } /* Translate X by -50% of its own width to center it, and Y for animation */
.ui-panel.top.visible { transform: translate(-50%, 0); }
.ui-panel.bottom { bottom: 0; transform: translate(-50%, 120%); }
.ui-panel.bottom.visible { transform: translate(-50%, 0); }

.ui-panel.left { left: 0; transform: translateX(-120%); }
.ui-panel.left.visible { transform: translateX(0); }

/* Right panel should grow based on its content */
.ui-panel.right {
  right: 0;
  transform: translateX(120%);
  width: auto; /* Let content dictate width */
  min-width: 0; /* Remove minimum constraint */
}
.ui-panel.right.visible { transform: translateX(0); }

/* --- 3. COMPONENT STYLES --- */

/* Base Card Style */
.ui-card {
  background-color: var(--color-bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--padding-card);
  box-sizing: border-box;
}

/* Container for draggable layer cards in the left panel */
.composition-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Right-side cards have a generous, fixed minimum width */
.ui-panel.right .ui-card {
  min-width: 360px;
}

/* Layer Card (Left Panel) - Extends .ui-card */
.layer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.layer-card:hover { background-color: rgba(40, 40, 40, 0.85); }
.layer-card.toggled-on { border-color: var(--color-accent); }
.layer-card .layer-label { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-card .layer-controls { display: flex; align-items: center; gap: 12px; margin-left: 15px; flex-shrink: 0; }

/* Top & Bottom Panel Cards */
.ui-panel.top .ui-card, .ui-panel.bottom .ui-card {
  width: auto; /* Allow card to shrink to content */
}
.ui-panel.bottom .ui-card { min-width: 280px; padding: 8px; }

/* Base Button Style */
.standalone-button {
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-bg-widget);
  border: 1px solid var(--color-border-widget);
  border-radius: var(--radius-btn);
  padding: var(--padding-btn);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.standalone-button:hover { background-color: var(--color-bg-widget-hover); border-color: var(--color-border-widget-hover); }
.ui-panel.bottom .standalone-button { width: 100%; }

/* Container for horizontal buttons */
.button-row { display: flex; gap: 8px; }

/* --- 4. LIL-GUI INTEGRATION & OVERRIDES --- */

.lil-gui {
  --font-family: var(--font-family);
  --font-size: var(--font-size-base);
  --background-color: transparent;
  --text-color: var(--color-text);
  --title-background-color: transparent;
  --title-text-color: var(--color-text);
  --widget-color: var(--color-bg-widget);
  --hover-color: var(--color-bg-widget-hover);
  --focus-color: var(--color-bg-widget-hover);
  --number-color: var(--color-accent);
  --string-color: #b3e42d;
  --name-width: 160px; /* Generous width for labels */

  font-family: var(--font-family) !important;
  box-shadow: none !important;
  /* width: 100%; Let the container decide the width */
}
.lil-gui .title { font-weight: var(--font-weight-normal); letter-spacing: 0.5px; text-transform: uppercase; }

/* Ensure controllers use flexbox for proper alignment */
.lil-gui .controller {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Allow the widget (slider/toggle) to grow and fill available space */
.lil-gui .widget {
  flex-grow: 1;
  display: flex; /* Use flexbox for the widget itself */
  align-items: center;
  gap: 5px; /* Space between slider and text input */
}

/* THE DEFINITIVE FIX: Target the correct slider div and make it grow */
.lil-gui .widget .slider {
  flex-grow: 1;
}

/* --- 5. ICONS & LABELS --- */

.ui-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 9999;
  text-transform: uppercase;
}
.ui-label.visible { opacity: 1; }
.ui-label.top { top: 15px; left: 50%; transform: translateX(-50%); }
.ui-label.left { left: 15px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.ui-label.right { right: 15px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.ui-label.bottom { bottom: 15px; left: 50%; transform: translateX(-50%); }

.visibility-icon { width: 20px; height: 14px; position: relative; cursor: pointer; }
.visibility-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 10px; border: 2px solid var(--color-text-muted); border-radius: 10px 10px 0 0; border-bottom: none; box-sizing: border-box; transition: all 0.3s; }
.visibility-icon::after { content: ''; position: absolute; top: 6px; left: 7px; width: 6px; height: 6px; background: var(--color-text-muted); border-radius: 50%; transition: all 0.3s; }
.layer-card.toggled-on .visibility-icon::before { border-color: var(--color-accent); height: 14px; border-radius: 10px; border-bottom: 2px solid var(--color-accent); }
.layer-card.toggled-on .visibility-icon::after { background: var(--color-accent); top: 4px; }
.layer-card:not(.toggled-on) .visibility-icon::before { top: 4px; height: 0; border-top: 2px solid var(--color-text-muted); border-radius: 0; }
.layer-card:not(.toggled-on) .visibility-icon::after { opacity: 0; }

.layer-card .remove-layer {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  width: 16px;
  height: 16px;
  position: relative;
}

/* Create the two lines of the "X" */
.layer-card .remove-layer::before,
.layer-card .remove-layer::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: var(--color-text-muted);
  transition: background-color 0.2s;
}

.layer-card .remove-layer::before {
  transform: rotate(45deg);
}

.layer-card .remove-layer::after {
  transform: rotate(-45deg);
}

.layer-card:hover .remove-layer {
  opacity: 1;
}

.layer-card .remove-layer:hover::before,
.layer-card .remove-layer:hover::after {
  background-color: var(--color-text);
}

/* --- Animations --- */
@keyframes highlight-pulse {
  0% {
    border-color: var(--color-border);
    box-shadow: 0 0 0 0 rgba(44, 197, 228, 0);
  }
  50% {
    border-color: var(--color-accent);
    box-shadow: 0 0 4px 2px rgba(44, 197, 228, 0.5);
  }
  100% {
    border-color: var(--color-border);
    box-shadow: 0 0 0 0 rgba(44, 197, 228, 0);
  }
}

.highlight {
  /* The animation runs twice over the duration for a nice double-pulse effect */
  animation: highlight-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) 2;
}

.duplicate-layer {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  width: 16px;
  height: 16px;
  position: relative;
}

/* Back square */
.duplicate-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-text-muted);
  border-radius: 2px;
  transition: border-color 0.2s;
}

/* Front square */
.duplicate-layer::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-bg-card); /* Match card background */
  border: 2px solid var(--color-text-muted);
  border-radius: 2px;
  transition: border-color 0.2s;
}

.layer-card:hover .duplicate-layer {
  opacity: 1;
}

.duplicate-layer:hover::before,
.duplicate-layer:hover::after {
  border-color: var(--color-text);
}