/* Control cluster menu styles */

/* Specific styling for signal control buttons */
#generateBtn_sidebar,
#addOverlayBtn_sidebar {
    width: 50% !important;
    display: inline-block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    padding: 4px 8px;
    font-size: 11px;
    text-align: center;
    background: #3940a8;
    border: none;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

#generateBtn_sidebar:hover,
#addOverlayBtn_sidebar:hover {
    background: #4c55d4;
}

/* Base cluster group container ensures each button is positioning context */
.cc-group { position: relative; }

/* Override the default cc-menu button styles (desktop / wide) */
.cc-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px); /* center + small downward offset */
    background: rgba(25,25,45,0.97);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    min-width: 220px;
    padding: 12px 14px 14px;
    z-index: 1200;
    backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.12);
    animation: ccPop .16s ease;
    will-change: transform, opacity;
}

@keyframes ccPop { from { opacity:0; transform: translate(-50%, -4px) scale(.96);} to { opacity:1; transform: translate(-50%, 8px) scale(1);} }

/* Narrow viewports: anchor directly under button but keep centered when room allows */
@media (max-width: 880px) {
  .bottom-controls .cc-group { position: relative; }
  .bottom-controls .cc-menu { position: absolute; bottom: auto; top: 100%; left: 50%; right: auto; transform: translate(-50%, 8px); }
}

/* Very small screens: prevent overflow right; clamp within viewport */
@media (max-width: 520px) {
  .bottom-controls .cc-menu { max-width: 92vw; left: 50%; transform: translate(-50%, 8px); }
}

/* Force Signal and Filter menus to stay centered - highest priority */
#cc-signal-btn ~ .cc-menu,
#cc-filter-btn ~ .cc-menu {
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  right: auto !important;
}

/* Remove edge-right rule that causes unwanted right shifting */
/* .cc-group.edge-right > .cc-menu { left: auto; right: 0; transform: translate(0, 8px); } */

/* Buttons inside menu */
.cc-menu button {
    display: block;
    width: 50%;
    padding: 6px 8px;
    text-align: center;
    border: none;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    margin: 4px 0;
    background: #3940a8;
    transition: background .15s ease, transform .12s ease;
}

.cc-menu button:hover { background: #4c55d4; transform: translateY(-2px); }
.cc-menu button:active { transform: translateY(0); }