/* Compact app content, scoped entirely to the inside of the original phone frame. */
.app-simulator .sim-phone-glass {
  grid-template-rows: 42px 49px minmax(0, 1fr) 59px 20px;
}
.app-simulator[data-app-route='book'] .sim-phone-glass {
  grid-template-rows: 42px 49px minmax(0, 1fr) 20px;
}
.app-simulator .sim-brand {
  padding: 7px 12px;
  gap: 8px;
}
.app-simulator .sim-brand img {
  width: 29px;
  height: 21px;
}
.app-simulator .sim-brand strong {
  font-size: 15px;
}
.app-simulator .sim-brand small {
  font-size: 9px;
}
.app-simulator .sim-notifications {
  width: 36px;
  height: 36px;
}
.app-simulator .sim-notifications svg {
  width: 18px;
  height: 18px;
}
.app-simulator .sim-screen {
  padding: 12px;
}
.app-simulator .sim-screen .sim-page {
  font-size: 13px;
  line-height: 1.5;
}
.app-simulator .sim-screen button {
  min-height: 44px;
}
.app-simulator .sim-screen .sim-page h3 {
  font-size: 18px;
  line-height: 1.35;
}
.app-simulator .sim-screen .sim-page-head {
  margin-bottom: 12px;
}
.app-simulator .sim-screen .sim-page-head > p:not(.sim-step) {
  font-size: 13px;
}
.app-simulator .sim-screen .sim-primary,
.app-simulator .sim-screen .sim-secondary {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 13px;
}
.app-simulator .sim-screen .sim-choice {
  padding: 9px 10px;
  font-size: 12px;
}
.app-simulator .sim-screen .sim-empty {
  padding: 18px 10px;
  font-size: 13px;
}
.app-simulator .sim-home-hero {
  padding: 12px;
  margin-bottom: 12px;
}
.app-simulator .sim-home-hero:before {
  width: 104px;
  height: 104px;
  top: -26px;
  right: -26px;
}
.app-simulator .sim-home-hero > p {
  font-size: 11px;
}
.app-simulator .sim-screen .sim-home-hero h3 {
  font-size: 18px;
}
.app-simulator .sim-home-hero > button {
  margin-top: 8px;
  padding: 6px 9px;
  font-size: 11px;
}
.app-simulator .sim-dashboard-label {
  font-size: 11px;
  margin-bottom: 6px;
}
.app-simulator .sim-app-card,
.app-simulator .sim-home-upcoming,
.app-simulator .sim-app-guide,
.app-simulator .sim-dispatch {
  min-height: 58px;
  padding: 10px;
  gap: 9px;
}
.app-simulator .sim-app-card > i,
.app-simulator .sim-home-upcoming > i,
.app-simulator .sim-app-guide > i,
.app-simulator .sim-dispatch > i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.app-simulator .sim-app-card > i svg,
.app-simulator .sim-home-upcoming > i svg,
.app-simulator .sim-app-guide > i svg,
.app-simulator .sim-dispatch > i svg {
  width: 17px;
  height: 17px;
}
.app-simulator .sim-app-card strong,
.app-simulator .sim-home-upcoming strong,
.app-simulator .sim-app-guide strong,
.app-simulator .sim-dispatch strong {
  font-size: 13px;
}
.app-simulator .sim-app-card > svg,
.app-simulator .sim-home-upcoming > svg,
.app-simulator .sim-app-guide > svg,
.app-simulator .sim-dispatch > svg {
  width: 15px;
  height: 15px;
}
.app-simulator .sim-home-upcoming {
  margin-bottom: 12px;
}
.app-simulator .sim-home-actions {
  gap: 8px;
  margin: 12px 0;
}
.app-simulator .sim-home-actions > .sim-app-card {
  padding: 10px;
  gap: 6px;
}
.app-simulator .sim-app-guide,
.app-simulator .sim-dispatch {
  margin: 12px 0;
}
.app-simulator .sim-home-upcoming .sim-sample-date {
  width: 40px;
  height: 46px;
}
.app-simulator .sim-sample-date strong {
  font-size: 18px;
}
.app-simulator .sim-app-page-head {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 6px;
  margin-bottom: 12px;
}
.app-simulator .sim-app-page-head > button {
  min-width: 44px;
  padding: 7px;
}
.app-simulator .sim-app-page-head > button svg {
  width: 18px;
  height: 18px;
}
.app-simulator .sim-screen .sim-app-page-head h3 {
  font-size: 16px;
}
.app-simulator .sim-step-bar {
  margin-bottom: 14px;
  gap: 5px;
}
.app-simulator .sim-step-bar > span {
  height: 5px;
}
.app-simulator .sim-unit-card {
  padding: 12px;
  margin: 10px 0;
}
.app-simulator .sim-unit-card > p {
  font-size: 13px;
  margin-bottom: 9px;
}
.app-simulator .sim-hp-grid {
  gap: 6px;
}
.app-simulator .sim-hp-grid button,
.app-simulator .sim-hp-unsure {
  padding: 8px 4px;
  font-size: 13px;
}
.app-simulator .sim-unit-size {
  padding: 8px;
  font-size: 12px;
}
.app-simulator .sim-unit-size > strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-simulator .sim-unit-size > svg,
.app-simulator .sim-unit-size > button,
.app-simulator .sim-unit-card > header > button {
  flex: none;
}
.app-simulator .sim-categories {
  margin: 10px 0;
  gap: 5px;
}
.app-simulator .sim-catalog {
  gap: 6px;
}
.app-simulator .sim-catalog button {
  min-height: 58px;
  padding: 10px;
}
.app-simulator .sim-catalog strong {
  font-size: 13px;
}
.app-simulator .sim-catalog b {
  width: 26px;
  height: 26px;
  font-size: 18px;
}
.app-simulator .sim-app-add-unit {
  min-height: 44px;
  margin: 10px 0;
  padding: 9px;
  font-size: 13px;
}
.app-simulator .sim-date-grid,
.app-simulator .sim-time-grid {
  gap: 6px;
  margin: 8px 0 14px;
}
.app-simulator .sim-date-grid button {
  min-height: 64px;
  padding: 8px 4px;
}
.app-simulator .sim-date-grid button strong {
  font-size: 17px;
}
.app-simulator .sim-time-grid button {
  font-size: 12px;
}
.app-simulator .sim-fieldset {
  margin-bottom: 13px;
}
.app-simulator .sim-screen .sim-summary {
  margin: 12px 0;
  padding-inline: 10px;
}
.app-simulator .sim-screen .sim-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: 9px 0;
  gap: 10px;
}
.app-simulator .sim-summary > div > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-simulator .sim-summary > div > strong {
  white-space: nowrap;
  text-align: right;
}
.app-simulator .sim-app-bookbar {
  bottom: -12px;
  padding: 10px 12px;
  margin: 14px -12px -12px;
}
.app-simulator .sim-app-bookbar strong {
  font-size: 13px;
}
.app-simulator .sim-screen .sim-app-bookbar .sim-primary {
  padding-inline: 13px;
  font-size: 13px;
}
.app-simulator .sim-profile-card {
  padding: 12px;
  margin-bottom: 12px;
  gap: 10px;
}
.app-simulator .sim-profile-card > i {
  width: 38px;
  height: 38px;
}
.app-simulator .sim-profile-card svg {
  width: 20px;
  height: 20px;
}
.app-simulator .sim-profile-card strong {
  font-size: 15px;
}
.app-simulator .sim-profile-card small {
  font-size: 11px;
}
.app-simulator .sim-profile-row {
  min-height: 48px;
  padding: 10px;
  font-size: 13px;
  gap: 9px;
  margin: 6px 0;
}
.app-simulator .sim-screen .sim-topics {
  gap: 7px;
  margin: 12px 0;
}
.app-simulator .sim-screen .sim-topic {
  min-height: 60px;
  padding: 10px;
  gap: 8px;
}
.app-simulator .sim-screen .sim-topic > i {
  width: 32px;
  height: 32px;
  font-size: 19px;
  border-radius: 10px;
}
.app-simulator .sim-screen .sim-topic strong {
  font-size: 13px;
}
.app-simulator .sim-guide-search {
  padding: 8px 10px;
  margin: 12px 0;
}
.app-simulator .sim-cause {
  margin: 8px 0;
}
.app-simulator .sim-scam-alert {
  padding: 10px;
  margin: 12px 0;
}
.app-simulator .sim-subheading {
  font-size: 13px;
  margin: 12px 0 6px;
}
.app-simulator .sim-screen .sim-tip {
  padding: 10px;
  margin: 12px 0;
}
.app-simulator .sim-chat-bubble {
  padding: 10px;
  margin: 7px 0;
}
.app-simulator .sim-timeline {
  margin: 14px 0;
}
.app-simulator .sim-timeline li {
  padding-bottom: 15px;
}
.app-simulator .sim-success-icon {
  width: 46px;
  height: 46px;
  margin: 14px auto;
}
.app-simulator .sim-success-icon svg {
  width: 22px;
  height: 22px;
}
.app-simulator .sim-tabs button {
  min-height: 48px;
  font-size: 9px;
}
.app-simulator .sim-tabs button > i {
  width: 24px;
  height: 21px;
}
.app-simulator .sim-tabs button svg {
  width: 18px;
  height: 18px;
}
.app-simulator .sim-tabs button[data-preview='book'] {
  min-height: 65px;
  margin-top: -17px;
}
.app-simulator .sim-tabs button[data-preview='book'] > i {
  width: 46px;
  height: 46px;
}
.app-simulator .sim-tabs button[data-preview='book'] svg {
  width: 21px;
  height: 21px;
}

