/* Permission-based UI visibility styles */
.permission-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* Smooth transitions for permission changes */
.permission-transition {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.permission-transition.permission-hidden {
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease 0.3s;
}

/* Ensure hidden elements don't take up space or respond to events */
.permission-hidden * {
    pointer-events: none !important;
    user-select: none !important;
}

/* Special handling for collapsible sections */
.collapsible-section.permission-hidden {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        max-height: 1000px;
    }
    to {
        opacity: 0;
        max-height: 0;
    }
}

/* Show animation for when permissions are granted */
.permission-show {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* Development/testing styles */
.permission-test-controls {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.test-btn {
    padding: 2px 6px;
    font-size: 10px;
    background: #444;
    color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    cursor: pointer;
}

.test-btn:hover {
    background: #555;
}