/* Lesson Room - Modern Compact Fullscreen Experience */

/* CSS Variables for easy theming */
:root {
    --primary-color: #820c22;
    --primary-light: #a01533;
    --accent-color: #fac40d;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --dark-bg: #0f0f0f;
    --header-bg: rgba(20, 20, 20, 0.95);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(0, 0, 0, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Reset and Fullscreen Layout */
.lesson-room-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--dark-bg);
    display: flex;
    flex-direction: column;
    z-index: 999999;
    overflow: hidden;
}

/* Compact Modern Header */
.lesson-room-header {
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    z-index: 10;
}

.lesson-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.lesson-info h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Inline lesson meta */
.lesson-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--glass-border);
}

.meta-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.meta-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trial-badge {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}

.obs-badge {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}

.lesson-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(39, 174, 96, 0.15);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.status-indicator.warning {
    background: rgba(243, 156, 18, 0.16);
    border-color: rgba(243, 156, 18, 0.45);
    color: #f39c12;
}

.status-indicator.error {
    background: rgba(231, 76, 60, 0.16);
    border-color: rgba(231, 76, 60, 0.45);
    color: #e74c3c;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--success-color);
}

.status-indicator.warning .status-dot {
    background: #f39c12;
    box-shadow: 0 0 8px #f39c12;
}

.status-indicator.error .status-dot {
    background: #e74c3c;
    box-shadow: 0 0 8px #e74c3c;
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

.meeting-timer {
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    border: 1px solid var(--glass-border);
    min-width: 80px;
    text-align: center;
}

/* Lesson Countdown Timer - centered in header */
.lesson-countdown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 18px;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    direction: rtl;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    z-index: 10;
}

.lesson-countdown .countdown-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.lesson-countdown .countdown-time {
    font-size: 1.05rem;
    font-weight: 700;
    min-width: 45px;
    text-align: center;
}

/* Waiting state - red (before lesson start) */
.lesson-countdown.countdown-waiting {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.5);
    color: #ff4444;
    animation: countdownPulse 2s ease-in-out infinite;
}

.lesson-countdown.countdown-waiting .countdown-time {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
}

/* Active state - green (lesson in progress) */
.lesson-countdown.countdown-active {
    background: rgba(39, 174, 96, 0.15);
    border-color: rgba(39, 174, 96, 0.5);
    color: #4CAF50;
}

.lesson-countdown.countdown-active .countdown-time {
    color: #4CAF50;
    text-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

/* Ended state - red with message */
.lesson-countdown.countdown-ended {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.7);
    color: #ff4444;
    font-size: 0.8rem;
    animation: countdownEndedPulse 1.5s ease-in-out infinite;
}

.lesson-countdown.countdown-ended .countdown-label {
    font-size: 0.8rem;
}

.lesson-countdown.countdown-ended .countdown-time {
    display: none;
}

@keyframes countdownPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(231, 76, 60, 0.2);
    }
    50% {
        box-shadow: 0 0 16px rgba(231, 76, 60, 0.5);
    }
}

@keyframes countdownEndedPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.75;
    }
}

@media (max-width: 768px) {
    .lesson-countdown {
        padding: 4px 10px;
        font-size: 0.8rem;
        gap: 4px;
        border-radius: 16px;
    }

    .lesson-countdown .countdown-label {
        font-size: 0.68rem;
    }

    .lesson-countdown .countdown-time {
        font-size: 0.85rem;
        min-width: 36px;
    }

    .lesson-countdown.countdown-ended {
        font-size: 0.72rem;
    }

    .lesson-countdown.countdown-ended .countdown-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .lesson-countdown {
        padding: 3px 8px;
        font-size: 0.72rem;
        gap: 3px;
        border-radius: 14px;
    }

    .lesson-countdown .countdown-label {
        font-size: 0.62rem;
    }

    .lesson-countdown .countdown-time {
        font-size: 0.78rem;
        min-width: 32px;
    }

    .lesson-countdown.countdown-ended {
        font-size: 0.65rem;
    }
}

/* Video Container */
.lesson-video-container {
    flex: 1;
    position: relative;
    background: var(--dark-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-content {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.video-content video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain - shows full camera without cropping */
    object-position: center center;
    background-color: #000;
}

#virtual-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
}

.default-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 40px rgba(130, 12, 34, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.1);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.avatar-icon {
    font-size: 2.5rem;
    color: white;
}

.default-avatar h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.default-avatar p {
    margin: 0;
    opacity: 0.6;
    font-size: 0.95rem;
}

/* Modern Meeting Controls */
.meeting-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: 14px 20px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--glass-border);
    z-index: 30;
}

.control-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.control-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.control-btn:hover::before {
    opacity: 1;
}

