@import url("./style/blockly.css");
@import url("./ui/colourpicker.css");

:root {
  /* Primary Brand Colors */
  --color-primary: #511D91;
  --color-primary-light: #fc3;
  --color-primary-dark: #004d4d;

  /* Background Colors */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.1);
  --color-bg-glass: rgba(1, 1, 1, 0.5);
  --color-bg-glass-light: rgba(255, 255, 255, 0.5);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.7);
  --color-bg-glass-focused: rgba(255, 255, 255, 0.9);

  /* Button Colors */
  --color-button-bg: #e0e0e0;
  --color-button-bg-hover: #d0d0d0; 
  --color-button-primary: #004d4d;
  --color-button-scroll: rgba(76, 76, 76, 0.5);

  /* Text Colors */
  --color-text-primary: #000000;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #511D91;
  --color-text-loading: #511D91;

  /* Border Colors */
  --color-border: #ddd;
  --color-border-light: #eee;

  /* Loading Screen Colors */
  --color-loading-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511D91;

  /* Focus Colors */
  --color-focus: #fc3;
  --color-focus-ring: #511D91;

  /* Menu Colors */
  --color-menu-hover: #f0f0f0;
  --color-menu-item: #511D91;
  --color-menu:  #f9f9f9;
  --color-button-bg:  #f0f0f0;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);
}

/* Dark theme */
[data-theme="dark"] {
  /* Core colours */
  --color-bg:                        #1e1e1e;
  --color-bg-alt:                    #2a2a2a;
  --color-text:                      #000000;
  --color-text-primary: #888888;
  --color-primary:                   #888888;
   --color-text-brand:  #888888;
  --color-menu-item:  #888888;
  --color-muted:                     #555555;
  --color-border:                    #555555;
  --color-border-light:              #333333;
  --color-border-highlight:          #555555;
  --color-search-highlight:          #777777;
  --color-shadow:                    rgba(0, 0, 0, 0.7);
  --color-shadow-light:              rgba(0, 0, 0, 0.5);
  --color-shadow-medium:             rgba(0, 0, 0, 0.7);
  --color-outline-focus:             #ffb700;
  --color-focus-ring:                #ffb700;

  /* Buttons */
  --color-button-bg:                 var(--color-bg-alt);
  --color-button-bg-hover:           #333333;
  --color-button-bg-focus:           #444444;

  
  --color-text-on-primary:  #444444;

  /* Loading screen gradient */
  --color-loading-gradient-start:    var(--color-bg);
  --color-loading-gradient-end:      var(--color-bg-alt);

  /* Spinner */
  --color-spinner-border:            var(--color-muted);
  --color-spinner-border-top:        var(--color-primary);

  /* Dropdown & menus */
  --color-dropdown-text:        var(--color-text);
  --color-menu-item-text:       var(--color-text);
  --color-dropdown-menu-bg:     var(--color-bg);
  --color-dropdown-menu-hover:  rgba(0, 0, 0, 0.05);
  --color-dropdown-menu-border: var(--color-dropdown-menu-border, 1px solid rgba(0,0,0,0.1));

  --color-dropdown-bg:               #333333;
  --color-dropdown-hover:            #555555;
 
  --color-menu-hover:                var(--color-dropdown-hover);
  --color-menu-item-hover:           #444444;

  /* Overlays */
  --color-overlay:                   rgba(0, 0, 0, 0.7);
  --color-overlay-light:             rgba(0, 0, 0, 0.5);
  --color-overlay-modal:             rgba(0, 0, 0, 0.4);

  /* Scroll buttons */
  --color-scroll-button-bg:          rgba(0, 0, 0, 0.5);
}


/* High‑contrast theme */
[data-theme="contrast"] {
  /* Primary Brand Colors */
  --color-primary: #511D91;
  --color-primary-light: #fc3;
  --color-primary-dark: #004d4d;

  /* Background Colors */
  --color-bg: #ffffff;
  --color-text: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.1);
  --color-bg-glass: rgba(1, 1, 1, 0.5);
  --color-bg-glass-light: rgba(255, 255, 255, 0.5);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.7);
  --color-bg-glass-focused: rgba(255, 255, 255, 0.9);

  /* Button Colors */
  --color-button-bg: #e0e0e0;
  --color-button-bg-hover: #d0d0d0;
  --color-button-primary: #004d4d;
  --color-button-scroll: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --color-text-primary: #000000;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #511D91;
  --color-text-loading: #511D91;

  /* Border Colors */
  --color-border: #ddd;
  --color-border-light: #eee;

  /* Loading Screen Colors */
  --color-loading-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511D91;

  /* Focus Colors */
  --color-focus: #fc3;
  --color-focus-ring: #511D91;

  /* Menu Colors */
  --color-menu-hover: #f0f0f0;
  --color-menu-item: #511D91;
  --color-menu:  #f9f9f9;
  --color-button-bg:  #f0f0f0;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);
}

