/* =================================================================== */
/*    PARTIAL: PRODUCT VISUALIZER                                      */
/*    Contains: Fullscreen studio modal, Canvas container, Toolbars,   */
/*    Laser animations, and Mobile studio stacking logic.              */
/* =================================================================== */

/* --- Product Visualizer Modal --- */
.visualizer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: hsla(0, 0%, 0%, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* FORCE REMOVE EXTERNAL MARGINS */
  padding: 0 !important;
}

.visualizer-container.active {
  opacity: 1;
  visibility: visible;
}

.visualizer-modal {
  background: var(--eerie-black2);
  border-left: 1px solid var(--jet);
  border-right: 1px solid var(--jet);
  border-radius: 0; /* Full screen look */
  width: 100vw; 
  height: 100vh; 
  max-width: 100vw; 
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  opacity: 0;
  transform: none; 
  transition: opacity 0.3s ease;
  align-items: stretch;
}

.visualizer-container {
    padding: 0 !important; /* Force remove gaps from the fixed overlay */
}

.visualizer-container.active .visualizer-modal {
  opacity: 1;
}

.visualizer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--jet);
  flex-shrink: 0;
  background: var(--eerie-black1);
}

.visualizer-header .modal-close-btn {
    position: static; 
    transform: none;
}

.visualizer-body {
  display: grid;
  width: 100%; 
  /* Shrink sidebar slightly more (320px) to give canvas absolute maximum room */
  grid-template-columns: 1fr 320px; 
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.visualizer-canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a; /* Deeper black for focus */
    display: flex;
    justify-content: center; 
    align-items: center;     
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.visualizer-disclaimer {
    width: 100%;
    font-size: 10px;
    color: var(--light-gray70);
    text-align: center;
    margin-bottom: 0;
}

.visualizer-canvas-container {
  flex-grow: 1; 
  width: 100%;  
  height: 100%; 
  padding: 5px; 
  background-color: var(--onyx);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  /* FLUIDITY FIXES */
  overflow: hidden !important; /* Hide clunky scrollbars */
  cursor: grab;                /* Show the 'hand' icon */
}

.visualizer-canvas-container:active {
    cursor: grabbing;          /* Closes the 'hand' when clicking */
}

/* Ensure Fabric.js internal wrapper respects the flex centering */
.canvas-container {
    margin: auto !important;
    box-shadow: var(--shadow4);
}

/* Info Panel: Floating on Desktop, Block on Mobile */
.visualizer-info-panel {
  padding: 10px 20px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  border-top: 1px solid var(--jet);
  z-index: 10;
}

/* CONSOLIDATED DESKTOP OVERRIDES: Maximize workspace and position UI */
@media (min-width: 901px) {
    /* 1. Remove the "Frame" around the modal to kill the pink gaps */
    .visualizer-container {
        padding: 0 !important;
    }

    /* 2. Force the modal to be a true full-screen workspace */
    .visualizer-modal {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0;
        margin: 0 !important;
        border: none;
    }

    /* 3. Position the info panel over the canvas */
    .visualizer-info-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 340px);
        pointer-events: none;
        background: rgba(0,0,0,0.5); /* Slight transparency looks better full-screen */
    }
}

/* --- UPDATED: VISUALIZER TOOLBAR (Fixed Clipping Fix) --- */
.visualizer-toolbar {
  padding: 20px; 
  border-left: 1px solid var(--jet);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Slightly tighter gap */
  background: var(--eerie-black1);
}

/* Arrange standard tool buttons in two columns to save vertical height */
.visualizer-toolbar .form-btn:not([data-visualizer-save-btn]) {
    width: 100%;
    padding: 10px;
    font-size: 12px;
}

/* Targeting groups of buttons to sit 2-across */
.visualizer-toolbar > .form-btn, 
.visualizer-toolbar > .tool-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Action areas (Add Text, Color, Delete) look better as a grid */
.visualizer-toolbar .action-grid-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.visualizer-toolbar::-webkit-scrollbar { width: 6px; }
.visualizer-toolbar::-webkit-scrollbar-track { background: transparent; }
.visualizer-toolbar::-webkit-scrollbar-thumb { background: var(--orange-yellow-crayola); border-radius: 8px; }


.visualizer-toolbar .tool-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.visualizer-toolbar .tool-group label {
    font-size: var(--fs7);
    color: var(--light-gray70);
}

.visualizer-toolbar .form-btn {
    width: 100%;
}

.visualizer-footer {
    margin-top: auto; 
    padding-top: 20px;
    border-top: 1px solid var(--jet);
}

