/* My Hair follows Discover: the same Inter type, heavy tight headings, warm
   neutral surfaces and the customer violet. The top bar is left entirely to the
   shared customer styles so it is identical on every customer tab.
   This layer is deliberately scoped: booking logic, status colors and scroll
   containers keep their existing contracts. */
body.customer-mode.me-workspace-mode {
  --hair-ink: #17131f;
  --hair-muted: #696371;
  --hair-accent: #6a48d0;
  --hair-accent-soft: #f6f3f9;
  --hair-line: #e8e4ec;
  --hair-surface: #faf8f8;
  --hair-ease: cubic-bezier(.22, 1, .36, 1);
  color: #24212b;
}

body.me-workspace-mode .me-dashboard {
  border-color: var(--hair-line);
  border-radius: 22px;
  background: var(--hair-surface);
  box-shadow: 0 8px 36px -24px #33244a26;
}

body.me-workspace-mode .me-account-rail {
  border-color: var(--hair-line);
  padding: 26px 16px 20px;
  background: #ffffff;
}

body.me-workspace-mode .me-workspace {
  gap: 24px;
  padding: clamp(24px, 2.6vw, 42px);
  background: var(--hair-surface);
  scrollbar-color: #ddd5e6 transparent;
  scrollbar-width: thin;
}