.control-btn:active {
    transform: translateY(0) scale(0.95);
}

.control-icon {
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Active states with glow */
.mic-btn.active,
.mic-btn:not(.active) {
    background: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
}

.mic-btn:not(.active) {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

.mic-btn:hover {
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.camera-btn.active,
.camera-btn:not(.active) {
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.5);
}

.camera-btn:not(.active) {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

.camera-btn:hover {
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
}

.screen-btn.active {
    background: rgba(255, 152, 0, 0.3);
    border-color: rgba(255, 152, 0, 0.7);
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.5);
}

.screen-btn:hover {
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4);
}

.whiteboard-btn {
    background: rgba(130, 12, 34, 0.2);
    border-color: rgba(130, 12, 34, 0.5);
}

.whiteboard-btn:hover {
    background: rgba(130, 12, 34, 0.4);
    box-shadow: 0 4px 16px rgba(130, 12, 34, 0.5);
}

.celebration-btn {
    background: rgba(233, 30, 99, 0.2);
    border-color: rgba(233, 30, 99, 0.5);
}

.celebration-btn:hover {
    background: rgba(233, 30, 99, 0.4);
    box-shadow: 0 4px 16px rgba(233, 30, 99, 0.5);
}

.leave-btn {
    background: rgb(0 0 0 / 56%);
    border-color: rgba(244, 67, 54, 0.6);
}

.leave-btn:hover {
    background: rgba(244, 67, 54, 0.5);
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.6);
    transform: translateY(-2px) scale(1.05);
}

/* Video Grid for Multiple Participants.
   grid-template-columns is set inline by JS (updateVideoGrid);
   grid-auto-rows fills rows evenly across the available height. */
.video-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 4px;
    padding: 4px;
    background: var(--dark-bg);
    z-index: 1;
    grid-auto-rows: 1fr;
}

/* Mirror local user's own video (feels natural like a mirror),
   others see the stream normally */
.participant-tile.local-mirror video {
    transform: scaleX(-1);
}

/* Participant Tile */
.participant-tile {
    position: relative;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.participant-tile video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain - shows full camera without cropping */
    object-position: center center;
    background-color: #000;
}

.participant-tile .participant-name {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: white;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.participant-tile .participant-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.participant-tile .participant-avatar .avatar-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(130, 12, 34, 0.5);
}

.participant-tile .participant-avatar .avatar-icon {
    font-size: 1.5rem;
}

.participant-tile .participant-avatar .avatar-name {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Video off state for participant tile */
.participant-tile.video-off video {
    display: none;
}

.participant-tile.video-off .participant-avatar {
    display: flex;
}

.participant-tile:not(.video-off) .participant-avatar {
    display: none;
}

/* ============================================================
   Mic / Camera Status Badges  —  top-left corner of every tile
   ============================================================ */
.tile-status-bar {
    position: absolute;
    top: 7px;
    left: 7px;
    display: flex;
    gap: 5px;
    z-index: 10;
    pointer-events: none;
}

/* Each badge is a small pill */
.tile-mic-badge,
.tile-cam-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, border-color 0.2s ease;
    font-size: 12px;
    line-height: 1;
}

/* Icon visibility: show "on" icon by default, hide "off" icon */
.tile-badge-icon { display: none; }
.tile-mic-badge .tile-mic-on  { display: block; }
.tile-mic-badge .tile-mic-off { display: none;  }
.tile-cam-badge .tile-cam-on  { display: block; }
.tile-cam-badge .tile-cam-off { display: none;  }

/* Active (unmuted) — soft green ring */
.tile-mic-badge:not(.muted),
.tile-cam-badge:not(.muted) {
    border-color: rgba(39, 174, 96, 0.7);
    background: rgba(39, 174, 96, 0.18);
}

/* MUTED state — swap icons, red ring + pulse */
.tile-mic-badge.muted .tile-mic-on  { display: none;  }
.tile-mic-badge.muted .tile-mic-off { display: block; }
.tile-cam-badge.muted .tile-cam-on  { display: none;  }
.tile-cam-badge.muted .tile-cam-off { display: block; }

.tile-mic-badge.muted,
.tile-cam-badge.muted {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.85);
    animation: muted-pulse 1.8s ease-in-out infinite;
}

@keyframes muted-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(231, 76, 60, 0.5); }
    50%       { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0);   }
}

