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

   NOTE: the GLP-1 "My Way" tab uses ONE shared renderer
   (static/js/chat/profile_glp1_cohort.js) for desktop + mobile — same
   labels, same icons. The ONLY mobile/desktop difference is layout, and
   it lives here. Do not fork the markup or copy for mobile. */

@media (max-width: 576px) {
    .profile-container {
        padding: 1rem;
    }

    .profile-header {
        font-size: 1.1rem;
    }

    .profile-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .profile-message {
        margin-left: 0;
        margin-top: 0.5rem;
    }

    .profile-member-row {
        flex-direction: column;
    }

    .profile-member-age {
        flex: unset;
        width: 100%;
    }
}

/* ---- GLP-1 My Way: tablet / narrow-pane reflow (768 = app tablet tier;
   the grid 2-up reflow itself lives in profile-styles.css). ------------- */
@media (max-width: 768px) {
    .plate-myway-title { font-size: 22px; }
    /* Pick cards stay 2-up (matches design); do NOT collapse to 1 col. */
}

/* ---- GLP-1 My Way: phone layout (bottom-nav shell present) ------- */
@media (max-width: 576px) {
    /* Mirror the design's flex shell (plate-mobile-shell.css):
         .m-app   -> .plate-myway        (flex column, fills the pane)
         .m-scroll-> .plate-myway-scroll (flex:1, the ONLY scroll region)
         .mw-savebar -> .plate-save-bar  (flex:none footer, normal flow)
       The save bar reserves real space above the bottom nav instead of
       overlapping, so the last card is always reachable right above it.

       Zero the pane's own padding/backdrop so .plate-myway can fill the full
       pane height and the docked bar sits flush above the bottom nav.
       Scoped to #profile-content so other cohort tabs keep their treatment. */
    #profile-content .tab-content-container {
        padding: 0;
        height: 100%;
        min-height: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .plate-myway {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    /* Scroll region — shrinks to fit above the docked save bar. */
    .plate-myway-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 18px;
    }

    .plate-myway-head { margin-bottom: 16px; }
    .plate-myway-subtitle { font-size: 13px; }

    /* Tighten the targets band on phones. */
    .plate-targets {
        padding: 14px 15px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
    .plate-target-cell { padding: 9px 11px; }

    /* Care-team grid: single column on phones so the number inputs aren't
       cramped two-up. 16px inputs avoid iOS zoom-on-focus. */
    .plate-ct-grid { grid-template-columns: 1fr; }
    .plate-ct-input input { font-size: 16px; }
    .plate-free-text { font-size: 16px; }

    /* Tighten the collapsible cards. */
    .plate-card {
        padding: 15px 16px;
        border-radius: 14px;
        margin-bottom: 12px;
    }
    .plate-card.collapsed { padding-bottom: 15px; }
    .plate-card.expanded .plate-card-head {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    /* Docked save bar: a flex:none footer in NORMAL FLOW at the bottom of
       .plate-myway — sits flush above the fixed bottom nav and reserves its
       own space, so content never scrolls underneath it (design behavior). */
    .plate-save-bar {
        flex: none;
        position: static;
        margin: 0;
        border-radius: 0;
        border: 0;
        border-top: 1px solid #e9ecef;
        box-shadow: 0 -6px 18px rgba(20, 35, 60, 0.08);
        padding: 12px 16px;
        gap: 10px;
        z-index: 5;
    }
    /* Docked bar stays fully opaque when saved (design). */
    .plate-save-bar.idle { opacity: 1; }
    /* Keep the success toast above the docked save bar + the bottom nav. */
    .plate-toast {
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
    .plate-save-status { min-width: 0; }
    .plate-save-sub {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}