/* mobile-chat.css — mobile rules extracted from chat-styles.css.
   Loaded immediately after chat-styles.css so the cascade is unchanged. */

@media (max-width: 576px) {
    header.custom-header-border {
        display: flex !important;
        padding: 6px 12px !important;
        margin-bottom: 0 !important;
        border-bottom-width: 2px !important;
    }

    /* GLP-1 cohort: make the logged-in header identical to the anon
       /appetite-plate/try/ header (.try-plate-header) — same padding, thin
       neutral divider, white, no shadow. The logo (40px logo-mark) and
       wordmark (1.4rem #1e6fbe) already match via mobile-visual-enhancements. */
    body.plate-cohort-shell header.custom-header-border {
        padding: 0.75rem 1.5rem !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 576px) {
    :root {
        --mobile-gap: 12px;
    }

    body {
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .main-container {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        height: calc(100vh - 54px - 56px - env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
    }

    .resize-handle {
        display: none;
    }

    .chat-container {
        width: 100%;
        min-width: 0;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    .tab-container {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
    }

    .tab-content,
    .tab-pane {
        height: 100%;
    }

    .input-area {
        margin: 6px;
    }

    .input-area .input-box {
        padding: 4px 6px;
        padding-bottom: calc(36px + env(safe-area-inset-bottom));
    }

    #user-input {
        min-height: 20px;
        max-height: 44px;
        font-size: 12px;
        line-height: 1.4;
    }
}

@media (min-width: 768px) and (max-width: 1180px) {
    .main-container {
        top: 20px;
        height: calc(100dvh - 40px);
    }
}