/* Smaller badges in whiteboard / screenshare sidebars */
.whiteboard-participants-sidebar .tile-status-bar,
.screenshare-participants-sidebar .tile-status-bar {
    gap: 3px;
    top: 4px;
    left: 4px;
}
.whiteboard-participants-sidebar .tile-mic-badge,
.whiteboard-participants-sidebar .tile-cam-badge,
.screenshare-participants-sidebar .tile-mic-badge,
.screenshare-participants-sidebar .tile-cam-badge {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Virtual background canvas inside participant tile */
.participant-tile #virtual-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: #000;
    z-index: 1;
    border-radius: 8px;
    will-change: transform;
    image-rendering: auto;
}

/* Participant tile video element when VB is active — promote to its own GPU layer
   so the WebGL compositing output is drawn without extra canvas-to-screen blit artifacts */
.participant-tile.vb-active video {
    will-change: contents;
}

/* Hide video-grid when empty */
.video-grid:empty,
.video-grid[data-count="0"] {
    display: none;
}

/* Pagination navigation bar.
   bottom = controls height (96px) + 10px gap = 106px */
.video-pagination {
    position: absolute;
    bottom: 106px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.65);
    padding: 6px 18px;
    border-radius: 24px;
    z-index: 10;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    pointer-events: all;
}

.page-nav-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s;
    padding: 0;
}

.page-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.7);
}

.page-nav-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.page-indicator {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 48px;
    text-align: center;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    /* Controls on mobile are position:fixed, bottom:28px, ~68px tall → 96px from bottom */
    .video-pagination {
        bottom: 106px;
        padding: 5px 14px;
        gap: 10px;
    }
    .page-nav-btn {
        width: 30px;
        height: 30px;
        font-size: 1.1rem;
    }
}

/* Whiteboard Container - Modern Style with Sidebar */
.whiteboard-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 20;
    display: none;
    flex-direction: row;
}

.whiteboard-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Whiteboard Main Area */
.whiteboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Whiteboard Participants Sidebar */
.whiteboard-participants-sidebar {
    width: 200px;
    background: var(--dark-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.whiteboard-participants-sidebar .participant-tile {
    aspect-ratio: 16/9;
    flex-shrink: 0;
}

.whiteboard-participants-sidebar .participant-tile .participant-name {
    font-size: 0.7rem;
    padding: 3px 8px;
    bottom: 6px;
    right: 6px;
}

.whiteboard-participants-sidebar .participant-tile .participant-avatar .avatar-circle {
    width: 40px;
    height: 40px;
}

.whiteboard-participants-sidebar .participant-tile .participant-avatar .avatar-icon {
    font-size: 1rem;
}

.whiteboard-participants-sidebar .participant-tile .participant-avatar .avatar-name {
    font-size: 0.75rem;
}

/* Sidebar empty state */
.whiteboard-participants-sidebar:empty::before {
    content: 'لا يوجد مشاركين';
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 20px 10px;
    font-size: 0.85rem;
}

/* ============================================
   Screen Share Picker Modal
   ============================================ */

.screenshare-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.screenshare-picker-modal {
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 32px 28px 24px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: slideUpIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.screenshare-picker-header {
    text-align: center;
}

.screenshare-picker-icon {
    font-size: 2.8rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(130,12,34,0.5));
}

.screenshare-picker-header h3 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.screenshare-picker-header p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.55);
}

/* The three option cards */
.screenshare-picker-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.screenshare-pick-btn {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 16px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.screenshare-pick-btn:hover {
    background: rgba(130, 12, 34, 0.25);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(130, 12, 34, 0.35);
}

.screenshare-pick-btn:active {
    transform: translateY(0) scale(0.97);
}

.pick-btn-icon {
    font-size: 2rem;
    line-height: 1;
    color: wheat;
}

.pick-btn-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.pick-btn-desc {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.3;
}

/* Tip note */
.screenshare-picker-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(250, 196, 13, 0.08);
    border: 1px solid rgba(250, 196, 13, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}

.screenshare-picker-note span:first-child {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Cancel button */
.screenshare-picker-cancel {
    all: unset;
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: color 0.2s;
}

.screenshare-picker-cancel:hover {
    color: rgba(255,255,255,0.75);
}

@media (max-width: 480px) {
    .screenshare-picker-modal {
        padding: 24px 16px 18px;
        gap: 18px;
    }
    .screenshare-picker-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .screenshare-pick-btn {
        padding: 12px 6px;
    }
    .pick-btn-icon { font-size: 1.6rem; }
    .pick-btn-label { font-size: 0.78rem; }
    .pick-btn-desc { display: none; }
}

/* ============================================
   Screen Share Layout - Mirrors whiteboard style
   ============================================ */

/* Screen Share Container - Full overlay like whiteboard */
.screenshare-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111;
    z-index: 20;
    display: none;
    flex-direction: row;
}

/* Main screen share area */
.screenshare-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #000;
}

/* The actual screen video */
.screenshare-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* contain so nothing is cropped */
    background: #000;
    display: block;
}

