/* Prenship Meet — Phase 1 Safe Chrome
   Controls only. No video/tile/container layout rules. */

:root {
    --pm-surface: rgba(255,255,255,.97);
    --pm-line: #e2e7f0;
    --pm-ink: #26324a;
    --pm-muted: #6d7890;
    --pm-purple: #5a42d8;
    --pm-purple-soft: #eeeaff;
    --pm-red: #ef4f5b;
    --pm-shadow: 0 12px 32px rgba(23,31,49,.14);
}

/* Keep the vendor's own placement and display behavior intact. */
#actionButtons {
    padding: 10px 14px !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: 18px !important;
    background: var(--pm-surface) !important;
    box-shadow: var(--pm-shadow) !important;
}

#actionButtons button {
    border-radius: 12px !important;
    color: var(--pm-ink) !important;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

#actionButtons button:hover {
    color: var(--pm-purple) !important;
    background: var(--pm-purple-soft) !important;
    transform: translateY(-1px);
}

/* Preserve the real existing handlers; this is color only. */
#exitButton {
    color: #fff !important;
    background: var(--pm-red) !important;
    border-radius: 12px !important;
}

#startAudioButton,
#stopAudioButton,
#startVideoButton,
#stopVideoButton,
#startScreenButton,
#stopScreenButton {
    color: var(--pm-purple) !important;
}

@media (max-width: 680px) {
    #actionButtons {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }
}