#info-panel {
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
} 


/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-loading-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-bird {
  width: 120px !important;
  height: 120px !important;
  max-width: 120px;
  max-height: 120px;
  animation: float 2s ease-in-out infinite;
  display: block;
  order: 1;
}

.loading-logo {
  width: 200px;
  height: auto;
  margin: 10px 0;
  order: 2;
  opacity: 0;
  animation: fadeInLogo 0.5s ease-in 0.3s forwards;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-loading-spinner);
  border-top: 4px solid var(--color-loading-spinner-active);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  order: 3;
}

.loading-text {
  color: var(--color-text-loading);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  font-family:  "Atkinson Hyperlegible Next", "Asap", Helvetica, Arial, Lucida, sans-serif;
  order: 4;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

/* Hide main content by default - more aggressive for deployment */
#flockeditor {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
  visibility: hidden;
}

/* Show main content when loading is complete */
body:not(.loading) #flockeditor {
  opacity: 1 !important;
  pointer-events: auto;
  visibility: visible;
}

/* Global Styles */
html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  height: 100vh;
  width: 100vw;
}

body {
  display: flex;
  gap: 0;
  box-sizing: border-box;
  font-family:  "Atkinson Hyperlegible Next", "Asap", Helvetica, Arial, Lucida, sans-serif !important;
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* Form Elements */
input,
textarea,
button {
  font-family: inherit;
  -webkit-user-select: none; /* Disable selection in Safari and Chrome */
  -moz-user-select: none; /* Disable selection in Firefox */
  -ms-user-select: none; /* Disable selection in IE/Edge */
  user-select: none; /* Standard syntax */
  -webkit-touch-callout: none; /* Disable callout in mobile Safari */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* Canvas Styles */
#renderCanvas {
  width: 100%;
  height: auto;
  touch-action: none;
  box-sizing: border-box; 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

/* Layout Styles */
#maincontent {
  width: 100vw;
  height: calc(100vh - 50px);
  display: flex;
  margin: 0;
  gap: 0;
  box-sizing: border-box; 
  overflow-x: hidden; 
}

#canvasArea {
  position: relative;
  background-color: #f3f3f3;
}

#menu {
  display: flex;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
  gap: 5px;
  z-index: 10;
  background-color: var(--color-bg);
  padding: 0px 4px 2px 0;
  border-radius: 5px;
  box-shadow: 0px 0px 10px var(--color-shadow);
  box-sizing: border-box;
}

#menuleft,
#menumiddle,
#menuright {
  display: flex;
  align-items: center;
}

#codePanelButtons {
  display: flex;
  height: 50px;
  justify-content: space-between;
  flex-shrink: 0;
  border: none;
}

/* Buttons */
.bigbutton {
  display: inline-block;
  margin: 0 0;
  margin-left: 3px;
  padding: 4px;
  font-size: 18px;
  min-height:30px;
  background-color: var(--color-button-bg);
  color: var(--color-text-primary);
  border: none;
  border-radius: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

.bigbutton:hover {
  background-color: var(--color-button-bg-hover);
}

/* Gizmo Buttons */
.gizmo-buttons {
  font-family: "Atkinson Hyperlegible Next", "Asap", Helvetica, Arial, Lucida, sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.gizmo-button {
  font-family: "Atkinson Hyperlegible Next", "Asap", Helvetica, Arial, Lucida, sans-serif;
  padding: 5px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  background-color: var(--color-button-primary);
 
}

.gizmo-button img {
  filter: none; /* light mode: normal */
}

#colorPickerButton img {
  filter: invert(1) brightness(2); /* Make palette icon white */
}

[data-theme="dark"] #colorPickerButton img {
  filter: invert(1) brightness(2) invert(30%) sepia(2%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(85%);
}

.bigbutton svg {
  filter: none; /* light mode: normal */
}


[data-theme="dark"] .gizmo-button img {
  filter: invert(30%) sepia(2%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(85%);
}

[data-theme="dark"] .bigbutton svg {
  filter: invert(30%) sepia(2%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(85%);
}


/* Shape Menu */
#shape-menu {
  position: relative;
  display: inline-block;
  z-index: 80;
}

#shapes-dropdown {
  position: absolute;
  bottom: -50px;
  left: 0;
  display: block;
  background-color: var(--color-bg-glass);
  padding: 10px 10px 10px 5px;
  box-shadow: 0px 4px 8px var(--color-shadow-medium);
  border-radius: 5px;
  overflow: hidden;
}

#shapes-dropdown ul {
  display: flex;
  padding: 0;
  margin: 2px;
  list-style: none;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none;
}

