#user-name-label {
    display: none !important;
}

@media (min-width: 769px) {
    #profile-modal .profile-close-top {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body.iahc-app-body:not(.mobile-chat-active):not(.mobile-generator-active):not(.mobile-modal-active) {
        overflow-y: auto !important;
    }

    body.iahc-app-body .iahc-app-container {
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        pointer-events: auto !important;
    }

    .modal-content::before,
    .workout-drawer::before {
        margin: 8px auto 10px !important;
    }

    #profile-modal .profile-close-top {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        margin-left: auto !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.86) !important;
    }

    #profile-modal .profile-modal,
    #profile-modal .modal-content {
        align-items: stretch !important;
    }

    #profile-modal h2 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #profile-modal .wizard-summary-modern,
    #profile-modal .profile-summary-modern {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 12px 16px calc(var(--iahc-mobile-nav-h) + 16px) !important;
    }

    #profile-modal .summary-hero,
    #profile-modal .summary-focus,
    #profile-modal .summary-grid,
    #profile-modal .summary-next {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #profile-modal .profile-edit-actions {
        order: 3 !important;
        flex: 0 0 auto !important;
        padding-top: 10px !important;
    }

    #profile-modal .profile-mobile-menu {
        order: 4 !important;
    }

    #profile-modal .privacy-note {
        order: 5 !important;
    }

    #profile-modal .modal-actions {
        order: 6 !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    #progress-modal .progress-modal {
        padding-top: 12px !important;
    }

    #progress-modal .progress-v2-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    #progress-modal .progress-v2-header-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-left: 0 !important;
    }

    #progress-modal .progress-v2-insight-pill {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #progress-modal .progress-avatar-row {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
    }

    #progress-modal .progress-avatar-text {
        min-width: 0 !important;
    }

    #progress-modal .progress-status-score {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    #progress-modal .progress-day-pill {
        width: 100% !important;
        justify-content: space-between !important;
    }

    body.iahc-app-body .plan-view-toggle {
        margin-bottom: 14px !important;
    }

    #plan-subtabs,
    #day-total,
    .macro-summary {
        margin-top: 12px !important;
    }

    #plan-subtabs .tab-btn,
    #day-total .tab-btn.secondary {
        min-height: 52px !important;
    }

    #plan-subtabs .tab-btn {
        min-width: 132px !important;
        padding: 10px 12px !important;
        align-items: flex-start !important;
    }

    .macro-summary {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .macro-pill {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .wizard-container {
        padding: calc(16px + env(safe-area-inset-top)) 16px calc(var(--iahc-mobile-nav-h) + 24px + env(safe-area-inset-bottom)) 16px !important;
        scroll-padding-bottom: calc(var(--iahc-mobile-nav-h) + 24px) !important;
    }

    .wizard-progress {
        left: 16px !important;
        right: 16px !important;
    }

    .wizard-step-title {
        font-size: clamp(1.26rem, 6vw, 1.62rem) !important;
        line-height: 1.12 !important;
    }

    .wizard-step-subtitle,
    .wizard-step p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }

    .wizard-step3-usertype-grid,
    .wizard-step3-medical-grid,
    .wizard-step3-fitness-grid,
    .wizard-step5-grid,
    .wizard-step5-frequency,
    .wizard-step5-equipment-grid,
    .wizard-step6-extra-row {
        grid-template-columns: 1fr !important;
    }

    .wizard-buttons,
    .wizard-actions {
        position: sticky !important;
        bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
        z-index: 4 !important;
        padding-top: 14px !important;
        background: linear-gradient(180deg, rgba(5, 10, 15, 0), rgba(5, 10, 15, 0.92) 24%, rgba(5, 10, 15, 0.98) 100%) !important;
    }

    .wizard-buttons button,
    .wizard-actions button {
        width: 100% !important;
    }

    .wizard-actions-optional {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

@media (max-width: 420px) {
    #progress-modal .progress-badges {
        grid-template-columns: 1fr !important;
    }

    #plan-subtabs .tab-btn {
        min-width: 118px !important;
        padding: 9px 10px !important;
    }

    .wizard-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* === Habits modal: match `code.html` + `codecheckin.html` look (colors/glass) === */
/* ==========================================================================
   DESKTOP USER BADGE (Modern Pill Layout)
   ========================================================================== */
.desktop-badge-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.desktop-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.desktop-badge-pill i {
    font-size: 0.8rem;
    opacity: 0.8;
}

.desktop-badge-pill.pill-name {
    background: rgba(0, 242, 254, 0.1);
    border-color: rgba(0, 242, 254, 0.2);
    color: #eaffff;
}

.desktop-badge-pill.pill-name i { color: #00f2fe; }

.desktop-badge-pill.imc-ok { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); color: #4ade80; }
.desktop-badge-pill.imc-low { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.2); color: #fde047; }
.desktop-badge-pill.imc-high { background: rgba(251, 146, 60, 0.1); border-color: rgba(251, 146, 60, 0.2); color: #fdba74; }
.desktop-badge-pill.imc-vhigh { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #fca5a5; }

div#user-badge-info.user-badge-inline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

div#user-badge-info.user-badge-inline::before,
div#user-badge-info.user-badge-inline::after {
    display: none !important;
    content: none !important;
}
#habits-modal .habits-modal {
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

#habits-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

#habits-modal .habits-modal,
#habits-modal .habits-modal * {
    /* Force the reference accent tone inside habits only */
    --primary: #00e5ff;
}

#habits-modal .habits-modal .modal-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-header-icon {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.28);
    color: #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.18);
}

#habits-modal .habits-tabs {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

#habits-modal .habit-tab {
    color: rgba(148, 163, 184, 0.92); /* textMuted */
}

#habits-modal .habit-tab.is-active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.10);
    border-color: rgba(0, 229, 255, 0.22);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

#habits-modal .habit-panel[data-tab="summary"] .habits-summary-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-goals {
    background: rgba(23, 35, 43, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-goals .wizard-step6-card,
#habits-modal .habits-modal.habits-tab-goals .habits-smart-goals-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

#habits-modal .habits-modal.habits-tab-goals .micro-goal-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-goals .micro-goal-remove {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

#habits-modal .habits-modal.habits-tab-goals .habits-panels {
    padding: 28px;
}

#habits-modal .habits-modal.habits-tab-goals .habits-goals-layout {
    gap: 20px;
}

#habits-modal .habits-modal.habits-tab-goals .habits-smart-goals-card,
#habits-modal .habits-modal.habits-tab-goals .micro-goals-board {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: none;
}

#habits-modal .habits-modal.habits-tab-goals .habits-smart-goals-card .wizard-step6-reco-item,
#habits-modal .habits-modal.habits-tab-goals .habits-smart-goals-card .wizard-step6-extra-item,
#habits-modal .habits-modal.habits-tab-goals .micro-goal-item,
#habits-modal .habits-modal.habits-tab-goals .micro-goal-item-premium {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-goals .habits-smart-timeline-track {
    background: rgba(255, 255, 255, 0.08);
}

#habits-modal .habits-modal.habits-tab-goals .micro-goals-board-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1040px) {
    #habits-modal .habits-modal.habits-tab-goals {
        max-width: min(1040px, 96vw);
    }

    #habits-modal .habits-modal.habits-tab-goals .habits-goals-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
}

@media (max-width: 900px) {
    #habits-modal .habits-modal.habits-tab-goals .habits-panels {
        padding: 20px 16px;
    }
}

#habits-modal .habits-modal.habits-tab-checkin .checkin-metric-strip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-summary-card-icon {
    background: rgba(0, 229, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.06);
    color: #00e5ff;
}

#habits-modal .habits-summary-card-sub,
#habits-modal .habits-summary-card-sub i {
    color: #00e5ff;
}

#habits-modal .habits-summary-chip {
    background: rgba(0, 229, 255, 0.16);
    border-color: rgba(0, 229, 255, 0.22);
    color: #00e5ff;
}

#habits-modal .habits-summary-meta,
#habits-modal .habits-summary-pill,
#habits-modal .habits-checkin-layout .mstrip-unit {
    color: #94a3b8;
}

#habits-modal .habits-summary-bar-fill,
#habits-modal .habits-summary-ring-fill {
    stroke: #00e5ff;
    background: linear-gradient(90deg, #0891b2, #00e5ff);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.22);
}

#habits-modal .habits-summary-water-count span:first-child {
    color: #00e5ff;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.28);
}

#habits-modal .habits-summary-sleep-row .sleep-pill:hover {
    border-color: rgba(0, 229, 255, 0.28);
}

#habits-modal .habits-summary-sleep-row .sleep-pill:focus-visible {
    outline-color: rgba(0, 229, 255, 0.45);
}

#habits-modal .habits-checkin-layout .mstrip-btn.is-active,
#habits-modal .habits-checkin-layout .mstrip-mood.is-active,
#habits-modal .habits-summary-water-ctrl .water-btn:last-child {
    background: #00e5ff;
    border-color: #00e5ff;
    color: #0a0f14;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.30);
}

#habits-modal .habits-checkin-layout .metric-strip-sub {
    color: #00e5ff;
}

#habits-modal .habits-modal.habits-tab-checkin {
    background: rgba(23, 35, 43, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-checkin .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#habits-modal .habits-modal.habits-tab-checkin .habits-tabs {
    background: rgba(0, 0, 0, 0.4);
}

#habits-modal .habits-modal.habits-tab-checkin .habit-tab {
    color: #94a3b8;
}

@media (min-width: 1180px) {
    #habits-modal .habits-modal.habits-tab-checkin {
        max-width: min(1040px, 96vw);
    }

    #habits-modal .habits-modal.habits-tab-checkin .habits-panels {
        padding: 24px 28px;
    }

    #habits-modal .habits-modal.habits-tab-checkin .habits-checkin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    #habits-modal .habits-modal.habits-tab-checkin .checkin-wide {
        grid-column: 1 / -1;
    }
}

