/* Mobile Styles - Moonlit Forest Theme */

/* ====================================
   MOBILE RESPONSIVE
   ==================================== */
@media (max-width: 900px) {
    /* Pin chat header to top */
    .chat-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .sidebar-left {
        position: fixed;
        left: 0;
        top: 52px;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.4);
        width: 280px;
        max-width: 80vw;
    }

    .sidebar-left.open {
        transform: translateX(0);
    }

    .sidebar-right {
        position: fixed;
        right: 0;
        top: 52px;
        bottom: 0;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -2px 0 16px rgba(0, 0, 0, 0.4);
        width: 280px;
        max-width: 80vw;
    }

    .sidebar-right.open {
        transform: translateX(0);
    }

    .mobile-only {
        display: flex;
    }

    /* Sidebar overlay - darker for forest feel */
    .sidebar-overlay {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 500;
        pointer-events: auto;
        animation: fadeIn 0.2s ease;
    }

    /* Ensure sidebars are above overlay */
    .sidebar-left,
    .sidebar-right {
        pointer-events: auto;
    }

    /* Make sidebar tabs visible and functional on mobile */
    .sidebar-tabs {
        display: flex !important;
    }

    /* Touch-friendly button sizes */
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .channel-btn {
        min-height: 44px;
    }

    .member-item {
        min-height: 44px;
        cursor: pointer;
    }

    .dm-item {
        min-height: 44px;
        cursor: pointer;
    }

    /* Mobile messages - higher base opacity (no hover on touch) */
    .messages-area {
        opacity: 0.7;
    }

    .messages-area:hover,
    .messages-area:focus-within {
        opacity: 1;
    }

    /* Mobile input - higher base opacity */
    .input-area {
        opacity: 0.65;
    }

    /* Notification panel full-width on mobile */
    .notification-panel {
        width: 100%;
        z-index: 1100;
        border-left: none;
    }

    /* Modal close buttons need 44px touch target */
    .modal-close-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* Make profile avatars tappable on mobile */
    .member-item .member-avatar,
    .dm-item .dm-avatar {
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    .landing-container {
        padding: var(--spacing-lg);
    }

    .landing-container h1 {
        font-size: clamp(1.6rem, 5vw, 2.5rem);
    }

    .glass-panel {
        padding: var(--spacing-lg);
    }

    .chat-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .header-left .logo {
        font-size: 0.85rem;
    }

    .logo-full {
        display: none;
    }

    .logo-short {
        display: inline;
        font-family: var(--font-display);
    }

    .header-center {
        display: none;
    }

    .messages-area {
        padding: var(--spacing-md);
        padding-bottom: 200px;
    }

    .input-area {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* On mobile, become fully visible when keyboard is open */
    .input-area.keyboard-open {
        opacity: 1;
        background: var(--bg-secondary);
        border-top: 1px solid var(--glass-border);
    }

    .message {
        padding: var(--spacing-sm);
    }

    .message-timestamp {
        flex-basis: 100%;
        text-align: left;
        margin-top: var(--spacing-xs);
    }

    .image-embed {
        max-width: 100%;
    }

    .image-embed img {
        max-height: 200px;
    }

    /* Typing indicator on mobile */
    .typing-indicator {
        bottom: 60px;
    }

    .input-area.keyboard-open ~ .typing-indicator {
        bottom: 60px;
    }

    .dashboard-tabs {
        flex-wrap: wrap;
    }

    .dashboard-tab {
        flex: 1;
        text-align: center;
        font-size: 0.7rem;
        padding: var(--spacing-sm);
    }

    /* Mention popup fills width on small screens */
    .mention-popup {
        max-height: 200px;
    }

    /* Touch-friendly mention items */
    .mention-popup-item {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Notification panel items touch-friendly */
    .notification-item {
        min-height: 44px;
    }

    /* Title divider smaller on mobile */
    .title-divider {
        width: 140px;
    }

    /* Dashboard & Settings modals near-fullscreen on small phones */
    .dashboard-modal-content {
        width: 100%;
        height: 90vh;
        max-height: 90vh;
        border-radius: var(--radius-md);
    }

    .settings-modal-content {
        width: 100%;
        height: 90vh;
        max-height: 90vh;
        border-radius: var(--radius-md);
    }

    /* Profile modal full-width on small phones */
    .profile-modal-content {
        max-width: 100%;
    }

    /* Reduce modal padding on small screens */
    .modal {
        padding: var(--spacing-sm);
    }

    /* Login form layer safe padding for mobile keyboards */
    .login-form-layer {
        padding: var(--spacing-md);
        align-items: flex-start;
        padding-top: 10vh;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
    .input-area {
        padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
    }

    .sidebar-left,
    .sidebar-right {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .dashboard-modal-content,
    .settings-modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .login-form-content {
        padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
    }
}

/* ====================================
   ANIMATIONS & EFFECTS
   ==================================== */

/* Subtle pulse for glow elements */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.glow-text {
    animation: pulse 3s ease-in-out infinite;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Selection styling */
::selection {
    background: var(--accent-primary);
    color: var(--bg-primary);
}