/* Source-derived booking controls. Names and prices always keep their own space. */
.app-simulator .sim-booking-head > div > p {
  margin: 0 0 2px;
  color: #46698e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.app-simulator .sim-screen .sim-booking-head h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.app-simulator .sim-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
}
.app-simulator .sim-catalog-row[data-selected='true'] {
  border-color: #5b52ce;
  background: #eaedff;
}
.app-simulator .sim-service-description {
  min-width: 0;
}
.app-simulator .sim-service-description strong {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.app-simulator .sim-service-description small {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  color: #1a3d63;
  font-size: 10px;
  line-height: 1.5;
}
.app-simulator .sim-service-qty {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  gap: 0;
}
.app-simulator .sim-service-qty > span {
  flex: none;
  min-width: 16px;
  text-align: center;
  color: #0a1931;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-simulator .sim-screen .sim-service-qty > button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  place-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5b52ce;
  text-align: center;
}
.app-simulator .sim-service-qty > button:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 6px;
  border: 1px solid #bec9d4;
  border-radius: 50%;
  background: #f2f6fb;
}
.app-simulator .sim-service-qty > button[data-service-qty='1'] {
  color: #ffffff;
}
.app-simulator .sim-service-qty > button[data-service-qty='1']:before {
  border-color: #5b52ce;
  background: #5b52ce;
}
.app-simulator .sim-service-qty > button > svg {
  width: 15px;
  height: 15px;
}
.app-simulator .sim-screen .sim-unit-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid #5b52ce;
  border-radius: 12px;
  background: #5b52ce;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.app-simulator .sim-unit-apply > svg {
  width: 15px;
  height: 15px;
}
.app-simulator .sim-unit-apply > small {
  margin-left: auto;
  white-space: nowrap;
  color: #ffffff;
  font-size: 10px;
  font-weight: 500;
}
.app-simulator .sim-unit-totals {
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #cdd2ff;
}
.app-simulator .sim-unit-totals {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.app-simulator .sim-unit-totals > strong {
  min-width: 0;
}
.app-simulator .sim-unit-totals > strong:last-child {
  flex: none;
  white-space: nowrap;
}
.app-simulator .sim-unit-totals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  color: #46698e;
  font-size: 11px;
  line-height: 1.5;
}
.app-simulator .sim-unit-totals > div > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-simulator .sim-unit-totals > div > strong {
  color: #1a3d63;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
}

