:not(:defined) > * {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base layout for HTML and body */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent body scroll when drawer is fixed */
}

/* Flex container for desktop layout */
.main-content-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Desktop styles for controls (side panel) */
.controls {
  width: 20%;
  height: 100%; /* Takes full height on desktop */
  background: #f8f8f8; /* Light background */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally within controls */
  justify-content: flex-start; /* Align items to the top (default for column) */
  padding: 20px;
  border-right: 1px solid #ccc; /* Added a border */
  overflow-y: auto; /* Allow scrolling for content if it overflows */
  transition: transform 0.3s ease-in-out; /* Smooth transition for desktop width changes if any */
}

/* Desktop styles for mobile handle (hidden on desktop) */
#mobile-drawer-handle {
    display: none; /* Hidden by default on desktop */
}

/* Desktop styles for model viewer */
.model-viewer {
  width: 80%;
  height: 100%;
  background: #e0e0e0; /* Placeholder background */
  display: flex;
  flex-direction: column;
}

/* Loader styles */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  
  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; /* Ensure loader is above content */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* AR Button styles */
#ar-button {
  background-image: url(ar_icon.png); /* Ensure this path is correct */
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 12px 50%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  bottom: 16px;
  padding: 0px 16px 0px 40px;
  font-family: Roboto Regular, Helvetica Neue, sans-serif;
  font-size: 14px;
  color:#4285f4;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #DADCE0;
  z-index: 10; /* Ensure AR button is above model */
}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

/* Accordion styles */
.accordion {
  width: 100%; 
  margin-bottom: 15px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  overflow: hidden;
  border-radius: 8px;
  display: flex; /* Make accordion a flex container */
  flex-direction: column; /* Stack header and panel vertically */
  flex-shrink: 0; /* Prevent accordions from shrinking when others open on desktop */
}

.accordion-header {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  background: #ddd;
  font-weight: bold;
  border-radius: 8px;
  flex-shrink: 0; /* Prevent header from shrinking */
}

.accordion-header img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-panel.open {
  max-height: 300px; /* Default desktop max height */
  overflow-y: auto;
}
.accordion-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  background: white;
}
.accordion-item:hover {
  background-color: #f0f0f0;
}
.accordion-item img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

/* Button styles */
.button {
  padding: 10px;
  width: 200px;
  height: 50px;
  border-radius: 8px;
  background-color: rgb(0, 149, 255);
  color: white;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  border: none;
  margin-bottom: 15px;
}

.button:hover {
  background-color: rgb(0, 99, 153);
}

/* Toast/Snackbar message styles */
.toast-message {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-family: sans-serif;
}
.toast-message.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} }
@-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }
@keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

/* Core Logo Styling (Flexbox based) */
.controls.glass img.core-logo {
    display: block; 
    margin-top: auto; /* Pushes the item to the bottom of the flex container */
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
    width: 100%;
    padding-bottom: 20px; /* Add some padding at the bottom for spacing */
}

/* --- OVERLAY FOR CLICK-OUTSIDE-TO-CLOSE --- */
#drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 40; /* Below drawer, above model-viewer */
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Fully transparent by default */
    transition: opacity 0.3s ease-in-out, visibility 0.3s; /* Smooth fade */
}
#drawer-overlay.visible {
    visibility: visible;
    opacity: 1;
}

/* --- MOBILE SPECIFIC STYLES --- */
@media screen and (max-width: 1200px) {
    html, body {
        display: block;
    }

    .main-content-wrapper {
        flex-direction: column;
        height: auto;
    }

    .model-viewer {
        width: 100%;
        height: calc(100vh - 50px); /* Account for the 50px handle height */
    }

    .controls {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px; /* Closed handle height */
        max-height: 90vh; /* Max height when open */
        padding: 0; /* No padding when closed */
        overflow-y: hidden; /* Hide overflow when closed */
        transform: translateY(calc(100% - 50px)); /* Hide most of the drawer, show 50px handle */
        transition: transform 0.3s ease-in-out;
        background: rgba(248, 248, 248, 0.95);
        border-top: 1px solid #ccc;
        border-right: none;
        z-index: 50;

        display: flex;
        flex-direction: column;
        align-items: center; /* Center contents horizontally */
    }

    .controls.mobile-open {
        height: 90vh; /* When open, take 90% of viewport height */
        transform: translateY(0); /* Slide up to fully visible */
        padding: 10px; /* Add padding back when open */
        overflow-y: auto; /* Allow scrolling when open */
    }

    /* Mobile Drawer Handle - visible on mobile, always at the top of the drawer */
    #mobile-drawer-handle {
        display: block;
        width: 100%;
        height: 50px; /* Handle height */
        background: rgb(0, 149, 255);
        text-align: center;
        cursor: pointer;
        line-height: 50px; /* Vertical centering text */
        font-weight: bold;
        color: #333;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1; 
        color: #FFF;
    }
    
    /* A subtle indicator for the handle on mobile, if desired (e.g., a line) */
    #mobile-drawer-handle::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background-color: #999;
        border-radius: 2px;
        margin: 5px auto 0 auto;
    }
    
    /* Adjust internal elements of controls for mobile */
    .controls .accordion,
    .controls .button,
    .controls .core-logo {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px; /* Your working solution for spacing */
    }
    
    /* NEW: Mobile-only accordion behavior: active panel fills space */
    .controls.mobile-open .accordion {
        flex-grow: 0; /* By default, prevent accordions from growing when open */
        flex-shrink: 0; /* Prevent accordions from shrinking too much */
    }

    .controls.mobile-open .accordion.open {
        flex-grow: 1; /* Allow the *open* accordion to grow and fill available space */
        display: flex; /* Make the open accordion a flex container too */
        flex-direction: column; /* Stack its header and panel vertically */
    }

    .controls.mobile-open .accordion.open .accordion-panel {
        max-height: none; /* Remove fixed max-height */
        flex-grow: 1; /* Allow the panel to fill remaining space */
        overflow-y: auto; /* Ensure scrolling within the panel */
    }

    /* PUSH DOWN THE FIRST ACCORDION TO AVOID OVERLAPPING THE HANDLE */
    .controls:not(.mobile-open) .accordion:first-of-type {
         margin-top: calc(50px + 10px); /* Handle height (50px) + your existing margin-top (10px) */
    }
    
    /* When the drawer is fully open, remove the extra top margin from the first accordion */
    .controls.mobile-open .accordion:first-of-type {
         margin-top: 10px; /* Reset to just the standard 10px top margin when open */
    }

    .controls .core-logo {
        padding-bottom: 0; 
        margin-bottom: 20px; 
    }
}