/* Participants sidebar in screen share mode */
.screenshare-participants-sidebar {
    width: 200px;
    background: var(--dark-bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.screenshare-participants-sidebar .participant-tile {
    aspect-ratio: 16/9;
    flex-shrink: 0;
}

.screenshare-participants-sidebar .participant-tile .participant-name {
    font-size: 0.7rem;
    padding: 3px 8px;
    bottom: 6px;
    right: 6px;
}

.screenshare-participants-sidebar .participant-tile .participant-avatar .avatar-circle {
    width: 40px;
    height: 40px;
}

.screenshare-participants-sidebar .participant-tile .participant-avatar .avatar-icon {
    font-size: 1rem;
}

.screenshare-participants-sidebar .participant-tile .participant-avatar .avatar-name {
    font-size: 0.75rem;
}

.screenshare-participants-sidebar:empty::before {
    content: 'لا يوجد مشاركين';
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 20px 10px;
    font-size: 0.85rem;
}

/* Screen share button active state */
.screen-btn.active {
    background: rgba(76, 175, 80, 0.3) !important;
    border-color: rgba(76, 175, 80, 0.7) !important;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.5) !important;
}

/* Mobile: screen share layout stacks vertically */
@media (max-width: 768px) {
    .screenshare-container {
        flex-direction: column;
        /* Leave room at bottom for the fixed controls bar (~68px bar + 28px offset) */
        padding-bottom: 100px;
    }

    .screenshare-participants-sidebar {
        width: 100%;
        height: 120px;
        padding-bottom: 0; /* reset desktop padding — strip is horizontal here */
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .screenshare-participants-sidebar .participant-tile {
        width: 140px;
        height: auto;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .screenshare-container {
        padding-bottom: 95px;
    }

    .screenshare-participants-sidebar {
        height: 100px;
    }

    .screenshare-participants-sidebar .participant-tile {
        width: 110px;
    }
}

@media (min-width: 1920px) {
    .screenshare-participants-sidebar {
        width: 280px;
    }
}

/* Celebration Menu - Modern Style */
.celebration-menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#celebration_popup {
    display: none !important;
    position: fixed !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    width: 150px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    z-index: 2147483647 !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}

#celebration_popup.show {
    display: flex !important;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    gap: 4px;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
}

.celebration-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
    height: auto !important;
    line-height: normal !important;
    transition: all 0.15s ease !important;
}

.celebration-option:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.02) !important;
}

.celebration-option:active {
    transform: scale(0.98) !important;
}

.celebration-option .opt-icon {
    font-size: 1.3rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.celebration-option .opt-text {
    flex-grow: 1 !important;
}

/* Settings Menu - Modern Style */
.settings-menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.settings-btn {
    background: rgba(158, 158, 158, 0.2);
    border-color: rgba(158, 158, 158, 0.5);
}

.settings-btn:hover {
    background: rgba(158, 158, 158, 0.4);
    box-shadow: 0 4px 16px rgba(158, 158, 158, 0.5);
}

#settings_popup {
    display: none !important;
    position: fixed !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    width: 280px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    z-index: 2147483647 !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}

#settings_popup.show {
    display: flex !important;
    animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    gap: 4px;
}

.settings-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: var(--text-primary) !important;
    box-sizing: border-box !important;
}

.settings-field label {
    font-size: 12px !important;
    font-weight: 700 !important;
    opacity: 0.9 !important;
}

.audio-input-row {
    display: flex !important;
    gap: 8px !important;
}

.settings-select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(0, 0, 0, 0.36) !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    outline: none !important;
}

.settings-select:focus {
    border-color: rgba(76, 175, 80, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.18) !important;
}

.settings-select option {
    color: #111 !important;
}

.settings-icon-btn {
    all: unset !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(76, 175, 80, 0.16) !important;
    border: 1px solid rgba(76, 175, 80, 0.38) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.settings-icon-btn:hover {
    background: rgba(76, 175, 80, 0.28) !important;
}

.settings-help {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.68) !important;
    line-height: 1.4 !important;
}

.settings-option {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin: 0 !important;
    height: auto !important;
    line-height: normal !important;
    transition: all 0.15s ease !important;
}

.settings-option:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.02) !important;
}

.settings-option:active {
    transform: scale(0.98) !important;
}

.settings-option .opt-icon {
    font-size: 1.3rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.settings-option .opt-text {
    flex-grow: 1 !important;
}

.settings-option .opt-toggle {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    transition: color 0.2s ease !important;
}

.settings-option[data-enabled="true"] {
    background: rgba(76, 175, 80, 0.15) !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
}

.settings-option[data-enabled="true"] .opt-toggle {
    color: #4CAF50 !important;
}

.settings-option.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

.settings-option.disabled:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
}