/* The review stage follows the app's cart, schedule and location sections. */
.app-simulator .sim-cart-card {
  margin: 12px 0;
  border: 1px solid #bec9d4;
  border-radius: 16px;
  background: #f2f6fb;
  overflow: hidden;
}
.app-simulator .sim-cart-card > h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  border-bottom: 1px solid #bec9d4;
  color: #0a1931;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.app-simulator .sim-cart-card > h4 > small {
  color: #46698e;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
}
.app-simulator .sim-cart-unit + .sim-cart-unit {
  border-top: 1px solid #bec9d4;
}
.app-simulator .sim-cart-unit > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 7px;
}
.app-simulator .sim-cart-unit > header > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #0a1931;
  font-size: 11px;
  line-height: 1.5;
}
.app-simulator .sim-cart-unit > header > span > svg {
  width: 15px;
  height: 15px;
  color: #5b52ce;
}
.app-simulator .sim-cart-unit > header > span > strong {
  font-size: 11px;
  white-space: nowrap;
  font-weight: 700;
}
.app-simulator .sim-cart-unit > header > span > small {
  color: #46698e;
  font-size: 10px;
  white-space: normal;
}
.app-simulator .sim-screen .sim-cart-unit > header > button {
  flex: none;
  min-height: 44px;
  padding: 6px 0 6px 8px;
  border: 0;
  background: none;
  color: #5b52ce;
  font-size: 11px;
  font-weight: 700;
}
.app-simulator .sim-cart-line,
.app-simulator .sim-cart-subtotal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  font-size: 11px;
  line-height: 1.55;
}
.app-simulator .sim-cart-line {
  padding: 4px 0;
  color: #1a3d63;
}
.app-simulator .sim-cart-line > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-simulator .sim-cart-line > strong,
.app-simulator .sim-cart-subtotal > strong {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.app-simulator .sim-cart-subtotal {
  border-top: 1px solid #bec9d4;
  background: #e9eff6;
  color: #0a1931;
}
.app-simulator .sim-review-payments,
.app-simulator .sim-review-datetime {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
}
.app-simulator .sim-review-payments > h4,
.app-simulator .sim-review-datetime > h4,
.app-simulator .sim-location-card > h4 {
  margin: 0 0 8px;
  color: #0a1931;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.app-simulator .sim-review-payments > div,
.app-simulator .sim-review-datetime > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 4px 0;
  font-size: 11px;
  line-height: 1.55;
}
.app-simulator .sim-review-payments > div > span,
.app-simulator .sim-review-datetime > div > span {
  min-width: 0;
  color: #46698e;
  overflow-wrap: anywhere;
}
.app-simulator .sim-review-payments > div > strong,
.app-simulator .sim-review-datetime > div > strong {
  max-width: 145px;
  min-width: 0;
  color: #0a1931;
  text-align: right;
  font-weight: 700;
}
.app-simulator .sim-review-payments > div > strong {
  white-space: nowrap;
}
.app-simulator .sim-review-datetime > div > strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-simulator .sim-location-card {
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid #bec9d4;
  border-radius: 16px;
  background: #f2f6fb;
}
.app-simulator .sim-screen .sim-property-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 9px 8px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
  text-align: left;
  color: #0a1931;
}
.app-simulator .sim-property-choice + .sim-property-choice {
  margin-top: 7px;
}
.app-simulator .sim-property-choice > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e9eff6;
  color: #46698e;
  font-style: normal;
}
.app-simulator .sim-property-choice > i > svg {
  width: 17px;
  height: 17px;
}
.app-simulator .sim-property-choice > span {
  flex: 1;
  min-width: 0;
}
.app-simulator .sim-property-choice strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.app-simulator .sim-property-choice small {
  display: block;
  margin-top: 2px;
  color: #46698e;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.app-simulator .sim-property-choice > b {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid #bec9d4;
  border-radius: 50%;
  color: transparent;
  background: #f2f6fb;
}
.app-simulator .sim-property-choice > b > svg {
  width: 12px;
  height: 12px;
}
.app-simulator .sim-property-choice[aria-pressed='true'] {
  border-color: #5b52ce;
}
.app-simulator .sim-property-choice[aria-pressed='true'] > b {
  border-color: #5b52ce;
  background: #5b52ce;
  color: #ffffff;
}
.app-simulator .sim-book-notes {
  display: block;
  width: 100%;
  min-height: 84px;
  resize: vertical;
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
  color: #0a1931;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}
.app-simulator .sim-book-notes::placeholder {
  color: #46698e;
  opacity: 1;
}
.app-simulator .sim-helper-consent {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  margin: 12px 0;
  color: #1a3d63;
  font-size: 11px;
  line-height: 1.6;
}
.app-simulator .sim-helper-consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #5b52ce;
}
.app-simulator .sim-deposit-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #f5cd83;
  border-radius: 12px;
  background: #fff5e1;
  color: #875317;
  font-size: 11px;
  line-height: 1.6;
}
.app-simulator .sim-deposit-notice > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.app-simulator .sim-deposit-notice p {
  color: inherit;
  font-size: 11px;
  line-height: 1.6;
}
.app-simulator .sim-deposit-notice strong {
  display: block;
  font-weight: 700;
}