body.me-workspace-mode .me-rail-profile { gap: 12px; padding-bottom: 28px; }
body.me-workspace-mode .me-rail-profile strong { color: var(--hair-ink); font-size: 14px; font-weight: 720; letter-spacing: -.025em; }
body.me-workspace-mode .me-rail-profile span { color: var(--hair-muted); font-size: 11px; line-height: 1.5; }
body.me-workspace-mode .me-dashboard .me-rail-avatar { width: 46px; height: 46px; background: #eee9f5; color: var(--hair-accent); }
body.me-workspace-mode .me-dashboard .me-rail-avatar > span { color: inherit; font-weight: 650; font-size: 15px; }
body.me-workspace-mode .me-rail-nav { gap: 5px; }
body.me-workspace-mode .me-rail-nav button { min-height: 46px; border-radius: 12px; padding-inline: 13px; color: var(--hair-muted); font-size: 13px; font-weight: 600; transition: background-color 180ms ease, color 180ms ease; }
body.me-workspace-mode .me-rail-nav button.active { color: var(--hair-accent); background: var(--hair-accent-soft); font-weight: 720; box-shadow: none; }
body.me-workspace-mode .me-rail-nav button b { background: #916be8; font-weight: 720; }
body.me-workspace-mode .me-rail-nav button b.customer-notification-nav-count { background: #916be8; }
/* Professional accounts: "Pro" (Salons) above "Customers" (everything else). */
body.me-workspace-mode .me-rail-group-title { margin: 0; padding: 0 13px 6px; color: #857d8f; font-size: 10px; font-weight: 750; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
body.me-workspace-mode .me-rail-group-title:not(:first-child) { margin-top: 14px; }
body.me-workspace-mode .me-rail-nav.has-groups { gap: 2px; }
body.me-workspace-mode .me-rail-nav.has-groups button { min-height: 44px; }
/* The Pro "Salons" entry stands out without looking selected: a white pill
   with the logo gradient as its border. It fills with violet only when open. */
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link { position: relative; grid-template-columns: 26px minmax(0, 1fr) auto; color: var(--hair-ink); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #a374fa 0%, #93a2f7 55%, #8ff7d2 100%) border-box; border: 1.5px solid transparent; box-shadow: 0 8px 20px -14px #916be8b3; font-weight: 720; }
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link .icon { box-sizing: content-box; width: 15px; height: 15px; padding: 5px; margin-left: -3px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #a374fa 0%, #93a2f7 55%, #8ff7d2 100%); }
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link::after { content: ""; justify-self: end; width: 7px; height: 7px; margin-right: 3px; border-top: 2px solid #8c8597; border-right: 2px solid #8c8597; transform: rotate(45deg); transition: transform 220ms var(--hair-ease), border-color 180ms ease; }
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link.active { color: #fff; background: #916be8 padding-box; border-color: #916be8; box-shadow: 0 12px 24px -14px #916be8; }
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link.active .icon { background: #ffffff2e; }
body.me-workspace-mode .me-rail-nav button.me-rail-pro-link.active::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #fff; transform: none; }
body.me-workspace-mode .me-rail-footer { gap: 13px; padding-top: 20px; border-color: var(--hair-line); }
body.me-workspace-mode :is(.me-rail-footer, .me-profile-readiness .profile-completion) > b { background: #ece8f1; }
body.me-workspace-mode :is(.me-rail-footer, .me-profile-readiness .profile-completion) > b::after { background: linear-gradient(90deg, #916be8, #b9a3f3); }
body.me-workspace-mode .me-rail-footer > div { color: var(--hair-muted); font-size: 11px; font-weight: 600; }
body.me-workspace-mode .me-rail-footer > div strong { color: var(--hair-ink); font-weight: 720; }

body.me-workspace-mode .me-page-header { align-items: center; gap: 20px; padding-bottom: 4px; }
body.me-workspace-mode .me-dashboard .eyebrow { color: #4b4260; font-size: 11px; font-weight: 750; letter-spacing: .12em; line-height: 1.5; }
body.me-workspace-mode .me-page-header .eyebrow { margin-bottom: 11px; }
body.me-workspace-mode .me-page-header h1 { margin: 0; color: var(--hair-ink); font-size: clamp(29px, 3.15vw, 44px); font-weight: 760; line-height: 1.09; letter-spacing: -.055em; overflow-wrap: anywhere; }
body.me-workspace-mode .me-page-header > div > span { color: var(--hair-muted); font-size: 14px; line-height: 1.6; }
body.me-workspace-mode .me-page-header-actions { gap: 10px; flex-wrap: wrap; }
body.me-workspace-mode .me-section-heading :is(h2, h3),
body.me-workspace-mode .pro-account-salons > header h2 { color: var(--hair-ink); font-size: clamp(19px, 1.7vw, 23px); font-weight: 720; line-height: 1.25; letter-spacing: -.035em; }
body.me-workspace-mode .me-section-heading .eyebrow { margin-bottom: 7px; }
body.me-workspace-mode .me-section-heading > div { min-width: 0; }
body.me-workspace-mode .me-count { min-width: 29px; height: 29px; padding-inline: 8px; color: var(--hair-accent); background: #f3eff8; font-size: 11px; font-weight: 720; flex: 0 0 auto; }

body.me-workspace-mode .me-dashboard :is(.solid-button.customer, .outline-button.customer, .ghost-button, .text-button, .icon-button) {
  font-weight: 650;
  letter-spacing: -.01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms var(--hair-ease);
}
body.me-workspace-mode .me-dashboard :is(.solid-button.customer, .outline-button.customer) { min-height: 44px; border-radius: 10px; padding: 11px 18px; font-size: 13px; line-height: 1.35; }
body.me-workspace-mode .me-dashboard .solid-button.customer:not(.danger) { border-color: transparent; color: #fff; background: #916be8; box-shadow: 0 10px 22px -14px #916be8b3; }
body.me-workspace-mode .me-dashboard .outline-button.customer:not(.danger) { border-color: #d8cfdf; color: #46374f; background: #fff; box-shadow: none; }
body.me-workspace-mode .me-dashboard .ghost-button { border-radius: 999px; color: var(--hair-accent); background: transparent; }
body.me-workspace-mode .me-dashboard .text-button { color: var(--hair-accent); }
body.me-workspace-mode .me-dashboard .icon-button { border-color: var(--hair-line); border-radius: 50%; background: #fff; color: #5e566a; }
body.me-workspace-mode .me-dashboard :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #916be8; outline-offset: 3px; }

/* Overview and the shared cards used by every account tab. */
body.me-workspace-mode :is(.me-kpi-strip, .me-payment-summary) { gap: 12px; border: 0; border-radius: 0; background: transparent; }
body.me-workspace-mode .me-kpi { min-height: 112px; gap: 12px; padding: 19px 18px; border: 1px solid var(--hair-line); border-radius: 18px; background: #fff; }
body.me-workspace-mode .me-kpi:first-child { border-left: 1px solid var(--hair-line); }
body.me-workspace-mode .me-kpi > span { width: 38px; height: 38px; border-radius: 50%; color: var(--hair-accent); background: var(--hair-accent-soft); }
body.me-workspace-mode .me-kpi:nth-child(2) > span { color: #7550ad; background: #f3edfd; }
body.me-workspace-mode .me-kpi small { color: var(--hair-muted); font-size: 10px; font-weight: 650; letter-spacing: .01em; text-transform: none; }
body.me-workspace-mode .me-kpi strong { margin-block: 5px; color: var(--hair-ink); font-size: 25px; font-weight: 720; letter-spacing: -.045em; }
body.me-workspace-mode .me-kpi em { color: var(--hair-muted); font-size: 11px; line-height: 1.5; }
body.me-workspace-mode .me-payment-summary .me-kpi strong { font-size: clamp(19px, 1.8vw, 26px); white-space: normal; overflow-wrap: anywhere; }
body.me-workspace-mode :is(.me-feature-grid, .me-overview-lower) { gap: 20px; }
body.me-workspace-mode :is(.me-profile-readiness, .me-content-section, .me-looks-feature, .me-settings-panel) { border-color: var(--hair-line); border-radius: 22px; box-shadow: 0 2px 6px #33244a03; background: #fff; }
body.me-workspace-mode :is(.me-profile-readiness, .me-content-section, .me-looks-feature) { gap: 22px; padding: clamp(20px, 2vw, 28px); }
body.me-workspace-mode .me-booking-feature { min-height: 268px; border: 1px solid #e9e2f1; border-radius: 22px; color: var(--hair-ink); background: linear-gradient(115deg, #f3eef9 0%, #faf8fc 100%); }
body.me-workspace-mode .me-feature-copy { gap: 13px; padding: clamp(22px, 2.3vw, 34px); }
body.me-workspace-mode .me-feature-label { color: #4b4260; font-size: 10px; font-weight: 720; letter-spacing: .12em; }
body.me-workspace-mode .me-feature-copy h2 { color: #17131f; font-size: clamp(25px, 2.4vw, 35px); font-weight: 720; line-height: 1.12; letter-spacing: -.045em; }
body.me-workspace-mode .me-feature-copy :is(p, strong) { color: #696371; font-size: 13px; font-weight: 450; line-height: 1.55; }
body.me-workspace-mode .me-feature-copy .button-row { gap: 8px; flex-wrap: wrap; }
body.me-workspace-mode .me-feature-copy .ghost-button { color: #6a48d0; background: #ffffff8c; }
body.me-workspace-mode .me-feature-date { border-color: #e2d9ee; color: #6a48d0; background: #efe9f7; }
body.me-workspace-mode .me-feature-date :is(span, b, strong) { color: #6a48d0; font-weight: 650; }
body.me-workspace-mode .me-feature-date strong { font-size: 54px; letter-spacing: -.055em; }
body.me-workspace-mode .me-booking-feature > img { opacity: 1; }
body.me-workspace-mode .me-profile-readiness > p { color: var(--hair-muted); font-size: 13px; line-height: 1.65; }
body.me-workspace-mode .profile-facts span { border-color: #e8e2ef; color: #6a48d0; background: #f6f3f9; font-weight: 600; }
body.me-workspace-mode .me-salon-row { gap: 14px; padding-block: 17px; border-color: var(--hair-line); }
body.me-workspace-mode .me-salon-row img { border-radius: 13px; }
body.me-workspace-mode .me-salon-title strong { color: var(--hair-ink); font-size: 14px; font-weight: 720; letter-spacing: -.02em; }
body.me-workspace-mode .me-salon-title span { color: var(--hair-accent); font-weight: 720; }
body.me-workspace-mode .me-salon-row :is(p, small) { color: var(--hair-muted); font-size: 11px; line-height: 1.5; }
body.me-workspace-mode .me-ai-empty-visual img { border-radius: 15px; }
body.me-workspace-mode .me-empty-state { padding-block: 28px; border-color: var(--hair-line); }
body.me-workspace-mode .me-empty-state > span { width: 46px; height: 46px; color: var(--hair-accent); background: var(--hair-accent-soft); }
body.me-workspace-mode .me-empty-state strong { color: var(--hair-ink); font-size: 15px; font-weight: 720; letter-spacing: -.025em; }
body.me-workspace-mode .me-empty-state p { max-width: 55ch; margin-top: 7px; color: var(--hair-muted); font-size: 13px; line-height: 1.6; }
body.me-workspace-mode .me-empty-showcase { border-radius: 18px; background: #faf8f8; }
body.me-workspace-mode .me-empty-showcase h2 { color: var(--hair-ink); font-size: clamp(26px, 2.4vw, 36px); font-weight: 720; letter-spacing: -.045em; line-height: 1.15; }
body.me-workspace-mode .me-empty-showcase p { color: var(--hair-muted); font-size: 14px; line-height: 1.65; }
body.me-workspace-mode .me-empty-showcase > div > span { color: #7550ad; background: #f0e8fd; }
body.me-workspace-mode .me-dashboard .customer-ai-card { border-color: var(--hair-line); border-radius: 18px; box-shadow: none; }
body.me-workspace-mode .customer-ai-pair { border-radius: 14px; }
body.me-workspace-mode .customer-ai-card-heading strong { font-weight: 720; color: var(--hair-ink); letter-spacing: -.025em; }

/* Upcoming appointments, completed visits, payments and notifications. */
body.me-workspace-mode .customer-appointment-feature { border-color: #e6e0ec; border-radius: 19px; background: #fff; box-shadow: 0 4px 16px #33244a05; }
body.me-workspace-mode .customer-appointment-feature-date { border-color: #e5ddf0; color: var(--hair-accent); background: #f3eef9; }
body.me-workspace-mode .customer-appointment-feature-date :is(span, small, strong) { color: var(--hair-accent); font-weight: 650; }
body.me-workspace-mode .customer-appointment-feature-date strong { font-size: 44px; letter-spacing: -.05em; }
body.me-workspace-mode .customer-appointment-feature-copy { gap: 10px; }
body.me-workspace-mode .customer-appointment-feature-copy h2 { color: var(--hair-ink); font-weight: 720; letter-spacing: -.035em; }
body.me-workspace-mode .customer-appointment-feature-copy h3 { color: #4b4260; font-weight: 650; }
body.me-workspace-mode .customer-appointment-feature-copy p,
body.me-workspace-mode .customer-appointment-feature-meta span { color: var(--hair-muted); font-size: 12px; line-height: 1.5; }
body.me-workspace-mode .customer-appointment-policy-timeline { border-color: #e8e2ef; background: #faf8fb; }
body.me-workspace-mode .customer-appointment-policy-timeline > header strong { color: var(--hair-accent); font-weight: 650; }
body.me-workspace-mode .customer-appointment-policy-elapsed { background: linear-gradient(90deg, #916be8, #c2aef5); }
body.me-workspace-mode .me-history-section { border: 0; padding: 0; background: transparent; box-shadow: none; }
body.me-workspace-mode .me-history-card { border-color: var(--hair-line); border-radius: 20px; box-shadow: 0 3px 12px #33244a04; }
body.me-workspace-mode .me-history-card-icon { color: var(--hair-accent); background: var(--hair-accent-soft); border-radius: 14px; }
body.me-workspace-mode .me-history-card-title h3 { color: var(--hair-ink); font-weight: 720; letter-spacing: -.025em; }
body.me-workspace-mode .me-history-card-meta { border-color: var(--hair-line); background: #fbfafc; }
body.me-workspace-mode .me-history-card-meta :is(dt, dd) { font-weight: 600; }
body.me-workspace-mode .me-history-card-actions { border-color: var(--hair-line); }
body.me-workspace-mode .me-dashboard .customer-payment-row { border-color: var(--hair-line); }
body.me-workspace-mode .customer-notification-row { border-color: var(--hair-line); border-radius: 16px; background: #fff; box-shadow: none; transition: border-color 180ms ease, background-color 180ms ease; }
body.me-workspace-mode .customer-notification-row.is-unread { border-color: #e7defa; background: #f7f3fe; box-shadow: none; }
body.me-workspace-mode .customer-notification-title strong { color: var(--hair-ink); font-weight: 720; letter-spacing: -.02em; }
body.me-workspace-mode .customer-notification-body { color: var(--hair-muted); line-height: 1.55; }
body.me-workspace-mode .customer-notification-chevron { color: var(--hair-accent); background: #f3eff8; }

/* Settings stay familiar while sharing the same field and section rhythm. */
body.me-workspace-mode .me-settings-panel { padding: 0; gap: 0; }
body.me-workspace-mode .me-settings-panel > .me-section-heading,
body.me-workspace-mode .me-settings-profile { padding: 26px 28px; border-color: var(--hair-line); }
body.me-workspace-mode .me-settings-group { padding: 30px 28px; gap: 28px; border-color: var(--hair-line); }
body.me-workspace-mode .me-settings-group > div:first-child h3 { color: var(--hair-ink); font-size: 15px; font-weight: 720; letter-spacing: -.025em; }
body.me-workspace-mode .me-settings-group > div:first-child p { color: var(--hair-muted); font-size: 12px; line-height: 1.65; }
body.me-workspace-mode .me-settings-group .profile-grid { gap: 20px 16px; }
body.me-workspace-mode .me-settings-group .profile-grid label { color: #4b4260; font-size: 12px; font-weight: 600; }
body.me-workspace-mode .me-settings-group .profile-grid :is(input, select, textarea),
body.me-workspace-mode .me-settings-group .prelook-select-trigger { min-height: 46px; padding-inline: 13px; border-color: #e4dfe8; border-radius: 11px; color: var(--hair-ink); background: #ffffff; font-size: 14px; font-weight: 450; box-shadow: 0 1px 2px #17131f03; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
body.me-workspace-mode .me-settings-group .profile-grid textarea { padding-block: 12px; line-height: 1.6; }
body.me-workspace-mode .me-settings-group .profile-grid input[readonly] { color: var(--hair-muted); background: #f8f7f9; }
body.me-workspace-mode .me-settings-group .profile-grid :is(input, select, textarea):focus { border-color: #9b8bc7; background: #fff; box-shadow: 0 0 0 3px #916be814; }
body.me-workspace-mode .settings-photo-control { background: #eee9f5; color: var(--hair-accent); font-weight: 650; }
body.me-workspace-mode .me-settings-profile > div strong { color: var(--hair-ink); font-weight: 720; }
body.me-workspace-mode .me-settings-profile > div span { color: var(--hair-muted); }
body.me-workspace-mode .me-settings-footer { padding: 20px 28px; background: #fbfafc; }
body.me-workspace-mode .me-sync-status { color: var(--hair-accent); background: var(--hair-accent-soft); font-weight: 650; }
body.me-workspace-mode .me-account-actions { gap: 10px; flex-wrap: wrap; }

/* The same calm palette carries into the inbox without changing its room sizing. */
body.me-workspace-mode .customer-chats { --chat-ink: #17131f; --chat-muted: #696371; --chat-line: #e8e4ec; --chat-purple: #6a48d0; --chat-soft: #f3eff8; }
body.me-workspace-mode .customer-chats-layout { border-color: var(--hair-line); border-radius: 22px; box-shadow: 0 4px 20px #33244a05; }
body.me-workspace-mode .customer-chat-list > header h2 { font-size: 20px; font-weight: 720; letter-spacing: -.035em; }
body.me-workspace-mode .customer-chat-search { border-radius: 12px; background: #faf8f8; }
body.me-workspace-mode .customer-chat-salon-row { border-radius: 13px; }
body.me-workspace-mode .customer-chat-salon-row[aria-current="true"] { border-color: #e5ddf0; background: #f3eff8; }
body.me-workspace-mode .customer-chat-avatar { border-color: #e5ddf0; border-radius: 50%; background: #eee9f5; font-weight: 650; }
body.me-workspace-mode .customer-chat-stream.appointment-message-thread { background: #faf8fb; }
body.me-workspace-mode .customer-chat-stream.appointment-message-thread article.customer:not(.is-failed) { border-color: #e2d9ee; color: #3d3152; background: #f0ebf7; }
body.me-workspace-mode .customer-chat-appointment { border-color: #e6e0ec; border-radius: 15px; }
body.me-workspace-mode .customer-chat-compose-input:focus-within,
body.me-workspace-mode .customer-chat-search:focus-within { border-color: #a79ac7; box-shadow: 0 0 0 3px #916be812; }
body.me-workspace-mode .customer-chat-composer.appointment-message-composer .customer-chat-send { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #916be8; box-shadow: 0 8px 18px -10px #916be8; }
body.me-workspace-mode .customer-chat-composer.appointment-message-composer .customer-chat-send:hover { background: #7f58e0; }
body.me-workspace-mode .customer-chat-typing .customer-chat-typing-dots > i { background: var(--hair-accent); }
body.me-workspace-mode .customer-chat-empty :is(h2, h3, strong) { color: var(--hair-ink); }

/* Salon workspaces also live in My Hair for professional account holders. */
body.me-workspace-mode .me-salons-view { gap: 24px; }
body.me-workspace-mode .me-salons-view .pro-account-salons { box-shadow: none; }
body.me-workspace-mode .pro-account-salon-card.is-expanded { border-color: var(--hair-line); border-radius: 18px; box-shadow: 0 3px 12px #33244a04; }
body.me-workspace-mode .pro-account-salon-card.is-expanded .pro-account-salon-copy h3 { color: var(--hair-ink); font-weight: 720; letter-spacing: -.03em; }
body.me-workspace-mode .pro-account-salon-summary { border-color: var(--hair-line); background: #faf8fb; }
body.me-workspace-mode .pro-account-salon-summary small { font-size: 10px; font-weight: 650; letter-spacing: .035em; }
body.me-workspace-mode .pro-account-salon-summary strong { font-weight: 720; }
body.me-workspace-mode .pro-account-salon-summary > div > .icon { color: var(--hair-accent); background: var(--hair-accent-soft); }
body.me-workspace-mode .pro-account-salon-summary-state > .icon { color: #a68aee; }
body.me-workspace-mode .me-salons-view .pro-account-salon-open:not(:disabled) { border-color: transparent; border-radius: 10px; color: #fff; background: #916be8; box-shadow: 0 10px 22px -14px #916be8b3; }
body.me-workspace-mode .me-salon-connection-grid .pro-code-card { border-color: var(--hair-line); border-radius: 20px; box-shadow: none; }

/* Appointment and review overlays keep their original grid/scroll mechanics. */
body.me-workspace-mode .appointment-dialog-backdrop { background: #1d162647; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
body.me-workspace-mode .appointment-dialog-card { border-color: #e6e0ec; border-radius: 25px; background: #fff; box-shadow: 0 30px 90px -20px #33244a40, 0 3px 14px #33244a10; animation-duration: 320ms; animation-timing-function: var(--hair-ease); }
body.me-workspace-mode .appointment-dialog-card > header { gap: 18px; padding: 25px 28px 22px; border-color: var(--hair-line); }
body.me-workspace-mode .appointment-dialog-card > header h2 { color: var(--hair-ink); font-size: clamp(23px, 2.1vw, 29px); font-weight: 720; line-height: 1.18; letter-spacing: -.04em; }
body.me-workspace-mode .appointment-dialog-card > header .eyebrow { margin-bottom: 9px; }
body.me-workspace-mode .appointment-dialog-card > header span { color: var(--hair-muted); font-size: 12px; line-height: 1.5; }
body.me-workspace-mode .appointment-dialog-status { gap: 10px 16px; border-color: var(--hair-line); padding: 14px 28px; background: #faf8fb; }
body.me-workspace-mode .appointment-dialog-status > span:not(.status-badge) { color: #5e566a; font-weight: 600; }
body.me-workspace-mode .appointment-dialog-status .icon { color: var(--hair-accent); }
body.me-workspace-mode .appointment-dialog-body { padding: 24px 28px; gap: 20px; scrollbar-color: #ddd5e6 transparent; }
body.me-workspace-mode .appointment-dialog-card > footer { border-color: var(--hair-line); padding: 18px 28px; background: #fbfafc; }
body.me-workspace-mode .appointment-detail-section { border-color: var(--hair-line); border-radius: 16px; }
body.me-workspace-mode .appointment-detail-heading strong { color: var(--hair-ink); font-weight: 720; }
body.me-workspace-mode .appointment-detail-facts > div { border-color: var(--hair-line); border-radius: 13px; background: #faf8fb; }
body.me-workspace-mode .appointment-detail-facts strong { color: var(--hair-ink); font-weight: 650; }

@media (hover: hover) {
  body.me-workspace-mode .me-rail-nav button:not(.active):hover { color: #3d3152; background: #f6f3f9; }
  body.me-workspace-mode .me-rail-nav button.me-rail-pro-link:not(.active):hover { color: var(--hair-ink); box-shadow: 0 12px 24px -12px #916be8cc; transform: translateY(-1px); }
  body.me-workspace-mode .me-rail-nav button.me-rail-pro-link:not(.active):hover::after { border-color: #916be8; transform: translateX(2px) rotate(45deg); }
  body.me-workspace-mode .me-rail-nav button.me-rail-pro-link.active:hover { background: #7f58e0 padding-box; border-color: #7f58e0; }
  body.me-workspace-mode .me-dashboard .solid-button.customer:not(.danger):not(:disabled):hover { background: #7f58e0; box-shadow: 0 14px 26px -14px #7f58e0cc; transform: translateY(-1px); }
  body.me-workspace-mode .me-dashboard .outline-button.customer:not(.danger):not(:disabled):hover { border-color: #ddd5e6; background: #faf8fb; box-shadow: 0 4px 14px #33244a07; transform: translateY(-1px); }
  body.me-workspace-mode .me-dashboard .ghost-button:not(:disabled):hover { background: #f3eff8; }
  body.me-workspace-mode .me-history-card:hover { border-color: #ddd5e6; box-shadow: 0 8px 24px #33244a09; transform: translateY(-2px); }
  body.me-workspace-mode .customer-notification-row:hover { border-color: #e2dbea; background: #faf8fb; }
  body.me-workspace-mode .customer-chat-salon-row:hover { background: #f8f6fa; }
  body.me-workspace-mode .customer-chat-appointment:hover { border-color: #d6cce3; background: #fbfafc; }
}
body.me-workspace-mode .me-dashboard :is(.solid-button, .outline-button):not(:disabled):active { transform: translateY(0); }

@media (min-width: 1041px) {
  body.me-workspace-mode .me-dashboard { grid-template-columns: 232px minmax(0, 1fr); }
  body.me-workspace-mode .me-rail-nav { overflow-y: auto; min-height: 0; padding-bottom: 18px; scrollbar-width: thin; }
  body.me-workspace-mode .me-rail-footer { flex-shrink: 0; }
}

@media (max-width: 1040px) {
  body.me-workspace-mode .me-rail-group-title { display: none; }
}

@media (min-width: 769px) and (max-width: 1180px) {
  body.me-workspace-mode .me-kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.me-workspace-mode .me-settings-group { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.me-workspace-mode .me-page-header { flex-wrap: wrap; }
}

@media (min-width: 769px) and (max-width: 1040px) {
  body.me-workspace-mode .me-account-rail { padding: 17px 22px; }
  body.me-workspace-mode .me-rail-profile { padding: 0; }
  body.me-workspace-mode .me-workspace { padding: 28px; }
}

@media (max-width: 768px) {
  body.customer-mode.me-workspace-mode .me-dashboard { border-radius: 0; background: var(--hair-surface); }
  body.customer-mode.me-workspace-mode .me-account-rail { padding: 12px 16px 0; background: #fff; border-color: var(--hair-line); }
  body.me-workspace-mode .me-rail-profile { padding: 0 2px 8px; gap: 10px; }
  body.me-workspace-mode .me-dashboard .me-rail-avatar { width: 36px; height: 36px; min-width: 36px; }
  body.me-workspace-mode .me-rail-profile strong { font-size: 13px; }
  body.me-workspace-mode .me-rail-profile span { font-size: 10px; }
  body.me-workspace-mode .me-rail-nav { gap: 5px; padding-bottom: 10px; }
  body.me-workspace-mode .me-rail-nav button { min-height: 44px; border-radius: 12px; padding: 9px 12px; font-size: 12px; }
  body.customer-mode.me-workspace-mode .me-workspace { padding: 24px 16px 32px; gap: 19px; background: var(--hair-surface); }
  body.me-workspace-mode .me-page-header { align-items: flex-start; gap: 17px; }
  body.me-workspace-mode .me-page-header h1 { font-size: clamp(29px, 6.7vw, 37px); }
  body.me-workspace-mode .me-page-header .eyebrow { margin-bottom: 9px; font-size: 9px; }
  body.me-workspace-mode .me-page-header-actions { gap: 8px; }
  body.me-workspace-mode .me-page-header-actions button { font-size: 11px; padding-inline: 10px; }
  body.me-workspace-mode .me-kpi-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.me-workspace-mode .me-kpi { min-height: 98px; padding: 14px 12px; gap: 9px; border: 1px solid var(--hair-line); border-radius: 16px; }
  body.me-workspace-mode .me-kpi > span { width: 31px; height: 31px; }
  body.me-workspace-mode .me-kpi strong { font-size: 23px; }
  body.me-workspace-mode .me-kpi :is(small, em) { font-size: 10px; }
  body.me-workspace-mode .me-kpi em { white-space: normal; }
  body.me-workspace-mode .me-payment-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.me-workspace-mode .me-payment-summary .me-kpi { min-height: 91px; }
  body.me-workspace-mode :is(.me-feature-grid, .me-overview-lower) { gap: 16px; }
  body.me-workspace-mode :is(.me-profile-readiness, .me-content-section, .me-looks-feature) { padding: 20px; gap: 19px; border-radius: 19px; }
  body.me-workspace-mode .me-section-heading :is(h2, h3) { font-size: 20px; }
  body.me-workspace-mode .me-booking-feature { grid-template-columns: minmax(0, 1fr) 78px; border-radius: 19px; }
  body.me-workspace-mode .me-booking-feature:has(> img) { grid-template-columns: minmax(0, 1fr); }
  body.me-workspace-mode .me-booking-feature > img { height: 190px; min-height: 190px; }
  body.me-workspace-mode .me-feature-copy { padding: 22px 20px; }
  body.me-workspace-mode .me-feature-copy h2 { font-size: 28px; }
  body.me-workspace-mode .me-feature-label { font-size: 9px; }
  body.me-workspace-mode .me-feature-date { min-height: 0; padding: 16px 8px; border-left: 1px solid #e2d9ee; background: #efe9f7; }
  body.me-workspace-mode .me-feature-date strong { font-size: 38px; }
  body.me-workspace-mode .me-feature-date :is(span, b) { color: #6a48d0; }
  body.me-workspace-mode .me-salon-row { gap: 10px; padding-block: 16px; }
  body.me-workspace-mode .me-salon-title strong { font-size: 13px; }
  body.me-workspace-mode .me-empty-state { padding: 25px 4px; }
  body.me-workspace-mode .me-empty-state p { font-size: 13px; }
  body.me-workspace-mode .me-empty-showcase > div { padding: 10px 18px 24px; }
  body.me-workspace-mode .me-empty-showcase > img { height: 230px; }
  body.me-workspace-mode .me-history-section { padding: 0; background: transparent; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature { border-radius: 16px; border-color: #e6e0ec; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature-date { padding: 13px 16px; background: #f3eef9; border-color: #e5ddf0; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature-date strong { font-size: 25px; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature-copy { gap: 10px; padding: 17px; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature-copy h2 { font-size: 22px; }
  body.me-workspace-mode .me-dashboard .customer-appointment-feature-copy h3 { font-size: 15px; }
  body.me-workspace-mode .me-settings-panel { border-radius: 19px; }
  body.me-workspace-mode .me-settings-panel > .me-section-heading,
  body.me-workspace-mode .me-settings-profile { padding: 20px; }
  body.me-workspace-mode .me-settings-panel > .me-section-heading { flex-wrap: wrap; gap: 12px; }
  body.me-workspace-mode .me-settings-group { grid-template-columns: minmax(0, 1fr); gap: 17px; padding: 24px 20px; }
  body.me-workspace-mode .me-settings-group .profile-grid { gap: 17px 12px; }
  body.me-workspace-mode .me-settings-group .profile-grid :is(input, select, textarea),
  body.me-workspace-mode .me-settings-group .prelook-select-trigger { font-size: 16px; min-height: 48px; }
  body.me-workspace-mode .me-settings-group .profile-grid > label { font-size: 12px; }
  body.me-workspace-mode .me-settings-footer { padding: 18px 20px; gap: 10px; flex-wrap: wrap; }
  body.me-workspace-mode .me-account-actions button { white-space: normal; }
  body.me-workspace-mode .customer-chats-layout { border-radius: 18px; }
  body.me-workspace-mode .customer-chat-list > header h2 { font-size: 20px; }
  body.me-workspace-mode .customer-chat-stream.appointment-message-thread { background: #faf8fb; }
  body.me-workspace-mode .appointment-dialog-card { border-radius: 22px; max-height: calc(100dvh - 28px); }
  body.me-workspace-mode .appointment-dialog-card > header { padding: 22px 20px 18px; }
  body.me-workspace-mode .appointment-dialog-card > header h2 { font-size: 25px; }
  body.me-workspace-mode .appointment-dialog-status { padding: 13px 20px; }
  body.me-workspace-mode .appointment-dialog-body { padding: 20px; }
  body.me-workspace-mode .appointment-dialog-card > footer { padding: 16px 20px; }
}

@media (max-width: 390px) {
  body.customer-mode.me-workspace-mode .me-workspace { padding-inline: 12px; }
  body.me-workspace-mode :is(.me-content-section, .me-profile-readiness, .me-looks-feature) { padding: 17px; }
  body.me-workspace-mode .me-history-section { padding: 0; }
  body.me-workspace-mode .me-kpi { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.me-workspace-mode .me-kpi > span { width: 29px; height: 29px; }
  body.me-workspace-mode .me-settings-group .profile-grid { grid-template-columns: minmax(0, 1fr); }
  body.me-workspace-mode .me-settings-footer > button { flex: 1 1 100%; }
  body.me-workspace-mode .me-feature-copy .button-row > button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.me-workspace-mode .me-dashboard *,
  body.me-workspace-mode .me-dashboard *::before,
  body.me-workspace-mode .me-dashboard *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}