/* ==================== RESPONSIVE DESIGN ==================== */

/* Tablet and Below (1024px) */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 260px;
    }

    .chat-wrapper.preview-open .chat-container {
        flex: 0 0 50%;
    }

    .chat-wrapper.preview-open .preview-panel {
        flex: 0 0 50%;
    }
}

/* Tablet Portrait and Below (768px) */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
        --header-height: 56px;
    }

    /* Show mobile menu toggle */
    .menu-toggle {
        display: flex !important;
    }

    /* Position sidebar as overlay */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--sidebar-width);
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
    }

    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    /* Sidebar overlay backdrop */
    .sidebar:not(.collapsed)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Header adjustments */
    .main-header {
        padding: 0 16px;
    }

    .header-title h1 {
        font-size: 1rem;
    }

    .header-title .subtitle {
        display: none;
    }

    .header-actions {
        gap: 4px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .preview-badge {
        display: none;
    }

    /* Stack preview panel vertically on mobile */
    .chat-wrapper.preview-open {
        flex-direction: column;
    }

    .chat-wrapper.preview-open .chat-container {
        flex: 0 0 40%;
        min-height: 40%;
    }

    .chat-wrapper.preview-open .preview-panel {
        flex: 0 0 60%;
        min-height: 60%;
    }

    /* Welcome screen */
    .welcome-screen {
        padding: 24px 16px 40px;
    }

    .welcome-screen h2 {
        font-size: 1.3rem;
    }

    .welcome-screen p {
        font-size: 0.9rem;
    }

    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Messages */
    .message {
        padding: 14px;
        margin: 8px;
    }

    .message-header {
        font-size: 0.8rem;
    }

    /* Input area */
    .input-area {
        padding: 12px;
    }

    .input-hint {
        font-size: 0.65rem;
    }

    .input-hint kbd {
        display: none;
    }

    /* Make buttons touch-friendly */
    .send-btn,
    .attach-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Code blocks */
    .code-block-header {
        padding: 8px 12px;
    }

    .code-block pre {
        font-size: 0.75rem;
        padding: 12px;
    }

    /* Toast notifications */
    .toast {
        max-width: calc(100% - 32px);
        margin: 0 16px;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    :root {
        --sidebar-width: 100%;
    }

    .sidebar {
        width: 100%;
        max-width: 100%;
    }

    /* Welcome screen */
    .welcome-icon {
        width: 40px;
        height: 40px;
    }

    .welcome-screen h2 {
        font-size: 1.2rem;
    }

    .quick-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quick-action {
        padding: 12px;
    }

    .action-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .action-icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .action-text {
        font-size: 0.85rem;
    }

    .action-desc {
        font-size: 0.7rem;
    }

    /* Feature tags */
    .welcome-features {
        flex-wrap: wrap;
        gap: 6px;
    }

    .feature-tag {
        font-size: 0.65rem;
        padding: 5px 10px;
    }

    /* Messages */
    .message {
        padding: 12px;
        margin: 6px;
    }

    /* Keyboard shortcuts modal */
    .shortcuts-modal {
        padding: 16px;
    }

    .shortcuts-content {
        max-width: 100%;
        max-height: 80vh;
        border-radius: var(--radius-lg);
    }

    .shortcuts-list {
        gap: 8px;
    }

    .shortcut-item {
        font-size: 0.85rem;
    }

    /* Preview panel */
    .preview-header {
        padding: 10px 12px;
    }

    .preview-title {
        font-size: 0.85rem;
    }

    .preview-btn {
        width: 32px;
        height: 32px;
    }

    /* Loading overlay */
    .loading-text {
        font-size: 0.85rem;
    }

    /* Typing indicator */
    .typing-indicator {
        padding: 12px;
    }
}

/* Small Mobile (360px) */
@media (max-width: 360px) {
    .welcome-screen h2 {
        font-size: 1.1rem;
    }

    .welcome-screen p {
        font-size: 0.85rem;
    }

    .main-header {
        padding: 0 12px;
    }

    .header-title h1 {
        font-size: 0.9rem;
    }

    .input-area {
        padding: 10px;
    }

    .message {
        padding: 10px;
        margin: 4px;
        font-size: 0.9rem;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .welcome-screen {
        padding: 16px;
    }

    .welcome-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

    .welcome-screen h2 {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .welcome-screen p {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .quick-action {
        padding: 8px;
    }

    .action-desc {
        display: none;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .welcome-orb,
    .welcome-icon {
        animation: none !important;
    }
}

/* Print styles */
@media print {

    .sidebar,
    .main-header,
    .input-area,
    .preview-panel,
    .loading-overlay,
    .shortcuts-modal,
    .toast-container {
        display: none !important;
    }

    .messages {
        padding: 0;
    }

    .message {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #333;
        margin: 10px 0;
    }

    body {
        background: white;
        color: black;
    }
}