/* Scrollbar inside modal panels (WebKit) */
#habits-modal .habits-panels::-webkit-scrollbar {
    width: 6px;
}
#habits-modal .habits-panels::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 10px;
}

#progress-modal .progress-modal {
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

#progress-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

#progress-modal .progress-modal,
#progress-modal .progress-modal * {
    --primary: #00e5ff;
}

#progress-modal .progress-v2-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

#progress-modal .progress-summary,
#progress-modal .progress-badges,
#progress-modal .progress-grid {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
}

#progress-modal .progress-v2-ai-insight,
#progress-modal .progress-avatar-row,
#progress-modal .progress-badge,
#progress-modal .progress-card,
#progress-modal .progress-day-pill,
#progress-modal .progress-mini {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

#progress-modal .progress-v2-ai-insight {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

#progress-modal .progress-badge.is-achieved {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.28);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.22);
}

#history-modal.modal-overlay,
#saved-recipes-modal.modal-overlay,
#shopping-modal.modal-overlay,
#tips-modal.modal-overlay,
#profile-modal.modal-overlay,
#privacy-modal.modal-overlay,
#plan-confirm-modal.modal-overlay,
#settings-modal.modal-overlay,
#ingredient-modal.modal-overlay,
#dashboard-prefs-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

#workout-drawer-overlay.workout-drawer-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

#history-modal .modal-content,
#saved-recipes-modal .modal-content,
#shopping-modal .modal-content,
#tips-modal .modal-content,
#profile-modal .modal-content,
#privacy-modal .modal-content,
#plan-confirm-modal .modal-content,
#settings-modal .modal-content,
#ingredient-modal .modal-content,
#dashboard-prefs-modal .modal-content {
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
}

#workout-drawer-overlay .workout-drawer {
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    width: min(920px, 96vw);
    max-height: 90vh;
    gap: 10px;
}

#history-modal .modal-content *,
#saved-recipes-modal .modal-content *,
#shopping-modal .modal-content *,
#tips-modal .modal-content *,
#profile-modal .modal-content *,
#privacy-modal .modal-content *,
#plan-confirm-modal .modal-content *,
#settings-modal .modal-content *,
#ingredient-modal .modal-content *,
#dashboard-prefs-modal .modal-content * {
    --primary: #00e5ff;
}

#workout-drawer-overlay .workout-drawer,
#workout-drawer-overlay .workout-drawer * {
    --primary: #00e5ff;
}

#workout-drawer-overlay .workout-drawer-head {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    padding-bottom: 12px;
}

#workout-drawer-overlay .workout-drawer-grid {
    gap: 12px;
}

#workout-drawer-overlay .workout-day-card,
#workout-drawer-overlay .workout-block-card,
#workout-drawer-overlay .workout-block-body,
#workout-drawer-overlay .workout-block-meta,
#workout-drawer-overlay .workout-block-note {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: none;
}

#workout-drawer-overlay .workout-block-summary,
#workout-drawer-overlay .workout-block-accordion[open] .workout-block-summary {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

#workout-drawer-overlay .workout-chip {
    background: rgba(0, 229, 255, 0.14);
    border-color: rgba(0, 229, 255, 0.26);
    color: #00e5ff;
}

#history-modal .history-modal-list,
#saved-recipes-modal .history-modal-list,
#shopping-modal .shopping-groups,
#tips-modal .tips-modal-list,
#privacy-modal .privacy-content,
#plan-confirm-modal .plan-confirm-summary,
#profile-modal .summary-hero,
#profile-modal .summary-focus,
#profile-modal .summary-grid,
#profile-modal .summary-next,
#dashboard-prefs-modal .dashboard-prefs-row {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
}

#dashboard-prefs-modal .dashboard-prefs-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#dashboard-prefs-modal .dashboard-prefs-icon {
    background: rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.28);
    color: #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.18);
}

#dashboard-prefs-modal .dashboard-prefs-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
}

#dashboard-prefs-modal .dashboard-prefs-row {
    min-height: 108px;
    justify-content: space-between;
    gap: 10px;
}

#dashboard-prefs-modal .dashboard-prefs-row.is-select label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #e9f5ff;
}

#dashboard-prefs-modal .dashboard-prefs-row .styled-select {
    border-radius: 12px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(4, 9, 14, 0.9);
}

#dashboard-prefs-modal .dashboard-prefs-check {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#dashboard-prefs-modal .dashboard-prefs-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#dashboard-prefs-modal .dashboard-prefs-switch {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(8, 16, 24, 0.95);
    position: relative;
    transition: all .2s ease;
}

#dashboard-prefs-modal .dashboard-prefs-switch::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background: rgba(255, 255, 255, 0.75);
    transition: transform .2s ease, background .2s ease;
}

#dashboard-prefs-modal .dashboard-prefs-check input[type="checkbox"]:checked + .dashboard-prefs-switch {
    background: rgba(0, 229, 255, 0.22);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}

#dashboard-prefs-modal .dashboard-prefs-check input[type="checkbox"]:checked + .dashboard-prefs-switch::before {
    transform: translateX(18px);
    background: #00e5ff;
}

#dashboard-prefs-modal .dashboard-prefs-check-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f2f9ff;
    line-height: 1.25;
}

#dashboard-prefs-modal .dashboard-prefs-row small {
    margin-left: 54px;
    color: rgba(226, 239, 248, 0.75);
}

#dashboard-prefs-modal .modal-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
}

#dashboard-prefs-modal .modal-actions .btn-chat-action {
    margin-top: 0;
}

@media (max-width: 900px) {
    #dashboard-prefs-modal .dashboard-prefs-grid {
        grid-template-columns: 1fr;
    }
}

.msg.user {
    background: linear-gradient(
        135deg,
        rgba(20, 61, 75, 0.88),
        rgba(11, 35, 45, 0.9)
    );
    color: #eaf8ff;
    border: 1px solid rgba(0, 229, 255, 0.45);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.32),
        0 0 16px rgba(0, 229, 255, 0.18);
    font-weight: 600;
}

#chat-reminders-badge.chat-quick-badge {
    position: static;
    top: auto;
    right: auto;
    margin-left: 6px;
    transform: none;
}

.msg .msg-body .chat-inline-strong {
    font-weight: 800;
    color: #f4fbff;
}

.chat-msgs {
    padding: 20px 18px;
    gap: 14px;
    background: linear-gradient(
        180deg,
        rgba(5, 10, 16, 0.42),
        rgba(3, 7, 12, 0.2)
    );
}

.msg {
    border-radius: 15px;
    max-width: 86%;
    font-size: 0.93rem;
    line-height: 1.58;
}

.msg .msg-title {
    margin-bottom: 7px;
}

.msg .msg-body {
    font-size: 0.96rem;
    line-height: 1.62;
}

.msg.ai {
    background: linear-gradient(
        145deg,
        rgba(18, 30, 40, 0.88),
        rgba(9, 18, 28, 0.8)
    );
    border: 1px solid rgba(130, 170, 192, 0.2);
    border-left: 2px solid rgba(0, 229, 255, 0.5);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.msg.system {
    border-left-width: 2px;
    border-color: rgba(255, 193, 59, 0.45);
    background: linear-gradient(
        145deg,
        rgba(66, 46, 18, 0.42),
        rgba(31, 24, 14, 0.35)
    );
}

.chat-quick-actions {
    gap: 8px;
    padding: 10px 14px 12px 14px;
    background: linear-gradient(
        180deg,
        rgba(8, 14, 22, 0.72),
        rgba(6, 10, 18, 0.58)
    );
}

.chat-quick-action {
    padding: 8px 12px;
    font-size: 0.75rem;
    border-color: rgba(0, 229, 255, 0.24);
    background: linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.14),
        rgba(0, 229, 255, 0.05)
    );
}

.chat-input-area {
    padding: 12px 14px;
    background: rgba(4, 8, 14, 0.52);
}

.chat-input {
    border-color: rgba(161, 192, 210, 0.24);
    background: rgba(3, 8, 14, 0.72);
    padding: 13px 18px;
}

.chat-input::placeholder {
    color: rgba(177, 201, 216, 0.72);
}

.chat-options {
    padding: 10px 14px;
    gap: 10px;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(
        180deg,
        rgba(8, 14, 22, 0.62),
        rgba(5, 9, 16, 0.5)
    );
}

#chat-status-hint {
    text-transform: none;
    letter-spacing: 0.18px;
    font-size: 0.68rem;
    background: linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.16),
        rgba(98, 220, 255, 0.1)
    );
    border-color: rgba(0, 229, 255, 0.25);
    color: rgba(228, 246, 255, 0.96);
}

.chat-option {
    gap: 7px;
    font-size: 0.76rem;
    color: rgba(198, 220, 233, 0.9);
}

.chat-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00e5ff;
}

.chat-select {
    border-color: rgba(0, 229, 255, 0.2);
    background: rgba(6, 12, 18, 0.78);
    color: rgba(232, 248, 255, 0.96);
    font-size: 0.74rem;
    padding: 6px 11px;
}

.chat-select:focus {
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18);
    outline: none;
}

.chat-options .btn-chat-control {
    padding: 6px 10px;
    font-size: 0.69rem;
}

@media (max-width: 900px) {
    .chat-msgs {
        padding: 16px 12px;
        gap: 12px;
    }

    .msg {
        max-width: 92%;
        font-size: 0.91rem;
    }

    .msg .msg-body {
        font-size: 0.93rem;
    }

    .chat-options {
        padding: 9px 12px;
        gap: 8px;
    }

    .chat-option {
        font-size: 0.73rem;
    }

    .chat-select {
        font-size: 0.71rem;
    }
}

