/* Desktop & Mobile Toggle Buttons - Seamlessly Attached Tab Design v2 */

/* === Base Toggle Style === */
.mobile-toggle {
    position: fixed;
    z-index: 101;
    background: var(--paper-color, white);
    color: var(--secondary, #64748b);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.2s ease,
        color 0.2s ease;
}

.mobile-toggle ion-icon {
    font-size: 18px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.mobile-toggle:hover {
    background: #f1f5f9;
    color: var(--primary, #f97316);
}

/* ============================================
   SIDEBAR TOGGLE (Left) 
   ============================================ */
.sidebar-toggle {
    /* When CLOSED - at screen edge */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 65px;
    border-radius: 0 10px 10px 0;
    /* Only borders on non-attached sides */
    border: 1px solid var(--border, #e2e8f0);
    border-left: none;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* Arrow points LEFT when closed (← showing toolbar will come from left) */
.sidebar-toggle ion-icon {
    transform: rotate(180deg);
}

/* When OPEN - visible outside toolbar edge */
body.sidebar-open .sidebar-toggle {
    /* Move more to the right so it's visible */
    left: 90px;
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* Arrow points RIGHT when open (→ to close/go back) */
body.sidebar-open .sidebar-toggle ion-icon {
    transform: rotate(0deg);
}

body.sidebar-open .sidebar-toggle:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* ============================================
   PROPERTIES TOGGLE (Bottom) 
   ============================================ */
.properties-toggle {
    /* When CLOSED - at screen bottom */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 28px;
    border-radius: 10px 10px 0 0;
    border: 1px solid var(--border, #e2e8f0);
    border-bottom: none;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06);
}

/* Arrow points UP when closed */
.properties-toggle ion-icon {
    transform: rotate(0deg);
}

/* When OPEN - visible above toolbar */
body.properties-open .properties-toggle {
    /* Move higher so it's visible */
    bottom: 70px;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06);
}

/* Arrow points DOWN when open */
body.properties-open .properties-toggle ion-icon {
    transform: rotate(180deg);
}

body.properties-open .properties-toggle:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* ============================================
   Mobile Adjustments
   ============================================ */
@media (max-width: 768px) {
    .sidebar-toggle {
        top: 140px;
        width: 18px;
        height: 44px;
    }

    .properties-toggle {
        width: 44px;
        height: 18px;
    }

    body.sidebar-open .sidebar-toggle {
        left: 64px;
    }

    body.properties-open .properties-toggle {
        bottom: 62px;
    }
}

/* ============================================
   Desktop Toolbar Show States
   ============================================ */
@media (min-width: 769px) {
    .main-toolbar.show {
        transform: translateX(20px) !important;
        opacity: 1 !important;
    }

    .properties-bar.show {
        transform: translateY(0) translateX(-50%) !important;
        opacity: 1 !important;
    }
}