#shapes-dropdown ul::-webkit-scrollbar {
  display: none;
}

#shapes-dropdown ul li {
  background-color: var(--color-bg-glass-light);
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}

#shapes-dropdown ul li img {
  width: 50px;
  height: 50px;
}

#shapes-dropdown ul li:hover {
  background-color: var(--color-bg-glass-hover);
}

#shapes-dropdown ul li:hover img {
  transform: scale(1.2);
}

/* Keyboard navigation styles */
#shapes-dropdown ul li.keyboard-navigable {
  outline: none;
}

#shapes-dropdown ul li.keyboard-focused {
  background-color: var(--color-bg-glass-focused);
  box-shadow: 0 0 0 2px #007acc;
  border-radius: 5px;
}

#shapes-dropdown ul li.keyboard-focused img {
  transform: scale(1.2);
}

/* Scrollable Container with Arrows */
.scrollable-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 340px;
}

#model-row {
  overflow-x: hidden;
  white-space: nowrap;
  flex-grow: 1;
  display: flex;
  gap: 10px;
}

.scroll-button {
  background-color: var(--color-button-scroll);
  color: var(--color-text-on-primary);
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 5px 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
}

.scroll-button.left {
  left: -15px;
}

.scroll-button.right {
  right: -15px;
}


#site-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.3em;
  background: transparent;
  width: auto;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#flocklink {
  background: transparent;
}

#flocklink img {
   height: 15px;
}
@media (max-width: 768px) {

  #maincontent {
  width: 200vw;
  height: calc(100vh - var(--dynamic-offset));
  overflow-x: auto;
  }

  #scene-explorer-host,
  #inspector-host,
  #toggleDesign {
  display: none !important;
  }

  #codePanel,
  #canvasArea {
  flex-basis: 100vw;
  max-width: 100vw;
  height: calc(100vh - var(--dynamic-offset));
  flex-grow: 1;
  }

  #bottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 30px;
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  text-align: center;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 2px;
     z-index: 1000;
  }

  #switchViews {
  background-color: transparent;
  border: none;
  color: var(--color-text-on-primary);
  padding: 5px 10px;
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  }
}

@media only screen and (orientation: landscape) and (max-width: 768px) {
  #info-panel {
      display: none;
  }

  #site-footer {
  padding-bottom: 18px;
      padding-right: 8px;
    }

  .resizer {
      display: none;
  }
}

@media only screen and (orientation: portrait) and (max-width: 768px) {
  #info-panel {
      display: block;
  }

  #site-footer {
  padding-bottom: 18px;
      padding-right: 8px;
    }

  .resizer {
      display: none;
  }
}

@media (min-width: 769px) {

  #bottomBar {
    display: none !important;
  }

  #maincontent {
    display: flex;
  }
  
  #canvasArea, #codePanel {
      flex: 1 1 0;  /* grow, shrink, basis */
      width: 0; /* Forces flex to calculate based on flex-grow */
  }

  #canvasArea {
    min-width: 300px;
  }

  #blocklyDiv {
    width: 100% !important;
    height: 100% !important;
    position: relative;
  }

  #codePanel {
    overflow: hidden; /* Prevents content from spilling out */
  }
  
  .resizer {
      width: 8px;
      background-color: #aaa;
      cursor: col-resize;
      position: relative;
      transition: background-color 0.2s ease;
      display: none; /* Hidden by default for mobile */
    flex-shrink: 0;
  }

  .resizer:hover {
      background-color: var(--color-focus);
  }

  .resizer:active {
      background-color:var(--color-focus);
  }

  .resizer:focus{
      background-color:var(--color-focus);
    outline: 3px solid var(--color-focus);

  }


  .resizer:hover {
     /*width: 20px; Hover expansion */
  }

  .resizer::before {
    height: 60px; /* Taller grip indicator */
    width: 6px;   /* Thicker grip */
  }

  .resizer::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 3px;
      height: 30px;
      background-color: #999;
      border-radius: 2px;
  }

  .resizer {
      display: block;
  }
}

/* Logo */
#logo {
  width: 32px;
  height: auto;
  flex-shrink: 0;
  margin-right: 2px;
  padding-left: 2px;
}

