.add-content-dropdown { position: absolute; bottom: 100%; left: 0; background-color: #21212f; /* border: 0.01rem solid #444; */ border-radius: 0.35rem; box-shadow: 0 0.75rem 0.85rem rgba(0, 0, 0, 0.484); z-index: 1010; width: 13.5rem; padding: 0.3rem 0; margin-bottom: 0.75rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; } .add-content-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .add-content-dropdown ul { list-style: none; margin: 0; padding: 0; } .add-content-dropdown li { display: flex; align-items: center; padding: 0.75rem 1rem; cursor: pointer; color: #e0e0e0; font-size: 1rem; position: relative; transition: background-color 0.2s ease; } .add-content-dropdown li:hover { background-color: #15151f; border-radius: 1.35rem; } .add-content-dropdown li.selected:hover { background-color: #4caf5033; border-radius: 1.35rem; } /* Active state for items with open sub-menus */ .add-content-dropdown li.has-submenu.active { background-color: #15151f; border-radius: 1.35rem; } .add-content-dropdown .dropdown-icon { margin-right: 0.75rem; font-size: 1rem; color: #aaabb9; } .selected { background-color: #4caf501a; } .selected:hover { background-color: #4caf5033; } .menu-item-content { display: flex; align-items: center; width: 100%; } .add-content-dropdown li.has-submenu { justify-content: space-between; user-select: none; /* Prevent text selection on click */ } .add-content-dropdown .submenu-arrow { font-size: 0.8rem; color: #aaabb9; margin-left: auto; flex-shrink: 0; pointer-events: none; /* Prevent arrow from blocking clicks */ } .dropdown-icon { margin-right: 8px; } .sub-dropdown { position: absolute; left: 100%; /* Default to opening upwards for chat view */ bottom: 0; background-color: #21212f; border-radius: 0.35rem; box-shadow: 0 0.75rem 0.85rem rgba(0, 0, 0, 0.484); z-index: 1020; /* Higher than main dropdown */ width: 13.5rem; padding: 0.3rem 0; opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity 0.2s ease, transform 0.2s ease; } .sub-dropdown.open { opacity: 1; visibility: visible; transform: translateX(0); } /* Nested sub-dropdown (third level) */ .sub-dropdown .sub-dropdown { z-index: 1030; /* Higher than second level */ } .sub-dropdown li.has-submenu { justify-content: space-between; } /* Initial Chat Window */ .search-bar .add-content-dropdown { top: 100%; bottom: auto; margin-top: 0.6rem; margin-bottom: 0; box-shadow: 0 -0.75rem 1rem rgba(0, 0, 0, 0.484); transform: translateY(-10px); } .search-bar .sub-dropdown { top: 0; bottom: auto; } /* Third level sub-dropdown in search bar - open upward */ .search-bar .sub-dropdown .sub-dropdown { top: auto; bottom: 0; } .search-bar .add-content-dropdown.open { transform: translateY(0); }