/* --- Menu Tab Styles --- */
.top-menus-wrapper {
    position: fixed; top: 5px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 20px;
    z-index: 1041; /* Above typical content/headers */
}
@keyframes colorShift {
    0% { background-color: #007bff; } 50% { background-color: #ff7700; } 100% { background-color: #007bff; }
}
.half-circle-tab {
    animation: colorShift 2s infinite alternate; width: 50px; height: 25px;
    background-color: #007bff; border-radius: 0 0 25px 25px; cursor: pointer;
    text-align: center; color: white; line-height: 25px;
    border: 1px solid #0056b3; user-select: none; position: relative;
}
.half-circle-tab.second-menu { animation: none; background-color: #007bff; border-color: #0056b3; font-size: 0; overflow: hidden; }
.half-circle-tab.second-menu .icon-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 18px; color: #f8f9fa; pointer-events: none; transition: opacity 0.3s ease;
}

/* --- IFrame Modal Styles (Peek/Fullscreen) --- */
#iframeModal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: none;
    align-items: flex-start; justify-content: center; z-index: 2147483646; /* Highest Z-index */
    background: rgba(0,0,0,0.35); transform-origin: center top; will-change: transform, opacity;
    transition: transform 250ms cubic-bezier(.2,.9,.2,1), opacity 200ms linear;
}
#iframeModalContent {
    position: relative; width: min(1100px, 94vw); height: calc(100vh - 64px);
    margin-top: 32px; display: flex; flex-direction: column; 
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
#closeModalBtn {
    height: 48px; line-height: 48px; width: 100%; border: none;
    background: #7DD2FF !important; color: #000 !important; font-weight: 700;
    text-align: center; cursor: pointer; flex: 0 0 48px; 
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
#modalIframe {
    flex: 1; /* Iframe takes remaining vertical space */
    width: 100%; border: none;
}
#iframeModal.fullscreen {
    top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
    margin: 0 !important; max-width: none !important; max-height: none !important;
    z-index: 2147483646 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: hidden !important; background: #fff !important;
}
#iframeModal.fullscreen #iframeModalContent {
    position: absolute !important; inset: 0 !important; width: 100% !important;
    height: 100% !important; border-radius: 0 !important; margin-top: 0 !important;
}

/* --- Suck Close Animation Styles --- */
._suck-clone {
    will-change: transform, opacity; position: fixed; z-index: 2147483647;
    left: 0; top: 0; transform-origin: center center; pointer-events: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    ._suck-clone { transition: none !important; }
}

/* --- Vanilla JS Menu Slide Styles (Optional if using simple open/close) --- */
.half-circle-menu, .second-menu-dropdown {
    overflow: hidden;
    transition: height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out;
}
.menu-hidden {
    display: none; height: 0 !important; padding-top: 0 !important;
    padding-bottom: 0 !important; opacity: 0;
}
.no-glow { animation: none !important; }