/* Responsive Design */
@media (max-width: 768px) {
    .top-nav {
        padding: 15px 20px;
    }
    
    .logo span {
        display: none;
    }
    
    .container {
        margin: 40px auto;
    }
    
    .card {
        padding: 20px;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .participants-grid {
        grid-template-columns: 1fr;
    }
    
    .meeting-header {
        padding: 12px 15px;
    }
    
    .meeting-info h2 {
        font-size: 16px;
    }
    
    .header-actions {
        gap: 10px;
    }
    
    .header-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .top-nav {
        padding: 12px 15px;
    }
    
    .nav-actions .btn span {
        display: none;
    }
    
    .nav-actions .btn {
        padding: 8px 12px;
    }
    
    .hero {
        margin: 30px auto 20px;
    }
    
    .hero h1 {
        font-size: 24px;
    }
    
    .email-display {
        font-size: 16px;
        padding: 8px 16px;
    }
    
    .form-container {
        padding: 20px;
    }
    
    .meeting-content {
        padding: 10px;
    }
    
    .meeting-controls {
        gap: 10px;
        padding: 10px;
    }
    
    .control-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    
    .control-btn.end-call {
        width: 50px;
        height: 50px;
    }
}

/* Print Styles */
@media print {
    .top-nav,
    .meeting-controls,
    .footer {
        display: none;
    }
    
    body {
        background: white;
    }
}