/* ===========================================
   Responsive — Soelya
   Full mobile-first optimization
   =========================================== */

/* ---- Dynamic viewport for mobile ---- */
@supports (height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* ---- Tablet (max 768px) ---- */
@media (max-width: 768px) {
    .hero__logo {
        height: 40px;
    }

    .hero__tagline {
        font-size: var(--font-size-base);
    }

    .search__suggestions {
        gap: var(--space-2);
    }

    .search__suggestion {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-3);
    }

    .footer__container {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    /* Chat slightly tighter */
    .chat__messages {
        max-width: 95%;
    }

    .chat__message {
        max-width: 88%;
    }

    body.chat-active .main {
        padding-bottom: 72px;
    }
}

/* ---- Mobile (max 480px) ---- */
@media (max-width: 480px) {
    :root {
        --header-height: 56px;
    }

    /* -- Header mobile -- */
    .header__container {
        padding: 0 var(--space-4);
    }

    .header__nav-link {
        font-size: var(--font-size-xs);
    }

    .header__nav {
        gap: var(--space-3);
    }

    .header__logo-img--icon {
        height: 26px;
    }

    .header__logo-img--full {
        height: 22px;
    }

    /* -- Hero mobile -- */
    .hero {
        padding: var(--space-4) var(--space-4);
        padding-top: calc(var(--header-height) + var(--space-4));
    }

    .hero__container {
        gap: var(--space-3);
    }

    .hero__logo {
        height: 28px;
    }

    .hero__tagline {
        font-size: var(--font-size-sm);
    }

    /* -- Search bar mobile -- */
    .search__wrapper {
        padding: var(--space-2) var(--space-3);
    }

    .search__input {
        font-size: 16px; /* empêche le zoom iOS */
    }

    .search__submit {
        width: 36px;
        height: 36px;
    }

    .search__submit svg {
        width: 16px;
        height: 16px;
    }

    .search__icon svg {
        width: 16px;
        height: 16px;
    }

    .search__suggestions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .search__suggestion {
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-xs);
        min-height: 44px; /* touch-friendly */
    }

    /* -- Chat mobile -- */
    .chat {
        padding: calc(var(--header-height) + var(--space-4)) var(--space-3) var(--space-3);
    }

    .chat__messages {
        max-width: 100%;
        gap: var(--space-3);
    }

    .chat__message {
        max-width: 92%;
        gap: var(--space-2);
    }

    .chat__avatar {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
    }

    .chat__bubble {
        font-size: var(--font-size-sm);
        padding: var(--space-2) var(--space-3);
        border-radius: 16px;
        line-height: 1.6;
    }

    .chat__message--user .chat__bubble {
        border-bottom-right-radius: 4px;
    }

    .chat__message--bot .chat__bubble {
        border-bottom-left-radius: 4px;
    }

    /* -- Suggestion chips mobile -- */
    .chat__suggestions {
        gap: 6px;
    }

    .chat__suggestion-chip {
        font-size: var(--font-size-xs);
        padding: 0.35em 0.7em;
        min-height: 36px;
    }

    /* -- Input area fixe mobile -- */
    .chat__input-area {
        padding: var(--space-4) var(--space-4);
    }

    body.chat-active .chat__input-area {
        padding: var(--space-3) var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    }

    body.chat-active .main {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* -- Typing dots mobile -- */
    .chat__typing {
        padding: var(--space-2) var(--space-3);
    }

    .chat__typing-dot {
        width: 6px;
        height: 6px;
    }

    /* -- Markdown mobile -- */
    .chat__bubble--md code {
        font-size: 0.82em;
        padding: 0.1em 0.3em;
    }

    .chat__bubble--md pre {
        padding: var(--space-2);
        margin: 0.4em 0;
        border-radius: var(--radius-sm);
    }

    .chat__bubble--md pre code {
        font-size: 0.78em;
    }

    .chat__bubble--md ul {
        padding-left: 1em;
    }

    .chat__bubble--md p {
        margin: 0 0 0.35em;
    }

    /* -- Footer mobile -- */
    .footer {
        padding: var(--space-4) var(--space-4);
    }

    /* -- Ambient glow réduit sur mobile (perf) -- */
    body::before {
        width: 400px;
        height: 400px;
        opacity: 0.25;
    }

    body::after {
        display: none;
    }

    /* -- Animations réduites sur mobile -- */
    .chat__message {
        animation-duration: 0.3s;
    }
}

/* ---- Petits écrans (max 360px) ---- */
@media (max-width: 360px) {
    .header__nav {
        gap: var(--space-2);
    }

    .header__nav-link {
        font-size: 0.7rem;
    }

    .hero__logo {
        height: 24px;
    }

    .hero__tagline {
        font-size: 0.8rem;
    }

    .chat__avatar {
        width: 24px;
        height: 24px;
    }

    .chat__message {
        max-width: 95%;
    }

    .chat__bubble {
        padding: var(--space-2) var(--space-2);
        font-size: 0.82rem;
    }

    .chat__suggestion-chip {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
    }

    body.chat-active .chat__input-area {
        padding: var(--space-2) var(--space-2);
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    }
}

/* ---- Prefer reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .chat__message {
        animation: none;
        opacity: 1;
    }

    .chat__cursor {
        animation: none;
        opacity: 1;
    }

    .chat__typing-dot {
        animation: none;
        opacity: 0.6;
    }

    .chat__avatar--bot::before {
        animation: none;
    }

    body::before,
    body::after {
        transition: none;
    }
}