/* A chat thread replaces both app chrome rows, as it does in the real app. */
.app-simulator[data-app-route='chat'] .sim-phone-glass {
  grid-template-rows: 42px minmax(0, 1fr) 20px;
}
.app-simulator[data-app-route='chat'] .sim-brand,
.app-simulator[data-app-route='chat'] .sim-tabs {
  display: none;
}
.app-simulator[data-app-route='chat'] .sim-screen {
  padding: 0;
  overflow: hidden;
  background: #e9eff6;
}
.app-simulator[data-app-route='chat'] .sim-screen > .sim-page {
  height: 100%;
  min-height: 0;
}
.app-simulator .sim-chat-screen {
  display: grid;
  grid-template-rows: 61px minmax(0, 1fr) 63px;
  height: 100%;
  min-height: 0;
  background: #e9eff6;
}
.app-simulator .sim-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #bec9d4;
  background: #f2f6fb;
}
.app-simulator .sim-screen .sim-chat-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0a1931;
}
.app-simulator .sim-chat-back > svg {
  width: 20px;
  height: 20px;
}
.app-simulator .sim-chat-header > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5b52ce;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
}
.app-simulator .sim-chat-header > i > svg {
  width: 19px;
  height: 19px;
}
.app-simulator .sim-chat-header > div {
  flex: 1;
  min-width: 0;
}
.app-simulator .sim-screen .sim-chat-header h3 {
  margin: 0;
  color: #0a1931;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-wrap: wrap;
}
.app-simulator .sim-chat-header small {
  display: block;
  margin-top: 2px;
  color: #46698e;
  font-size: 10px;
  line-height: 1.5;
}
.app-simulator .sim-chat-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #bec9d480 transparent;
}
.app-simulator .sim-chat-day {
  align-self: center;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dce5ef;
  color: #46698e;
  font-size: 10px;
  line-height: 1.5;
}
.app-simulator .sim-chat-row {
  display: flex;
  justify-content: flex-start;
  flex: none;
  min-width: 0;
}
.app-simulator .sim-chat-row.is-mine {
  justify-content: flex-end;
}
.app-simulator .sim-chat-history .sim-chat-bubble {
  max-width: 78%;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #bec9d4;
  border-radius: 16px 16px 16px 4px;
  background: #f2f6fb;
  color: #0a1931;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.375;
  overflow-wrap: anywhere;
}
.app-simulator .sim-chat-row.is-mine .sim-chat-bubble,
.app-simulator .sim-chat-history .sim-chat-bubble.is-mine {
  margin: 0;
  border-color: #5b52ce;
  border-radius: 16px 16px 4px 16px;
  background: #5b52ce;
  color: #ffffff;
}
.app-simulator .sim-chat-bubble p {
  font-size: 13px;
  line-height: 1.375;
  color: inherit;
}
.app-simulator .sim-chat-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 4px;
  color: #46698e;
  font-size: 9px;
  line-height: 1.4;
  white-space: nowrap;
}
.app-simulator .sim-chat-row.is-mine .sim-chat-time {
  color: #ffffffbf;
}
.app-simulator .sim-chat-time > svg {
  width: 10px;
  height: 10px;
  color: #8dd0ff;
}
.app-simulator .sim-chat-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #bec9d4;
  background: #f2f6fb;
}
.app-simulator .sim-chat-composer input {
  flex: 1;
  min-width: 0;
  width: 0;
  height: 40px;
  padding: 9px 12px;
  border: 1px solid #bec9d4;
  border-radius: 999px;
  background: #e9eff6;
  color: #0a1931;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.app-simulator .sim-chat-composer input::placeholder {
  color: #46698e;
  opacity: 1;
}
.app-simulator .sim-screen .sim-chat-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #5b52ce;
  color: #ffffff;
}
.app-simulator .sim-chat-send > svg {
  width: 19px;
  height: 19px;
}
.app-simulator .sim-screen .sim-message-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 74px;
  padding: 11px 10px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
  color: #0a1931;
  text-align: left;
}
.app-simulator .sim-message-thread > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5b52ce;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
}
.app-simulator .sim-message-thread > i > svg {
  width: 18px;
  height: 18px;
}
.app-simulator .sim-message-thread > span {
  flex: 1;
  min-width: 0;
}
.app-simulator .sim-message-thread strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.app-simulator .sim-message-thread small {
  display: block;
  margin-top: 3px;
  color: #46698e;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.app-simulator .sim-message-thread > svg {
  width: 16px;
  height: 16px;
  color: #46698e;
}
@media (hover: hover) and (pointer: fine) {
  .app-simulator .sim-service-qty > button:hover:before {
    border-color: #8280fa;
    background: #eaedff;
  }
  .app-simulator .sim-service-qty > button[data-service-qty='1']:hover:before,
  .app-simulator .sim-unit-apply:hover,
  .app-simulator .sim-chat-send:hover {
    border-color: #4a3fb2;
    background: #4a3fb2;
  }
  .app-simulator .sim-property-choice:hover,
  .app-simulator .sim-message-thread:hover {
    border-color: #8280fa;
    background: #eaedff;
  }
}
@media (max-width: 360px) {
  .app-simulator .sim-phone-glass {
    grid-template-rows: 40px 49px minmax(0, 1fr) 59px 20px;
  }
  .app-simulator[data-app-route='book'] .sim-phone-glass {
    grid-template-rows: 40px 49px minmax(0, 1fr) 20px;
  }
  .app-simulator[data-app-route='chat'] .sim-phone-glass {
    grid-template-rows: 40px minmax(0, 1fr) 20px;
  }
  .app-simulator .sim-chat-header {
    gap: 6px;
    padding-inline: 6px;
  }
  .app-simulator .sim-chat-header > i {
    width: 32px;
    height: 32px;
  }
  .app-simulator .sim-screen .sim-chat-header h3 {
    font-size: 12px;
  }
  .app-simulator .sim-chat-history {
    padding-inline: 10px;
  }
  .app-simulator .sim-cart-unit > header > span {
    flex-wrap: wrap;
    gap: 3px 5px;
  }
}
@media (hover: none), (pointer: coarse) {
  .app-simulator .sim-notifications {
    min-width: 44px;
    min-height: 44px;
  }
}