#user-badge-info.user-badge-inline {
    margin-top: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    background: linear-gradient(
        145deg,
        rgba(8, 24, 34, 0.92),
        rgba(7, 18, 28, 0.9)
    );
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: rgba(216, 232, 242, 0.9);
    gap: 7px;
    flex-wrap: wrap;
}

#user-badge-info.user-badge-inline:hover {
    background: linear-gradient(
        145deg,
        rgba(10, 27, 38, 0.94),
        rgba(8, 20, 32, 0.92)
    );
    border-color: rgba(0, 229, 255, 0.34);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.32),
        0 0 16px rgba(0, 229, 255, 0.12);
}

#user-badge-info.user-badge-inline .badge-name {
    color: #dff6ff;
    font-weight: 750;
    letter-spacing: 0.15px;
    text-transform: none;
    font-size: 0.8rem;
}

#user-badge-info.user-badge-inline .badge-sep {
    color: rgba(147, 186, 205, 0.55);
    font-size: 0.56rem;
}

#user-badge-info.user-badge-inline span:not(.badge-name):not(.badge-sep) {
    color: rgba(196, 218, 232, 0.92);
    font-size: 0.76rem;
    font-weight: 640;
}

#user-badge-info.user-badge-inline .badge-name + .badge-sep {
    display: none;
}

@media (max-width: 900px) {
    #user-badge-info.user-badge-inline {
        border-radius: 12px;
        padding: 8px 12px;
        gap: 6px;
    }

    #user-badge-info.user-badge-inline span:not(.badge-name):not(.badge-sep) {
        font-size: 0.73rem;
    }
}

#tour-result-mode-group .scope-segmented {
    margin-bottom: 8px;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.9fr) minmax(0, 1.04fr);
    gap: 7px;
    padding: 5px;
}

#tour-result-mode-group .scope-pill {
    min-height: 74px;
    align-items: center;
    justify-content: center;
    padding: 10px 11px;
    gap: 5px;
}

#tour-result-mode-group .scope-pill[data-value="training_only"] {
    grid-column: auto;
}

#tour-result-mode-group .scope-pill .scope-pill-text {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.14;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    width: 100%;
    text-align: center;
    letter-spacing: 0.2px;
    hyphens: none;
}

#tour-result-mode-group .scope-pill .scope-pill-subtitle {
    font-size: 0.62rem;
    line-height: 1.18;
    color: rgba(206, 226, 238, 0.9);
    font-weight: 600;
    text-align: center;
    width: 100%;
    letter-spacing: 0.08px;
    white-space: normal;
    overflow-wrap: normal;
    min-height: 1.7em;
    text-wrap: balance;
}

#tour-result-mode-group .scope-pill[data-value="combined"] .scope-pill-subtitle {
    font-size: 0.6rem;
}

#tour-result-mode-group .scope-pill[data-value="training_only"] .scope-pill-text {
    font-size: 0.81rem;
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    letter-spacing: 0.1px;
}

#tour-result-mode-group .scope-pill[data-value="training_only"] .scope-pill-subtitle {
    font-size: 0.63rem;
    line-height: 1.2;
    margin-top: 1px;
}

#tour-result-mode-group .scope-pill .scope-pill-icon {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.95;
}

#tour-scope-group .scope-segmented {
    gap: 7px;
    padding: 5px;
}

#tour-scope-group .scope-pill {
    min-height: 52px;
    padding: 8px 10px;
}

#tour-scope-group .scope-pill .scope-pill-text {
    font-size: 0.82rem;
    line-height: 1.16;
}

#tour-result-mode-group .scope-pill.active {
    box-shadow:
        0 10px 24px rgba(0, 229, 255, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

#tour-result-mode-group .plan-mode-hint {
    margin-top: 8px;
    font-size: 0.78rem;
    color: rgba(198, 222, 236, 0.95);
    line-height: 1.42;
}

#tour-travel-mode-group .travel-mode-toggle {
    margin-top: 2px;
    border-color: rgba(0, 229, 255, 0.2);
    background: linear-gradient(
        135deg,
        rgba(0, 229, 255, 0.1),
        rgba(0, 229, 255, 0.04)
    );
}

#tour-travel-mode-group.is-active .travel-mode-toggle {
    border-color: rgba(0, 229, 255, 0.42);
    box-shadow: 0 10px 22px rgba(0, 229, 255, 0.15);
}

#tour-travel-mode-group .travel-mode-fields {
    margin-top: 10px;
    border: 1px solid rgba(0, 229, 255, 0.24);
    border-radius: 14px;
    background: linear-gradient(
        155deg,
        rgba(6, 16, 24, 0.82),
        rgba(4, 10, 16, 0.74)
    );
    padding: 10px;
}

#tour-travel-mode-group .travel-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#tour-travel-mode-group .travel-field {
    display: grid;
    gap: 4px;
}

#tour-travel-mode-group .travel-field label {
    font-size: 0.71rem;
    color: rgba(196, 220, 236, 0.92);
    font-weight: 650;
}

#tour-travel-mode-group .travel-field .styled-select {
    min-height: 34px;
    font-size: 0.74rem;
    border-color: rgba(0, 229, 255, 0.18);
    background: rgba(6, 12, 18, 0.84);
}

#tour-travel-mode-group .travel-field .styled-select:focus {
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.14);
}

@media (max-width: 900px) {
    #tour-travel-mode-group .travel-mode-grid {
        grid-template-columns: 1fr;
    }
}

#results-container #tour-results-card.plan-mode-training-only {
    grid-template-columns: minmax(260px, 0.52fr) minmax(0, 1.48fr);
}

#results-container #tour-results-card.plan-mode-training-only.plan-scope-semana {
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
}

#results-container #tour-results-card.plan-mode-training-only.plan-scope-semana .recipe-side {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
}

#results-container #tour-results-card.plan-mode-training-only.plan-scope-semana .exercise-side {
    padding-left: 18px;
    padding-right: 18px;
}

#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana .recipe-side {
    display: none;
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia .recipe-side {
    display: none;
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida .recipe-side {
    display: none;
}

#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana {
    grid-template-columns: minmax(0, 1fr);
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia {
    grid-template-columns: minmax(0, 1fr);
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida {
    grid-template-columns: minmax(0, 1fr);
}

#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana .exercise-side {
    padding: 16px 20px 20px;
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia .exercise-side {
    padding: 16px 20px 20px;
}

#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida .exercise-side {
    padding: 16px 20px 20px;
}

#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-gif-wrap,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-option-bar,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-desc,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana .exercise-how-to,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-note,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #workout-drawer-btn,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-stats-panel,
#results-container #tour-results-card.plan-training-week-premium.plan-mode-training-only.plan-scope-semana #exe-precaution-panel,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-gif-wrap,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-option-bar,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-desc,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia .exercise-how-to,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-note,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #workout-drawer-btn,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-stats-panel,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-dia #exe-precaution-panel,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-gif-wrap,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-option-bar,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-desc,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida .exercise-how-to,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-note,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #workout-drawer-btn,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-stats-panel,
#results-container #tour-results-card.plan-training-day-premium.plan-mode-training-only.plan-scope-comida #exe-precaution-panel {
    display: none !important;
}

#training-week-premium.training-week-premium {
    display: block;
    margin: 8px 0 2px;
}

.training-week-premium-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.training-week-premium-kicker {
    font-size: 0.78rem;
    color: rgba(175, 221, 241, 0.9);
    letter-spacing: 0.3px;
}

.training-week-premium-head h3 {
    margin: 4px 0 0;
    font-size: 1.25rem;
}

.training-week-premium-meta {
    font-size: 0.8rem;
    color: rgba(196, 218, 232, 0.95);
}

.training-week-premium-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.training-week-premium-day {
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(13, 30, 40, 0.9), rgba(8, 16, 24, 0.94));
    padding: 10px 10px 12px;
}

.training-week-premium-day.is-active {
    border-color: rgba(0, 229, 255, 0.65);
    box-shadow: 0 10px 24px rgba(0, 229, 255, 0.16);
}

.training-week-premium-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.training-week-premium-daylabel {
    font-size: 0.76rem;
    color: rgba(200, 223, 238, 0.94);
}

.training-week-premium-chip {
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.68rem;
    color: rgba(218, 247, 255, 0.95);
    background: rgba(0, 229, 255, 0.08);
}

.training-week-premium-day h4 {
    margin: 6px 0 4px;
    font-size: 1rem;
    line-height: 1.2;
}

.training-week-premium-volume {
    font-size: 0.74rem;
    color: rgba(194, 218, 234, 0.92);
    margin-bottom: 8px;
}

.training-week-premium-blocks {
    display: grid;
    gap: 5px;
    margin-bottom: 8px;
}

.training-week-premium-block {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.02);
}

.training-week-premium-block strong {
    color: #9ef4ff;
    white-space: nowrap;
}

.training-week-premium-btn {
    width: 100%;
    margin-top: 4px;
}

.training-week-premium-btn-static {
    width: 100%;
    margin-top: 4px;
    border-radius: 999px;
    padding: 7px 12px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(212, 243, 255, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.24);
    background: rgba(0, 229, 255, 0.08);
}

.training-week-detail {
    margin-top: 12px;
    border: 1px solid rgba(0, 229, 255, 0.24);
    border-radius: 14px;
    padding: 12px;
    background: linear-gradient(165deg, rgba(10, 25, 36, 0.92), rgba(7, 14, 22, 0.94));
}

.training-week-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.training-week-detail-kicker {
    font-size: 0.74rem;
    color: rgba(170, 208, 226, 0.9);
}

.training-week-detail-head h4 {
    margin: 3px 0 0;
    font-size: 1.04rem;
}

.training-week-detail-meta {
    font-size: 0.8rem;
    color: rgba(184, 214, 228, 0.92);
}

.training-week-detail-list {
    display: grid;
    gap: 6px;
}

