/* ========================================================
   ملف التنسيقات الموحد لشاشات الموبايل والتابلت (أكاديمية روزماري)
   ======================================================== */
@media (max-width: 768px) {
    /* 1. إعطاء مرونة للصفحة لتجنب اختفاء الأدوات */
    body {
        height: auto !important;
        min-height: 100vh;
        overflow-y: auto !important;
    }

    /* 2. ترتيب رأس الصفحة (الهيدر) */
    .live-header {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
        text-align: center;
    }

    /* 3. ضبط السبورة لتأخذ مساحة مناسبة ولا تنضغط */
    .video-container {
        margin: 5px !important;
        height: 55vh !important; /* السبورة تأخذ 55% من الشاشة */
        flex: none !important;
        border-width: 2px !important;
        border-radius: 12px !important;
    }

    /* 4. ترتيب شريط الأدوات السفلي ليتناسق مع الموبايل */
    .student-toolbar {
        flex-direction: column !important;
        padding: 5px !important;
        gap: 10px !important;
    }

    /* السماح للأزرار بالنزول لسطر جديد إذا كانت الشاشة صغيرة جداً */
    .tools-wrapper {
        margin: 0 !important;
        flex-wrap: wrap !important;
        padding: 5px !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 95% !important;
    }

    /* تصغير حجم الأزرار قليلاً لكي تتسع الشاشة للجميع */
    .btn, .chat-btn, .color-btn, .ai-assistant-btn, .size-control {
        font-size: 11px !important;
        padding: 5px 8px !important;
        height: auto !important;
    }

    .size-control input[type=range] {
        width: 50px !important; /* تصغير شريط حجم القلم */
    }

    /* 5. السحر: ضبط نافذة كاميرا الأستاذ للموبايل */
    #teacher-cam-panel {
        width: 110px !important; /* عرض صغير وأنيق */
        height: 90px !important; /* ارتفاع متناسق */
        top: 10px !important; 
        left: 10px !important; /* وضعها في الزاوية العلوية اليسرى داخل السبورة */
        right: auto !important;
        border-radius: 8px !important;
    }
    
    /* ضبط ارتفاع الفيديو داخل النافذة */
    #teacher-cam-panel video {
        height: 65px !important;
    }
    
    /* تصغير شريط سحب النافذة */
    .video-drag-header {
        font-size: 9px !important;
        padding: 2px 4px !important;
        height: 20px !important;
    }

    /* 6. ضبط نوافذ الدردشة والذكاء الاصطناعي للموبايل */
    .chat-panel-wrapper {
        width: 90% !important;
        left: 5% !important;
        height: 50vh !important;
        bottom: 10px !important;
    }
}