/* The app's cart groups services inside individual unit cards. */
.app-simulator .sim-cart-card {
  padding: 12px;
}
.app-simulator .sim-cart-card > h4 {
  padding: 0 0 10px;
  border: 0;
}
.app-simulator .sim-cart-unit {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #e9eff6;
}
.app-simulator .sim-cart-unit + .sim-cart-unit {
  border: 1px solid #bec9d4;
}
.app-simulator .sim-cart-subtotal {
  margin-top: 8px;
  padding: 8px 0 0;
  border-color: #bec9d4;
  font-weight: 400;
}
.app-simulator .sim-cart-unit > header > button {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #bec9d4;
  border-radius: 8px;
  background: #f2f6fb;
  color: #1a3d63;
}
.app-simulator .sim-cart-card > .sim-review-payments {
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #e1e9f1;
  border-radius: 0;
  background: transparent;
}
.app-simulator .sim-review-datetime > div:first-child {
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e1e9f1;
}
.app-simulator .sim-review-datetime button {
  min-height: 44px;
  padding: 0 5px;
  border: 0;
  background: none;
  font-size: 11px;
  color: #5b52ce;
  font-weight: 700;
  text-decoration: underline;
}
.app-simulator .sim-customer-name {
  margin-bottom: 12px;
}
.app-simulator .sim-customer-name small {
  display: block;
  color: #46698e;
  font-size: 11px;
}
.app-simulator .sim-customer-name strong {
  display: block;
  font-size: 13px;
}
.app-simulator .sim-location-card > h4 {
  color: #1a3d63;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app-simulator .sim-property-choice {
  border-radius: 8px;
}
.app-simulator .sim-property-choice[aria-pressed='true'] {
  background: #e9eff6;
}
.app-simulator .sim-property-choice[aria-pressed='true'] > i {
  background: #5b52ce;
  color: #ffffff;
}
.app-simulator .sim-property-choice strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.app-simulator .sim-property-choice small:last-child {
  display: flex;
  align-items: center;
  gap: 3px;
}
.app-simulator .sim-property-choice small svg {
  width: 10px;
  height: 10px;
  flex: none;
}
.app-simulator .sim-property-default {
  padding: 2px 4px;
  border-radius: 4px;
  background: #d1fae5;
  color: #047857;
  font-size: 9px;
  text-transform: uppercase;
}
.app-simulator .sim-notes-label {
  display: block;
  margin-top: 12px;
  color: #46698e;
  font-size: 11px;
}
.app-simulator .sim-helper-consent {
  gap: 8px;
  padding: 10px;
  border: 1px solid #bec9d4;
  border-radius: 12px;
  background: #f2f6fb;
  cursor: pointer;
}
.app-simulator .sim-helper-consent[data-selected='true'] {
  border-color: #5b52ce;
  background: #eaedff;
}
.app-simulator .sim-helper-consent > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e5e9ff;
  color: #5b52ce;
}
.app-simulator .sim-helper-consent > i svg {
  width: 16px;
  height: 16px;
}
.app-simulator .sim-helper-consent > span {
  flex: 1;
  min-width: 0;
}
.app-simulator .sim-helper-consent strong {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #0a1931;
}
.app-simulator .sim-helper-consent small {
  display: block;
  margin-top: 3px;
  color: #1a3d63;
  font-size: 10px;
  line-height: 1.5;
}
.app-simulator .sim-bookbar-empty {
  display: block;
  text-align: center;
  color: #46698e;
  font-size: 11px;
}
.app-simulator .sim-bookbar-back {
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #1a3d63;
  font-size: 12px;
  font-weight: 700;
}
.app-simulator .sim-dispatch > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #cdd2ff;
  color: #5b52ce;
}
.app-simulator .sim-chat-back svg {
  transform: rotate(180deg);
}