.training-week-detail-row {
    display: block;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.training-week-detail-summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    cursor: pointer;
}

.training-week-detail-summary::-webkit-details-marker {
    display: none;
}

.training-week-detail-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: rgba(163, 227, 248, 0.92);
    transition: transform 0.18s ease;
}

.training-week-detail-row:not([open]) .training-week-detail-chevron {
    transform: rotate(-90deg);
}

.training-week-detail-left {
    display: flex;
    gap: 8px;
}

.training-week-detail-order {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(0, 229, 255, 0.2);
    color: #aef3ff;
}

.training-week-detail-left strong {
    display: block;
    font-size: 0.84rem;
    margin-bottom: 0;
}

.training-week-detail-body {
    padding: 0 9px 9px 38px;
}

.training-week-detail-body small {
    display: block;
    font-size: 0.73rem;
    color: rgba(193, 216, 231, 0.92);
    line-height: 1.38;
}

.training-week-detail-howto {
    margin: 5px 0 0;
    padding-left: 14px;
    display: grid;
    gap: 2px;
}

.training-week-detail-howto li {
    font-size: 0.72rem;
    color: rgba(205, 228, 239, 0.95);
    line-height: 1.38;
}

.training-week-detail-alerts {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.training-week-detail-note,
.training-week-detail-precaution {
    font-size: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.03);
}

.training-week-detail-precaution {
    border-color: rgba(255, 60, 120, 0.3);
    color: rgba(255, 191, 214, 0.96);
}

.training-week-detail-metrics {
    font-size: 0.7rem;
    color: #9ef4ff;
    white-space: nowrap;
    text-align: right;
}

#results-container #tour-results-card.plan-mode-training-only .recipe-side {
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

#results-container #tour-results-card.plan-loading-active .recipe-side,
#results-container #tour-results-card.plan-loading-active .exercise-side {
    overflow: hidden;
}

#results-container #tour-results-card.plan-loading-active .recipe-side>*:not(#recipe-loading-overlay),
#results-container #tour-results-card.plan-loading-active .exercise-side>*:not(#exercise-loading-overlay) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

#results-container #tour-results-card #plan-loading-unified-overlay {
    position: absolute;
    inset: 0;
    z-index: 14;
    border-radius: inherit;
    display: none;
    background: radial-gradient(circle at top,
            rgba(0, 229, 255, 0.08),
            rgba(5, 12, 20, 0.97) 58%);
    backdrop-filter: blur(12px);
}

#results-container #tour-results-card.plan-loading-active[data-loading-mode="training_only"] .recipe-side>*,
#results-container #tour-results-card.plan-loading-active[data-loading-mode="training_only"] .exercise-side>*,
#results-container #tour-results-card.plan-loading-active[data-loading-mode="nutrition_only"] .recipe-side>*,
#results-container #tour-results-card.plan-loading-active[data-loading-mode="nutrition_only"] .exercise-side>* {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#results-container #tour-results-card.plan-loading-active .recipe-loading-overlay,
#results-container #tour-results-card.plan-loading-active #exercise-loading-overlay,
#results-container #tour-results-card.plan-loading-active #plan-loading-unified-overlay {
    background: radial-gradient(circle at top,
            rgba(0, 229, 255, 0.08),
            rgba(5, 12, 20, 0.96) 58%);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
}

#results-container #tour-results-card.plan-mode-training-only .exercise-side {
    background: linear-gradient(160deg, rgba(0, 229, 255, 0.05), rgba(0, 0, 0, 0.3));
}

#results-container #tour-results-card.plan-mode-training-only .exercise-head {
    border-bottom-color: rgba(0, 229, 255, 0.28);
}

#results-container #tour-results-card.plan-mode-training-only #exe-title {
    font-size: 1.45rem !important;
}

#results-container #tour-results-card.plan-mode-training-only #exe-desc {
    color: rgba(236, 249, 255, 0.95);
    font-size: 0.97rem;
    line-height: 1.48;
}

#results-container #tour-results-card.plan-mode-training-only #exe-gif-wrap,
#results-container #tour-results-card.plan-mode-training-only #exe-option-bar,
#results-container #tour-results-card.plan-mode-training-only #exe-plan-preview,
#results-container #tour-results-card.plan-mode-training-only .exercise-how-to {
    border-color: rgba(0, 229, 255, 0.24);
    box-shadow: 0 10px 26px rgba(0, 229, 255, 0.1);
}

#results-container #tour-results-card.plan-mode-training-only #macro-summary,
#results-container #tour-results-card.plan-mode-training-only .recipe-meta-grid {
    display: none !important;
}

#results-container #tour-results-card.plan-mode-training-only .plan-view-toggle {
    display: none !important;
}

#results-container #tour-results-card.plan-mode-training-only #rec-title {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
}

#results-container #tour-results-card.plan-mode-training-only #rec-desc,
#results-container #tour-results-card.plan-mode-training-only #rec-note {
    color: #c9d8e4;
    font-size: 0.93rem;
    line-height: 1.45;
}

#results-container #tour-results-card.plan-mode-training-only #rec-steps .instruction-step {
    margin-bottom: 10px;
}

#results-container #tour-results-card.plan-mode-training-only #rec-steps .step-num {
    background: rgba(0, 229, 255, 0.2);
    color: #9cefff;
}

#results-container #tour-results-card.plan-mode-nutrition-only {
    grid-template-columns: minmax(0, 1fr);
}

#results-container #tour-results-card.plan-mode-nutrition-only .exercise-side {
    display: none !important;
}

#results-container #tour-results-card.plan-mode-nutrition-only .plan-view-toggle {
    display: none !important;
}

.history-mode-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(225, 248, 255, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.22);
    background: rgba(0, 229, 255, 0.08);
}

@media (max-width: 900px) {
    #results-container #tour-results-card.plan-mode-training-only,
    #results-container #tour-results-card.plan-mode-nutrition-only {
        grid-template-columns: 1fr;
    }

    #results-container #tour-results-card.plan-mode-training-only .recipe-side,
    #results-container #tour-results-card.plan-mode-training-only .exercise-side {
        border-right: 0;
    }

    .training-week-premium-grid {
        grid-template-columns: 1fr;
    }

    #tour-result-mode-group .scope-segmented {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #tour-result-mode-group .scope-pill[data-value="training_only"] {
        grid-column: 1 / -1;
    }

    #tour-result-mode-group .scope-pill {
        min-height: 66px;
    }

    #tour-result-mode-group .scope-pill .scope-pill-text {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    #tour-result-mode-group .scope-pill .scope-pill-subtitle {
        font-size: 0.6rem;
    }

    #tour-result-mode-group .scope-pill[data-value="training_only"] .scope-pill-text {
        font-size: 0.79rem;
    }

    #tour-scope-group .scope-pill {
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    #tour-result-mode-group .scope-segmented {
        grid-template-columns: 1fr;
    }

    #tour-result-mode-group .scope-pill {
        min-height: 64px;
        padding: 8px 10px;
    }

    #tour-result-mode-group .scope-pill .scope-pill-text {
        font-size: 0.8rem;
        line-height: 1.14;
    }

    #tour-result-mode-group .scope-pill .scope-pill-subtitle {
        font-size: 0.59rem;
    }

    #tour-result-mode-group .scope-pill[data-value="training_only"] .scope-pill-text {
        font-size: 0.77rem;
    }

    #tour-scope-group .scope-pill {
        min-height: 44px;
    }

    #tour-scope-group .scope-pill .scope-pill-text {
        font-size: 0.73rem;
    }
}

.training-week-premium-chip {
    position: relative;
    overflow: hidden;
    animation: premiumFocusChipPulse 3.4s ease-in-out infinite;
}

.training-week-premium-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(0, 229, 255, 0.26) 48%, transparent 100%);
    transform: translateX(-120%);
    animation: premiumFocusChipSweep 4.8s ease-in-out infinite;
    pointer-events: none;
}

#workout-drawer-overlay .workout-chip {
    animation: premiumWorkoutChipGlow 3.1s ease-in-out infinite;
}

#exe-title.exercise-ui-enter {
    animation: premiumExeTitleIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#exe-stats-panel.exercise-ui-enter,
#exe-precaution-panel.exercise-ui-enter,
.exercise-how-to.exercise-ui-enter {
    animation: premiumExercisePanelIn 520ms cubic-bezier(0.16, 0.84, 0.23, 1);
}

.training-skeleton .training-skeleton-pulse {
    animation: skeletonShimmer 1.5s infinite, premiumTrainingPulse 2.2s ease-in-out infinite;
}

.training-skeleton .training-skeleton-stats {
    position: relative;
}

.training-skeleton .training-skeleton-stats::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    opacity: 0.32;
    animation: premiumTrainingStatsAura 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes premiumFocusChipPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(0, 229, 255, 0);
    }
    50% {
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.24);
    }
}

@keyframes premiumFocusChipSweep {
    0%, 18% {
        transform: translateX(-120%);
        opacity: 0;
    }
    35% {
        opacity: 0.85;
    }
    58%, 100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes premiumWorkoutChipGlow {
    0%, 100% {
        box-shadow: inset 0 0 0 rgba(0, 229, 255, 0), 0 0 0 rgba(0, 229, 255, 0);
    }
    50% {
        box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.16), 0 0 12px rgba(0, 229, 255, 0.24);
    }
}

@keyframes premiumExeTitleIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes premiumExercisePanelIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes premiumTrainingPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.015);
    }
}

@keyframes premiumTrainingStatsAura {
    0%, 100% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.48;
    }
}

@media (prefers-reduced-motion: reduce) {
    .training-week-premium-chip,
    .training-week-premium-chip::after,
    #workout-drawer-overlay .workout-chip,
    #exe-title.exercise-ui-enter,
    #exe-stats-panel.exercise-ui-enter,
    #exe-precaution-panel.exercise-ui-enter,
    .exercise-how-to.exercise-ui-enter,
    .training-skeleton .training-skeleton-pulse,
    .training-skeleton .training-skeleton-stats::after {
        animation: none !important;
    }
}

