/* Floodle Global Responsive */
@media (max-width: 768px) {

    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .container,
    .mx-auto {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .flex.justify-between.items-center.mb-8,
    .flex.justify-between.items-center.mb-6,
    nav .flex.justify-between {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .h-8,
    .h-7,
    img[src*="logo"] {
        height: 1.5rem !important;
    }

    p.text-gray-400.text-xs.mt-0.5,
    p.text-gray-400.text-xs.mt-1 {
        display: none !important;
    }

    .flex.items-center.gap-4,
    .flex.items-center.gap-3 {
        gap: 0.5rem !important;
    }

    #install-pwa-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
    }

    .bg-gradient-to-r,
    .hero-section {
        padding: 1.5rem !important;
        border-radius: 12px !important;
    }

    h2.text-2xl,
    h1.text-2xl {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .p-8,
    .p-6,
    .p-5 {
        padding: 1.25rem !important;
    }

    a[href="edit_note.php"].bg-primary {
        position: fixed !important;
        bottom: 85px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9998 !important;
        box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4) !important;
        padding: 0 !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    a[href="edit_note.php"].bg-primary::before {
        content: "+" !important;
        font-size: 28px !important;
        color: white !important;
        display: block !important;
    }

    a[href="edit_note.php"].bg-primary span {
        display: none !important;
    }

    #chatMessages,
    #messages-container {
        height: 55vh !important;
    }

    #noteForm .flex.gap-3 {
        gap: 0.75rem !important;
        margin-bottom: 1rem;
    }

    #emojiInput {
        width: 70px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }

    #titleInput {
        height: 50px !important;
        font-size: 1.1rem !important;
    }

    #glowBtn {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .max-w-3xl span.text-gray-400.text-base.font-normal,
    p.text-gray-400.text-xs.mt-0.mb-6 {
        display: none !important;
    }

    /* Full-width editor on mobile - Scoped to avoid breaking buttons */
    .max-w-3xl.mx-auto.px-6.py-12,
    .py-12 {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Target the SPECIFIC editor white box, not every bg-white element */
    #noteForm.space-y-5, 
    #noteForm.space-y-5 ~ *,
    .max-w-3xl.mx-auto.px-6.py-12 > .bg-white {
        padding: 1.5rem 1rem !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
        width: 100% !important;
        border: none !important;
        background: #ffffff !important;
    }

    .dark-mode .max-w-3xl.mx-auto.px-6.py-12 > .bg-white {
        background: #111827 !important;
    }

    input, textarea, select {
        font-size: 18px !important; /* Larger for better readability */
    }

    /* Fix Index 'Blockage' in Dark Mode */
    .dark-mode #canvas-container,
    .dark-mode .webgl-bg {
        z-index: -1 !important; /* Ensure background stays behind */
        opacity: 0.5 !important; /* Make it less aggressive */
    }
}