/* Project Name Input */
#projectName {
  margin: 0 8px !important;
  padding: 8px !important;
}

/* Custom Category */
.custom-category img {
  margin-bottom: 5px;
}

.custom-category div {
  text-align: center;
}

/* menu and project name styling for mobile screens */
#menuBtn {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
  }
    .mobile-only {
    display: inline-block;
  }

/* Dropdown menu styling */
/* menu wrapper styling */
#main-menu {
  position: relative;
  display: inline-block;
}

#main-menu li {
  list-style-type: none; /* Remove bullets */
  padding: 0; 
  margin: 0; 
}

  #main-menu ul {
    padding: 0; 
    margin: 0; 
  }

/* Dropdown Styles */

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content button {
  font-size: 1em;
}

.dropdown {
  position: absolute;
   min-width: 200px;
  top: 100%; /* Below the button */
  right: 10;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.5em;
  box-shadow: 0 4px 6px var(--color-shadow);
  z-index: 1000;
}

.dropdown a {
  display: block;
  color: var(--color-text-brand);
  text-decoration: none;
  padding: 0.5em 1em;
}

.dropdown a:hover {
  background-color: var(--color-menu-hover);
}

/* Modal styles */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: var(--color-bg-overlay);
}

.modal-content {
  background-color: var(--color-bg);
  padding: 1.5em;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
}

.hidden {
  display: none;
}

.close-button {
  float: right;
  font-size: 1.25em;
  cursor: pointer;
}

@media (max-width: 768px) {
  #projectName {
    display: none; /* hid the project name input box for mobile screens*/
  }
}

  #info-panel-toggle {
    display: none; /* Hide the inline Show Info button */
  }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Enhanced focus indicators */
      button:focus,
      input:focus,
      select:focus,
      .gizmo-button:focus,
details summary:focus,
#menuDropdown [role="menuitem"]:focus
      {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
        z-index: 20;
      }

#info-details table td:first-child {
  min-width: 100px;
  white-space: nowrap;
}

      /* High contrast focus for better visibility */
      .bigbutton:focus {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
        background-color: var(--color-button-bg-hover);
      }

#renderCanvas:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  background-color: var(--color-button-bg-hover);
}

      /* Focus management for modal */
      .modal:focus-within .modal-content {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: -2px;
      }

      /* Ensure interactive elements have proper focus order */
      [tabindex="-1"] {
        outline: none;
      }

      /* Flock XR logo link focus styling */
      #info-panel-link:focus {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 5px var(--color-focus);
        border-radius: 4px;
      }

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.bigbutton .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
}

.bigbutton .icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--color-text-brand);
}

.menu-icon svg {
  fill: var(--color-text-brand);
}

.menu-item[aria-haspopup="true"]::after {
    content: "▶";
    color: var(--color-text-brand);
    font-size: 14px;
    margin-left: auto;
}

#examples {
  min-width: 100px;
  flex-grow: 1;
  margin-right: 10px;
}

.menu-item, #menuDropdown [role="menuitem"] {
  display: flex !important;
  align-items: center;
  padding: 8px 12px;
  display: flex;           
  align-items: center;     
  justify-content: flex-start;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  cursor: pointer;
  color: var(--color-menu-item);
}

.menu-item:hover {
  background-color: var(--color-menu-hover);
}

.menu-icon {
  width: 2em;
  min-width: 2em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 8px;
  flex-shrink: 0;
}
.menu-icon svg {
  width: 1.2em;
  height: 1.2em;
  display: block;
  fill: var(--color-text-brand);
}
.menu-label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}
.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px var(--color-shadow);
  min-width: 120px;
  z-index: 1001;
}
.menu-item:hover > .submenu,
.menu-item:focus-within > .submenu {
  display: block;
}
.submenu a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
}
.submenu a:hover {
  background-color: var(--color-menu-hover);
}
.submenu a:last-child {
  border-bottom: none;
}

#shape-row button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}


/* Exactly 5 columns wide, matching your asymmetric inner padding */
#shapes-dropdown {
  /* 5 * 60px tiles + 4 * 8px gaps + left 5px + right 10px padding */
  width: calc(5 * 60px + 4 * 8px + 5px + 10px);
  box-sizing: border-box;
  overflow: visible;
}

/* Force grid (override earlier flex rules) and remove extra ul padding */
#shapes-dropdown > ul {
  display: grid !important;
  grid-template-columns: repeat(5, 60px);
  gap: 8px;
  overflow: visible !important; /* override old scrollbar-hiding rule */
  list-style: none;
}


