/* ===== RESPONSIVE BREAKPOINTS =====
 * GetAdvice v5.7 — Full device coverage: phones, tablets, desktops, landscape.
 * File: css/responsive.css
 */

/* ── Large screens (768px+): center chat, widen welcome ── */
@media (min-width: 768px) {
    #chat {
        max-width: 720px;
        margin: 0 auto;
    }

    .welcome-container {
        max-width: 520px;
    }

    .message-bubble {
        max-width: 70%;
    }
}

/* ── Extra-large screens (1200px+): more breathing room ── */
@media (min-width: 1200px) {
    #chat {
        max-width: 800px;
    }

    .welcome-container {
        max-width: 560px;
        padding: 48px 40px;
    }
}

/* ── Tablets (481–768px) ── */
@media (max-width: 768px) and (min-width: 481px) {
    .welcome-container {
        max-width: 420px;
        padding: 36px 28px;
    }

    .message-bubble {
        max-width: 78%;
    }
}

/* ── Phones (max 480px) ── */
@media (max-width: 480px) {
    .welcome-container {
        margin: 0 var(--space-sm);
        padding: 32px 20px;
    }

    .welcome-container h2 { font-size: var(--font-size-lg); }
    .welcome-container p { font-size: 14px; }

    .suggestions {
        gap: var(--space-sm);
    }

    .suggestion-pill {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }

    .message-bubble {
        max-width: 85%;
        font-size: var(--font-size-base);
    }
}

/* ── Small phones (max 360px) ── */
@media (max-width: 360px) {
    .welcome-container {
        padding: 24px 16px;
    }

    .welcome-icon { font-size: 40px; }
    .welcome-container h2 { font-size: 20px; }

    .suggestion-pill {
        padding: 7px 10px;
        font-size: 12px;
    }

    header {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        /* Preserve safe-top from header.css: padding-top includes var(--safe-top) */
    }

    .app-title { font-size: 14px; }

    #input-area {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        /* Preserve safe-bottom from input.css: padding-bottom includes var(--safe-bottom) */
    }
}

/* ── Landscape orientation (short height) ── */
@media (max-height: 500px) and (orientation: landscape) {
    .welcome-container {
        padding: 20px 24px;
    }

    .welcome-icon { font-size: 32px; margin-bottom: var(--space-sm); }
    .welcome-container h2 { font-size: 18px; }
    .welcome-container p { font-size: 13px; margin-bottom: var(--space-md); }

    .splash-icon { width: 56px; height: 56px; }
    .splash-icon svg { width: 28px; height: 28px; }
    .splash-title { font-size: 22px; }
}