/* Virtual Background 3-option selector */
.vb-section {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vb-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.vb-opts {
    display: flex;
    gap: 6px;
    width: 100%;
}

.vb-opt {
    all: unset;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.vb-opt:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.04);
}

.vb-opt:active:not([disabled]) {
    transform: scale(0.97);
}

.vb-opt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 22px;
}

.vb-opt-icon svg {
    transition: stroke 0.18s ease;
    stroke: wheat;
}

.vb-opt-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* Off active — neutral white (default/no-effect state) */
#vb_opt_off.vb-opt-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.38);
}
#vb_opt_off.vb-opt-active .vb-opt-label {
    color: rgba(255, 255, 255, 0.95);
}

/* Blur active — cool blue */
#vb_opt_blur.vb-opt-active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.55);
}
#vb_opt_blur.vb-opt-active .vb-opt-label {
    color: #60a5fa;
}
#vb_opt_blur.vb-opt-active .vb-opt-icon svg {
    stroke: #60a5fa;
}

/* BG active — soft purple */
#vb_opt_bg.vb-opt-active {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.55);
}
#vb_opt_bg.vb-opt-active .vb-opt-label {
    color: #c084fc;
}
#vb_opt_bg.vb-opt-active .vb-opt-icon svg {
    stroke: #c084fc;
}

.vb-section.disabled {
    opacity: 0.45;
}

.vb-opt[disabled],
.vb-section.disabled .vb-opt:not(#vb_opt_off) {
    cursor: not-allowed;
    opacity: 0.6;
}

.vb-opt[disabled]:hover,
.vb-section.disabled .vb-opt:not(#vb_opt_off):hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: none;
}

.vb-status {
    min-height: 16px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    line-height: 1.45;
}

.vb-status.warning {
    color: #ffc107;
}

.vb-status.error {
    color: #ff8a80;
}

/* VB quality-change toast — shown when tier auto-steps up or down */
.vb-quality-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99999;
    pointer-events: none;
    direction: rtl;
    white-space: nowrap;
    animation: vbToastIn 0.2s ease-out;
}
.vb-quality-toast.hiding {
    animation: vbToastOut 0.3s ease-in forwards;
}
@keyframes vbToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}
@keyframes vbToastOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Virtual Background Canvas */
#virtual-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: #000;
    z-index: 1;
    will-change: transform;
    image-rendering: auto;
}

/* Animation Overlay */
.animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2147483647;
    overflow: hidden;
}