/* ==========================================================================
   CHAT WIDGET LAYOUT FIXES (DESKTOP ONLY — mobile is handled by style-v3.css)
   ========================================================================== */

/* 1. DESKTOP ONLY: Force the Chat Widget to remain a single vertical column.
   CRITICAL: Do NOT set display on #tour-chat globally — on mobile,
   style-v3.css uses display:none/flex toggled by body.mobile-chat-active.
   If we set display:flex here, it overrides the mobile display:none and
   the chat covers the entire screen permanently. */
@media (min-width: 769px) {
    #tour-chat, .chat-widget {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        column-count: auto !important;
        clear: both !important;
    }

    /* 2. Force all children of the chat widget to stack properly */
    #tour-chat > div {
        float: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
}

/* 3. Allow chat messages to expand vertically (safe on all sizes) */
#tour-chat .chat-msgs {
    flex: 1 1 auto !important;
}

/* 4. Ensure horizontal quick actions don't wrap into weird columns */
#tour-chat .chat-quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

/* ==========================================================================
   MOBILE BOTTOM NAV & CHAT Z-INDEX FIXES
   ========================================================================== */
@media (max-width: 768px) {
    /* Elevate bottom nav above everything including chat */
    .iahc-bottom-nav {
        z-index: 2147483647 !important;
        pointer-events: auto !important;
    }

    /* When chat IS visible (body.mobile-chat-active), ensure it stacks correctly */
    body.mobile-chat-active #tour-chat {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        height: calc(100dvh - 72px - env(safe-area-inset-bottom)) !important;
    }

    /* Remove safe-area padding from input area since it sits above the nav */
    body.mobile-chat-active #tour-chat .chat-input-area {
        padding-bottom: 12px !important;
    }
}

/* ==========================================================================
   MOBILE PRODUCTION POLISH - viewport-safe PWA layout
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --iahc-mobile-nav-h: calc(72px + env(safe-area-inset-bottom));
        --iahc-mobile-page-pad: clamp(12px, 4vw, 16px);
    }

    body.iahc-app-body {
        width: 100%;
        overflow-x: hidden !important;
        background: #060a10;
    }

    body.iahc-app-body .iahc-app-container {
        height: 100dvh !important;
        padding-bottom: var(--iahc-mobile-nav-h) !important;
        scroll-padding-bottom: calc(var(--iahc-mobile-nav-h) + 18px) !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    body.iahc-app-body #app-dashboard {
        padding-bottom: calc(var(--iahc-mobile-nav-h) + 18px) !important;
    }

    body.iahc-app-body .main-grid,
    body.iahc-app-body main,
    body.iahc-app-body .content-area {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .iahc-bottom-nav {
        height: var(--iahc-mobile-nav-h) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 78px 1fr 1fr;
        align-items: center !important;
        padding: 5px max(8px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)) !important;
        gap: 0 !important;
        z-index: 2147483647 !important;
    }

    .iahc-bottom-nav .nav-item {
        min-width: 0 !important;
        height: 56px !important;
        padding: 6px 2px !important;
        gap: 4px !important;
        font-size: clamp(0.56rem, 2.45vw, 0.66rem) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.25px !important;
        white-space: nowrap !important;
    }

    .iahc-bottom-nav .nav-item i {
        font-size: 1.22rem !important;
        margin: 0 !important;
    }

    .iahc-bottom-nav .nav-fab-container {
        top: -22px !important;
        width: 78px !important;
        flex: 0 0 78px !important;
    }

    .iahc-bottom-nav .nav-fab {
        width: 62px !important;
        height: 62px !important;
        border-width: 3px !important;
    }

    body.iahc-app-body .today-overview {
        width: auto !important;
        max-width: calc(100vw - (var(--iahc-mobile-page-pad) * 2)) !important;
        margin: 10px var(--iahc-mobile-page-pad) 14px !important;
        padding: 14px !important;
        border-radius: 20px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
    }

    body.iahc-app-body .today-head {
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
    }

    body.iahc-app-body .today-title {
        min-width: 0 !important;
        font-size: clamp(0.95rem, 4vw, 1.08rem) !important;
        line-height: 1.15 !important;
    }

    body.iahc-app-body .today-sub {
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
    }

    body.iahc-app-body .today-badge {
        flex: 0 0 auto !important;
        padding: 7px 9px !important;
        gap: 7px !important;
        font-size: 0.62rem !important;
    }

    body.iahc-app-body .today-badge-track {
        width: 46px !important;
    }

    body.iahc-app-body .today-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.iahc-app-body .today-card {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 104px !important;
        padding: 12px !important;
        border-radius: 16px !important;
        gap: 6px !important;
    }

    body.iahc-app-body .today-card-title {
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0.35px !important;
    }

    body.iahc-app-body .today-card-value {
        font-size: clamp(0.86rem, 3.4vw, 0.98rem) !important;
        line-height: 1.18 !important;
    }

    body.iahc-app-body .today-card-meta,
    body.iahc-app-body .today-streak {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
    }

    #plan-tabs,
    #plan-subtabs,
    #day-total {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 10px !important;
        gap: 8px !important;
    }

    #plan-tabs .tab-btn,
    #plan-subtabs .tab-btn,
    #day-total .tab-btn {
        min-height: 48px !important;
        padding: 8px 10px !important;
        font-size: clamp(0.62rem, 2.55vw, 0.72rem) !important;
        line-height: 1.15 !important;
    }

    #plan-tabs:not(.week-tabs) .tab-btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    .recipe-card,
    .plan-card,
    .glass-panel {
        max-width: calc(100vw - (var(--iahc-mobile-page-pad) * 2)) !important;
        margin-left: var(--iahc-mobile-page-pad) !important;
        margin-right: var(--iahc-mobile-page-pad) !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .recipe-card h3,
    .plan-card h3 {
        font-size: clamp(1.28rem, 7vw, 1.75rem) !important;
        line-height: 1.12 !important;
    }

    body.mobile-chat-active #tour-chat {
        z-index: 2147483600 !important;
        top: 0 !important;
        bottom: var(--iahc-mobile-nav-h) !important;
        height: calc(100dvh - var(--iahc-mobile-nav-h)) !important;
        max-height: calc(100dvh - var(--iahc-mobile-nav-h)) !important;
        overflow: hidden !important;
    }

    body.mobile-chat-active #tour-chat > * {
        min-width: 0 !important;
    }

    body.mobile-chat-active #tour-chat .chat-header {
        flex: 0 0 auto !important;
        padding: calc(10px + env(safe-area-inset-top)) 14px 8px !important;
        gap: 8px !important;
    }

    body.mobile-chat-active #tour-chat .chat-header h3 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-actions {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        max-height: 116px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body.mobile-chat-active #tour-chat .chat-quick-action {
        min-width: 0 !important;
        min-height: 38px !important;
        justify-content: center !important;
        padding: 8px 9px !important;
        border-radius: 14px !important;
        font-size: clamp(0.68rem, 2.9vw, 0.76rem) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body.mobile-chat-active #tour-chat .chat-options {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body.mobile-chat-active #tour-chat .chat-option,
    body.mobile-chat-active #tour-chat .chat-select,
    body.mobile-chat-active #tour-chat .btn-chat-control {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 0.7rem !important;
    }

    body.mobile-chat-active #tour-chat .chat-msgs,
    body.mobile-chat-active #tour-chat #chat-msgs {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 12px 10px 14px !important;
    }

    body.mobile-chat-active #tour-chat .msg {
        max-width: 96% !important;
    }

    body.mobile-chat-active #tour-chat .msg .msg-body {
        font-size: 0.9rem !important;
        line-height: 1.38 !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: 42px 42px 42px minmax(0, 1fr) 56px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 10px 10px !important;
    }

    body.mobile-chat-active #tour-chat .chat-input {
        min-width: 0 !important;
        height: 46px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area button {
        min-width: 0 !important;
    }

    body.mobile-chat-active #tour-chat .chat-send-btn,
    body.mobile-chat-active #tour-chat .btn-send {
        width: 56px !important;
        height: 46px !important;
        border-radius: 20px !important;
    }

    #habits-modal.modal-overlay,
    #plan-confirm-modal.modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #habits-modal .habits-modal,
    #plan-confirm-modal .plan-confirm-modal,
    #plan-confirm-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - 10px) !important;
        border-radius: 24px 24px 0 0 !important;
        overflow: hidden !important;
    }

    #habits-modal .habits-modal {
        height: calc(100dvh - env(safe-area-inset-top) - 10px) !important;
    }

    #habits-modal .habits-modal .modal-header {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 16px 14px 10px !important;
        gap: 10px !important;
    }

    #habits-modal .habits-header-left {
        min-width: 0 !important;
    }

    #habits-modal .habits-header-left h3 {
        font-size: 1rem !important;
    }

    #habits-modal .habits-tabs {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 5px !important;
        border-radius: 14px !important;
        scrollbar-width: none;
    }

    #habits-modal .habits-tabs::-webkit-scrollbar {
        display: none;
    }

    #habits-modal .habit-tab {
        flex: 1 0 auto !important;
        min-width: 104px !important;
        padding: 8px 12px !important;
        font-size: 0.76rem !important;
        gap: 6px !important;
    }

    #habits-modal .habits-panels {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px 12px calc(var(--iahc-mobile-nav-h) + 16px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #habits-modal .habits-summary-layout,
    #habits-modal .habits-checkin-grid,
    #habits-modal .habits-goals-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    #habits-modal .habits-summary-card,
    #habits-modal .habits-weekly-status,
    #habits-modal .checkin-metric-strip,
    #habits-modal .habits-smart-goals-card,
    #habits-modal .micro-goals-board {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    #habits-modal .habits-summary-status-head,
    #habits-modal .habits-weekly-status-left,
    #habits-modal .metric-strip-head {
        min-width: 0 !important;
    }

    #habits-modal .habits-summary-card-title,
    #habits-modal .metric-strip-name {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    #habits-modal .habits-summary-water-ctrl {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 8px !important;
    }

    #plan-confirm-modal .plan-confirm-modal,
    #plan-confirm-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 18px 14px calc(var(--iahc-mobile-nav-h) + 14px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #plan-confirm-modal .modal-header {
        flex: 0 0 auto !important;
        align-items: flex-start !important;
    }

    #plan-confirm-modal .plan-confirm-heading {
        min-width: 0 !important;
        align-items: flex-start !important;
    }

    #plan-confirm-modal .plan-confirm-heading h3 {
        margin: 0 !important;
        font-size: 1.25rem !important;
        line-height: 1.15 !important;
    }

    #plan-confirm-modal .plan-confirm-heading small {
        display: block !important;
        margin-top: 4px !important;
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
    }

    #plan-confirm-modal .plan-confirm-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #plan-confirm-modal .plan-confirm-pill {
        min-width: 0 !important;
        padding: 7px 6px !important;
        font-size: clamp(0.62rem, 2.55vw, 0.72rem) !important;
        white-space: normal !important;
        line-height: 1.18 !important;
    }

    #plan-confirm-modal .plan-confirm-summary {
        flex: 0 0 auto !important;
        display: grid !important;
        gap: 8px !important;
        padding: 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #plan-confirm-modal .plan-confirm-row {
        display: grid !important;
        grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr) !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 9px 10px !important;
    }

    #plan-confirm-modal .plan-confirm-label {
        font-size: 0.65rem !important;
        line-height: 1.18 !important;
    }

    #plan-confirm-modal .plan-confirm-value {
        min-width: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.32 !important;
        overflow-wrap: anywhere !important;
    }

    #plan-confirm-modal .plan-confirm-usage,
    #plan-confirm-modal .plan-confirm-note {
        font-size: 0.76rem !important;
        line-height: 1.32 !important;
    }

    #plan-confirm-modal .plan-confirm-cta {
        position: sticky !important;
        bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
        z-index: 3 !important;
        min-height: 52px !important;
        width: 100% !important;
        margin-top: 2px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 380px) {
    body.iahc-app-body .today-cards {
        grid-template-columns: 1fr !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-actions {
        grid-template-columns: 1fr !important;
        max-height: 104px !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area {
        grid-template-columns: 38px 38px 38px minmax(0, 1fr) 50px !important;
        gap: 6px !important;
    }

    #plan-confirm-modal .plan-confirm-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   MOBILE REDESIGN V2 - native app surfaces
   ========================================================================== */
