/* ==========================================================================
 *  Responsive Styles - Enhanced
 *  ========================================================================== */

/* Desktop Layout */
@media (min-width: 769px) {
    .sidebar {
        position: relative;
        transform: none;
    }

    .sidebar-overlay {
        display: none;
    }

    .menu-btn {
        display: none;
    }
}

/* Mobile Layout */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 1000;
    }

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

    .menu-btn {
        display: flex;
    }
}

/* Small Mobile */
@media (max-width: 600px) {
    header { padding: 12px 16px; }
    header h1 { font-size: 1.1rem; }
    .header-btn { padding: 6px 10px; font-size: 0.8rem; }
    .chat-container { padding: 12px; gap: 12px; }
    .message { max-width: 90%; padding: 12px 14px; }
    .message-actions { opacity: 1; }
    .input-area { padding: 12px; gap: 8px; }
    #upload { padding: 12px; }
    #message { padding: 12px 16px; font-size: 0.95rem; }
    #send, #stop { min-width: 48px; min-height: 48px; }
    .message pre { padding: 10px; font-size: 0.85rem; }
    .copy-btn { opacity: 1; padding: 6px 10px; }
    .shortcuts-btn { display: none; }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    .header-left { gap: 8px; }
    .status-dot { width: 8px; height: 8px; }
    .message { padding: 10px 12px; font-size: 0.95rem; }
    #send, #stop { font-size: 0.9rem; }
}

/* Tablet Adjustments */
@media (min-width: 600px) and (max-width: 1024px) {
    .sidebar { width: 320px !important; }
    .chat-pane { width: 280px; }
    .category-pane { width: 140px; min-width: 140px; }
}