/* Tweak tool groups to utilize the new vertical height */
@media (min-width: 1024px) {
    .visualizer-toolbar {
        padding: 25px 20px;
        gap: 25px; /* Increased gap between tools */
    }
    
    .visualizer-toolbar .tool-group label {
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }
}

#visualizer-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: var(--onyx);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#visualizer-placeholder.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Mobile Customization Warning Logic --- */
.mobile-visualizer-msg {
  display: none; /* Hidden by default */
  width: 100%;
  margin-top: 15px;
  padding: 15px;
  background: var(--bg-gradient-jet);
  border: 1px solid var(--jet);
  border-radius: 12px;
  text-align: center;
  color: var(--light-gray70);
}

.mobile-visualizer-msg ion-icon {
  margin: 0 auto 10px;
  font-size: 24px;
  color: var(--orange-yellow-crayola);
}

.mobile-visualizer-msg p {
  font-size: var(--fs-7);
  line-height: 1.5;
}

/* Ensure the Success Modal takes up the full canvas area but stays inside the container */
#visualizer-success-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Logic for Small Phones only */
@media (max-width: 600px) {
    .mobile-visualizer-msg {
        display: block; /* Show warning only on very small screens */
    }
}

/* Layout logic for Mobile & Tablets (Up to 900px) */
@media (max-width: 900px) {
    /* 1. Reset the container to remove all padding/margins */
    .visualizer-container {
        padding: 0 !important;
    }

    /* 2. Force Modal to fixed Full Screen with NO overflow */
    .visualizer-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        background: var(--eerie-black2) !important;
    }

    /* 3. The Body must be the only part that scrolls */
    .visualizer-body {
        display: block !important; /* Stack children vertically */
        width: 100% !important;
        flex-grow: 1 !important;
        overflow-y: auto !important; /* Enable vertical scrolling */
        overflow-x: hidden !important; /* Kill horizontal bleeding */
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Reset every internal panel to 100% width */
    .visualizer-info-panel, 
    .visualizer-canvas-container, 
    .visualizer-toolbar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    /* 5. Fix the text bleed */
    .visualizer-info-panel {
        padding: 15px !important;
        border-bottom: 1px solid var(--jet) !important;
    }

    .visualizer-disclaimer {
        white-space: normal !important;
        word-wrap: break-word !important;
        width: 100% !important;
        font-size: 11px;
    }

    /* 6. Fix the Canvas sizing so it doesn't take over the whole screen */
    .visualizer-canvas-container {
        /* SURGICAL FIX: Use dynamic viewport units to handle rotation better */
        height: 60svh !important; 
        min-height: 300px;
        width: 100% !important;
        background-color: var(--onyx);
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important; 
        position: relative !important;
        touch-action: none !important; 
        border-bottom: 1px solid var(--jet);
    }

    /* Extra optimization for landscape specifically */
    @media (max-height: 500px) and (orientation: landscape) {
        .visualizer-canvas-container {
            height: 70vh !important;
        }
        .visualizer-header {
            padding: 5px 20px !important;
        }
    }

    /* Force the inner Fabric interaction container to stay centered */
    .canvas-container {
        margin: 0 auto !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-drag: none !important;
    }

    /* 7. Force the Toolbar to appear below the image */
    .visualizer-toolbar {
        padding: 20px 15px 120px !important; /* Extra bottom padding for the mobile browser bar */
        border-top: 1px solid var(--jet) !important;
        background: var(--eerie-black2) !important;
    }

    /* Make buttons and inputs easy to hit on mobile */
    .visualizer-toolbar .tool-group {
        margin-bottom: 20px !important;
    }
    
    .visualizer-toolbar label {
        display: block !important;
        margin-bottom: 8px !important;
    }
}

/* --- VISUALIZER COACH MARKS MOBILE TOGGLE --- */
@media (max-width: 900px) {
    .coach-zoom-desktop {
        display: none !important;
    }
    .coach-zoom-mobile {
        display: block !important;
    }
}

/* --- Visualizer Disclaimer Note --- */
.visualizer-note {
  border: 1px solid var(--orange-yellow-crayola);
  background: var(--bg-gradient-jet); /* Matches the card background style */
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: var(--fs-7);
  color: var(--light-gray);
  line-height: 1.5;
  box-shadow: var(--shadow1);
  animation: fade 0.3s ease-in-out;
}

/* --- Visualizer Specific Animations --- */
@keyframes laserScan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.laser-active {
    animation: laserScan 1.5s linear infinite;
}

#visualizer-coach-marks {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10006;
}