@media (max-width: 768px) {
    body.iahc-app-body .header-bar {
        min-height: 58px !important;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
    }

    body.iahc-app-body .today-overview {
        order: -20 !important;
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        background:
            linear-gradient(180deg, rgba(9, 22, 30, 0.96), rgba(6, 12, 18, 0.94)),
            radial-gradient(360px 180px at 0% 0%, rgba(0, 229, 255, 0.16), transparent 60%) !important;
    }

    body.iahc-app-body .today-action {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 2px !important;
    }

    body.iahc-app-body .today-action-meta {
        min-width: 0 !important;
    }

    body.iahc-app-body .today-action-title {
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
    }

    body.iahc-app-body .today-action-desc {
        font-size: 0.8rem !important;
        line-height: 1.35 !important;
    }

    body.iahc-app-body .today-action-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.iahc-app-body .today-action-btn {
        min-height: 42px !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        font-size: 0.76rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    body.mobile-chat-active #tour-chat {
        background:
            linear-gradient(180deg, rgba(4, 9, 14, 0.99), rgba(3, 7, 12, 0.99)) !important;
    }

    body.mobile-chat-active #tour-chat .chat-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        padding: calc(8px + env(safe-area-inset-top)) 10px 7px !important;
        border-bottom-color: rgba(0, 229, 255, 0.12) !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-heart {
        width: 30px !important;
        height: 30px !important;
        margin-right: 2px !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-info {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        align-items: center !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-info h4,
    body.mobile-chat-active #tour-chat .chat-header-info h3 {
        margin: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-info small {
        display: none !important;
    }

    /* Hide usage counters on mobile — too crowded for header */
    body.mobile-chat-active #tour-chat #chat-usage-counter {
        display: none !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions::-webkit-scrollbar {
        display: none;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions .btn-chat-control,
    body.mobile-chat-active #tour-chat .chat-header-actions button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        justify-content: center !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions .btn-chat-control i,
    body.mobile-chat-active #tour-chat .chat-header-actions button i {
        margin: 0 !important;
        font-size: 0.86rem !important;
    }

    body.mobile-chat-active #tour-chat .chat-options {
        display: none !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: 50px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        scrollbar-width: none;
        order: 3 !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-actions::-webkit-scrollbar {
        display: none;
    }

    body.mobile-chat-active #tour-chat .chat-quick-action {
        flex: 0 0 auto !important;
        min-width: 118px !important;
        min-height: 36px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
    }

    body.mobile-chat-active #tour-chat .chat-msgs,
    body.mobile-chat-active #tour-chat #chat-msgs {
        order: 2 !important;
        padding: 12px 10px 8px !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area {
        order: 4 !important;
        box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.42) !important;
    }

    .modal-overlay {
        z-index: 2147483000 !important;
    }

    #profile-modal.modal-overlay,
    #habits-modal.modal-overlay,
    #plan-confirm-modal.modal-overlay,
    #settings-modal.modal-overlay,
    #dashboard-prefs-modal.modal-overlay {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.72) !important;
    }

    #profile-modal .profile-modal,
    #profile-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - env(safe-area-inset-top) - 8px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - 8px) !important;
        border-radius: 24px 24px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    #profile-modal .profile-modal h2,
    #profile-modal .modal-header {
        flex: 0 0 auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        margin: 0 !important;
        padding: 18px 16px 12px !important;
        background: linear-gradient(180deg, rgba(18, 31, 39, 0.99), rgba(18, 31, 39, 0.94)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-size: 1.16rem !important;
        line-height: 1.15 !important;
    }

    #profile-modal .profile-edit-actions {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px 16px !important;
    }

    #profile-modal .profile-edit-actions .btn-soft,
    #profile-modal .profile-edit-actions button {
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 14px !important;
    }

    #profile-modal .wizard-summary-modern,
    #profile-modal .profile-summary-modern {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 12px 16px calc(var(--iahc-mobile-nav-h) + 18px) !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    #profile-modal .summary-hero {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 20px !important;
        margin-bottom: 12px !important;
    }

    #profile-modal .summary-focus,
    #profile-modal .summary-grid,
    #profile-modal .summary-next {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px !important;
        border-radius: 18px !important;
        margin-bottom: 10px !important;
    }

    #profile-modal .summary-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    #profile-modal .summary-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #profile-modal .summary-column {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #profile-modal .summary-hero-title {
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    #profile-modal .summary-hero-sub {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere !important;
    }

    #profile-modal .summary-card,
    #profile-modal .summary-card * {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    #profile-modal .summary-card-title {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }

    #profile-modal .summary-card-value {
        font-size: 0.92rem !important;
        line-height: 1.3 !important;
    }

    #profile-modal .modal-actions {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 12px 16px calc(env(safe-area-inset-bottom) + var(--iahc-mobile-nav-h) + 12px) !important;
    }

    #profile-modal .modal-actions button,
    #profile-modal .modal-actions a,
    #profile-modal .modal-actions .btn-soft {
        min-height: 44px !important;
        border-radius: 14px !important;
        font-size: 0.76rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    /* Profile h2 — sticky header with close area */
    #profile-modal h2 {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 18px 16px 12px !important;
        font-size: 1.15rem !important;
        line-height: 1.2 !important;
        background: rgba(12, 20, 28, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }

    /* Profile edit actions — 2 cols compact */
    #profile-modal .profile-edit-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 12px 16px 8px !important;
    }

    /* Profile mobile quick-actions menu */
    #profile-modal .profile-mobile-menu {
        padding: 4px 16px 12px !important;
    }

    #profile-modal .profile-mobile-menu h3 {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.45) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }

    #profile-modal .mobile-menu-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    #profile-modal .mobile-menu-grid button,
    #profile-modal .mobile-menu-grid .btn-soft {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #profile-modal .mobile-menu-grid .btn-danger-soft {
        border-color: rgba(239, 68, 68, 0.25) !important;
        color: #ef4444 !important;
    }

    /* Privacy note compact */
    #profile-modal .privacy-note {
        padding: 10px 16px !important;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        color: rgba(255, 255, 255, 0.35) !important;
    }

    /* Summary hero badges */
    #profile-modal .summary-hero-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    #profile-modal .summary-hero-badges .badge,
    #profile-modal .summary-hero-badges span {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    #habits-modal .habits-modal {
        position: relative !important;
        background:
            linear-gradient(180deg, rgba(15, 29, 37, 0.98), rgba(8, 15, 22, 0.98)) !important;
    }

    #habits-modal .habits-modal .modal-header {
        position: relative !important;
        display: block !important;
        padding: 18px 14px 10px !important;
    }

    #habits-modal .habits-header-left {
        padding-right: 46px !important;
        margin-bottom: 12px !important;
    }

    #habits-modal .modal-close,
    #habits-modal .close-modal,
    #habits-modal .close-btn,
    #habits-modal .btn-close,
    #habits-modal [aria-label="Cerrar"],
    #habits-modal [data-close] {
        position: absolute !important;
        top: 16px !important;
        right: 14px !important;
        z-index: 5 !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 14px !important;
    }

    #habits-modal .habits-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    #habits-modal .habit-tab {
        min-width: 0 !important;
        width: 100% !important;
        padding: 8px 6px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    #habits-modal .habit-tab-icon {
        display: none !important;
    }

    #habits-modal .habits-summary-status-head,
    #habits-modal .habits-summary-card-head,
    #habits-modal .habits-weekly-status {
        align-items: flex-start !important;
    }

    #habits-modal .habits-summary-pill,
    #habits-modal .habits-summary-chip {
        white-space: normal !important;
        text-align: right !important;
    }

    body.mobile-generator-active .sidebar-ctrl {
        bottom: var(--iahc-mobile-nav-h) !important;
        max-height: calc(100dvh - var(--iahc-mobile-nav-h) - env(safe-area-inset-top) - 8px) !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) 16px !important;
        border-radius: 24px 24px 0 0 !important;
        z-index: 2147482500 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        /* Kill the slideUpSheet animation — its transform breaks touch scroll */
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
        contain: layout paint style !important;
    }

    body.mobile-generator-active .sidebar-ctrl .btn-neon,
    body.mobile-generator-active .sidebar-ctrl .btn-outline,
    body.mobile-generator-active .sidebar-ctrl button {
        min-height: 48px !important;
        border-radius: 14px !important;
        font-size: 0.86rem !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-section {
        margin-bottom: 8px !important;
        content-visibility: auto;
        contain-intrinsic-size: 280px;
        animation: none !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-section-body {
        overflow: visible !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-section[data-open="true"],
    body.mobile-generator-active .sidebar-ctrl .control-section.open,
    body.mobile-generator-active .sidebar-ctrl .control-section-header,
    body.mobile-generator-active .sidebar-ctrl .control-section-header::before,
    body.mobile-generator-active .sidebar-ctrl .control-section[data-open="true"] .control-section-header span::before {
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-group {
        margin-bottom: 12px !important;
    }

    body.mobile-generator-active .sidebar-ctrl .custom-select-menu {
        position: relative !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 380px) {
    body.iahc-app-body .today-action-buttons {
        grid-template-columns: 1fr !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions {
        max-width: 86px !important;
    }

    #profile-modal .profile-edit-actions {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   MOBILE AUDIT PASS - one active surface, native scrolling, no clipped CTAs
   ========================================================================== */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        min-height: 100dvh !important;
        overscroll-behavior-y: auto !important;
    }

    body.mobile-modal-active #app-dashboard {
        visibility: hidden !important;
        pointer-events: none !important;
    }



    body.mobile-modal-active .iahc-bottom-nav {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-modal-active .modal-overlay {
        isolation: isolate !important;
    }

    body.mobile-modal-active #profile-modal .wizard-summary-modern,
    body.mobile-modal-active #profile-modal .profile-summary-modern,
    body.mobile-modal-active #history-modal .history-modal-list {
        contain: layout paint style !important;
    }

    body.mobile-modal-active #profile-modal .wizard-summary-modern,
    body.mobile-modal-active #profile-modal .profile-summary-modern,
    body.mobile-modal-active #history-modal .history-item {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.mobile-modal-active #history-modal .history-item {
        contain: layout paint !important;
        transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease !important;
    }

    body.mobile-modal-active .sidebar-ctrl,
    body.mobile-chat-active .sidebar-ctrl {
        display: none !important;
    }

    body.iahc-app-body .today-icon-box {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        margin-right: 10px !important;
        border-radius: 12px !important;
    }

    body.iahc-app-body .today-icon-box i {
        font-size: 1.15rem !important;
    }

    body.iahc-app-body #today-overview {
        flex: 0 0 auto !important;
        contain: layout paint style !important;
    }

    body.iahc-app-body #results-container {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* =========================================================
       EXTREME MOBILE PERFORMANCE (60FPS GLASSMORPHISM FIX) 
       ========================================================= */
       
    /* 1. Eliminar Stacked Blurs (Cristales superpuestos) */
    .modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .recipe-card, .plan-card,
    .history-item, .shopping-group, .ingredient-card, 
    #profile-modal .profile-summary-modern,
    #profile-modal .wizard-summary-modern,
    .progress-card {
        /* Bajar de 24px a 8px reduce matemáticamente un 80% la carga GPU */
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* 2. Hack de 60fps Nativo (Pausar filtros mientras te mueves) */
    
    body.is-scrolling .recipe-card, 
    body.is-scrolling .plan-card,
    body.is-scrolling .history-item, 
    body.is-scrolling .shopping-group, 
    body.is-scrolling .ingredient-card, 
    body.is-scrolling #profile-modal .profile-summary-modern,
    body.is-scrolling #profile-modal .wizard-summary-modern,
    body.is-scrolling .progress-card,
    body.is-scrolling .plan-view-toggle,
    body.is-scrolling .header-bar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    body.iahc-app-body .plan-view-toggle {
        position: sticky !important;
        top: calc(58px + env(safe-area-inset-top)) !important;
        z-index: 10 !important;
        margin: 0 0 12px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        background: rgba(8, 13, 20, 0.92) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        contain: paint style !important;
    }

    body.iahc-app-body #results-container #tour-results-card,
    body.iahc-app-body #results-container #tour-results-card .recipe-side,
    body.iahc-app-body #results-container #tour-results-card .exercise-side {
        contain: paint !important;
    }

    body.iahc-app-body .plan-view-btn {
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        border-radius: 14px !important;
    }

    body.mobile-chat-active #tour-chat .chat-header {
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.mobile-chat-active #tour-chat .chat-header-actions .btn-chat-control:nth-child(n+5),
    body.mobile-chat-active #tour-chat .chat-header-actions button:nth-child(n+5) {
        display: none !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-action:nth-child(n+6) {
        display: none !important;
    }

    body.mobile-chat-active #tour-chat .chat-plan-action,
    body.mobile-chat-active #tour-chat .chat-profile-update,
    body.mobile-chat-active #tour-chat .chat-profile-confirmation {
        max-width: 98% !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    body.mobile-chat-active #tour-chat .chat-plan-action-actions,
    body.mobile-chat-active #tour-chat .chat-profile-update-chips {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area > * {
        flex-shrink: 0 !important;
    }

    body.mobile-chat-active #tour-chat .chat-input-area .chat-input {
        width: 100% !important;
    }

    .modal-overlay[data-modal="true"],
    .modal-overlay {
        padding: 0 !important;
    }

    .modal-overlay[data-modal="true"] > .modal-content,
    #history-modal .modal-content,
    #saved-recipes-modal .modal-content,
    #shopping-modal .modal-content,
    #tips-modal .modal-content,
    #privacy-modal .modal-content,
    #settings-modal .modal-content,
    #dashboard-prefs-modal .modal-content,
    #ingredient-modal .modal-content,
    #progress-modal .progress-modal {
        box-sizing: border-box !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - env(safe-area-inset-top) - 8px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - 8px) !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 16px 14px calc(var(--iahc-mobile-nav-h) + 14px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #history-modal .modal-content,
    #saved-recipes-modal .modal-content,
    #shopping-modal .modal-content,
    #privacy-modal .modal-content,
    #settings-modal .modal-content,
    #dashboard-prefs-modal .modal-content,
    #ingredient-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #progress-modal .progress-modal {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #history-modal .modal-header,
    #saved-recipes-modal .modal-header,
    #shopping-modal .modal-header,
    #privacy-modal .modal-header,
    #settings-modal .modal-header,
    #dashboard-prefs-modal .modal-header,
    #ingredient-modal .modal-header,
    #progress-modal .progress-v2-header {
        flex: 0 0 auto !important;
        position: sticky !important;
        top: -16px !important;
        z-index: 5 !important;
        padding: 16px 0 10px !important;
        margin-top: -16px !important;
        background: linear-gradient(180deg, rgba(18, 31, 39, 0.98), rgba(18, 31, 39, 0.88)) !important;
    }

    #history-modal .history-modal-list,
    #saved-recipes-modal .history-modal-list,
    #shopping-modal .shopping-groups,
    #privacy-modal .privacy-content,
    #settings-modal .settings-content,
    #dashboard-prefs-modal .dashboard-prefs-grid,
    #ingredient-modal .ingredient-content,
    #progress-modal .progress-grid,
    #progress-modal .progress-summary,
    #progress-modal .progress-badges {
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    #dashboard-prefs-modal .dashboard-prefs-grid,
    #progress-modal .progress-grid,
    #progress-modal .progress-summary,
    #progress-modal .progress-badges {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #history-modal .history-item,
    #saved-recipes-modal .history-item,
    #shopping-modal .shopping-group,
    #settings-modal .settings-row,
    #dashboard-prefs-modal .dashboard-prefs-row,
    #ingredient-modal .ingredient-card,
    #progress-modal .progress-card,
    #progress-modal .progress-badge,
    #progress-modal .progress-v2-ai-insight {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
        overflow-wrap: anywhere !important;
    }

    .modal-content h2,
    .modal-content h3,
    .progress-modal h3,
    .profile-modal h2 {
        font-size: clamp(1.05rem, 5vw, 1.28rem) !important;
        line-height: 1.15 !important;
    }

    .modal-content button,
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        max-width: 100% !important;
    }

    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        font-size: 16px !important;
    }

    #habits-modal .checkin-metric-strip,
    #habits-modal .metric-strip-levels,
    #habits-modal .metric-strip-moods,
    #habits-modal .recovery-strip,
    #habits-modal .diet-strip,
    #habits-modal .rpe-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #habits-modal .checkin-metric-strip::-webkit-scrollbar,
    #habits-modal .metric-strip-levels::-webkit-scrollbar,
    #habits-modal .metric-strip-moods::-webkit-scrollbar,
    #habits-modal .recovery-strip::-webkit-scrollbar,
    #habits-modal .diet-strip::-webkit-scrollbar,
    #habits-modal .rpe-strip::-webkit-scrollbar {
        display: none;
    }

    #habits-modal .mstrip-btn,
    #habits-modal .mstrip-mood,
    #habits-modal .sleep-pill {
        min-height: 38px !important;
        min-width: 44px !important;
        padding: 7px 9px !important;
        border-radius: 14px !important;
        font-size: 0.74rem !important;
    }

    body.mobile-generator-active .sidebar-ctrl {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    body.mobile-generator-active .sidebar-ctrl > div:first-child {
        position: sticky !important;
        top: -18px !important;
        z-index: 5 !important;
        padding: 14px 0 10px !important;
        margin: -18px -16px 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        background: linear-gradient(180deg, rgba(10, 10, 15, 0.99), rgba(10, 10, 15, 0.92)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.mobile-generator-active .sidebar-ctrl h3 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
    }

    body.mobile-generator-active .mobile-only-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 1rem !important;
    }
}