.floating-emoji {
    position: absolute;
    bottom: 0;
    font-size: 32px;
    pointer-events: none;
    animation: floatUpFade 3s ease-out forwards;
    will-change: transform, opacity;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.lr-celebration-particle {
    position: absolute;
    pointer-events: none;
    contain: layout paint style;
    backface-visibility: hidden;
}

.lr-celebration-particle.floating-emoji {
    bottom: 0;
    opacity: 0;
    animation-name: lrFloatUpFade;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.lr-confetti-particle {
    top: -12px;
    opacity: 0;
    border-radius: 2px;
    animation-name: lrConfettiFall;
    animation-timing-function: linear;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

@keyframes lrFloatUpFade {
    0% {
        transform: translate3d(0, 0, 0) scale(0.55) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translate3d(var(--drift-start, 0px), -20px, 0) scale(1.08) rotate(var(--rot, 0deg));
    }
    85% {
        opacity: 0.85;
    }
    100% {
        transform: translate3d(var(--drift, 0px), var(--rise-distance, -360px), 0) scale(0.95) rotate(var(--rot, 0deg));
        opacity: 0;
    }
}

@keyframes lrConfettiFall {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }
    85% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(var(--drift, 0px), var(--fall-distance, 420px), 0) rotate(var(--rot, 180deg));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lr-celebration-particle.floating-emoji,
    .lr-confetti-particle {
        animation-duration: 1.4s !important;
    }
}

@keyframes floatUpFade {
    0% {
        transform: translateY(10%) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(-20%) scale(1.3) rotate(var(--rot));
    }
    75% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(-120%) scale(1) rotate(var(--rot-end));
        opacity: 0;
    }
}

/* Responsive Design - Mobile First */
@media (max-width: 768px) {
    .lesson-room-header {
        padding: 10px 16px;
    }

    .lesson-info {
        gap: 12px;
    }

    .lesson-info h2 {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lesson-meta {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        gap: 6px;
    }

    .meta-item {
        font-size: 0.8rem;
    }

    .meta-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    .status-indicator {
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .meeting-timer {
        font-size: 0.9rem;
        padding: 4px 10px;
        min-width: 70px;
    }

    .meeting-controls {
        position: fixed;
        bottom: max(28px, env(safe-area-inset-bottom, 28px));
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;
        padding: 12px 16px;
        border-radius: 40px;
        max-width: calc(100vw - 16px);
        flex-wrap: wrap;
        justify-content: center;
    }

    .control-btn {
        width: 44px;
        height: 44px;
    }

    .control-icon {
        font-size: 1.2rem;
    }

    .whiteboard-frame {
        height: 100%;
    }

    /* Whiteboard sidebar on mobile - horizontal strip at bottom */
    .whiteboard-container {
        flex-direction: column;
        /* Leave room at bottom for the fixed controls bar */
        padding-bottom: 100px;
    }

    .whiteboard-participants-sidebar {
        width: 100%;
        height: 120px;
        padding-bottom: 0; /* reset desktop padding — strip is horizontal here */
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .whiteboard-participants-sidebar .participant-tile {
        width: 140px;
        height: auto;
        flex-shrink: 0;
    }

    /* Video content: pad bottom so the last row of tiles isn't under the controls */
    .video-content {
        padding-bottom: 100px;
    }

    /* Mobile video grid columns are handled dynamically by JS (updateVideoGrid). */

    /* On mobile fill the tile with cover — avoids the "small rectangle" effect
       that object-fit:contain causes when tile proportions don't match the camera.
       Solo tile (data-count=1) keeps contain so the full camera frame is visible. */
    .participant-tile video {
        object-fit: cover;
    }
    .video-grid[data-count="1"] .participant-tile video {
        object-fit: contain;
    }

    .avatar-circle {
        width: 80px;
        height: 80px;
    }

    .avatar-icon {
        font-size: 2rem;
    }

    .default-avatar h3 {
        font-size: 1.1rem;
    }

    .default-avatar p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .lesson-room-header {
        padding: 8px 12px;
    }

    .lesson-info h2 {
        font-size: 0.95rem;
    }

    .meta-item {
        font-size: 0.75rem;
    }

    .status-indicator {
        padding: 4px 8px;
        font-size: 0.75rem;
        gap: 4px;
    }

    .status-dot {
        width: 6px;
        height: 6px;
    }

    .meeting-timer {
        font-size: 0.85rem;
        padding: 4px 8px;
        min-width: 60px;
    }

    .meeting-controls {
        gap: 5px;
        padding: 10px 12px;
        border-radius: 32px;
        max-width: calc(100vw - 12px);
        bottom: max(28px, env(safe-area-inset-bottom, 28px));
    }

    .control-btn {
        width: 38px;
        height: 38px;
    }

    .control-icon {
        font-size: 1rem;
    }

    /* Whiteboard sidebar on small mobile */
    .whiteboard-container {
        padding-bottom: 95px;
    }

    .video-content {
        padding-bottom: 95px;
    }

    .whiteboard-participants-sidebar {
        height: 100px;
    }

    .whiteboard-participants-sidebar .participant-tile {
        width: 110px;
    }

    .participant-tile .participant-name {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .participant-tile .participant-avatar .avatar-circle {
        width: 40px;
        height: 40px;
    }

    .participant-tile .participant-avatar .avatar-icon {
        font-size: 1rem;
    }
}

/* Extra-small phones — ensure buttons stay in a single line */
@media (max-width: 360px) {
    .meeting-controls {
        gap: 4px;
        padding: 8px 10px;
        border-radius: 28px;
    }

    .control-btn {
        width: 34px;
        height: 34px;
    }

    .control-icon {
        font-size: 0.9rem;
    }
}

/* Large screens */
@media (min-width: 1920px) {
    .whiteboard-participants-sidebar {
        width: 280px;
    }

    .whiteboard-participants-sidebar .participant-tile .participant-avatar .avatar-circle {
        width: 50px;
        height: 50px;
    }

    .whiteboard-participants-sidebar .participant-tile .participant-avatar .avatar-icon {
        font-size: 1.3rem;
    }
}

/* ============================================================
   Professional SVG Icons in Control Buttons
   ============================================================ */

/* SVG sizing only — drop-shadow already inherited from .control-icon parent */
.control-icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Mic button: no .active = mic OFF (muted), .active = mic ON */
.mic-btn .icon-mic-on  { display: none; }
.mic-btn .icon-mic-off { display: inline-flex; }
.mic-btn.active .icon-mic-on  { display: inline-flex; }
.mic-btn.active .icon-mic-off { display: none; }

/* Camera button: no .active = camera OFF, .active = camera ON */
.camera-btn .icon-cam-on  { display: none; }
.camera-btn .icon-cam-off { display: inline-flex; }
.camera-btn.active .icon-cam-on  { display: inline-flex; }
.camera-btn.active .icon-cam-off { display: none; }

/* Small SVG badges inside participant tiles */
.tile-badge-icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

/* ============================================================
   Badge icons — force white so SVG currentColor resolves correctly
   on the dark badge background
   ============================================================ */
.tile-mic-badge,
.tile-cam-badge {
    color: white;
}

/* ============================================================
   Active Speaker Border Effect
   Ring on the video element (camera ON) or avatar circle (camera OFF).
   Keeps the indicator tight around the person's face, not the whole tile.
   outline transitions are compositor-level — zero ongoing paint cost.
   ============================================================ */
.participant-tile.speaking {
    z-index: 2;
}

/* Camera ON: ring inside the video frame edge */
.participant-tile video {
    outline: 3px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.15s ease;
}

.participant-tile.speaking video {
    outline-color: #4CAF50;
}

/* Camera OFF: ring around the initials avatar circle with a small gap */
.avatar-circle {
    outline: 3px solid transparent;
    outline-offset: 5px;
    transition: outline-color 0.15s ease;
}

.participant-tile.speaking .avatar-circle {
    outline-color: #4CAF50;
}

/* ============================================================
   Initials-based avatar (video off state)
   ============================================================ */
.avatar-initials-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Participant tile avatar fills the whole dark background */
.participant-tile .participant-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(145deg, #0f0f1a 0%, #1a1a2e 60%, #16213e 100%);
}

/* Suppress float animation inside tiles — only animate the hero avatar */
.participant-tile .avatar-circle {
    animation: none;
}

/* Hover tooltip for controls */
.control-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.control-btn:hover::after {
    opacity: 1;
}

/* Smooth fade in animation for entire page */
.lesson-room-fullscreen {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* KPI Evaluation Modal Styles */
.zuwad-modal {
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent page scroll */
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zuwad-modal-content,
.kpi-evaluation-content {
    background-color: #fefefe;
    margin: 0; /* Remove margin since we're using flex centering */
    padding: 25px;
    border: none;
    width: 95%;
    max-width: 900px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom scrollbar for modal */
.kpi-evaluation-content::-webkit-scrollbar {
    width: 8px;
}

.kpi-evaluation-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.kpi-evaluation-content::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.kpi-evaluation-content::-webkit-scrollbar-thumb:hover {
    background: #a01533;
}

.zuwad-close-modal {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}

.zuwad-close-modal:hover { color: #000; }

.kpi-evaluation-content h3 {
    text-align: center;
    color: var(--primary-color);
    margin: 0 0 20px 0;
    font-size: 1.6rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

/* Compact Section Styles */
.form-section.compact-section {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.form-section h4 {
    margin: 0 0 15px 0;
    color: var(--primary-dark, #2c3e50);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}

.section-icon { font-size: 1.2rem; }

/* Grid Layouts */
.rating-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Rating Card */
.rating-card {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

.rating-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.rating-icon { font-size: 1.2rem; }

.rating-header label {
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
}

.rating-desc {
    font-size: 0.75rem;
    color: #777;
    margin-bottom: 8px;
    line-height: 1.3;
}

.rating-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 4px;
    margin-top: auto;
    direction: rtl;
}

.rating-stars span {
    font-size: 1.5rem;
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s;
}

.rating-stars span:hover,
.rating-stars span:hover ~ span,
.rating-stars span.active {
    color: #f1c40f;
}

/* RTL fix: when hovering from right, highlight all stars to the right */
.rating-stars span:hover,
.rating-stars span:hover ~ span {
    color: #f1c40f;
}

/* Keep active stars highlighted */
.rating-stars span.active {
    color: #f1c40f;
}

.rating-value-display {
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 5px;
}

/* Text Grid */
.text-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.form-group.small-group { margin-bottom: 0; }
.form-group.full-width { grid-column: span 2; margin-bottom: 0; }

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
}

.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    height: 60px;
    transition: all 0.2s;
}

.form-group textarea:focus {
    border-color: var(--accent-color);
    height: 80px;
    position: relative;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Rank Radio Grid */
.radio-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.rank-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    position: relative;
}

.rank-option:hover {
    background: #fef9e7;
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.rank-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Selected states for ranks */
.rank-option:has(input:checked) {
    border-color: var(--primary-color);
    background: #fff5f7;
    box-shadow: 0 2px 8px rgba(130, 12, 34, 0.15);
}

.rank-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary-dark, #2c3e50);
    margin-bottom: 4px;
}

.rank-desc {
    font-size: 0.7rem;
    color: #888;
    line-height: 1.2;
}

/* Footer */
.form-actions {
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, #a01533 100%);
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(130, 12, 34, 0.3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(130, 12, 34, 0.4);
}

/* KPI Evaluation Button Style */
.eval-btn {
    background: #FFC107 !important;
}

/* Responsive KPI Modal */
@media (max-width: 768px) {
    .rating-grid,
    .text-grid,
    .radio-group-grid {
        grid-template-columns: 1fr;
    }

    .kpi-evaluation-content {
        padding: 15px;
        width: 100%;
        margin: 0;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .rating-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .rating-stars {
        margin-top: 0;
    }

    .rating-desc { display: none; }

    .rating-header { margin-bottom: 0; }

    .rank-option {
        flex-direction: row;
        text-align: right;
        gap: 10px;
        align-items: center;
    }

    .rank-title { margin-bottom: 0; min-width: 80px; }
}

/* ============================================
   In-Meeting Chat Sidebar
   ============================================ */

.chat-btn {
    background: rgba(130, 12, 34, 0.2);
    border-color: rgba(130, 12, 34, 0.5);
    overflow: visible;
}

.chat-btn:hover {
    background: rgba(130, 12, 34, 0.4);
    box-shadow: 0 4px 16px rgba(130, 12, 34, 0.5);
}

.chat-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.6);
    animation: badgePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

@keyframes badgePop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.chat-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 25;
    display: none;
    flex-direction: column;
    direction: rtl;
}

.chat-sidebar.open {
    display: flex;
    animation: chatSlideIn 0.25s ease-out;
}

@keyframes chatSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.chat-sidebar-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.chat-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.chat-close-btn:hover {
    color: #fff;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.chat-partners {
    display: flex;
    gap: 8px;
    padding: 10px 12px 0;
    overflow-x: auto;
    flex-shrink: 0;
}

.chat-partners::-webkit-scrollbar {
    height: 4px;
}

.chat-partner-chip {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.chat-partner-chip.active {
    background: rgba(130, 12, 34, 0.35);
    border-color: rgba(130, 12, 34, 0.65);
    color: #fff;
}

.chat-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-msg.mine {
    align-self: flex-start;
    background: rgba(130, 12, 34, 0.3);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg.theirs {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-bottom-left-radius: 4px;
}

.chat-msg-sender {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 3px;
}

.chat-msg-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 3px;
    text-align: right;
}

.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    position: relative;
    direction: rtl;
}

.chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 10px 14px; /* Increased padding slightly for better alignment */
    color: #fff;
    font-size: 0.9rem; /* Slightly larger font */
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    line-height: 1.2;
}

.chat-input:focus {
    border-color: var(--primary-light);
}

.chat-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.chat-emoji-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
}

.chat-emoji-btn:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.chat-emoji-picker {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 10px;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 100;
    animation: fadeIn 0.2s ease-out;
}

.chat-emoji-picker::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 15px;
    border: 8px solid transparent;
    border-top-color: #1e1e1e;
}

.emoji-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 180px;
    overflow-y: auto;
}

.emoji-list span {
    font-size: 1.4rem;
    cursor: pointer;
    text-align: center;
    transition: transform 0.1s;
    padding: 4px;
    border-radius: 6px;
}

.emoji-list span:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.2);
}

.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin: 0; /* Reset margins */
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--primary-light);
    transform: scale(1.08);
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: rgba(255, 255, 255, 0.1);
}

.chat-send-btn svg {
    margin-top: 1px; /* Subtle tweak for optical centering */
}

.chat-toast {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 180px;
    max-width: 240px;
    z-index: 2147483647;
    pointer-events: none;
    animation: toastIn 0.2s ease-out;
    direction: rtl;
    overflow: visible;
}

.chat-toast.hiding {
    animation: toastOut 0.2s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

.chat-toast-sender {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 2px;
}

.chat-toast-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .chat-sidebar {
        width: 280px;
    }
}

@media (max-width: 380px) {
    .chat-sidebar {
        width: 100%;
    }
}

/* Noise filter toggle */
.noise-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.noise-filter-row span {
    font-size: 12px !important;
    opacity: 0.85 !important;
}

.settings-toggle {
    all: unset !important;
    position: relative !important;
    width: 40px !important;
    height: 22px !important;
    flex: 0 0 40px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,0.15) !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.settings-toggle::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: transform 0.2s !important;
}

.settings-toggle.active {
    background: #4caf50 !important;
}

.settings-toggle.active::after {
    transform: translateX(18px) !important;
}

.settings-toggle:disabled,
.settings-toggle.unavailable {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    background: rgba(255,255,255,0.12) !important;
}

.settings-toggle:disabled::after,
.settings-toggle.unavailable::after {
    transform: translateX(0) !important;
    background: rgba(255,255,255,0.75) !important;
}