/* Mobile responsive */

/* Desktop layout */
@media (min-width: 769px) {
    .mobile-only { display:none !important; }
    .left-panel { width:320px; min-width:320px; }
}

/* Mobile layout */
@media (max-width: 768px) {
    .app-container {
        position:relative;
    }
    .left-panel {
        position:absolute; top:0; left:0; width:100%; min-width:100%;
        z-index:20; transition:transform 0.3s ease;
    }
    .left-panel.hidden {
        transform:translateX(-100%);
    }
    .right-panel {
        position:absolute; top:0; left:0; width:100%;
        z-index:15;
    }
    .right-panel.hidden {
        display:none;
    }
    .chat-placeholder {
        display:none;
    }
    .chat-window {
        position:absolute; top:0; left:0; width:100%; height:100%;
    }
    .msg-item {
        max-width:85%;
    }
    .mobile-only {
        display:flex !important;
    }
    .add-menu {
        position:fixed; top:auto; right:0; left:0; bottom:0;
        border-radius:var(--radius-lg) var(--radius-lg) 0 0;
        padding:16px; background:#fff;
        animation:slideUp 0.3s ease;
    }
    @keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
    .modal-card {
        width:95%; max-height:90vh;
    }
    .moments-fullscreen {
        padding-top:0;
    }
    .emoji-panel {
        grid-template-columns:repeat(7,1fr);
    }
    .balance-amount { font-size:28px; }
    .amount-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 380px) {
    .left-header { padding:12px 12px 8px; }
    .session-item { padding:10px 12px; }
    .tab { font-size:11px; }
    .tab i { font-size:18px; }
}