/* Desktop safety: hide mobile-only glance */
@media (min-width: 769px) {
    .mobile-user-glance {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE USER GLANCE — Name, IMC, Weight, Height, Age in "Hoy de un vistazo"
   ========================================================================== */
@media (max-width: 768px) {
    .mobile-user-glance {
        padding: 0 0 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 12px;
    }

    .glance-greeting {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .glance-greet-text {
        font-size: 0.82rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0.2px;
    }

    .glance-greet-name {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.3px;
        text-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
    }

    .glance-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .glance-stat {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 8px 12px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .glance-stat-icon {
        width: 26px;
        height: 26px;
        min-width: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(0, 229, 255, 0.1);
        color: #00e5ff;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .glance-stat-icon.imc-ok { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
    .glance-stat-icon.imc-low { background: rgba(250, 204, 21, 0.12); color: #facc15; }
    .glance-stat-icon.imc-high { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
    .glance-stat-icon.imc-vhigh { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

    .glance-stat-data {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

    .glance-stat-value {
        font-size: 0.88rem;
        font-weight: 800;
        color: #fff;
        line-height: 1.1;
        white-space: nowrap;
    }

    .glance-stat-label {
        font-size: 0.62rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1;
        white-space: nowrap;
    }

    /* Mobile header: Keep clean — user info is in the glance section */
    body.iahc-app-body .header-bar .user-meta-group {
        display: none !important; /* Name/IMC shown in today-overview glance */
    }

    body.iahc-app-body .header-bar .header-title-text h1 {
        font-size: 1rem !important;
        gap: 6px !important;
    }

    body.iahc-app-body .header-bar .beta-pill {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }

    /* Today overview title compact on mobile */
    body.iahc-app-body .today-head {
        padding-bottom: 4px !important;
    }

    body.iahc-app-body .today-icon-box {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
    }

    body.iahc-app-body .today-icon-box i {
        font-size: 1rem !important;
    }

    /* Chat quick-actions: horizontal scroll with snap */
    body.mobile-chat-active #tour-chat .chat-quick-actions {
        scroll-snap-type: x mandatory !important;
    }

    body.mobile-chat-active #tour-chat .chat-quick-action {
        scroll-snap-align: start !important;
    }
}

/* Small phones: glance adjustments */
@media (max-width: 380px) {
    .glance-stats {
        gap: 5px !important;
    }

    .glance-greet-name {
        font-size: 1.05rem;
    }

    .glance-stat {
        padding: 7px 8px;
        gap: 5px;
    }

    .glance-stat-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 6px;
        font-size: 0.62rem;
    }

    .glance-stat-value {
        font-size: 0.8rem !important;
    }

    .glance-stat-label {
        font-size: 0.55rem !important;
    }
}

/* ==========================================================================
   MOBILE FIX BATCH 3 — Chat header, Recipe tags, Profile polish, Generator
   ========================================================================== */
@media (max-width: 768px) {

    /* ---- CHAT HEADER: Compact, clean, professional ---- */
    body.mobile-chat-active #tour-chat .chat-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: calc(env(safe-area-inset-top) + 8px) 12px 6px !important;
        background: rgba(10, 12, 16, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    body.mobile-chat-active .chat-header-heart {
        flex: 0 0 auto !important;
        width: 28px !important;
        height: 28px !important;
    }

    body.mobile-chat-active .chat-header-heart svg {
        width: 28px !important;
        height: 28px !important;
    }

    body.mobile-chat-active .chat-header-info {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    body.mobile-chat-active .chat-header-info h4 {
        font-size: 0.88rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.mobile-chat-active .chat-header-info small {
        font-size: 0.62rem !important;
        line-height: 1.1 !important;
        color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Hide usage counter in mobile chat header — too crowded */
    body.mobile-chat-active #chat-usage-counter {
        display: none !important;
    }

    /* Chat header action buttons: horizontal scroll strip */
    body.mobile-chat-active .chat-header-actions {
        flex: 0 0 100% !important;
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 2px !important;
    }

    body.mobile-chat-active .chat-header-actions::-webkit-scrollbar {
        display: none;
    }

    body.mobile-chat-active .chat-header-actions .btn-chat-control {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 0.66rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    body.mobile-chat-active .chat-header-actions .btn-chat-control i {
        font-size: 0.62rem !important;
    }

    /* ---- RECIPE TAGS: flex wrap properly ---- */
    .recipe-tags,
    .tag-row,
    .recipe-meta-tags,
    .plan-recipe-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        max-width: 100% !important;
    }

    .recipe-tags .tag,
    .tag-row .tag,
    .recipe-meta-tags .tag,
    .plan-recipe-tags .tag,
    .recipe-tag,
    .tag {
        flex: 0 0 auto !important;
        max-width: calc(50vw - 20px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
    }

    /* Nutrition pills */
    .recipe-macros,
    .macro-pills,
    .nutrition-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .recipe-macros .macro-pill,
    .macro-pills .pill,
    .nutrition-pills .pill,
    .macro-pill,
    .nutrition-pill {
        flex: 0 0 auto !important;
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }

    /* Plan view toggle buttons */
    .plan-view-toggle {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .plan-view-toggle .plan-view-btn {
        flex: 1 !important;
        min-height: 40px !important;
        font-size: 0.78rem !important;
    }

    /* ---- PROFILE: Better organized ---- */
    #profile-modal .profile-edit-actions .btn-soft {
        font-size: 0.72rem !important;
        padding: 8px 10px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    /* Profile summary hero — more compact */
    #profile-modal .summary-hero {
        padding: 14px !important;
        margin: 0 16px 10px !important;
        border-radius: 16px !important;
    }

    #profile-modal .summary-hero-title {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
    }

    #profile-modal .summary-hero-sub {
        font-size: 0.74rem !important;
    }

    /* Profile summary sections — proper wrapping */
    #profile-modal .wizard-summary-modern {
        padding: 0 0 calc(var(--iahc-mobile-nav-h) + 16px) !important;
    }


    /* PROFILE REORG: Summary first, then edit buttons (native app pattern) */
    #profile-modal .profile-modal,
    #profile-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
    }

    #profile-modal h2 {
        order: 1 !important;
    }

    #profile-modal .wizard-summary-modern,
    #profile-modal .profile-summary-modern {
        order: 2 !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        padding: 12px 16px !important;
    }

    #profile-modal .profile-edit-actions {
        order: 3 !important;
        padding: 8px 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    #profile-modal .profile-mobile-menu {
        order: 4 !important;
    }

    #profile-modal .privacy-note {
        order: 5 !important;
    }

    #profile-modal .modal-actions {
        order: 6 !important;
    }

    /* ---- GENERATOR: Force scroll on all child elements ---- */
    body.mobile-generator-active .sidebar-ctrl .control-section {
        overflow: visible !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-section-header {
        position: relative !important;
        z-index: 2 !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-section-body {
        overflow: visible !important;
        max-height: none !important;
    }

    body.mobile-generator-active .sidebar-ctrl .control-group {
        overflow: visible !important;
    }

    body.mobile-generator-active .sidebar-ctrl select,
    body.mobile-generator-active .sidebar-ctrl input,
    body.mobile-generator-active .sidebar-ctrl textarea {
        min-height: 44px !important;
        font-size: 0.84rem !important;
        border-radius: 12px !important;
    }

    /* Generator bottom action bar — sticky with generate button visible */
    body.mobile-generator-active .sidebar-ctrl .control-footer,
    body.mobile-generator-active .sidebar-ctrl .generate-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        padding: 12px 0 env(safe-area-inset-bottom) !important;
        background: linear-gradient(180deg, transparent, rgba(10, 10, 15, 0.95) 20%) !important;
    }

    /* Generate button — big and prominent */
    body.mobile-generator-active .sidebar-ctrl .btn-neon[onclick*="generate"],
    body.mobile-generator-active .sidebar-ctrl #tour-generate-btn {
        min-height: 52px !important;
        border-radius: 16px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
}

/* === PWA NATIVE FEEL (ONLY MOBILE/TOUCH) === */
@media (max-width: 1024px) {
    html, body {
        
        -webkit-tap-highlight-color: transparent !important;
    }
    .iahc-bottom-nav, .iahc-top-bar, .iahc-btn, button, .chat-actions, .suggestion-chip {
        user-select: none !important;
        -webkit-user-select: none !important;
    }
}




/* === PWA iOS ZOOM BUG FIX === */
@media (max-width: 1024px) {
    input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea, select {
        font-size: 16px !important;
    }
}


/* === SCANNER MODAL VIDEO === */
#qr-reader { border: none !important; }
#qr-reader video { object-fit: cover !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
#qr-reader__dashboard_section_csr span { color: white !important; }
#qr-reader__dashboard_section_swaplink { color: #007bff !important; text-decoration: none; margin-top: 10px; display: inline-block; }