/* Booking detail and invoice reuse the production components' visual rules. */
.app-simulator .sim-phone-glass {
  position: relative;
}
.app-simulator .sim-source-overlay {
  position: absolute;
  z-index: 10;
  inset: 42px 0 20px;
  min-height: 0;
}
.app-simulator .sim-source-overlay[hidden] {
  display: none;
}
.app-simulator .sim-source-surface {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  color: #0a1931;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.app-simulator .sim-source-surface * {
  box-sizing: border-box;
  corner-shape: round;
}
.app-simulator .sim-source-surface h3 {
  margin: 0;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.app-simulator .sim-source-surface h4 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app-simulator .sim-source-surface p {
  margin: 0;
  letter-spacing: 0;
}
.app-simulator .sim-source-surface i {
  display: grid;
  place-items: center;
  flex: none;
  font-style: normal;
}
.app-simulator .sim-source-surface button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.app-simulator .sim-source-surface svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.app-simulator .sim-source-surface .production-sheet-heading {
  min-height: 69px;
}
.app-simulator .sim-source-surface .production-sheet-heading p {
  font-size: 12px;
  color: #46698e;
}
.app-simulator .sim-source-surface .production-close {
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: transparent;
  color: #1a3d63;
}
.app-simulator .sim-source-surface .production-detail-sheet {
  height: 90%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.app-simulator .sim-source-surface .production-review-body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #bec9d480 transparent;
}
.app-simulator .sim-source-surface .production-review-content {
  transform: none;
  transition: none;
}
.app-simulator .sim-source-surface .production-detail-services h4,
.app-simulator .sim-source-surface .production-photo-section h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #46698e;
  line-height: 1.5;
}
.app-simulator .sim-source-surface .production-detail-services h4 svg,
.app-simulator .sim-source-surface .production-photo-section h4 svg {
  width: 12px;
  height: 12px;
}
.app-simulator .sim-source-surface .production-detail-timeline h4 {
  margin: 0 0 8px;
  color: #46698e;
}
.app-simulator .sim-source-surface .production-visit-meta svg {
  width: 14px;
  height: 14px;
}
.app-simulator .sim-source-surface .production-detail-tech svg,
.app-simulator .sim-source-surface .production-detail-timeline svg {
  width: 16px;
  height: 16px;
}
.app-simulator .sim-source-surface .sim-timeline-pending {
  color: #46698e;
}
.app-simulator .sim-source-surface .sim-timeline-pending svg {
  color: #b3cfe5;
}
.app-simulator .sim-message-tech {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #cdd2ff !important;
  border-radius: 12px;
  background: #eaedff;
  color: #4a3fb2;
  font-weight: 700 !important;
}
.app-simulator .sim-detail-notes {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #46698e;
  border-radius: 0 8px 8px 0;
  background: #e9eff6;
}
.app-simulator .sim-detail-notes h4 {
  margin: 0 0 4px;
  color: #1a3d63;
}
.app-simulator .sim-detail-notes p {
  font-size: 12px;
  font-style: italic;
}
.app-simulator .sim-work-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.app-simulator .sim-work-photo-grid svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #e1e9f1;
}
.app-simulator .sim-source-surface .production-invoice-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.app-simulator .sim-source-surface .production-invoice-modal {
  max-height: 90%;
  opacity: 1;
  transform: none;
  transition: none;
}
.app-simulator .sim-source-surface .production-invoice-modal h3 {
  font-size: 16px;
}
.app-simulator .sim-source-surface .production-invoice-modal header p {
  font-size: 12px;
}
.app-simulator .sim-source-surface .production-invoice-download svg {
  width: 16px;
  height: 16px;
}
.app-simulator .sim-source-surface .production-invoice-modal > footer > button {
  font-size: 13px;
}
.app-simulator .sim-bookings-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}
.app-simulator .sim-bookings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 12px;
  background: #e1e9f1;
}
.app-simulator .sim-bookings-tabs button {
  flex: 1;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #46698e;
  font-size: 12px;
  font-weight: 700;
}
.app-simulator .sim-bookings-tabs button[aria-pressed='true'] {
  background: #f2f6fb;
  color: #5b52ce;
  box-shadow: 0 1px 2px #0a19310d;
}
.app-simulator .sim-booking-list-card {
  padding: 12px;
  border: 1px solid #bec9d4;
  border-radius: 16px;
  background: #f2f6fb;
  box-shadow: 0 1px 2px #0a19310d;
}
.app-simulator .sim-booking-open {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.app-simulator .sim-booking-open > i {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4a3fb2, #160d47);
  color: #ffffff;
  font-style: normal;
}
.app-simulator .sim-booking-open > i small {
  color: inherit;
  font-size: 9px;
  text-transform: uppercase;
}
.app-simulator .sim-booking-open > i strong {
  font-size: 20px;
  line-height: 1;
}
.app-simulator .sim-booking-open > span {
  flex: 1;
  min-width: 0;
}
.app-simulator .sim-booking-open > span > strong {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.app-simulator .sim-booking-open > span > small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #46698e;
  font-size: 10px;
  line-height: 1.5;
}
.app-simulator .sim-booking-open > span > small svg {
  width: 12px;
  height: 12px;
  flex: none;
}
.app-simulator .sim-booking-open > svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #46698e;
}
.app-simulator .sim-booking-status {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: #e5e9ff;
  color: #5b52ce;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.app-simulator .sim-booking-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e1e9f1;
}
.app-simulator .sim-booking-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #cdd2ff;
  border-radius: 8px;
  background: #eaedff;
  color: #5b52ce;
  font-size: 11px;
  font-weight: 700;
}
.app-simulator .sim-booking-actions button:last-child[data-action='start-book'] {
  background: #5b52ce;
  color: #ffffff;
}
.app-simulator .sim-booking-actions button[data-action='invoice'] {
  background: #e1e9f1;
  color: #0a1931;
  border-color: #e1e9f1;
}
.app-simulator .sim-booking-actions svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 360px) {
  .app-simulator .sim-source-overlay {
    top: 40px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .app-simulator .sim-source-surface .production-close:hover {
    background: #e1e9f1;
  }
  .app-simulator .sim-booking-actions button:hover {
    filter: brightness(0.97);
  }
}