/*
 * Frexima mobile calm theme
 *
 * A shared phone-sized surface for every client and salon module.  The
 * existing module styles still own their layout and behavior; this layer
 * supplies the common visual language from the Frexima room reference:
 * warm plaster, oak accents, soft shadows, generous touch targets and a
 * quiet fixed navigation surface.
 */

@media (max-width: 767.98px) {
    body.brand-body,
    body.client-body {
        --calm-page: #f8f2eb;
        --calm-surface: rgba(255, 253, 249, .96);
        --calm-surface-solid: #fffdf9;
        --calm-surface-soft: #f2e8df;
        --calm-surface-blush: #f1dfd4;
        --calm-ink: #2b2521;
        --calm-muted: #756a64;
        --calm-line: rgba(126, 91, 70, .17);
        --calm-line-strong: rgba(126, 91, 70, .28);
        --calm-accent: #a75f3d;
        --calm-accent-dark: #7d4026;
        --calm-accent-soft: #f0ddd1;
        --calm-sage: #dfe8d8;
        --calm-sage-ink: #4c6552;
        --calm-radius: 20px;
        --calm-shadow: 0 12px 30px rgba(82, 55, 39, .075);
        --calm-shadow-raised: 0 18px 42px rgba(82, 55, 39, .11);

        color: var(--calm-ink);
        background-color: var(--calm-page);
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .78) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../images/frexima-salon-hero-v2.webp');
        background-position: center top;
        background-repeat: no-repeat;
        background-size: auto, 100% auto;
        background-attachment: scroll;
    }

    /* Keep the room atmosphere specific to the module while the content
       remains on a quiet, readable cream surface.  The imagery is deliberately
       placed behind the shell rather than under text-heavy cards. */
    body.brand-body:has(.hair-studio-page),
    body.client-body:has(.hair-studio-page) {
        background-image:
            linear-gradient(180deg, rgba(255, 249, 243, .58) 0, rgba(248, 242, 235, .92) 38%, var(--calm-page) 100%),
            radial-gradient(circle at 78% 8%, rgba(216, 189, 133, .22), transparent 34%),
            url('../img/hair-studio/salon-room-mobile-v2.png');
        background-position: center top, center top, center top;
        background-size: auto, auto, 100% auto;
    }

    body.brand-body:has(.makeup-studio-page),
    body.client-body:has(.makeup-studio-page) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .78) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../img/makeup-studio/salon-photo-vanity.webp');
    }

    body.brand-body:has(.nail-studio-page),
    body.client-body:has(.nail-studio-page),
    body.client-body:has(.client-nail-catalogue) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .78) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../images/nail-studio/nail-studio-hero-v1.webp');
    }

    body.brand-body:has(.style-studio-page),
    body.client-body:has(.style-studio-page) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .78) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../images/style-studio/style-studio-consultation.webp');
    }

    body.client-body:has(.client-home-page),
    body.client-body:has([data-client-mobile-home]) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .76) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../images/client-dashboard/journey-hair.png');
    }

    body.brand-body:has(.frexima-community-wall-page),
    body.client-body:has(.frexima-community-wall-page),
    body.brand-body:has(.frexima-community-page),
    body.client-body:has(.frexima-community-page) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .76) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../img/hair-studio/salon-room-mobile-v2.png');
    }

    body.brand-body:has(.frexima-forum-page),
    body.client-body:has(.frexima-forum-page) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .76) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../img/makeup-studio/salon-consultation.webp');
    }

    body.client-body:has(.client-inspirations),
    body.client-body:has(.client-salon-page),
    body.client-body:has(.client-salon-space) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .76) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../img/makeup-studio/salon-reveal.webp');
    }

    body.client-body:has(.client-discovery-page),
    body.client-body:has(.client-more-page),
    body.brand-body:has(.frexima-client-page),
    body.brand-body:has(.connections-hub) {
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .76) 0, rgba(248, 242, 235, .96) 42%, var(--calm-page) 100%),
            url('../img/makeup-studio/salon-stylist-working.webp');
    }

    body.brand-body,
    body.client-body,
    body.brand-body :where(button, input, select, textarea, optgroup),
    body.client-body :where(button, input, select, textarea, optgroup) {
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.brand-body .brand-app-content,
    body.client-body .app-content,
    body.brand-body .brand-main-content,
    body.client-body .main-content {
        min-width: 0;
        background: transparent;
    }

    body.brand-body .brand-main-content,
    body.client-body .main-content {
        width: 100%;
        max-width: 100vw;
        padding: 18px var(--fx-page-gutter, 16px) calc(104px + env(safe-area-inset-bottom)) !important;
    }

    /* Compact, glassy headers keep the page title and system actions calm. */
    body.brand-body .brand-topbar,
    body.client-body .topbar {
        position: sticky;
        top: 0;
        z-index: 1110;
        min-height: 64px !important;
        padding: 8px var(--fx-page-gutter, 16px) !important;
        border-bottom: 1px solid var(--calm-line);
        background: rgba(255, 253, 249, .88);
        box-shadow: 0 5px 18px rgba(86, 58, 42, .06);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    /* Modal guides and their backdrops must cover the sticky header too. */
    body.brand-body.brand-experience-open .brand-topbar,
    body.client-body:is(.client-guide-onboarding-open, .client-module-guide-open) .topbar {
        z-index: 1070;
    }

    body.client-body.client-guide-panel-open .topbar {
        z-index: 1053;
    }

    body.brand-body .brand-topbar > [data-sidebar-toggle],
    body.client-body .topbar > [data-sidebar-toggle] {
        display: inline-grid;
        width: 44px;
        min-width: 44px;
        height: 44px;
        place-items: center;
        color: var(--calm-accent-dark);
        border: 1px solid var(--calm-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .78);
    }

    body.brand-body .brand-topbar-actions,
    body.client-body .topbar-actions {
        gap: 6px;
    }

    body.brand-body .brand-topbar-actions :where(.icon-button, .locale-switcher-button),
    body.client-body .topbar-actions :where(.icon-button, .locale-switcher-button) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        color: var(--calm-accent-dark);
        border: 1px solid var(--calm-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 4px 12px rgba(85, 59, 43, .05);
    }

    body.brand-body .brand-topbar-actions .brand-account-dropdown,
    body.client-body .topbar-user-dropdown {
        display: none;
    }

    body.brand-body .brand-topbar-title,
    body.client-body .topbar-title {
        min-width: 0;
    }

    body.brand-body .brand-topbar-title h1,
    body.client-body .topbar-title h1 {
        margin: 0;
        color: var(--calm-ink);
        font-size: 1.05rem;
        letter-spacing: -.02em;
    }

    /* Shared page rhythm: headings arrive before the first card and never
       touch the viewport edge. */
    body.brand-body .brand-main-content > :where(.page-heading, .calendar-page-intro, .appointment-booking-heading),
    body.client-body .main-content > :where(.page-heading, .client-dashboard-top, .client-module-backbar, .cw-client-mobile-header) {
        width: 100%;
        min-width: 0;
        margin-inline: auto;
        margin-bottom: 16px;
    }

    body.brand-body .brand-main-content :where(h1, h2, h3, h4),
    body.client-body .main-content :where(h1, h2, h3, h4) {
        color: var(--calm-ink);
        letter-spacing: -.025em;
    }

    body.brand-body .brand-main-content :where(h1, .page-heading h1),
    body.client-body .main-content :where(h1, .page-heading h1) {
        font-size: clamp(1.65rem, 7.5vw, 2rem);
        line-height: 1.12;
    }

    body.brand-body .brand-main-content :where(.page-heading-subtitle, .calendar-page-intro p, .appointment-booking-heading p),
    body.client-body .main-content :where(.page-heading-subtitle, .client-welcome p, .cw-client-mobile-welcome p) {
        color: var(--calm-muted);
        line-height: 1.5;
    }

    body.brand-body .brand-main-content :where(.section-label, .eyebrow),
    body.client-body .main-content :where(.section-label, .eyebrow) {
        color: var(--calm-accent-dark) !important;
        letter-spacing: .075em;
    }

    /* Most modules use one of these shared panel names.  Keeping this list
       explicit avoids changing tables, dropdown internals or modal children. */
    body.brand-body .brand-main-content > :where(.content-panel, .table-card, .empty-panel, .calendar-shell, .provider-request-page, .ai-assistant-page),
    body.brand-body .brand-main-content :where(.content-panel, .table-card, .booking-request-card, .calendar-main-panel, .calendar-side-panel, .metric-card, .ai-work-section, .ai-chat-card, .ai-capability-card),
    body.client-body .main-content > :where(.content-panel, .client-panel, .client-card, .card, .client-discovery-page, .client-lookbook-page, .client-more-page, .appointments-page, .booking-page, .client-salon-page, .client-salons-page),
    body.client-body .main-content :where(.content-panel, .client-panel, .client-card, .card, .cw-post-card, .client-discovery-card, .client-more-group, .client-inbox-activity) {
        color: var(--calm-ink);
        border: 1px solid var(--calm-line);
        border-radius: var(--calm-radius);
        background: var(--calm-surface);
        box-shadow: var(--calm-shadow);
    }

    /* Controls are intentionally quiet until focused; all remain comfortably
       tappable for the 360–430px range. */
    body.brand-body .brand-main-content :where(.btn, button, .form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
    body.client-body .main-content :where(.btn, button, .form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
        min-height: 44px;
        border-radius: 12px;
    }

    body.brand-body .brand-main-content :where(.form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea),
    body.client-body .main-content :where(.form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
        color: var(--calm-ink);
        border-color: var(--calm-line-strong);
        background-color: rgba(255, 255, 255, .76);
    }

    body.brand-body .brand-main-content :where(.form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder,
    body.client-body .main-content :where(.form-control, .form-select, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
        color: #9a8b83;
    }

    /* Keep photo consent secondary while its full label remains tappable. */
    body.brand-body .brand-main-content :is(.style-studio-consent, .hair-studio-consent-group, .makeup-consent-inline, .nail-privacy-panel),
    body.client-body .main-content :is(.style-studio-consent, .hair-studio-consent-group, .makeup-consent-inline, .nail-privacy-panel) {
        background: transparent;
        border-color: var(--calm-line);
        border-radius: 10px;
        padding: 10px 12px;
    }
    body :is(.style-studio-consent, .makeup-consent-inline) { margin-top: 12px; }
    body .makeup-consent-inline .makeup-consent { background: transparent; gap: 8px; }
    body .style-studio-consent a,
    body .makeup-consent-inline .makeup-consent a { font-weight: 600; }
    body .nail-privacy-panel h3 { font-size: .82rem; }
    body .nail-privacy-consent { font-weight: 500; }

    body.brand-body .brand-main-content :where(.btn-primary, .fx-primary-cta, .appointment-primary-button),
    body.client-body .main-content :where(.btn-primary, .client-primary-button, .client-community-book) {
        color: #fff !important;
        border-color: var(--calm-accent) !important;
        background: linear-gradient(135deg, var(--calm-accent), var(--calm-accent-dark)) !important;
        box-shadow: 0 9px 22px rgba(145, 77, 43, .2) !important;
    }

    body.brand-body .brand-main-content :where(.btn-light, .btn-outline-secondary, .btn-outline-primary),
    body.client-body .main-content :where(.btn-light, .btn-outline-secondary, .btn-outline-primary) {
        color: var(--calm-accent-dark);
        border-color: var(--calm-line-strong);
        background: rgba(255, 255, 255, .72);
    }

    /* Tabs become a gentle, horizontally scrollable room switcher. */
    body.brand-body .brand-main-content :where(.fx-workspace-tabs, .nav-tabs, .nav-pills),
    body.client-body .main-content :where(.fx-workspace-tabs, .client-explore-tabs, .client-lookbook-view-tabs, .client-inbox-tabs, .nav-tabs, .nav-pills) {
        display: flex;
        gap: 5px;
        max-width: 100%;
        padding: 5px;
        overflow-x: auto;
        border: 1px solid var(--calm-line);
        border-radius: 15px;
        background: rgba(255, 255, 255, .72);
        scrollbar-width: none;
    }

    body.brand-body .brand-main-content :where(.fx-workspace-tabs, .nav-tabs, .nav-pills)::-webkit-scrollbar,
    body.client-body .main-content :where(.fx-workspace-tabs, .client-explore-tabs, .client-lookbook-view-tabs, .client-inbox-tabs, .nav-tabs, .nav-pills)::-webkit-scrollbar {
        display: none;
    }

    body.brand-body .brand-main-content :where(.fx-workspace-tabs > a, .nav-tabs .nav-link, .nav-pills .nav-link),
    body.client-body .main-content :where(.fx-workspace-tabs > a, .client-explore-tabs > a, .client-lookbook-view-tabs > a, .client-inbox-tabs > a, .nav-tabs .nav-link, .nav-pills .nav-link) {
        flex: 0 0 auto;
        min-height: 42px;
        align-items: center;
        border: 0;
        border-radius: 11px;
        color: var(--calm-muted);
    }

    body.brand-body .brand-main-content :where(.fx-workspace-tabs > a.active, .nav-tabs .nav-link.active, .nav-pills .nav-link.active),
    body.client-body .main-content :where(.fx-workspace-tabs > a.active, .client-explore-tabs > a.active, .client-lookbook-view-tabs > a.active, .client-inbox-tabs > a.active, .nav-tabs .nav-link.active, .nav-pills .nav-link.active) {
        color: #fff;
        background: var(--calm-accent);
        box-shadow: 0 6px 14px rgba(145, 77, 43, .16);
    }

    /* Calendar agenda: the date controls stay light and the open slots use a
       quiet sage surface, echoing the phone reference without changing the
       schedule's interaction model. */
    body.brand-body .frexima-calendar-page :where(.calendar-date-jump, .calendar-view-tabs, .calendar-staff-row, .calendar-section-header, .calendar-main-panel) {
        border-color: var(--calm-line) !important;
        border-radius: 18px !important;
        background: rgba(255, 253, 249, .9) !important;
        background-image:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .92)),
            radial-gradient(circle at 100% 0, rgba(213, 184, 158, .13), transparent 42%) !important;
        box-shadow: var(--calm-shadow) !important;
    }

    body.brand-body .frexima-calendar-page .calendar-date-jump {
        min-height: 52px;
        border-radius: 15px !important;
    }

    body.brand-body .frexima-calendar-page :where(.schedule-available-slot, .schedule-available-slot:hover, .schedule-available-slot:focus-within) {
        color: var(--calm-sage-ink) !important;
        border: 1px solid rgba(91, 121, 87, .22) !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #edf3e8, var(--calm-sage)) !important;
        box-shadow: 0 7px 16px rgba(91, 121, 87, .08) !important;
    }

    body.brand-body .frexima-calendar-page :where(.schedule-appointment-card, .calendar-appointment) {
        border-radius: 14px !important;
        box-shadow: 0 8px 18px rgba(82, 55, 39, .09) !important;
    }

    /* Salon booking follows the reference's numbered, card-by-card reading
       order while preserving the existing mobile step behavior. */
    body.brand-body .appointment-booking-workspace {
        width: 100%;
        min-width: 0;
        color: var(--calm-ink);
    }

    body.brand-body .appointment-booking-heading {
        align-items: flex-start;
        margin-bottom: 14px;
        padding-inline: 2px;
    }

    body.brand-body .appointment-booking-heading h2 {
        margin: 0;
        font-size: clamp(1.55rem, 7vw, 2rem);
        text-align: start;
    }

    body.brand-body .appointment-booking-card,
    body.brand-body .appointment-form-section,
    body.brand-body .appointment-summary-card,
    body.brand-body .appointment-input-card,
    body.brand-body .appointment-select-card,
    body.brand-body .appointment-choice-card {
        border-color: var(--calm-line);
        border-radius: 18px;
        background: var(--calm-surface);
        box-shadow: var(--calm-shadow);
    }

    body.brand-body .appointment-booking-card {
        padding: 12px;
    }

    body.brand-body .appointment-field-stack {
        gap: 12px;
    }

    body.brand-body .appointment-form-section {
        padding: 16px 13px;
    }

    body.brand-body .appointment-section-heading > :first-child {
        display: inline-grid;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        place-items: center;
        color: #fff;
        border-radius: 50%;
        background: linear-gradient(145deg, #bd774e, var(--calm-accent-dark));
        box-shadow: 0 6px 14px rgba(145, 77, 43, .16);
    }

    body.brand-body .appointment-section-heading h3 {
        margin: 0;
        font-size: 1.05rem;
    }

    body.brand-body .appointment-section-heading p,
    body.brand-body .appointment-field-help,
    body.brand-body .appointment-select-copy small,
    body.brand-body [data-service-choice-meta] {
        color: var(--calm-muted);
    }

    body.brand-body .appointment-select-row,
    body.brand-body .appointment-service-choice-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    body.brand-body .appointment-select-row > *,
    body.brand-body .appointment-service-selectors,
    body.brand-body .appointment-choice-action {
        width: 100%;
        min-width: 0;
    }

    body.brand-body .appointment-choice-action {
        min-height: 48px;
        color: var(--calm-accent-dark);
        border-color: var(--calm-line-strong);
        background: var(--calm-accent-soft);
    }

    body.brand-body .appointment-service-picker {
        min-height: 58px;
        border-color: var(--calm-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .7);
        box-shadow: none;
    }

    body.brand-body .appointment-service-thumb,
    body.brand-body .appointment-avatar {
        color: var(--calm-accent-dark);
        background: var(--calm-surface-soft);
        border-color: var(--calm-line);
    }

    body.brand-body .appointment-quick-dates button,
    body.brand-body .appointment-input-card {
        border-color: var(--calm-line);
        background: rgba(255, 255, 255, .72);
    }

    body.brand-body .appointment-quick-dates button:is(:hover, :focus-visible, .active) {
        color: #fff;
        border-color: var(--calm-accent);
        background: var(--calm-accent);
    }

    body.brand-body .appointment-availability {
        border-color: rgba(91, 121, 87, .2);
        border-radius: 16px;
        background: var(--calm-sage);
    }

    body.brand-body .appointment-mobile-progress-bar {
        height: 6px;
        background: #e9e0d8;
    }

    body.brand-body .appointment-mobile-progress-bar > span {
        background: var(--calm-accent);
    }

    body.brand-body .appointment-mobile-step-actions {
        padding: 2px 2px 0;
    }

    body.brand-body .appointment-mobile-step-actions .appointment-primary-button {
        min-height: 48px;
        border-radius: 14px;
    }

    body.brand-body .appointment-mobile-savebar {
        z-index: 1030;
        min-height: 76px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--calm-line);
        background: rgba(255, 253, 249, .94);
        box-shadow: 0 -14px 34px rgba(82, 55, 39, .13);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    body.brand-body .appointment-mobile-savebar .appointment-primary-button {
        min-height: 50px;
        border-radius: 14px;
    }

    /* Result screens still need a gentle arrival point.  Some studio modules
       intentionally collapse their desktop hero on small screens; restore a
       compact, single-column welcome block so the phone view never opens in
       the middle of a result card. */
    body.brand-body .style-studio-page:not(:has(.style-studio-wizard)) > .style-studio-hero,
    body.client-body .style-studio-page:not(:has(.style-studio-wizard)) > .style-studio-hero {
        display: grid !important;
        grid-template-areas: "copy" "flow";
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 22px 16px 18px;
        border-radius: var(--calm-radius);
        background:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(244, 231, 219, .9)),
            url('../images/style-studio/style-studio-hero-v2.webp') center / cover;
    }

    body.brand-body .style-studio-page > .style-studio-hero .style-studio-hero-copy,
    body.client-body .style-studio-page > .style-studio-hero .style-studio-hero-copy {
        text-align: start;
    }

    body.brand-body .style-studio-page > .style-studio-hero .style-studio-flow,
    body.client-body .style-studio-page > .style-studio-hero .style-studio-flow {
        grid-area: flow;
    }

    body.brand-body .style-studio-flow li.is-active,
    body.client-body .style-studio-flow li.is-active,
    body.brand-body .hair-studio-flow li.is-active,
    body.client-body .hair-studio-flow li.is-active,
    body.brand-body .makeup-progress button.is-active,
    body.client-body .makeup-progress button.is-active {
        color: var(--calm-accent-dark) !important;
    }

    body.brand-body .style-studio-flow li.is-active span,
    body.client-body .style-studio-flow li.is-active span,
    body.brand-body .hair-studio-flow li.is-active span,
    body.client-body .hair-studio-flow li.is-active span,
    body.brand-body .makeup-progress button.is-active span,
    body.client-body .makeup-progress button.is-active span {
        color: #fff !important;
        background: linear-gradient(145deg, #bd774e, var(--calm-accent-dark)) !important;
        box-shadow: 0 6px 14px rgba(145, 77, 43, .2) !important;
    }

    body.brand-body .hair-studio-hero-copy,
    body.client-body .hair-studio-hero-copy {
        color: #fff !important;
        background: linear-gradient(180deg, #2a2025, #1b1519) !important;
    }

    body.brand-body .hair-studio-hero-copy h1,
    body.brand-body .hair-studio-hero-copy strong,
    body.client-body .hair-studio-hero-copy h1,
    body.client-body .hair-studio-hero-copy strong {
        color: #fff !important;
    }

    body.brand-body .hair-studio-hero-copy .section-label,
    body.brand-body .hair-studio-hero-copy small,
    body.client-body .hair-studio-hero-copy .section-label,
    body.client-body .hair-studio-hero-copy small {
        color: #f5e7c4 !important;
    }

    body.brand-body .hair-studio-hero-copy em,
    body.client-body .hair-studio-hero-copy em {
        color: rgba(255, 255, 255, .7) !important;
    }

    body.brand-body .hair-studio-hero,
    body.client-body .hair-studio-hero {
        background: #1b1519 !important;
        border-color: rgba(216, 189, 133, .42) !important;
        box-shadow: 0 22px 52px rgba(46, 30, 37, .24) !important;
    }

    body.brand-body .hair-studio-hero .hair-studio-flow,
    body.client-body .hair-studio-hero .hair-studio-flow {
        color: rgba(255, 255, 255, .68) !important;
        background: linear-gradient(180deg, #1b1519, #241a20) !important;
        border-top-color: rgba(245, 231, 196, .14) !important;
    }

    body.brand-body .hair-studio-hero .hair-studio-flow li.is-active,
    body.client-body .hair-studio-hero .hair-studio-flow li.is-active {
        color: #f5e7c4 !important;
    }

    body.brand-body .hair-studio-hero .hair-studio-flow li.is-active span,
    body.client-body .hair-studio-hero .hair-studio-flow li.is-active span {
        color: #1b1519 !important;
        background: linear-gradient(145deg, #f5e7c4, #d8bd85) !important;
        box-shadow: 0 0 0 4px rgba(216, 189, 133, .14) !important;
    }

    /* Module accents stay recognisable, but the action colour and outer
       surfaces share the same oak-and-cream language as the rest of Frexima. */
    body.brand-body :where(.hair-studio-page, .makeup-studio-page, .style-studio-page, .nail-studio-page) :where(.btn-primary, button[type="submit"], .hair-studio-magic-action button, .style-studio-result-actions button, .nail-pin-try-cta),
    body.client-body :where(.hair-studio-page, .makeup-studio-page, .style-studio-page, .nail-studio-page) :where(.btn-primary, button[type="submit"], .hair-studio-magic-action button, .style-studio-result-actions button, .nail-pin-try-cta) {
        color: #fff !important;
        border-color: var(--calm-accent) !important;
        background: linear-gradient(135deg, var(--calm-accent), var(--calm-accent-dark)) !important;
        box-shadow: 0 9px 22px rgba(145, 77, 43, .2) !important;
    }

    body.brand-body :where(.makeup-studio-page, .nail-studio-page) :where(.makeup-wizard, .makeup-step, .makeup-result-section, .makeup-history, .makeup-safety-note, .makeup-notice, .nail-inspiration-toolbar, .nail-inspiration-empty),
    body.client-body :where(.makeup-studio-page, .nail-studio-page) :where(.makeup-wizard, .makeup-step, .makeup-result-section, .makeup-history, .makeup-safety-note, .makeup-notice, .nail-inspiration-toolbar, .nail-inspiration-empty) {
        border-color: var(--calm-line) !important;
        background-color: var(--calm-surface) !important;
        box-shadow: var(--calm-shadow);
    }

    body.brand-body :where(.makeup-studio-hero, .nail-studio-hero),
    body.client-body :where(.makeup-studio-hero, .nail-studio-hero) {
        border-color: var(--calm-line) !important;
        background: linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(244, 231, 219, .9)) !important;
        box-shadow: var(--calm-shadow-raised) !important;
    }

    body.brand-body .makeup-studio-hero::after,
    body.client-body .makeup-studio-hero::after {
        background: linear-gradient(90deg, #bd774e, var(--calm-accent-dark)) !important;
    }

    body.brand-body .style-studio-hero::after,
    body.client-body .style-studio-hero::after {
        background: linear-gradient(90deg, #bd774e, var(--calm-accent-dark)) !important;
    }

    body.client-body:has(.makeup-studio-page) .client-bottom-nav {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    /* Shared dock surface; salon and client navigation have different item counts. */
    body.brand-body .frexima-mobile-nav,
    body.client-body .client-bottom-nav,
    body.client-body [data-client-mobile-home] .client-bottom-nav {
        display: grid;
        align-items: stretch;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1039;
        width: 100%;
        min-height: calc(76px + env(safe-area-inset-bottom));
        padding: 7px max(6px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        border: 0;
        border-top: 1px solid var(--calm-line);
        border-radius: 0;
        background: rgba(255, 253, 249, .94);
        box-shadow: 0 -12px 30px rgba(82, 55, 39, .13);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    body.brand-body .frexima-mobile-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body.client-body .client-bottom-nav,
    body.client-body [data-client-mobile-home] .client-bottom-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: row;
    }

    body.brand-body .frexima-mobile-nav > :is(a, button),
    body.client-body .client-bottom-nav > :is(a, button),
    body.client-body [data-client-mobile-home] .client-bottom-nav > :is(a, button) {
        min-height: 56px;
        color: var(--calm-muted);
        border-radius: 13px;
        background: transparent;
        font-weight: 760;
    }

    body.brand-body .frexima-mobile-nav > :is(a, button):is(:hover, :focus-visible, .active),
    body.client-body .client-bottom-nav > :is(a, button):is(:hover, :focus-visible, .active),
    body.client-body [data-client-mobile-home] .client-bottom-nav > :is(a, button):is(:hover, :focus-visible, .active) {
        color: var(--calm-accent-dark);
        background: var(--calm-accent-soft);
    }

    body.brand-body .frexima-mobile-nav > :is(a, button) > i,
    body.client-body .client-bottom-nav > :is(a, button) > i,
    body.client-body [data-client-mobile-home] .client-bottom-nav > :is(a, button) > i {
        font-size: 1.2rem;
    }

    body.brand-body .frexima-mobile-create > button,
    body.client-body .client-bottom-nav .client-bottom-nav-create > i,
    body.client-body [data-client-mobile-home] .client-bottom-nav .client-bottom-nav-create > i {
        color: #fff;
        border-color: #fff;
        background: linear-gradient(145deg, #bc754c, var(--calm-accent-dark));
        box-shadow: 0 9px 20px rgba(145, 77, 43, .27);
    }

    body.brand-body .frexima-mobile-create > button {
        width: 48px;
        height: 48px;
        border: 3px solid #fff;
        border-radius: 50%;
    }

    body.brand-body .frexima-mobile-create > span,
    body.client-body .client-bottom-nav .client-bottom-nav-create > span,
    body.client-body [data-client-mobile-home] .client-bottom-nav .client-bottom-nav-create > span {
        color: var(--calm-accent-dark);
    }

    /* Bottom sheets and drawers use the same plaster surface as the page. */
    body.brand-body :where(.offcanvas, .modal-content),
    body.client-body :where(.offcanvas, .modal-content) {
        color: var(--calm-ink);
        border-color: var(--calm-line);
        border-radius: 24px 24px 0 0;
        background: var(--calm-surface-solid);
        box-shadow: var(--calm-shadow-raised);
    }

    body.brand-body :where(.offcanvas-header, .modal-header),
    body.client-body :where(.offcanvas-header, .modal-header) {
        border-bottom-color: var(--calm-line);
    }

    body.brand-body :where(a, button, input, select, textarea, summary):focus-visible,
    body.client-body :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid rgba(167, 95, 61, .32);
        outline-offset: 2px;
    }

    /* Small atmospheric touches make the workspace feel like a welcoming
       room rather than a collection of utility screens. */
    body.brand-body .brand-main-content,
    body.client-body .main-content {
        background-image:
            radial-gradient(circle at 96% 0, rgba(193, 145, 108, .16), transparent 28%),
            radial-gradient(circle at -10% 24%, rgba(184, 204, 168, .16), transparent 30%);
        background-repeat: no-repeat;
        background-size: 100% 330px, 100% 420px;
    }

    body.brand-body .brand-main-content :where(.content-panel, .table-card, .booking-request-card, .calendar-main-panel, .calendar-side-panel, .metric-card, .ai-work-section, .ai-chat-card, .ai-capability-card),
    body.client-body .main-content :where(.content-panel, .client-panel, .client-card, .card, .cw-post-card, .client-discovery-card, .client-more-group, .client-inbox-activity) {
        background-image:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .92)),
            radial-gradient(circle at 100% 0, rgba(213, 184, 158, .14), transparent 42%);
        background-size: 100% 100%, 100% 100%;
    }

    body.brand-body .frexima-calendar-page .schedule-staff-chip {
        border-color: var(--calm-line);
        border-radius: 15px;
        background: rgba(255, 253, 249, .76);
        box-shadow: 0 5px 14px rgba(82, 55, 39, .045);
    }

    body.brand-body .frexima-calendar-page .schedule-staff-chip.active {
        color: var(--calm-accent-dark);
        border-color: rgba(167, 95, 61, .3);
        background: linear-gradient(145deg, #f7e8dc, #f1ddd0);
        box-shadow: 0 8px 18px rgba(145, 77, 43, .11);
    }

    body.brand-body .frexima-calendar-page .calendar-section-header {
        background: linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(249, 242, 235, .92)) !important;
    }

    body.brand-body .frexima-calendar-page .schedule-time-corner {
        color: var(--calm-muted);
        background: #fbf6f1;
    }

    body.brand-body .frexima-calendar-page .schedule-staff-heading {
        border-color: var(--calm-line);
        background: rgba(255, 253, 249, .82);
    }

    body.brand-body .brand-main-content :where(.btn, .card, .content-panel, a),
    body.client-body .main-content :where(.btn, .card, .content-panel, a) {
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background-color .18s ease,
            transform .18s ease;
    }

    body.brand-body .brand-main-content :where(.card, .content-panel, a):is(:hover, :focus-visible),
    body.client-body .main-content :where(.card, .content-panel, a):is(:hover, :focus-visible) {
        border-color: var(--calm-line-strong);
    }

    /* Client directory: individual guest details should read like a warm
       guestbook rather than a stack of administrative records. */
    body.brand-body .frexima-client-page :where(.client-list-panel, .client-profile-hero, .client-rail-card, .client-appointment-card, .client-facts-card, .client-shared-profile-card, .client-notes-card, .client-photo-card, .client-shared-lookbook-card, .client-activity-card, .client-summary-card, .client-switch-panel) {
        color: var(--calm-ink);
        border-color: var(--calm-line);
        background:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .92)),
            radial-gradient(circle at 100% 0, rgba(213, 184, 158, .13), transparent 42%);
        box-shadow: var(--calm-shadow);
    }

    body.brand-body .frexima-client-page .client-list-row {
        border-color: transparent;
        border-radius: 15px;
        background: rgba(255, 253, 249, .54);
    }

    body.brand-body .frexima-client-page .client-list-row.active {
        border-color: rgba(167, 95, 61, .24);
        background: linear-gradient(145deg, #f7e8dc, #f1ddd0);
        box-shadow: 0 7px 16px rgba(145, 77, 43, .09);
    }

    body.brand-body .frexima-client-page :where(.client-avatar, .client-list-avatar) {
        border-color: rgba(167, 95, 61, .18);
        background: var(--calm-surface-soft);
    }

    /* Conversations remain visually light even when the message list fills
       the screen.  The blush selection works as a soft fabric-like marker. */
    body.brand-body :where(.salon-messages-shell, .messenger-messages-shell),
    body.client-body :where(.salon-messages-shell, .messenger-messages-shell) {
        overflow: hidden;
        color: var(--calm-ink);
        border-color: var(--calm-line);
        border-radius: 20px;
        background: linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .94));
        box-shadow: var(--calm-shadow);
    }

    body.brand-body :where(.salon-conversation-list, .salon-chat-panel, .messenger-conversation-list, .messenger-chat-panel),
    body.client-body :where(.salon-conversation-list, .salon-chat-panel, .messenger-conversation-list, .messenger-chat-panel) {
        border-color: var(--calm-line);
        background: transparent;
    }

    body.brand-body :where(.salon-conversation-row, .messenger-conversation-row, .conversation-card),
    body.client-body :where(.salon-conversation-row, .messenger-conversation-row, .conversation-card) {
        border-color: transparent;
        border-radius: 15px;
        background: rgba(255, 253, 249, .58);
    }

    body.brand-body :where(.salon-conversation-row, .messenger-conversation-row, .conversation-card):is(.active, .is-active, [aria-current="true"]),
    body.client-body :where(.salon-conversation-row, .messenger-conversation-row, .conversation-card):is(.active, .is-active, [aria-current="true"]) {
        color: var(--calm-ink);
        background: var(--calm-surface-blush);
    }

    body.brand-body :where(.salon-message-composer, .salon-chat-composer, .message-composer),
    body.client-body :where(.salon-message-composer, .salon-chat-composer, .message-composer) {
        border-color: var(--calm-line);
        background: rgba(255, 253, 249, .88);
        box-shadow: 0 -8px 20px rgba(82, 55, 39, .06);
    }

    /* Community, videos and connections share a living-room card language. */
    body.brand-body :where(.cw-post-card, .community-card, .video-hub-card, .short-video-public-card, .connections-card, .connections-hero, .connections-section, .connections-empty),
    body.client-body :where(.cw-post-card, .community-card, .video-hub-card, .short-video-public-card, .connections-card, .connections-hero, .connections-section, .connections-empty) {
        color: var(--calm-ink);
        border-color: var(--calm-line);
        border-radius: 20px;
        background:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .92)),
            radial-gradient(circle at 100% 0, rgba(213, 184, 158, .14), transparent 42%);
        box-shadow: var(--calm-shadow);
    }

    body.brand-body :where(.cw-story-rail, .cw-client-feed-navigation, .cw-people-suggestions, .video-hub-stage),
    body.client-body :where(.cw-story-rail, .cw-client-feed-navigation, .cw-people-suggestions, .video-hub-stage) {
        border-color: var(--calm-line);
        border-radius: 18px;
        background: rgba(255, 253, 249, .76);
        box-shadow: 0 8px 20px rgba(82, 55, 39, .055);
    }

    body.brand-body :where(.empty-panel, .brand-empty-hero, .ai-empty-state, .connections-empty),
    body.client-body :where(.empty-panel, .client-empty-state, .ai-empty-state, .connections-empty, .no-results) {
        color: var(--calm-muted);
        border-color: rgba(91, 121, 87, .18);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(255, 253, 249, .94), rgba(237, 243, 232, .84));
    }

    body.brand-body :where(.empty-icon, .ai-empty-state > i),
    body.client-body :where(.empty-icon, .ai-empty-state > i) {
        color: var(--calm-sage-ink);
        border-color: rgba(91, 121, 87, .18);
        background: var(--calm-sage);
        box-shadow: 0 7px 16px rgba(91, 121, 87, .09);
    }

    /* Public booking is also part of the first impression.  Give the
       unauthenticated flow the same welcoming room-like surface as the
       signed-in salon and client modules. */
    body.booking-body {
        --calm-page: #f8f2eb;
        --calm-surface: rgba(255, 253, 249, .96);
        --calm-surface-solid: #fffdf9;
        --calm-surface-soft: #f2e8df;
        --calm-surface-blush: #f1dfd4;
        --calm-ink: #2b2521;
        --calm-muted: #756a64;
        --calm-line: rgba(126, 91, 70, .17);
        --calm-line-strong: rgba(126, 91, 70, .28);
        --calm-accent: #a75f3d;
        --calm-accent-dark: #7d4026;
        --calm-accent-soft: #f0ddd1;
        --calm-sage: #dfe8d8;
        --calm-sage-ink: #4c6552;
        --calm-radius: 20px;
        --calm-shadow: 0 12px 30px rgba(82, 55, 39, .075);
        --calm-shadow-raised: 0 18px 42px rgba(82, 55, 39, .11);
        color: var(--calm-ink);
        background-color: var(--calm-page);
        background-image:
            linear-gradient(180deg, rgba(255, 250, 245, .82) 0, rgba(248, 242, 235, .96) 48%, var(--calm-page) 100%),
            url('../images/frexima-salon-hero-v2.webp');
        background-position: center top;
        background-repeat: no-repeat;
        background-size: auto, 100% auto;
    }

    body.booking-body,
    body.booking-body :where(button, input, select, textarea, optgroup) {
        font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.booking-body .booking-shell.booking-experience {
        width: min(100% - 20px, 1440px);
        padding: 10px 0 calc(132px + env(safe-area-inset-bottom));
    }

    body.booking-body .booking-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        min-height: 60px;
        margin: 0 -10px 14px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--calm-line);
        background: rgba(255, 253, 249, .88);
        box-shadow: 0 5px 18px rgba(86, 58, 42, .06);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    body.booking-body .booking-topbar .booking-brand strong {
        color: var(--calm-ink);
        font-size: 1.18rem;
        letter-spacing: -.025em;
    }

    body.booking-body .booking-topbar .booking-brand img,
    body.booking-body .booking-topbar .booking-brand span {
        border: 1px solid var(--calm-line);
        border-radius: 14px;
        box-shadow: 0 5px 12px rgba(82, 55, 39, .08);
    }

    body.booking-body :where(.booking-icon-link, .booking-user-chip) {
        color: var(--calm-accent-dark);
        border-color: var(--calm-line);
        background: rgba(255, 255, 255, .76);
        box-shadow: 0 5px 14px rgba(82, 55, 39, .06);
    }

    body.booking-body .booking-icon-link {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    body.booking-body .booking-icon-link span {
        background: var(--calm-accent);
        border-color: var(--calm-surface-solid);
    }

    body.booking-body :where(.booking-modern-hero, .booking-progress, .booking-step-card, .booking-summary-card, .booking-success-page, .booking-empty-modern, .booking-profile-modal) {
        color: var(--calm-ink);
        border-color: var(--calm-line);
        border-radius: 20px;
        background:
            linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(249, 241, 234, .92)),
            radial-gradient(circle at 100% 0, rgba(213, 184, 158, .14), transparent 42%);
        box-shadow: var(--calm-shadow);
    }

    body.booking-body .booking-modern-hero,
    body.booking-body .booking-step-card,
    body.booking-body .booking-success-page,
    body.booking-body .booking-empty-modern {
        padding: 16px;
    }

    body.booking-body .booking-progress {
        gap: 7px;
        padding: 8px;
        border-radius: 16px;
    }

    body.booking-body .booking-progress span {
        min-width: 88px;
        color: var(--calm-muted);
    }

    body.booking-body .booking-progress b {
        color: var(--calm-accent-dark);
        border-color: var(--calm-line);
        background: rgba(255, 255, 255, .8);
        box-shadow: none;
    }

    body.booking-body .booking-progress em {
        color: var(--calm-muted);
        background: transparent;
    }

    body.booking-body .booking-progress .active b,
    body.booking-body .booking-progress .complete b {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(145deg, #bd774e, var(--calm-accent-dark));
        box-shadow: 0 6px 14px rgba(145, 77, 43, .18);
    }

    body.booking-body .booking-progress .active em,
    body.booking-body .booking-progress .complete em,
    body.booking-body .section-label {
        color: var(--calm-accent-dark);
    }

    body.booking-body :where(.form-control, .form-select, input:not([type="hidden"]), select, textarea) {
        min-height: 44px;
        color: var(--calm-ink);
        border-color: var(--calm-line-strong);
        border-radius: 12px;
        background-color: rgba(255, 255, 255, .76);
    }

    body.booking-body .booking-selected-pill {
        color: var(--calm-accent-dark);
        border-color: rgba(167, 95, 61, .2);
        background: var(--calm-accent-soft);
    }

    body.booking-body :where(.booking-filter-chip, .booking-date-input, .booking-date-rail, .booking-slot-legend, .booking-stylist-card, .booking-selected-service) {
        border-color: var(--calm-line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .72);
    }

    body.booking-body .booking-slot-grid-modern .booking-slot {
        min-height: 50px;
        color: var(--calm-sage-ink);
        border-color: rgba(91, 121, 87, .22);
        border-radius: 13px;
        background: linear-gradient(135deg, #edf3e8, var(--calm-sage));
        box-shadow: 0 7px 16px rgba(91, 121, 87, .08);
    }

    body.booking-body .booking-summary-panel {
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        padding: 8px;
        color: var(--calm-ink);
        background: rgba(255, 253, 249, .94);
        border: 1px solid var(--calm-line);
        border-radius: 18px;
        box-shadow: 0 -14px 34px rgba(82, 55, 39, .13);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    body.booking-body .booking-summary-card {
        color: var(--calm-ink);
    }

    body.booking-body .booking-summary-card h3 {
        color: var(--calm-ink);
    }

    body.booking-body .booking-summary-card strong {
        color: var(--calm-muted);
    }

    body.booking-body :where(.btn-primary, .booking-summary-submit, .booking-submit-button) {
        color: #fff !important;
        border-color: var(--calm-accent) !important;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--calm-accent), var(--calm-accent-dark)) !important;
        box-shadow: 0 9px 22px rgba(145, 77, 43, .2) !important;
    }

    /* Keep the community feed inside a phone-sized canvas.  A few legacy
       desktop rules use fixed widths, so the mobile layer explicitly clips
       those values and lets cards shrink with the viewport. */
    body.client-body .frexima-community-wall-page:not(.salon-community-page) {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        margin-inline: auto !important;
        overflow-x: clip !important;
    }

    body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(.cw-shell, .cw-main, .cw-post-grid, .cw-post-card, .cw-post-header, .cw-card-body, .cw-composer, .cw-story-rail, .cw-client-feed-navigation, .cw-people-suggestions) {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
        box-sizing: border-box;
    }

    body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-post-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    /* A selected conversation owns the phone canvas.  The global client dock
       must not sit over the composer or steal taps from its controls. */
    body.client-body:has(.messenger-messages-shell.has-selected) .client-bottom-nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
    }

    body.client-body:has(.client-bottom-nav) .main-content {
        padding-bottom: 132px !important;
    }

    /* Keep the conversation card centred even when legacy mobile rules add a
       negative gutter to the feed grid. */
    body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-main,
    body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-story-rail,
    body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-post-grid,
    body.client-body .frexima-community-wall-page:not(.salon-community-page) .cw-post-card {
        margin-inline: 0 !important;
    }

    body.client-body .frexima-community-wall-page:not(.salon-community-page) :where(.cw-post-card, .cw-post-header, .cw-card-body, .cw-post-content, .cw-post-actions) {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 389.98px) {
    body.brand-body .brand-main-content,
    body.client-body .main-content {
        padding-inline: var(--fx-page-gutter, 16px) !important;
    }

    body.brand-body .frexima-mobile-nav > :is(a, button),
    body.client-body .client-bottom-nav > :is(a, button),
    body.client-body [data-client-mobile-home] .client-bottom-nav > :is(a, button) {
        font-size: .62rem;
    }
}

/* One full-width target per client action. The circle belongs to the plus icon,
   never to its labelled button: otherwise the caption can cover the glyph. */
@media (max-width: 991.98px) {
    body.client-body .client-bottom-nav,
    body.client-body [data-client-mobile-home] .client-bottom-nav {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-flow: row;
        gap: 0;
        min-height: calc(94px + env(safe-area-inset-bottom));
        padding: 7px max(6px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    body.client-body .client-bottom-nav > :is(a, button),
    body.client-body [data-client-mobile-home] .client-bottom-nav > :is(a, button) {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        min-width: 0;
        width: 100%;
        height: auto;
        min-height: 80px !important;
        padding: 3px 1px;
        font-size: clamp(.6rem, 1.5vw, .72rem);
        line-height: 1.15;
        text-align: center;
    }

    body.client-body .client-bottom-nav > :is(a, button) > i {
        display: grid;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        margin: 0;
        place-items: center;
        line-height: 1;
    }

    body.client-body .client-bottom-nav > :is(a, button) > span {
        display: block;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
        text-wrap: balance;
        font-weight: 600;
        line-height: 1.15;
    }

    body.client-body .client-bottom-nav .client-bottom-nav-create {
        color: var(--calm-accent-dark, var(--client-color-primary-hover)) !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.client-body .client-bottom-nav .client-bottom-nav-create > i,
    body.client-body [data-client-mobile-home] .client-bottom-nav .client-bottom-nav-create > i {
        width: 32px;
        height: 32px;
        margin: 0;
        color: #fff;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, #bc754c, var(--calm-accent-dark, var(--client-color-primary-hover)));
        box-shadow: none;
    }

    body.client-body .client-bottom-nav .client-bottom-nav-create > span,
    body.client-body [data-client-mobile-home] .client-bottom-nav .client-bottom-nav-create > span {
        margin: 0;
        font-weight: 600;
    }

    body.client-body:has(.client-bottom-nav) .main-content {
        padding-bottom: calc(128px + env(safe-area-inset-bottom)) !important;
    }

    body.client-body:has(.client-bottom-nav) :is(.client-guide-floating-launcher, .frexima-back-to-top) {
        bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    }

    /* The header must not intercept the More drawer's close button. */
    body.client-body:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding, .modal.show) .topbar {
        z-index: 1030;
    }

    body.client-body:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding, .modal.show) :is(.client-bottom-nav, .client-guide-floating-launcher, .frexima-back-to-top) {
        visibility: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.brand-body *,
    body.client-body * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Messages are a private living-room conversation, not an assistant surface.
   Use the same warm, friendly palette as the salon home while keeping every
   recipient and composer control high-contrast and touch-safe. */
body:has(.messages-heading) {
    background:
        radial-gradient(circle at 8% 0, rgba(242, 213, 211, .42), transparent 34rem),
        linear-gradient(180deg, #fffaf6 0, #f8f0ea 58%, #f5ede7 100%);
}

body:has(.messages-heading) .messages-heading {
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid rgba(126, 91, 70, .14);
    border-radius: 24px;
    background: rgba(255, 253, 249, .82);
    box-shadow: 0 14px 34px rgba(82, 55, 39, .07);
}

body:has(.messages-heading) .messages-heading-copy .section-label {
    color: #a75f3d;
    letter-spacing: .08em;
}

body:has(.messages-heading) .messages-heading-copy h1 {
    color: #2b2521;
    letter-spacing: -.025em;
}

body:has(.messages-heading) .messages-heading-copy p {
    color: #756a64;
}

body:has(.messages-heading) .salon-messages-shell {
    border-color: rgba(126, 91, 70, .16);
    border-radius: 24px;
    background: rgba(255, 253, 249, .9);
    box-shadow: 0 18px 44px rgba(82, 55, 39, .1);
}

body:has(.messages-heading) .salon-conversation-list {
    background: linear-gradient(180deg, rgba(249, 239, 232, .74), rgba(255, 253, 249, .86));
}

body:has(.messages-heading) .salon-conversation-item {
    margin: 5px 8px;
    border: 1px solid transparent;
    border-radius: 17px;
    background: rgba(255, 253, 249, .62);
}

body:has(.messages-heading) .salon-conversation-item:hover,
body:has(.messages-heading) .salon-conversation-item:focus-visible {
    border-color: rgba(167, 95, 61, .24);
    background: #fffaf6;
}

body:has(.messages-heading) .salon-conversation-item.is-selected,
body:has(.messages-heading) .salon-conversation-item[aria-current="true"] {
    color: #2b2521;
    border-color: rgba(167, 95, 61, .22);
    background: linear-gradient(135deg, #f6e6df, #f8efea);
    box-shadow: 0 8px 20px rgba(126, 91, 70, .09);
}

body:has(.messages-heading) .salon-avatar {
    border-color: rgba(167, 95, 61, .22);
    background: linear-gradient(145deg, #e9b8ae, #b9786d);
    box-shadow: 0 5px 12px rgba(126, 91, 70, .15);
}

body:has(.messages-heading) .salon-chat-panel {
    background: rgba(255, 253, 249, .74);
}

body:has(.messages-heading) .salon-chat-header {
    background: linear-gradient(90deg, rgba(255, 250, 246, .98), rgba(249, 237, 230, .84));
    border-bottom-color: rgba(126, 91, 70, .13);
}

body:has(.messages-heading) .salon-composer-wrap {
    background: rgba(255, 250, 246, .94);
    border-top-color: rgba(126, 91, 70, .13);
}

body:has(.messages-heading) .salon-composer {
    border-color: rgba(126, 91, 70, .18);
    border-radius: 18px;
    background: #fffdf9;
    box-shadow: 0 8px 20px rgba(82, 55, 39, .07);
}

body:has(.messages-heading) .composer-icon-button:is(:hover, :focus-visible),
body:has(.messages-heading) .salon-send-button {
    color: #fff;
    border-color: #a75f3d;
    background: linear-gradient(135deg, #b97857, #7d4026);
}