:root {
  color-scheme: dark light;
  --bg: #0a1322;
  --bg-glow: #153153;
  --window: rgba(6, 14, 26, 0.88);
  --window-border: rgba(184, 204, 231, 0.14);
  --panel: #f7f9fc;
  --panel-strong: #ffffff;
  --panel-muted: #eef3f9;
  --panel-border: rgba(10, 28, 52, 0.08);
  --text: #101d31;
  --muted: #607089;
  --text-inverse: #ecf3ff;
  --muted-inverse: rgba(222, 236, 255, 0.72);
  --accent: #15427a;
  --accent-strong: #0f2f59;
  --accent-soft: #dde8f7;
  --accent-mint: #4fd1c5;
  --danger: #c54848;
  --danger-soft: #ffe1e1;
  --shadow-xl: 0 30px 80px rgba(3, 9, 19, 0.36);
  --shadow-lg: 0 18px 36px rgba(13, 23, 38, 0.12);
  --shadow-md: 0 10px 24px rgba(9, 18, 30, 0.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

/* Dispatch route/map MVP: office dispatch can route visible work without a live map vendor. */
.opsConsoleShell .fieldScheduleViewSwitch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  padding: 0.2rem !important;
}

.opsConsoleShell .fieldScheduleViewSwitch button {
  min-height: 2rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #475569 !important;
  padding: 0 0.72rem !important;
  font-size: 0.74rem !important;
  font-weight: 840 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleViewSwitch button.active {
  background: #0f2a5f !important;
  color: #ffffff !important;
  box-shadow: 0 0.35rem 0.85rem rgba(15, 42, 95, 0.18) !important;
}

.opsConsoleShell .fieldScheduleRouteShell {
  display: grid !important;
  gap: 0.78rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRouteMap,
.opsConsoleShell .fieldScheduleRoutePlan {
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.85rem !important;
  background: #ffffff !important;
  box-shadow: 0 0.45rem 1.25rem rgba(15, 23, 42, 0.06) !important;
}

.opsConsoleShell .fieldScheduleRouteMap {
  display: grid !important;
  gap: 0.6rem !important;
  padding: 0.72rem !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader,
.opsConsoleShell .fieldScheduleRoutePlan header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader > div,
.opsConsoleShell .fieldScheduleRoutePlan header > div:first-child {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader span,
.opsConsoleShell .fieldScheduleRoutePlan header span {
  color: #64748b !important;
  font-size: 0.66rem !important;
  font-weight: 840 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader strong,
.opsConsoleShell .fieldScheduleRoutePlan header strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader small,
.opsConsoleShell .fieldScheduleRoutePlan header small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRouteMapHeader a,
.opsConsoleShell .fieldScheduleRoutePlanActions a,
.opsConsoleShell .fieldScheduleRouteStopActions a,
.opsConsoleShell .fieldScheduleRouteStopActions button,
.opsConsoleShell .fieldScheduleRouteStopActions > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.9rem !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  padding: 0.18rem 0.58rem !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRouteMapCanvas {
  position: relative !important;
  min-height: 18rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 0.75rem !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(34, 197, 94, 0.18), transparent 17rem),
    radial-gradient(circle at 82% 28%, rgba(14, 165, 233, 0.16), transparent 15rem),
    linear-gradient(135deg, #f8fafc 0%, #eef6ff 48%, #fff7ed 100%) !important;
}

.opsConsoleShell .fieldScheduleRouteMapGrid {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.13) 1px, transparent 1px) !important;
  background-size: 3rem 3rem !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)) !important;
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2)) !important;
}

.opsConsoleShell .fieldScheduleRouteMapCanvas::after {
  content: "" !important;
  position: absolute !important;
  inset: 18% 10% 22% 10% !important;
  border: 0.28rem solid rgba(15, 42, 95, 0.1) !important;
  border-right-color: rgba(234, 88, 12, 0.18) !important;
  border-bottom-color: rgba(37, 99, 235, 0.14) !important;
  border-radius: 45% 55% 52% 48% !important;
  transform: rotate(-4deg) !important;
}

.opsConsoleShell .fieldScheduleRoutePin,
.opsConsoleShell .fieldScheduleRouteGps {
  position: absolute !important;
  z-index: 2 !important;
  transform: translate(-50%, -50%) !important;
}

.opsConsoleShell .fieldScheduleRoutePin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px 999px 999px 0 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  box-shadow: 0 0.4rem 1rem rgba(37, 99, 235, 0.32) !important;
}

.opsConsoleShell .fieldScheduleRoutePin.active {
  background: #0f172a !important;
  box-shadow: 0 0.5rem 1.2rem rgba(15, 23, 42, 0.38) !important;
}

.opsConsoleShell .fieldScheduleRoutePin.hasGps {
  background: #059669 !important;
}

.opsConsoleShell .fieldScheduleRoutePin.hasWarning {
  background: #d97706 !important;
}

.opsConsoleShell .fieldScheduleRouteGps {
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.18rem 0.42rem !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.18) !important;
}

.opsConsoleShell .fieldScheduleRouteGps.fresh {
  color: #047857 !important;
}

.opsConsoleShell .fieldScheduleRouteGps.stale {
  color: #92400e !important;
}

.opsConsoleShell .fieldScheduleRouteMapEmpty {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  z-index: 3 !important;
  display: grid !important;
  width: min(24rem, calc(100% - 2rem)) !important;
  transform: translate(-50%, -50%) !important;
  gap: 0.2rem !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0.75rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 0.9rem !important;
  text-align: center !important;
}

.opsConsoleShell .fieldScheduleRoutePlans {
  display: grid !important;
  gap: 0.72rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRoutePlan {
  display: grid !important;
  gap: 0.6rem !important;
  border-left-width: 0.28rem !important;
  padding: 0.72rem !important;
}

.opsConsoleShell .fieldScheduleRoutePlan.open,
.opsConsoleShell .fieldScheduleRoutePlan.steady {
  border-left-color: #16a34a !important;
}

.opsConsoleShell .fieldScheduleRoutePlan.busy {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .fieldScheduleRoutePlan.heavy {
  border-left-color: #dc2626 !important;
}

.opsConsoleShell .fieldScheduleRoutePlanActions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldScheduleRoutePlanActions > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.9rem !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  padding: 0.18rem 0.55rem !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
}

.opsConsoleShell .fieldScheduleRoutePlanActions > span.gpsFresh {
  border-color: rgba(5, 150, 105, 0.25) !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.opsConsoleShell .fieldScheduleRoutePlanActions > span.gpsStale {
  border-color: rgba(217, 119, 6, 0.25) !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

.opsConsoleShell .fieldScheduleRoutePlanActions > span.needsAddress,
.opsConsoleShell .fieldScheduleRouteStopActions > span.needsAddress {
  border-color: rgba(217, 119, 6, 0.25) !important;
  background: #fffbeb !important;
  color: #92400e !important;
}

.opsConsoleShell .fieldScheduleRouteStops {
  display: grid !important;
  gap: 0.45rem !important;
}

.opsConsoleShell .fieldScheduleRouteStop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.65rem !important;
  background: #f8fafc !important;
  padding: 0.45rem !important;
}

.opsConsoleShell .fieldScheduleRouteStop.active {
  border-color: rgba(37, 99, 235, 0.48) !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleRouteStop.hasWarning {
  border-color: rgba(217, 119, 6, 0.38) !important;
  background: #fff7ed !important;
}

.opsConsoleShell .fieldScheduleRouteStopMain {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleRouteStopMain b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  background: #0f2a5f !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .fieldScheduleRouteStopMain span {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRouteStopMain time,
.opsConsoleShell .fieldScheduleRouteStopMain small,
.opsConsoleShell .fieldScheduleRouteStopMain em {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRouteStopMain strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRouteStopActions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.28rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldScheduleViewSwitch {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .fieldScheduleViewSwitch button {
    flex: 1 0 8rem !important;
  }

  .opsConsoleShell .fieldScheduleRouteMap {
    padding: 0.56rem !important;
  }

  .opsConsoleShell .fieldScheduleRouteMapCanvas {
    min-height: 14rem !important;
  }

  .opsConsoleShell .fieldScheduleRouteMapHeader,
  .opsConsoleShell .fieldScheduleRoutePlan header,
  .opsConsoleShell .fieldScheduleRouteStop {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .fieldScheduleRoutePlanActions,
  .opsConsoleShell .fieldScheduleRouteStopActions {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0.08rem !important;
  }

  .opsConsoleShell .fieldScheduleRouteStopActions a,
  .opsConsoleShell .fieldScheduleRouteStopActions button,
  .opsConsoleShell .fieldScheduleRouteStopActions > span {
    flex: 0 0 auto !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(53, 112, 184, 0.3), transparent 28%),
    radial-gradient(circle at top right, rgba(84, 212, 201, 0.16), transparent 30%),
    linear-gradient(180deg, #09121f 0%, #0d1727 46%, #08111d 100%);
  color: var(--text);
}

html {
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
}

html[data-display-mode="standalone"],
html[data-display-mode="native-webview"] {
  background: #09121f;
}

html[data-display-mode="standalone"] body,
html[data-display-mode="native-webview"] body {
  -webkit-user-select: none;
  user-select: none;
}

html[data-display-mode="standalone"] input,
html[data-display-mode="standalone"] textarea,
html[data-display-mode="native-webview"] input,
html[data-display-mode="native-webview"] textarea {
  -webkit-user-select: text;
  user-select: text;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
input,
textarea,
select {
  appearance: none;
  border: 0;
  outline: none;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

input,
textarea,
select {
  color: var(--text);
}

::selection {
  background: rgba(21, 66, 122, 0.18);
}

.pageShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #f6f8fb;
}

.loginCard {
  width: min(100%, 27rem);
  padding: 1.35rem;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  border: 1px solid #dbe1ea;
}

.loginCard h1 {
  margin: 1.05rem 0 0;
  font-size: 1.55rem;
  line-height: 1.16;
  letter-spacing: 0;
}

.loginBrand {
  display: inline-grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.loginBrand img {
  width: 2.1rem;
  height: 2.1rem;
  display: block;
}

.loginBrand strong,
.loginBrand small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loginBrand strong {
  color: #111827;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.1;
}

.loginBrand small {
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 650;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.field {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.field span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border-radius: 16px;
  background: rgba(244, 247, 252, 0.96);
  border: 1px solid rgba(13, 35, 61, 0.09);
  padding: 0.95rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.searchBar input:focus {
  border-color: rgba(21, 66, 122, 0.35);
  box-shadow: 0 0 0 4px rgba(21, 66, 122, 0.12);
}

.loginStageRow {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.22rem;
  margin-top: 1rem;
  border-radius: 8px;
  background: #eef2f7;
  border: 1px solid #dbe1ea;
}

.loginStageChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.8rem;
  border-radius: 6px;
  padding: 0.34rem 0.65rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.loginStageChip.active,
.loginStageChip.complete {
  background: white;
  color: var(--accent);
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.3rem;
}

button,
.primaryIconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 14px;
  padding: 0.86rem 1.15rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(180deg, #1f5ca3 0%, #123a69 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 18px rgba(21, 66, 122, 0.2);
}

.secondaryButton {
  background: rgba(242, 246, 252, 0.96);
  color: var(--text);
  border: 1px solid rgba(11, 31, 53, 0.1);
  box-shadow: none;
}

button:not(:disabled),
.mailboxButton,
.folderRow,
.tagRow,
.scopeRailButton,
.messageButton,
.threadJumpButton,
.toolbarIconButton,
.replyTab,
.mobileNavButton,
.segmentButton,
.filterChip,
.folderChip {
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

button:not(:disabled):hover,
.mailboxButton:hover,
.folderRow:hover,
.tagRow:hover,
.scopeRailButton:hover,
.messageButton:hover,
.threadJumpButton:hover,
.toolbarIconButton:hover,
.replyTab:hover,
.segmentButton:hover,
.filterChip:hover,
.folderChip:hover {
  transform: translateY(-1px);
}

.compactButton {
  padding: 0.74rem 0.95rem;
  border-radius: 12px;
  font-size: 0.92rem;
}

.iconActionButton {
  min-width: 3.2rem;
  padding-inline: 0.8rem;
}

.errorText,
.errorBanner {
  color: var(--danger);
}

.successText {
  color: var(--accent);
}

.inboxAppShell {
  min-height: 100vh;
  padding: max(0.45rem, env(safe-area-inset-top)) 0.45rem calc(0.45rem + env(safe-area-inset-bottom));
}

.desktopWindowBar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.55rem;
  padding: 0.4rem 1.05rem;
  border-radius: 10px 10px 0 0;
  background: var(--window);
  color: var(--text-inverse);
  border: 1px solid var(--window-border);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
}

.windowLeftChrome {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.appHeaderBrand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 13rem;
  color: var(--mail-ink, var(--text));
}

.appHeaderGlyph,
.composeIconBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #1c91ff 0%, #006ee8 100%);
  box-shadow: 0 9px 22px rgba(0, 122, 255, 0.18);
}

.appHeaderBrand span:last-child {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.appHeaderBrand strong {
  color: var(--mail-ink, var(--text));
  font-size: 0.95rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.appHeaderBrand small {
  overflow: hidden;
  color: var(--mail-muted, var(--muted));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.windowTitle {
  justify-self: center;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.activeSurfaceSummary {
  display: grid;
  min-width: 12rem;
  max-width: min(28vw, 23rem);
  gap: 0.03rem;
  line-height: 1.08;
}

.activeSurfaceSummary strong,
.activeSurfaceSummary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activeSurfaceSummary strong {
  font-size: 0.92rem;
  letter-spacing: 0;
}

.activeSurfaceSummary small {
  color: var(--mail-muted, var(--muted));
  font-size: 0.72rem;
  font-weight: 560;
}

.surfaceKicker {
  color: var(--mail-muted, var(--muted));
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.windowNavButtons {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.windowNavButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  min-height: 2.2rem;
  padding: 0 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted-inverse);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.windowNavButton.iconOnly {
  min-width: 2.5rem;
  padding: 0;
}

.windowNavButton.active {
  background: linear-gradient(180deg, #18539a 0%, #113a68 100%);
  color: white;
}

.mailIcon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.windowMeta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.syncPill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.82rem;
  border-radius: 999px;
  background: rgba(12, 25, 42, 0.78);
  border: 1px solid rgba(151, 205, 255, 0.14);
  color: var(--text-inverse);
  font-size: 0.9rem;
}

.syncPill.offline {
  background: rgba(59, 76, 100, 0.75);
}

.syncLight {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: var(--accent-mint);
  box-shadow: 0 0 0 5px rgba(79, 209, 197, 0.12);
}

.avatarButton {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(219, 233, 255, 0.16);
  color: var(--text-inverse);
  box-shadow: none;
}

.systemBannerStack {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.offlineBanner,
.noticeBanner,
.statusBanner,
.errorBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(249, 252, 255, 0.86);
  border: 1px solid rgba(233, 241, 250, 0.5);
  box-shadow: var(--shadow-md);
}

.offlineBanner strong,
.noticeBanner,
.errorBanner {
  font-weight: 600;
}

.offlineBanner span {
  color: var(--muted);
}

.noticeBanner {
  color: var(--accent);
}

.serviceGeneratedPublicLink span {
  display: grid;
  gap: 0.25rem;
}

.serviceGeneratedPublicLink small {
  color: var(--muted);
  font-weight: 700;
}

.serviceGeneratedPublicLinkActions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.serviceGeneratedPublicLink a,
.serviceGeneratedPublicLinkActions button {
  min-height: 2rem;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.82);
  color: var(--accent);
  font-weight: 900;
  padding: 0.38rem 0.72rem;
  text-decoration: none;
  white-space: nowrap;
}

.errorBanner {
  background: var(--danger-soft);
  border-color: rgba(197, 72, 72, 0.12);
}

.inboxShell {
  min-height: calc(100vh - 9rem);
  display: grid;
  grid-template-columns: 19rem minmax(34rem, 40rem) minmax(0, 1fr);
  background: var(--panel);
  border: 1px solid rgba(212, 225, 241, 0.48);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.paneSection {
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1rem 0.9rem;
  background:
    linear-gradient(180deg, rgba(4, 12, 22, 0.98) 0%, rgba(6, 16, 29, 0.98) 100%),
    radial-gradient(circle at top, rgba(48, 102, 167, 0.35), transparent 30%);
  color: var(--text-inverse);
}

.messageColumn,
.detailColumn {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
}

.messageColumn {
  border-left: 1px solid rgba(213, 225, 238, 0.7);
  border-right: 1px solid rgba(213, 225, 238, 0.7);
}

.detailColumn {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.sidebarBrandBlock,
.columnHeader,
.searchBar,
.messageSubtoolbar,
.contextRibbon,
.messageList,
.messageDetail,
.messageDetailPlaceholder,
.composeCard {
  min-width: 0;
}

.brandLockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.brandGlyph {
  position: relative;
  width: 40px;
  height: 40px;
}

.brandGlyph span {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #3fc3ff 0%, #1f57a8 100%);
  opacity: 0.95;
}

.brandGlyph span:nth-child(1) {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.brandGlyph span:nth-child(2) {
  inset: 7px;
  background: #071b31;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.brandGlyph span:nth-child(3) {
  inset: 11px;
  background: linear-gradient(180deg, #52dbc9 0%, #35a6cc 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.brandLockup strong {
  display: block;
  font-size: 1.2rem;
}

.brandLockup p {
  margin: 0.2rem 0 0;
  color: var(--muted-inverse);
}

.sidebarGhostButton {
  align-self: flex-start;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-inverse);
  border: 1px solid rgba(212, 230, 255, 0.12);
  box-shadow: none;
}

.profileCard {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-inverse);
  border: 1px solid rgba(212, 230, 255, 0.12);
  box-shadow: none;
}

.profileAvatar,
.toolbarMailboxAvatar,
.messageHeroAvatar,
.messageAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.profileAvatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #53d9cc 0%, #2f6fca 100%);
  color: white;
}

.profileCopy strong,
.profileCopy small {
  display: block;
  text-align: left;
}

.profileCopy small {
  color: var(--muted-inverse);
  margin-top: 0.22rem;
}

.sidebarSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.sidebarCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-inverse);
  font-size: 0.82rem;
}

.mailboxList,
.folderList,
.messageList {
  display: grid;
  gap: 0.6rem;
  min-height: 0;
  overflow: auto;
}

.tagList {
  display: grid;
  gap: 0.45rem;
}

.tagRow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  color: var(--text-inverse);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  text-align: left;
}

.tagRow small {
  margin-left: auto;
  color: var(--muted-inverse);
}

.tagDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tagDot.tone1 { background: #57dd86; }
.tagDot.tone2 { background: #4bc4f3; }
.tagDot.tone3 { background: #89a0ff; }
.tagDot.tone4 { background: #3188ff; }

.mailboxButton,
.folderRow {
  width: 100%;
  text-align: left;
  color: var(--text-inverse);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  box-shadow: none;
}

.mailboxButton {
  padding: 0.9rem;
  border-radius: 8px;
}

.mailboxButton span,
.mailboxButton small {
  display: block;
}

.mailboxButtonTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.2rem;
}

.mailboxTypePill,
.threadCountTag,
.folderContextTag,
.commentCountTag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.58rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}

.mailboxTypePill {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-inverse);
}

.mailboxTypePill.shared {
  background: rgba(79, 209, 197, 0.12);
  color: #8ef3ea;
}

.mailboxButton.active,
.folderRow.active {
  background: linear-gradient(180deg, rgba(31, 92, 163, 0.4) 0%, rgba(15, 47, 89, 0.42) 100%);
  border-color: rgba(131, 189, 255, 0.22);
}

.mailboxButton:hover,
.folderRow:hover,
.tagRow:hover {
  background: rgba(255, 255, 255, 0.09);
}

.mailboxButton small {
  margin-top: 0.2rem;
  color: var(--muted-inverse);
}

.folderList {
  margin-top: -0.1rem;
}

.folderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
}

.folderRowLabel {
  font-weight: 500;
}

.folderRowMeta {
  color: var(--muted-inverse);
  font-size: 0.82rem;
}

.sidebarStorageCard {
  margin-top: auto;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 230, 255, 0.12);
}

.sidebarStorageCard strong {
  color: var(--text-inverse);
}

.sidebarStorageCard p {
  margin: 0.3rem 0 0;
  color: var(--muted-inverse);
}

.storageMeter {
  height: 6px;
  margin-top: 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.storageMeter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38c1d9 0%, #74d7c7 100%);
}

.storageFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.8rem;
  color: var(--muted-inverse);
  font-size: 0.82rem;
}

.columnHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.35rem 1rem;
}

.columnHeader h2,
.messageDetail h3 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: -0.04em;
}

.columnSubhead {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.messageToolbarStats {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.messageCountPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.82rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.toolbarMailboxAvatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e3ecf9 0%, #bfd0ec 100%);
  color: var(--accent-strong);
}

.searchBar,
.messageSubtoolbar,
.contextRibbon {
  padding-inline: 1.35rem;
}

.searchBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.7rem;
}

.searchInputShell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(12, 33, 56, 0.08);
  background: #f7f9fc;
  min-height: 3.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.searchLeading {
  display: inline-flex;
  color: rgba(96, 112, 137, 0.9);
}

.searchBar input {
  width: 100%;
  background: transparent;
  padding: 0;
}

.searchTrailing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  border: 1px solid rgba(12, 33, 56, 0.08);
  background: white;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.segmentedControl {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.26rem;
  border-radius: 14px;
  background: #eef3f8;
}

.segmentButton {
  padding: 0.68rem 0.95rem;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.segmentButton.active {
  background: white;
  color: var(--accent);
  box-shadow: var(--shadow-md);
}

.messageSubtoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}

.filterChips {
  display: inline-flex;
  gap: 0.55rem;
}

.filterChip,
.folderChip {
  padding: 0.62rem 0.85rem;
  border-radius: 12px;
  background: #edf2f8;
  color: var(--muted);
  box-shadow: none;
}

.filterChip.active,
.folderChip.active,
.secondaryButton.activeToggle {
  background: var(--accent-strong);
  color: white;
}

.filterChip.mutedOnly {
  background: white;
  color: var(--muted);
  border: 1px solid rgba(12, 33, 56, 0.08);
}

.filterChip[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}

.folderRail {
  display: none;
  gap: 0.55rem;
  overflow: auto;
  padding: 1rem 1.35rem 0;
}

.folderBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.76rem;
}

.contextRibbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0;
  padding-bottom: 1rem;
}

.contextRibbon span {
  font-weight: 600;
}

.contextRibbon small {
  color: var(--muted);
}

.messageList {
  flex: 1 1;
  padding: 0 1rem 1rem 0;
}

.messageWorkspace {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  flex: 1 1;
  min-height: 0;
}

.messageScopeRail {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0 1rem 1rem 1.35rem;
  border-right: 1px solid rgba(213, 225, 238, 0.72);
}

.scopeRailSection {
  display: grid;
  gap: 0.35rem;
}

.scopeRailLabel {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.scopeRailButton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.68rem 0.8rem;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-align: left;
}

.scopeRailButton span {
  font-weight: 600;
  position: relative;
  padding-left: 1.2rem;
}

.scopeRailButton span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: rgba(96, 112, 137, 0.45);
  transform: translateY(-50%);
}

.scopeRailButton small {
  color: inherit;
}

.scopeRailButton.active {
  background: linear-gradient(180deg, #edf5ff 0%, #e5effb 100%);
  color: var(--accent-strong);
}

.scopeRailButton.active span::before {
  background: #2f86ed;
}

.messageResultsPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding-left: 1rem;
}

.messageButton {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 0.7rem;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(213, 225, 238, 0.8);
  box-shadow: none;
}

.messageButton.active {
  background: #e8f3ff;
  border-color: rgba(21, 66, 122, 0.12);
  border-radius: 6px;
}

.messageSection {
  display: grid;
  gap: 0.55rem;
}

.messageSectionLabel {
  padding: 0 0 0.15rem 0.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4f6077;
}

.messageAvatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d8f6f3 0%, #d8e6fb 100%);
  color: var(--accent-strong);
}

.messageBody {
  min-width: 0;
}

.messageTopRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.messageTopRow strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 1rem;
}

.messageTopRow span,
.messageMeta,
.messagePreview {
  color: var(--muted);
}

.messageMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.28rem;
}

.messageMeta {
  font-size: 0.9rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.threadMetaRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.messageSubjectRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.18rem;
  color: #13233a;
  font-weight: 600;
}

.messageSubjectRow span:first-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.messageRowAction {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.messageFlagMarker {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: #855b00;
  font-size: 0.7rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.messageFlagMarker .mailIcon {
  width: 0.82rem;
  height: 0.82rem;
}

.messageButton.unread strong {
  color: #081b35;
}

.unreadDot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: #2f7de5;
}

.folderContextTag {
  background: rgba(21, 66, 122, 0.08);
  color: var(--accent);
}

.threadCountTag {
  background: rgba(96, 112, 137, 0.12);
  color: var(--muted);
}

.commentCountTag {
  background: rgba(10, 132, 255, 0.11);
  color: #0057c8;
}

.detailToolbar {
  border-bottom: 1px solid rgba(216, 227, 241, 0.75);
}

.detailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.exactToolbar {
  flex-wrap: nowrap;
  gap: 0.45rem;
}

.toolbarIconButton {
  min-height: 40px;
  padding: 0.58rem 0.7rem;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(12, 33, 56, 0.08);
  box-shadow: none;
}

.toolbarIconOnly {
  min-width: 2.7rem;
  padding-inline: 0.72rem;
  font-weight: 700;
}

.toolbarIconButton:disabled {
  cursor: not-allowed;
}

.toolbarSelect {
  width: 44px;
  min-width: 44px;
  color: transparent;
  appearance: none;
  background-image: none;
}

.folderSelect {
  padding: 0.74rem 0.92rem;
  border-radius: 12px;
  border: 1px solid rgba(12, 33, 56, 0.1);
  background: #f2f6fb;
}

.messageDetail,
.messageDetailPlaceholder {
  flex: 1 1;
  overflow: auto;
  padding: 1.25rem 1.35rem;
}

.messageHero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.messageHeroAvatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: linear-gradient(180deg, #dff6f3 0%, #dbe8fb 100%);
  color: var(--accent-strong);
}

.messageHeroCopy h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.18;
}

.messageMetaGrid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.messageMetaGrid p {
  margin: 0;
  display: grid;
  gap: 0.2rem;
}

.messageInlineMeta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
  color: var(--muted);
}

.messageInlineMeta strong {
  color: var(--text);
  font-size: 0.95rem;
}

.messageInlineMeta small {
  margin-left: auto;
}

.messageLeadBody {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.messageLeadBody p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.58;
}

.messageMetaGrid strong {
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.attachmentList,
.threadStrip {
  display: grid;
  gap: 0.8rem;
  margin: 1.1rem 0;
}

.attachmentItems,
.threadStripItems {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.attachmentLink,
.threadJumpButton {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  background: #f5f8fc;
  border: 1px solid rgba(10, 28, 52, 0.08);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.threadJumpButton {
  display: grid;
  gap: 0.2rem;
  text-align: left;
}

.conversationBubble {
  gap: 0.3rem;
  min-width: min(100%, 15rem);
  background: white;
}

.threadJumpButton small {
  color: var(--muted);
}

.threadJumpButton em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.8rem;
}

.threadJumpButton.active {
  background: linear-gradient(180deg, #edf5ff 0%, #e5effb 100%);
  border-color: rgba(21, 66, 122, 0.12);
}

.messageBodyMode {
  display: inline-flex;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.messageHtmlFrame,
.messageDetail pre {
  width: 100%;
  max-height: min(46rem, 58vh);
  min-height: 20rem;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(10, 28, 52, 0.08);
  background: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.replyDock {
  margin-top: 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(10, 28, 52, 0.08);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.replyTabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.7rem 0.9rem 0;
  border-bottom: 1px solid rgba(10, 28, 52, 0.08);
}

.replyPreviewLine {
  padding: 0.95rem 1rem 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.replyTab {
  padding: 0.75rem 0.9rem;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  border-bottom: 2px solid transparent;
}

.replyTab.active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
}

.replyTab:not(.active) {
  color: var(--muted);
}

.replyDockBody {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1rem;
}

.replyDockRow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
}

.replyDockRow span:last-child {
  color: var(--text);
}

.replyDockTools {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
}

.replyDockTools span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.replySendButton {
  justify-self: end;
  min-width: 102px;
}

.messageListFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid rgba(213, 225, 238, 0.72);
  color: var(--muted);
  font-size: 0.88rem;
}

.inlineGhostButton {
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.messageDetail pre {
  margin: 0;
  padding: 1.1rem;
  white-space: pre-wrap;
  line-height: 1.65;
  min-height: 18rem;
}

.messageDetailPlaceholder {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.8rem;
}

.placeholderOrb {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(180deg, #eff5fd 0%, #dde7f6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.placeholderOrb span {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: linear-gradient(180deg, #74d7c7 0%, #2e67c2 100%);
}

.composeOverlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 12, 21, 0.4);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  z-index: 40;
}

.composeCard {
  width: min(100%, 46rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.3rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(240, 246, 252, 0.9);
  box-shadow: var(--shadow-xl);
}

.composeError {
  margin: 0.3rem 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 600;
}

.composeTextarea {
  min-height: 15rem;
  resize: vertical;
}

.mobileBottomNav,
.mobileComposeFab,
.mobileOnly {
  display: none;
}

.desktopOnly {
  display: inline-flex;
}

.backButton {
  padding: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(130, 151, 181, 0.3);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1120px) {
  .inboxShell {
    grid-template-columns: 16.5rem minmax(22rem, 27rem) minmax(0, 1fr);
  }

  .detailActions {
    justify-content: flex-start;
  }

  .exactToolbar {
    flex-wrap: wrap;
  }
}

@media (min-width: 921px) {
  .messageColumn .messageToolbar {
    display: none;
  }

  .messageColumn .searchBar {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1rem;
    padding-bottom: 0.8rem;
  }

  .messageColumn .segmentedControl,
  .messageColumn .iconActionButton {
    display: none;
  }

  .messageSubtoolbar {
    padding-top: 0.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(213, 225, 238, 0.72);
  }

  .messageWorkspace {
    grid-template-columns: 9.4rem minmax(0, 1fr);
  }

  .detailToolbar {
    min-height: 4.1rem;
    padding: 0.8rem 1.35rem;
    align-items: center;
  }

  .detailToolbar > div:first-child {
    display: none;
  }

  .detailToolbar .detailActions {
    width: 100%;
    justify-content: space-between;
  }

  .detailColumn .messageDetail {
    padding-top: 1.45rem;
  }
}

@media (max-width: 920px) {
  .inboxAppShell {
    padding: 0;
  }

  .desktopWindowBar {
    grid-template-columns: 1fr auto;
    border-radius: 0;
    padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.9rem;
  }

  .windowTitle {
    display: none;
  }

  .syncPill {
    display: none;
  }

  .systemBannerStack {
    margin: 0.75rem 0.75rem 0;
  }

  .offlineBanner,
  .noticeBanner,
  .errorBanner {
    align-items: flex-start;
    flex-direction: column;
  }

  .inboxShell {
    min-height: calc(100vh - 4.75rem - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    display: none;
  }

  .paneSection.mobileActive {
    display: flex;
    min-height: calc(100vh - 8.9rem - env(safe-area-inset-bottom));
  }

  .columnHeader,
  .searchBar,
  .messageSubtoolbar,
  .contextRibbon,
  .messageList,
  .messageDetail,
  .messageDetailPlaceholder {
    padding-inline: 1rem;
  }

  .searchBar {
    grid-template-columns: 1fr;
  }

  .segmentButton,
  .compactButton,
  .folderSelect,
  button {
    min-height: 44px;
  }

  .mobileOnly {
    display: inline-flex;
  }

  .desktopOnly {
    display: none;
  }

  .folderRail.mobileOnly {
    display: flex;
  }

  .columnHeader h2 {
    font-size: 1.35rem;
  }

  .messageToolbarStats {
    gap: 0.55rem;
  }

  .messageWorkspace {
    grid-template-columns: 1fr;
  }

  .messageResultsPanel {
    padding-left: 0;
  }

  .toolbarMailboxAvatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .messageButton {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .messageTopRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .messageHero {
    grid-template-columns: 1fr;
  }

  .replyDockBody {
    grid-template-columns: 1fr;
  }

  .replySendButton {
    justify-self: stretch;
  }

  .mobileBottomNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    padding: 0.8rem 0.95rem calc(0.8rem + env(safe-area-inset-bottom));
    background: rgba(6, 14, 26, 0.92);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-top: 1px solid rgba(184, 204, 231, 0.14);
    z-index: 20;
  }

  .mobileNavButton {
    min-height: 52px;
    padding: 0.78rem 0.65rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted-inverse);
    box-shadow: none;
  }

  .mobileNavButton.active,
  .mobileNavButton.primary {
    background: linear-gradient(180deg, #1f5ca3 0%, #123a69 100%);
    color: white;
  }

  .composeCard {
    width: 100%;
    max-height: calc(100vh - 1rem - env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    align-self: end;
  }
}

/* Team App operating shell refresh. Keep this late in the file so it owns the app chrome. */
:root {
  color-scheme: light;
  --apple-bg: #e9edf3;
  --apple-bg-2: #f7f8fb;
  --apple-sidebar: rgba(242, 245, 249, 0.82);
  --apple-sidebar-strong: rgba(255, 255, 255, 0.74);
  --apple-surface: rgba(255, 255, 255, 0.92);
  --apple-surface-solid: #ffffff;
  --apple-line: rgba(60, 60, 67, 0.13);
  --apple-line-strong: rgba(60, 60, 67, 0.19);
  --apple-text: #111827;
  --apple-secondary: rgba(60, 60, 67, 0.68);
  --apple-tertiary: rgba(60, 60, 67, 0.43);
  --apple-blue: #007aff;
  --apple-blue-deep: #0057d9;
  --apple-blue-soft: rgba(0, 122, 255, 0.12);
  --apple-green: #30d158;
  --apple-shadow: 0 24px 70px rgba(23, 31, 45, 0.16);
  --apple-shadow-soft: 0 10px 30px rgba(23, 31, 45, 0.08);
}

html,
body {
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 255, 255, 0.92), transparent 26rem),
    radial-gradient(circle at 90% 0%, rgba(128, 188, 255, 0.2), transparent 28rem),
    linear-gradient(180deg, #f6f8fb 0%, var(--apple-bg) 100%);
  color: var(--apple-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button:not(:disabled):hover,
.mailboxButton:hover,
.folderRow:hover,
.tagRow:hover,
.scopeRailButton:hover,
.messageButton:hover,
.threadJumpButton:hover,
.toolbarIconButton:hover,
.replyTab:hover,
.segmentButton:hover,
.filterChip:hover,
.folderChip:hover {
  transform: none;
}

.inboxAppShell {
  min-height: 100vh;
  padding: 0.7rem;
}

.desktopWindowBar {
  min-height: 3.25rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px 20px 0 0;
  background: rgba(246, 248, 251, 0.78);
  color: var(--apple-text);
  border: 1px solid var(--apple-line);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
          backdrop-filter: blur(28px) saturate(1.35);
}

.windowTitle {
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: rgba(17, 24, 39, 0.86);
}

.windowNavButton,
.avatarButton,
.syncPill,
.primaryIconButton {
  min-height: 2.25rem;
  border-radius: 11px;
  color: var(--apple-secondary);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--apple-line);
  box-shadow: none;
}

.windowNavButton.active,
.primaryIconButton {
  color: #fff;
  background: linear-gradient(180deg, #1688ff 0%, #0064e1 100%);
  border-color: rgba(0, 88, 206, 0.35);
  box-shadow: 0 8px 22px rgba(0, 122, 255, 0.22);
}

.syncPill {
  color: var(--apple-secondary);
  font-size: 0.82rem;
  font-weight: 560;
  padding: 0.42rem 0.68rem;
}

.syncLight {
  width: 0.48rem;
  height: 0.48rem;
  background: var(--apple-green);
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.13);
}

.avatarButton {
  width: 2.25rem;
  color: var(--apple-text);
}

.systemBannerStack {
  margin: 0;
}

.offlineBanner,
.noticeBanner,
.statusBanner,
.errorBanner {
  border-radius: 0;
  box-shadow: none;
  border-inline: 1px solid var(--apple-line);
  background: rgba(255, 255, 255, 0.68);
}

.inboxShell.nativeMailShell {
  min-height: calc(100vh - 4.6rem);
  grid-template-columns: 15.7rem minmax(31rem, 35vw) minmax(0, 1fr);
  border: 1px solid var(--apple-line);
  border-radius: 0 0 20px 20px;
  background: var(--apple-surface);
  box-shadow: var(--apple-shadow);
}

.sidebar {
  gap: 0.72rem;
  padding: 0.95rem 0.72rem 0.9rem;
  background:
    linear-gradient(180deg, rgba(246, 248, 251, 0.88) 0%, rgba(232, 237, 244, 0.82) 100%),
    radial-gradient(circle at 20% 0%, rgba(0, 122, 255, 0.12), transparent 18rem);
  color: var(--apple-text);
  border-right: 1px solid var(--apple-line);
  -webkit-backdrop-filter: blur(32px) saturate(1.25);
          backdrop-filter: blur(32px) saturate(1.25);
}

.brandGlyph {
  width: 2.15rem;
  height: 2.15rem;
  filter: saturate(1.08);
}

.brandLockup {
  gap: 0.7rem;
}

.brandLockup strong {
  font-size: 1.02rem;
  letter-spacing: -0.025em;
}

.brandLockup p,
.profileCopy small,
.mailboxButton small,
.folderRowMeta,
.tagRow small,
.sidebarStorageCard p,
.storageFooter {
  color: var(--apple-secondary);
}

.sidebarGhostButton {
  display: none;
}

.profileCard,
.mailboxButton,
.folderRow,
.tagRow,
.sidebarStorageCard {
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--apple-text);
  box-shadow: none;
}

.profileCard {
  padding: 0.68rem;
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(255, 255, 255, 0.56);
}

.profileAvatar,
.toolbarMailboxAvatar,
.messageHeroAvatar,
.messageAvatar {
  background: linear-gradient(180deg, #62d6ff 0%, #0a84ff 100%);
  color: #fff;
}

.profileAvatar {
  width: 2.25rem;
  height: 2.25rem;
}

.profileCopy strong {
  font-size: 0.86rem;
}

.profileCopy small {
  font-size: 0.76rem;
}

.sidebarSectionHeader {
  margin: 0.18rem 0 -0.18rem;
  padding: 0 0.48rem;
}

.eyebrow {
  color: var(--apple-tertiary);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.sidebarCount {
  min-width: 1.45rem;
  height: 1.45rem;
  background: rgba(60, 60, 67, 0.08);
  color: var(--apple-secondary);
  font-size: 0.74rem;
}

.mailboxList,
.folderList,
.tagList {
  gap: 0.18rem;
}

.mailboxButton {
  padding: 0.62rem 0.68rem;
}

.folderRow,
.tagRow {
  padding: 0.55rem 0.66rem;
}

.mailboxButtonTop strong,
.folderRowLabel,
.tagRow span:not(.tagDot) {
  font-size: 0.86rem;
  font-weight: 590;
}

.mailboxButton span:not(.mailboxTypePill) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  color: var(--apple-secondary);
}

.mailboxTypePill,
.threadCountTag,
.folderContextTag {
  border-radius: 999px;
  font-size: 0.66rem;
  padding: 0.18rem 0.42rem;
}

.mailboxTypePill {
  background: rgba(60, 60, 67, 0.08);
  color: var(--apple-secondary);
}

.mailboxTypePill.shared {
  background: rgba(52, 199, 89, 0.15);
  color: #1f8b45;
}

.mailboxButton.active,
.folderRow.active,
.tagRow.active,
.tagRow:hover,
.mailboxButton:hover,
.folderRow:hover {
  background: rgba(0, 122, 255, 0.13);
  border-color: rgba(0, 122, 255, 0.08);
  color: var(--apple-text);
}

.sidebarStorageCard {
  padding: 0.78rem;
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(255, 255, 255, 0.62);
}

.sidebarStorageCard strong {
  color: var(--apple-text);
  font-size: 0.82rem;
}

.storageMeter {
  height: 0.28rem;
  background: rgba(60, 60, 67, 0.12);
}

.storageMeter span {
  background: linear-gradient(90deg, #0a84ff 0%, #5ac8fa 100%);
}

.messageColumn,
.detailColumn {
  background: var(--apple-surface-solid);
}

.messageColumn {
  border-left: 0;
  border-right: 1px solid var(--apple-line);
}

.detailColumn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 252, 0.98) 100%);
}

.searchBar,
.messageSubtoolbar,
.contextRibbon,
.messageList,
.messageListFooter,
.detailToolbar,
.messageDetail,
.messageDetailPlaceholder {
  padding-inline: 1rem;
}

.searchBar {
  padding-top: 0.95rem;
  gap: 0.55rem;
}

.searchInputShell {
  min-height: 2.55rem;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.1);
  border: 1px solid transparent;
  box-shadow: none;
}

.searchInputShell:focus-within {
  background: #fff;
  border-color: rgba(0, 122, 255, 0.32);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.searchBar input {
  font-size: 0.9rem;
}

.searchTrailing {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.74);
  border-color: var(--apple-line);
}

.messageSubtoolbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--apple-line);
}

.filterChips {
  gap: 0.28rem;
  padding: 0.16rem;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.1);
}

.filterChip,
.folderChip,
.secondaryButton.compactButton {
  min-height: 2rem;
  padding: 0.42rem 0.74rem;
  border-radius: 10px;
  background: transparent;
  color: var(--apple-secondary);
  border: 0;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 590;
}

.filterChip.active,
.folderChip.active,
.secondaryButton.activeToggle {
  color: #fff;
  background: var(--apple-blue);
  box-shadow: 0 6px 16px rgba(0, 122, 255, 0.18);
}

.filterChip.mutedOnly {
  border: 0;
  background: transparent;
}

.messageWorkspace {
  grid-template-columns: 8.15rem minmax(0, 1fr);
}

.messageScopeRail {
  gap: 0.7rem;
  padding: 0.85rem 0.7rem 0.85rem 0.9rem;
  border-right: 1px solid var(--apple-line);
  background: rgba(249, 250, 252, 0.75);
}

.scopeRailSection {
  gap: 0.12rem;
}

.scopeRailLabel {
  color: var(--apple-tertiary);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding-left: 0.42rem;
}

.scopeRailButton {
  min-height: 2rem;
  padding: 0.42rem 0.52rem;
  border-radius: 9px;
  color: var(--apple-secondary);
}

.scopeRailButton span {
  padding-left: 0.9rem;
  font-size: 0.78rem;
  font-weight: 560;
}

.scopeRailButton span::before {
  width: 0.38rem;
  height: 0.38rem;
  background: rgba(60, 60, 67, 0.26);
}

.scopeRailButton.active {
  background: var(--apple-blue-soft);
  color: var(--apple-blue-deep);
}

.scopeRailButton.active span::before {
  background: var(--apple-blue);
}

.messageResultsPanel {
  padding-left: 0;
}

.contextRibbon {
  min-height: 2.4rem;
  padding-top: 0.56rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--apple-line);
}

.contextRibbon span {
  font-size: 0.9rem;
  letter-spacing: -0.015em;
}

.contextRibbon small {
  font-size: 0.76rem;
  color: var(--apple-tertiary);
}

.messageList {
  gap: 0;
  padding: 0;
}

.messageSection {
  gap: 0;
}

.messageSectionLabel {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.52rem 0.9rem 0.36rem;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  color: var(--apple-tertiary);
  font-size: 0.74rem;
  font-weight: 680;
}

.messageButton {
  gap: 0.72rem;
  min-height: 5.75rem;
  padding: 0.74rem 0.9rem;
  border-bottom: 1px solid var(--apple-line);
  background: #fff;
  color: var(--apple-text);
}

.messageButton:hover {
  background: #f7faff;
}

.messageButton.active {
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.14) 0%, rgba(0, 122, 255, 0.09) 100%);
  border-radius: 0;
}

.messageAvatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.messageTopRow strong {
  font-size: 0.9rem;
  letter-spacing: -0.012em;
}

.messageTopRow span {
  font-size: 0.76rem;
}

.messageSubjectRow {
  margin-top: 0.12rem;
  font-size: 0.87rem;
  font-weight: 650;
}

.messageMeta {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--apple-secondary);
  -webkit-line-clamp: 2;
}

.messageRowAction {
  color: var(--apple-tertiary);
  font-size: 0.72rem;
}

.unreadDot {
  width: 0.46rem;
  height: 0.46rem;
  background: var(--apple-blue);
}

.threadMetaRow {
  display: none;
}

.messageListFooter {
  padding-block: 0.62rem;
  border-top: 1px solid var(--apple-line);
  background: rgba(249, 250, 252, 0.8);
  font-size: 0.78rem;
}

.detailToolbar {
  min-height: 3.7rem;
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--apple-line);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.detailToolbar .detailActions {
  gap: 0.38rem;
  justify-content: flex-start;
}

.toolbarIconButton,
.folderSelect {
  min-height: 2.15rem;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.08);
  border: 1px solid transparent;
  color: var(--apple-secondary);
  box-shadow: none;
}

.toolbarIconButton:hover {
  color: var(--apple-text);
  background: rgba(118, 118, 128, 0.14);
}

.toolbarIconOnly {
  min-width: 2.25rem;
  padding: 0.44rem;
}

.messageDetail,
.messageDetailPlaceholder {
  padding: 1rem 1.05rem 1.2rem;
}

.messageHero {
  gap: 0.82rem;
  align-items: start;
  margin-bottom: 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--apple-line);
}

.messageHeroAvatar {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  font-size: 0.88rem;
}

.messageHeroCopy h3,
.messageDetail h3 {
  font-size: clamp(1.28rem, 2.1vw, 1.85rem);
  letter-spacing: -0.045em;
  line-height: 1.12;
}

.messageInlineMeta {
  gap: 0.4rem;
  color: var(--apple-secondary);
  font-size: 0.82rem;
}

.messageInlineMeta strong {
  font-size: 0.86rem;
  font-weight: 650;
}

.messageInlineMeta small {
  color: var(--apple-tertiary);
}

.messageLeadBody {
  gap: 0.58rem;
  max-width: 58rem;
  margin-bottom: 0.9rem;
}

.messageLeadBody p {
  font-size: 0.96rem;
  line-height: 1.5;
}

.attachmentList,
.threadStrip {
  gap: 0.55rem;
  margin: 0.85rem 0;
}

.attachmentLink,
.threadJumpButton {
  padding: 0.62rem 0.72rem;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.08);
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 0.82rem;
}

.messageBodyMode {
  gap: 0.32rem;
  padding: 0.16rem;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.1);
}

.messageHtmlFrame,
.messageDetail pre,
.plainMessageBody {
  max-height: min(39rem, 52vh);
  min-height: 14rem;
  border-radius: 14px;
  border: 1px solid var(--apple-line);
  background: #fbfcfe;
  box-shadow: none;
}

.plainMessageBody {
  overflow: auto;
  padding: 1rem 1.05rem;
  color: var(--apple-text);
}

.plainMessageBody p {
  max-width: 68ch;
  margin: 0 0 0.86rem;
  font-size: 0.94rem;
  line-height: 1.55;
  letter-spacing: -0.006em;
}

.plainMessageBody p:last-child {
  margin-bottom: 0;
}

.messageDetail pre {
  padding: 0.9rem;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.81rem;
  line-height: 1.52;
}

.replyDock {
  margin-top: 0.95rem;
  border-radius: 18px;
  border: 1px solid var(--apple-line);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--apple-shadow-soft);
}

.replyTabs {
  padding: 0.48rem 0.64rem 0;
}

.replyTab {
  padding: 0.6rem 0.78rem;
  color: var(--apple-secondary);
}

.replyTab.active {
  color: var(--apple-blue-deep);
  border-bottom-color: var(--apple-blue);
}

.replyPreviewLine {
  padding: 0.7rem 0.86rem 0;
  font-size: 0.84rem;
  color: var(--apple-secondary);
}

.replyDockBody {
  padding: 0.78rem 0.86rem;
}

.replySendButton {
  min-height: 2.25rem;
  border-radius: 11px;
  background: var(--apple-blue);
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.18);
}

.placeholderOrb {
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 20px;
  background: rgba(118, 118, 128, 0.08);
  box-shadow: none;
}

.placeholderOrb span {
  background: linear-gradient(180deg, #5ac8fa 0%, #0a84ff 100%);
}

@media (max-width: 1120px) {
  .inboxShell.nativeMailShell {
    grid-template-columns: 14.5rem minmax(27rem, 35rem) minmax(0, 1fr);
  }
}

@media (min-width: 921px) {
  .messageColumn .searchBar {
    padding-top: 0.95rem;
    padding-bottom: 0.75rem;
  }

  .messageWorkspace {
    grid-template-columns: 8.15rem minmax(0, 1fr);
  }

  .detailColumn .messageDetail {
    padding-top: 1rem;
  }
}

@media (max-width: 920px) {
  .inboxAppShell {
    background: var(--apple-bg-2);
    padding: 0;
  }

  .desktopWindowBar {
    border-radius: 0;
    border-inline: 0;
    min-height: 4.15rem;
    padding: calc(0.82rem + env(safe-area-inset-top)) 0.86rem 0.76rem;
    position: sticky;
    top: 0;
    z-index: 35;
  }

  .windowMeta {
    gap: 0.42rem;
  }

  .windowMeta .primaryIconButton,
  .windowNavButtons {
    display: none;
  }

  .avatarButton {
    width: 2rem;
    height: 2rem;
  }

  .inboxShell.nativeMailShell {
    min-height: calc(100vh - 4.15rem - env(safe-area-inset-bottom));
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }

  .sidebar {
    background: var(--apple-bg-2);
    padding: 0.9rem 0.78rem calc(7.5rem + env(safe-area-inset-bottom));
    overflow: auto;
  }

  .paneSection.mobileActive {
    min-height: calc(100vh - 7rem - env(safe-area-inset-bottom));
  }

  .searchBar,
  .messageSubtoolbar,
  .contextRibbon,
  .messageList,
  .messageDetail,
  .messageDetailPlaceholder {
    padding-inline: 0.86rem;
  }

  .messageToolbar,
  .detailToolbar {
    position: sticky;
    top: calc(4.15rem + env(safe-area-inset-top));
    z-index: 22;
    background: rgba(247, 248, 251, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
            backdrop-filter: blur(24px) saturate(1.2);
  }

  .messageToolbar {
    padding-top: 0.86rem;
    padding-bottom: 0.62rem;
    align-items: center;
  }

  .messageToolbar > div:first-child,
  .detailToolbar > div:first-child {
    min-width: 0;
  }

  .messageToolbar h2,
  .detailToolbar h2 {
    font-size: 1.45rem;
    letter-spacing: -0.05em;
  }

  .columnSubhead {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .backButton {
    min-height: auto;
    margin-bottom: 0.18rem;
    font-size: 0.8rem;
    font-weight: 620;
    color: var(--apple-blue-deep);
  }

  .messageToolbarStats {
    align-self: flex-start;
  }

  .messageCountPill {
    padding: 0.4rem 0.62rem;
    font-size: 0.72rem;
  }

  .toolbarMailboxAvatar {
    display: none;
  }

  .searchBar {
    position: sticky;
    top: calc(8.55rem + env(safe-area-inset-top));
    z-index: 21;
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
    background: rgba(247, 248, 251, 0.96);
    border-bottom: 1px solid var(--apple-line);
  }

  .searchInputShell {
    min-height: 2.8rem;
    border-radius: 14px;
  }

  .messageSubtoolbar {
    position: sticky;
    top: calc(12.15rem + env(safe-area-inset-top));
    z-index: 20;
    padding-top: 0.56rem;
    padding-bottom: 0.56rem;
    background: rgba(247, 248, 251, 0.96);
  }

  .filterChips {
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .filterChips::-webkit-scrollbar,
  .folderRail::-webkit-scrollbar,
  .detailActions::-webkit-scrollbar {
    display: none;
  }

  .folderRail.mobileOnly {
    display: flex;
    position: sticky;
    top: calc(15.4rem + env(safe-area-inset-top));
    z-index: 19;
    padding: 0.55rem 0.86rem 0.72rem;
    gap: 0.45rem;
    background: rgba(247, 248, 251, 0.96);
    border-bottom: 1px solid var(--apple-line);
  }

  .folderChip {
    flex: 0 0 auto;
    min-height: 2rem;
    padding-inline: 0.76rem;
  }

  .contextRibbon {
    padding-top: 0.58rem;
    padding-bottom: 0.52rem;
  }

  .messageList {
    padding-bottom: 9.6rem;
  }

  .messageSectionLabel {
    top: calc(18.7rem + env(safe-area-inset-top));
    padding-inline: 0.86rem;
  }

  .messageButton {
    min-height: 5.25rem;
    padding-inline: 0.86rem;
    padding-block: 0.72rem;
    align-items: start;
  }

  .messageTopRow {
    flex-direction: row;
    align-items: baseline;
  }

  .messageAvatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.74rem;
  }

  .messageTopRow strong,
  .messageSubjectRow {
    font-size: 0.86rem;
  }

  .messageMeta {
    font-size: 0.77rem;
    -webkit-line-clamp: 2;
  }

  .messageHero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .messageListFooter {
    display: none;
  }

  .detailToolbar {
    top: calc(4.15rem + env(safe-area-inset-top));
    padding-top: 0.74rem;
    padding-bottom: 0.58rem;
    align-items: flex-start;
  }

  .detailToolbar .detailActions {
    width: 100%;
    overflow: auto;
    flex-wrap: nowrap;
    padding-top: 0.5rem;
  }

  .toolbarIconOnly,
  .folderSelect {
    min-width: 2.35rem;
    flex: 0 0 auto;
  }

  .messageDetail,
  .messageDetailPlaceholder {
    padding-top: 0.86rem;
    padding-bottom: 9.8rem;
  }

  .messageHero {
    gap: 0.72rem;
    padding-bottom: 0.72rem;
  }

  .messageHeroAvatar {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.8rem;
  }

  .messageHeroCopy h3,
  .messageDetail h3 {
    font-size: 1.24rem;
    line-height: 1.14;
  }

  .messageInlineMeta {
    font-size: 0.76rem;
  }

  .attachmentItems,
  .threadStripItems {
    flex-direction: column;
  }

  .attachmentLink,
  .threadJumpButton {
    width: 100%;
  }

  .plainMessageBody,
  .messageHtmlFrame {
    min-height: 12rem;
    max-height: none;
  }

  .plainMessageBody {
    padding: 0.92rem;
  }

  .plainMessageBody p {
    font-size: 0.9rem;
    line-height: 1.52;
  }

  .mobileBottomNav {
    gap: 0.38rem;
    padding: 0.55rem 0.72rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(247, 248, 251, 0.82);
    border-top: 1px solid var(--apple-line);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
            backdrop-filter: blur(28px) saturate(1.3);
    grid-template-columns: repeat(3, 1fr);
    z-index: 31;
  }

  .mobileNavButton {
    min-height: 3rem;
    border-radius: 14px;
    background: transparent;
    color: var(--apple-secondary);
    font-size: 0.72rem;
  }

  .mobileNavButton.active,
  .mobileNavButton.primary {
    background: var(--apple-blue-soft);
    color: var(--apple-blue-deep);
    box-shadow: none;
  }

  .mobileComposeFab {
    position: fixed;
    right: 1rem;
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #1990ff 0%, #0070f0 100%);
    color: #fff;
    border: 1px solid rgba(0, 88, 206, 0.2);
    box-shadow: 0 16px 28px rgba(0, 122, 255, 0.28);
    z-index: 32;
  }

  .mobileComposeFab .mailIcon {
    width: 1.18rem;
    height: 1.18rem;
  }

  .composeOverlay {
    padding: 0;
    align-items: end;
  }

  .composeCard {
    width: 100%;
    max-height: calc(100vh - 0.25rem - env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    align-self: end;
    padding: 1rem 0.9rem 1.2rem;
  }
}

/* Mobile app ergonomics: one pane at a time, less chrome, real thumb-friendly mail flow. */
.mobileAppTitle {
  display: none;
}

@media (max-width: 920px) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  .inboxAppShell {
    min-height: 100dvh;
    background:
      linear-gradient(180deg, rgba(246, 248, 252, 0.98) 0%, rgba(237, 241, 247, 0.98) 100%);
  }

  .desktopWindowBar {
    display: flex;
    justify-content: space-between;
    min-height: 3.6rem;
    padding: max(0.66rem, env(safe-area-inset-top)) 0.9rem 0.56rem;
    background: rgba(247, 249, 252, 0.92);
    color: var(--apple-ink);
    border: 0;
    border-bottom: 1px solid var(--apple-line);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  }

  .windowLeftChrome {
    min-width: 0;
  }

  .appHeaderBrand {
    display: none;
  }

  .mobileAppTitle.mobileOnly {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
  }

  .mobileAppTitle strong {
    font-size: 1rem;
    letter-spacing: -0.04em;
    line-height: 1.05;
  }

  .mobileAppTitle span {
    overflow: hidden;
    color: var(--apple-secondary);
    font-size: 0.74rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .windowMeta {
    margin-left: auto;
  }

  .avatarButton {
    background: rgba(0, 122, 255, 0.1);
    border-color: rgba(0, 122, 255, 0.14);
    color: var(--apple-blue-deep);
  }

  .systemBannerStack {
    margin: 0.55rem 0.65rem 0;
  }

  .inboxShell.nativeMailShell {
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - 3.6rem - env(safe-area-inset-bottom));
    min-height: 0;
    overflow: hidden;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    min-height: 0;
    height: 100%;
  }

  .sidebar:not(.mobileActive),
  .messageColumn:not(.mobileActive),
  .detailColumn:not(.mobileActive) {
    display: none !important;
  }

  .paneSection.mobileActive {
    width: 100%;
    max-width: 100vw;
    min-height: 0;
    height: 100%;
  }

  .sidebar.mobileActive,
  .messageColumn.mobileActive,
  .detailColumn.mobileActive {
    display: flex;
    flex: 0 0 100vw;
    inline-size: 100vw;
    min-inline-size: 100vw;
    max-inline-size: 100vw;
    overflow: hidden;
  }

  .sidebar.mobileActive {
    padding: 0.78rem 0.72rem calc(5.6rem + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .messageColumn.mobileActive,
  .detailColumn.mobileActive {
    background: var(--apple-bg-2);
  }

  .messageColumn.mobileActive .messageWorkspace,
  .messageColumn.mobileActive .messageResultsPanel,
  .messageColumn.mobileActive .messageList {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .messageToolbar,
  .detailToolbar {
    position: relative;
    top: auto;
    z-index: 2;
    flex: 0 0 auto;
    padding: 0.72rem 0.86rem 0.54rem;
    border-bottom: 1px solid var(--apple-line);
    background: rgba(247, 249, 252, 0.96);
  }

  .messageToolbar h2,
  .detailToolbar h2 {
    font-size: 1.26rem;
    line-height: 1.08;
  }

  .columnSubhead {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messageToolbarStats,
  .messageCountPill {
    display: none;
  }

  .searchBar,
  .messageSubtoolbar,
  .folderRail.mobileOnly,
  .messageSectionLabel {
    position: relative;
    top: auto;
  }

  .searchBar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.52rem;
    padding: 0.64rem 0.86rem 0.5rem;
    border-bottom: 0;
  }

  .searchBar .segmentedControl {
    grid-column: 1 / -1;
    order: 3;
  }

  .searchBar .iconActionButton {
    width: 2.8rem;
    padding-inline: 0;
  }

  .messageSubtoolbar {
    flex: 0 0 auto;
    padding: 0.15rem 0.86rem 0.5rem;
    border-bottom: 0;
  }

  .filterChips {
    padding-bottom: 0.05rem;
  }

  .filterChip {
    min-height: 2.25rem;
    padding-inline: 0.95rem;
  }

  .folderRail.mobileOnly {
    flex: 0 0 auto;
    padding: 0 0.86rem 0.62rem;
    background: rgba(247, 249, 252, 0.96);
  }

  .contextRibbon {
    padding: 0.55rem 0.86rem 0.48rem;
    border-top: 1px solid var(--apple-line);
  }

  .messageWorkspace,
  .messageResultsPanel {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .messageResultsPanel {
    display: flex;
    flex-direction: column;
  }

  .messageList {
    flex: 1 1 auto;
    display: block;
    min-height: 0;
    overflow-y: auto;
    padding: 0 0 6.2rem;
    -webkit-overflow-scrolling: touch;
  }

  .messageSection {
    display: block;
  }

  .messageSectionLabel {
    margin: 0;
    padding: 0.58rem 0.86rem 0.34rem;
    background: rgba(247, 249, 252, 0.96);
  }

  .messageButton {
    width: calc(100% - 1rem);
    margin: 0 0.5rem 0.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(203, 213, 225, 0.58);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
  }

  .messageButton.active {
    transform: none;
  }

  .messageSubjectRow,
  .messageMetaRow,
  .threadMetaRow {
    min-width: 0;
  }

  .messageSubjectRow span:first-child,
  .messageTopRow strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messageMeta {
    display: -webkit-box;
    overflow: hidden;
  }

  .detailToolbar {
    gap: 0.62rem;
  }

  .detailToolbar .detailActions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(2.5rem, max-content);
    gap: 0.42rem;
    width: 100%;
    overflow-x: auto;
    padding: 0.28rem 0 0.1rem;
    scrollbar-width: none;
  }

  .folderSelect.toolbarSelect {
    max-width: 8.8rem;
  }

  .messageDetail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.86rem 0.86rem 6.4rem;
    -webkit-overflow-scrolling: touch;
  }

  .messageHero {
    align-items: start;
    padding: 0.86rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(203, 213, 225, 0.58);
  }

  .messageHeroCopy {
    min-width: 0;
  }

  .messageHeroCopy h3,
  .messageDetail h3 {
    font-size: 1.12rem;
    line-height: 1.22;
  }

  .messageInlineMeta {
    gap: 0.18rem;
  }

  .messageInlineMeta strong,
  .messageInlineMeta span,
  .messageInlineMeta small {
    overflow-wrap: anywhere;
  }

  .threadStrip,
  .attachmentList,
  .messageBodyMode,
  .plainMessageBody,
  .replyDock {
    margin-inline: 0;
  }

  .plainMessageBody,
  .messageHtmlFrame {
    max-width: 100%;
    border-radius: 20px;
  }

  .messageHtmlFrame {
    height: min(60dvh, 32rem);
    max-height: 60dvh;
  }

  .replyDock {
    position: static;
    padding: 0.72rem;
    border-radius: 20px;
  }

  .replyDockTools {
    flex-wrap: wrap;
  }

  .mobileBottomNav {
    min-height: calc(4.35rem + env(safe-area-inset-bottom));
    padding: 0.5rem 0.72rem calc(0.48rem + env(safe-area-inset-bottom));
  }

  .mobileComposeFab {
    bottom: calc(4.95rem + env(safe-area-inset-bottom));
  }

  .composeOverlay {
    z-index: 60;
    background: rgba(15, 23, 42, 0.3);
  }

  .composeCard {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 0.4rem);
    overflow: hidden;
    padding: 0.9rem 0.86rem calc(0.86rem + env(safe-area-inset-bottom));
  }

  .composeCard .columnHeader {
    flex: 0 0 auto;
    padding: 0 0 0.7rem;
  }

  .composeCard .field {
    flex: 0 0 auto;
  }

  .composeTextarea {
    min-height: 9rem;
    max-height: 28dvh;
  }

  .composeCard .actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding-top: 0.7rem;
    background: rgba(255, 255, 255, 0.96);
  }

  .composeCard .actions button:last-child {
    grid-column: 1 / -1;
  }
}

/* Final responsive mail-shell rules. These intentionally override earlier experimental passes. */
@media (min-width: 921px) {
  .inboxAppShell {
    height: 100dvh;
    padding: 0.75rem;
    overflow: hidden;
  }

  .desktopWindowBar {
    height: 3.35rem;
    flex: 0 0 auto;
  }

  .systemBannerStack {
    position: absolute;
    top: 4.25rem;
    left: 50%;
    z-index: 45;
    width: min(32rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .systemBannerStack > * {
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  }

  .inboxShell.nativeMailShell {
    height: calc(100dvh - 4.85rem);
    min-height: 0;
    grid-template-columns: minmax(14rem, 17rem) minmax(29rem, 35rem) minmax(31rem, 1fr);
  }

  .sidebar,
  .messageColumn,
  .detailColumn,
  .messageWorkspace,
  .messageResultsPanel {
    min-height: 0;
    overflow: hidden;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    height: 100%;
  }

  .messageList,
  .messageDetail {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .messageList {
    flex: 1 1 auto;
  }

  .messageDetail {
    flex: 1 1 auto;
  }
}

@media (max-width: 920px) {
  .inboxAppShell {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #f4f6fa;
  }

  .desktopWindowBar {
    height: calc(3.45rem + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(0.58rem + env(safe-area-inset-top)) 0.9rem 0.55rem;
    box-shadow: none;
  }

  .windowTitle,
  .windowMeta .primaryIconButton,
  .windowNavButtons,
  .syncPill {
    display: none !important;
  }

  .mobileAppTitle.mobileOnly {
    display: grid;
  }

  .avatarButton {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 14px;
  }

  .systemBannerStack {
    position: fixed;
    top: calc(3.58rem + env(safe-area-inset-top));
    left: 0.75rem;
    right: 0.75rem;
    z-index: 44;
    margin: 0;
    pointer-events: none;
  }

  .offlineBanner,
  .noticeBanner,
  .errorBanner {
    min-height: 0;
    padding: 0.46rem 0.65rem;
    border-radius: 14px;
    display: block;
    font-size: 0.78rem;
    line-height: 1.25;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  }

  .offlineBanner strong,
  .noticeBanner strong,
  .errorBanner strong {
    display: inline;
    margin-right: 0.35rem;
  }

  .offlineBanner span {
    display: inline;
    color: var(--apple-secondary);
  }

  .inboxShell.nativeMailShell {
    display: block !important;
    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - 3.45rem - env(safe-area-inset-top));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .sidebar:not(.mobileActive),
  .messageColumn:not(.mobileActive),
  .detailColumn:not(.mobileActive) {
    display: none !important;
  }

  .sidebar.mobileActive,
  .messageColumn.mobileActive,
  .detailColumn.mobileActive {
    display: flex !important;
  }

  .sidebar.mobileActive {
    overflow-y: auto;
    padding: 0.85rem 0.85rem calc(5.6rem + env(safe-area-inset-bottom));
  }

  .messageColumn.mobileActive {
    flex-direction: column;
    background: #f4f6fa;
  }

  .detailColumn.mobileActive {
    flex-direction: column;
    background: #ffffff;
  }

  .messageToolbar,
  .detailToolbar {
    position: static !important;
    flex: 0 0 auto;
    padding: 0.68rem 0.9rem 0.48rem;
    background: #f4f6fa;
    border-bottom: 0;
  }

  .detailToolbar {
    background: #ffffff;
    border-bottom: 1px solid var(--apple-line);
  }

  .messageToolbar h2,
  .detailToolbar h2 {
    font-size: 1.32rem;
    line-height: 1.05;
  }

  .columnSubhead {
    max-width: calc(100vw - 4.5rem);
    font-size: 0.8rem;
  }

  .messageToolbarStats,
  .toolbarMailboxAvatar,
  .messageCountPill,
  .searchBar .segmentedControl,
  .messageSubtoolbar .mutedOnly,
  .contextRibbon small {
    display: none !important;
  }

  .searchBar {
    position: static !important;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    gap: 0.55rem;
    padding: 0.48rem 0.9rem;
    background: #f4f6fa;
  }

  .searchInputShell {
    min-height: 2.85rem;
    border-radius: 18px;
    background: rgba(118, 118, 128, 0.12);
  }

  .searchBar .iconActionButton {
    width: 3rem;
    min-width: 3rem;
    border-radius: 16px;
  }

  .messageSubtoolbar {
    position: static !important;
    flex: 0 0 auto;
    padding: 0.2rem 0.9rem 0.45rem;
    background: #f4f6fa;
  }

  .filterChips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.35rem;
    padding: 0.2rem;
    overflow: visible;
  }

  .filterChip {
    justify-content: center;
    min-height: 2.45rem;
    border-radius: 14px;
  }

  .folderRail.mobileOnly {
    position: static !important;
    flex: 0 0 auto;
    display: flex !important;
    gap: 0.45rem;
    padding: 0.08rem 0.9rem 0.55rem;
    overflow-x: auto;
    background: #f4f6fa;
  }

  .folderChip {
    flex: 0 0 auto;
    min-height: 2.35rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
  }

  .messageWorkspace,
  .messageResultsPanel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .messageWorkspace {
    display: flex !important;
    flex-direction: column;
  }

  .messageResultsPanel {
    display: flex !important;
    flex-direction: column;
  }

  .contextRibbon {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0.4rem 0.9rem 0.25rem;
    border: 0;
    background: #f4f6fa;
  }

  .contextRibbon span {
    font-size: 0.82rem;
    color: var(--apple-secondary);
  }

  .messageList {
    box-sizing: border-box;
    flex: 1 1 auto;
    display: block !important;
    min-height: 0;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding: 0.1rem 0.7rem calc(5.7rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .messageSection {
    box-sizing: border-box;
    display: block !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
  }

  .messageSectionLabel {
    position: static !important;
    padding: 0.55rem 0.25rem 0.38rem;
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .messageButton {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    gap: 0.7rem;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-height: 5.7rem;
    margin: 0 0 0.55rem;
    padding: 0.78rem;
    border: 1px solid rgba(203, 213, 225, 0.74);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  }

  .messageAvatar {
    width: 2.45rem;
    height: 2.45rem;
    font-size: 0.78rem;
  }

  .messageBody,
  .messageTopRow,
  .messageSubjectRow,
  .messageMetaRow {
    min-width: 0;
  }

  .messageTopRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: baseline;
  }

  .messageTopRow strong,
  .messageSubjectRow span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messageSubjectRow {
    display: block;
    margin-top: 0.1rem;
  }

  .messageMeta {
    margin-top: 0.18rem;
    font-size: 0.82rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .messageRowAction {
    display: none;
  }

  .detailToolbar .detailActions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(2.45rem, max-content);
    gap: 0.42rem;
    width: 100%;
    overflow-x: auto;
    padding-top: 0.48rem;
  }

  .messageDetail {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 0.9rem calc(5.6rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .messageHero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.9rem;
    border: 1px solid rgba(203, 213, 225, 0.74);
    border-radius: 22px;
    background: #fff;
  }

  .messageHeroCopy {
    min-width: 0;
  }

  .messageHeroCopy h3,
  .messageDetail h3 {
    font-size: 1.18rem;
    line-height: 1.2;
  }

  .plainMessageBody {
    max-height: none;
    min-height: 12rem;
    padding: 0.95rem;
    border-radius: 20px;
  }

  .messageHtmlFrame {
    height: min(62dvh, 34rem);
    max-height: 62dvh;
  }

  .replyDock {
    position: static;
    border-radius: 20px;
  }

  .mobileBottomNav {
    z-index: 50;
    min-height: calc(4.25rem + env(safe-area-inset-bottom));
    padding: 0.5rem 0.72rem calc(0.5rem + env(safe-area-inset-bottom));
    background: rgba(248, 250, 252, 0.92);
  }

  .mobileComposeFab {
    z-index: 51;
    right: 1rem;
    bottom: calc(4.85rem + env(safe-area-inset-bottom));
  }
}

/* Native mail polish pass. This is the final owner for app-level chrome. */
:root {
  --mail-glass: rgba(255, 255, 255, 0.78);
  --mail-glass-strong: rgba(255, 255, 255, 0.92);
  --mail-sidebar: rgba(236, 240, 247, 0.86);
  --mail-list: #ffffff;
  --mail-canvas: #f7f8fb;
  --mail-ink: #101828;
  --mail-muted: rgba(60, 60, 67, 0.66);
  --mail-faint: rgba(60, 60, 67, 0.34);
  --mail-separator: rgba(60, 60, 67, 0.14);
  --mail-selection: #0a84ff;
  --mail-selection-soft: rgba(10, 132, 255, 0.12);
  --mail-shadow-window: 0 28px 80px rgba(15, 23, 42, 0.18);
  --mail-shadow-card: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.inboxAppShell {
  background:
    radial-gradient(circle at 8% -8%, rgba(255, 255, 255, 0.98) 0 18rem, transparent 30rem),
    radial-gradient(circle at 88% 2%, rgba(95, 174, 255, 0.18) 0 14rem, transparent 30rem),
    linear-gradient(180deg, #f9fafc 0%, #e8edf5 100%);
  color: var(--mail-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.desktopWindowBar {
  border-color: var(--mail-separator);
  background: rgba(248, 250, 253, 0.78);
  -webkit-backdrop-filter: blur(34px) saturate(1.35);
          backdrop-filter: blur(34px) saturate(1.35);
}

@supports (padding-top: env(titlebar-area-height)) {
  @media (min-width: 921px) {
    html[data-display-mode="standalone"] .inboxAppShell,
    html[data-display-mode="native-webview"] .inboxAppShell {
      padding-top: calc(0.7rem + env(titlebar-area-height, 0px));
      padding-left: calc(0.7rem + env(titlebar-area-x, 0px));
    }

    html[data-display-mode="standalone"] .desktopWindowBar,
    html[data-display-mode="native-webview"] .desktopWindowBar {
      min-height: max(3.25rem, env(titlebar-area-height, 0px));
      padding-left: calc(0.8rem + env(titlebar-area-x, 0px));
    }
  }
}

.windowTitle {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.syncPill {
  background: rgba(255, 255, 255, 0.7);
  color: var(--mail-muted);
}

.primaryIconButton,
.windowNavButton.active {
  background: linear-gradient(180deg, #1c91ff 0%, #006ee8 100%);
  border-color: rgba(0, 105, 220, 0.45);
}

.inboxShell.nativeMailShell {
  background: var(--mail-glass);
  border-color: var(--mail-separator);
  box-shadow: var(--mail-shadow-window);
  overflow: hidden;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(243, 246, 251, 0.9), rgba(226, 233, 244, 0.84)),
    radial-gradient(circle at 16% 2%, rgba(10, 132, 255, 0.14), transparent 17rem);
}

.sidebarBrandBlock,
.profileCard,
.sidebarStorageCard {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(255, 255, 255, 0.7);
}

.brandGlyph {
  border-radius: 12px;
}

.profileCard {
  min-height: 3.25rem;
}

.mailboxButton,
.folderRow,
.tagRow,
.scopeRailButton,
.folderChip {
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.mailboxButton.active,
.folderRow.active,
.tagRow.active {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.18), rgba(10, 132, 255, 0.1));
  border-color: rgba(10, 132, 255, 0.16);
}

.mailboxButton.active strong,
.folderRow.active .folderRowLabel,
.tagRow.active span:not(.tagDot) {
  color: #0057c8;
}

.sidebarStorageCard {
  margin-top: auto;
}

.storageFooter span:last-child {
  color: #006ee8;
  font-weight: 650;
}

.messageColumn {
  background: var(--mail-list);
}

.messageToolbar,
.searchBar,
.messageSubtoolbar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
          backdrop-filter: blur(24px) saturate(1.2);
}

.messageToolbar h2,
.detailToolbar h2 {
  letter-spacing: -0.04em;
}

.searchInputShell {
  border-radius: 13px;
}

.segmentedControl,
.filterChips,
.messageBodyMode {
  background: rgba(118, 118, 128, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.segmentButton.active,
.filterChip.active,
.folderChip.active,
.secondaryButton.activeToggle {
  background: var(--mail-glass-strong);
  color: #0057c8;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.messageScopeRail {
  background: rgba(247, 249, 252, 0.76);
}

.scopeRailButton.active {
  background: var(--mail-selection-soft);
  color: #0057c8;
}

.bulkActionBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--mail-separator);
  background: rgba(248, 250, 253, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
          backdrop-filter: blur(18px) saturate(1.15);
}

.bulkActionBar.active {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.12), rgba(255, 255, 255, 0.9));
}

.bulkSelectAllButton,
.bulkActionButtons button,
.messageBulkSelect {
  border: 1px solid rgba(60, 60, 67, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: var(--mail-ink);
}

.bulkSelectAllButton {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.05rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 720;
}

.bulkActionButtons {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  overflow-x: auto;
}

.bulkActionButtons button {
  min-height: 2.05rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.bulkDangerButton {
  color: rgba(185, 28, 28, 0.88);
}

.bulkActionButtons button:disabled,
.bulkSelectAllButton:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.bulkClearButton {
  color: var(--mail-muted) !important;
}

.bulkCheckBox {
  position: relative;
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 1.5px solid rgba(99, 117, 143, 0.55);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.bulkCheckBox.checked,
.bulkCheckBox.partial {
  border-color: #007aff;
  background: linear-gradient(180deg, #28a2ff, #007aff);
}

.bulkCheckBox.checked::after {
  content: "";
  width: 0.46rem;
  height: 0.25rem;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.bulkCheckBox.partial::after {
  content: "";
  width: 0.48rem;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

.messageRowShell {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--mail-separator);
  background: transparent;
}

.messageRowShell.selected {
  background: rgba(10, 132, 255, 0.06);
}

.messageBulkSelect {
  display: grid;
  min-height: 5.55rem;
  place-items: center;
  border-width: 0 1px 0 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.42);
}

.messageBulkSelect:hover {
  background: rgba(10, 132, 255, 0.08);
}

.messageSectionLabel {
  background: rgba(255, 255, 255, 0.92);
  color: var(--mail-faint);
  text-transform: none;
}

.messageButton {
  position: relative;
  min-height: 5.55rem;
  border-radius: 0;
  border-bottom: 0;
}

.messageButton::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.messageButton.unread::before {
  background: var(--mail-selection);
}

.messageButton.active {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.15), rgba(10, 132, 255, 0.09));
}

.messageButton.active::before {
  background: var(--mail-selection);
}

.messageEmptyState {
  display: grid;
  gap: 0.75rem;
  margin: 1rem;
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 1rem;
  color: var(--mail-muted);
}

.messageEmptyState strong {
  color: var(--mail-ink);
  font-size: 1rem;
}

.messageEmptyState p {
  margin: 0;
  line-height: 1.45;
}

.messageEmptyState div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.messageEmptyState button {
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 999px;
  background: rgba(248, 250, 253, 0.92);
  color: var(--mail-ink);
  font-weight: 720;
  padding: 0.58rem 0.78rem;
}

.messageTopRow strong,
.messageSubjectRow {
  color: var(--mail-ink);
}

.messageTopRow span,
.messageMeta {
  color: var(--mail-muted);
}

.detailColumn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98));
}

.detailToolbar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
          backdrop-filter: blur(24px) saturate(1.2);
}

.toolbarIconButton,
.folderSelect,
.attachmentLink,
.threadJumpButton {
  background: rgba(118, 118, 128, 0.08);
  border-color: rgba(60, 60, 67, 0.08);
}

.toolbarIconButton:hover,
.attachmentLink:hover,
.threadJumpButton:hover {
  background: rgba(10, 132, 255, 0.1);
  color: #0057c8;
}

.messageDetail {
  background:
    radial-gradient(circle at 8% 0%, rgba(10, 132, 255, 0.06), transparent 18rem),
    linear-gradient(180deg, #ffffff 0%, var(--mail-canvas) 100%);
}

.messageActionStrip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  margin: -1rem -1rem 1rem;
  border-bottom: 1px solid var(--mail-separator);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.65rem 1rem;
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
          backdrop-filter: blur(18px) saturate(1.16);
}

.messageActionStrip > span {
  min-width: 0;
  overflow: hidden;
  color: var(--mail-muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageActionStrip div {
  display: flex;
  gap: 0.42rem;
}

.messageActionStrip button {
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 999px;
  background: rgba(118, 118, 128, 0.08);
  color: var(--mail-ink);
  font-size: 0.8rem;
  font-weight: 740;
  padding: 0.48rem 0.68rem;
  white-space: nowrap;
}

.messageHero {
  margin: 0 0 1rem;
  padding: 1rem 0 1rem;
}

.messageHeroCopy h3 {
  max-width: 32ch;
  font-weight: 760;
}

.attachmentList,
.threadStrip,
.plainMessageBody,
.messageHtmlFrame,
.replyDock {
  box-shadow: none;
}

.plainMessageBody,
.messageHtmlFrame {
  background: #ffffff;
}

.replyDock {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
          backdrop-filter: blur(20px) saturate(1.18);
}

.replyDockBody {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.replySendButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1c91ff, #006ee8);
}

.messageDetailPlaceholder {
  background:
    radial-gradient(circle at 50% 24%, rgba(10, 132, 255, 0.12), transparent 15rem),
    linear-gradient(180deg, #ffffff, #f7f8fb);
}

@media (min-width: 921px) {
  .inboxAppShell {
    padding: 0.8rem;
  }

  .desktopWindowBar {
    height: 3.25rem;
    border-radius: 18px 18px 0 0;
  }

  .inboxShell.nativeMailShell {
    height: calc(100dvh - 4.85rem);
    grid-template-columns: minmax(14.5rem, 16.5rem) minmax(33rem, 39rem) minmax(33rem, 1fr);
    border-radius: 0 0 18px 18px;
  }

  .messageToolbar {
    min-height: 4.1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.55rem;
  }

  .messageWorkspace {
    grid-template-columns: 9.3rem minmax(0, 1fr);
  }

  .messageList {
    background: #ffffff;
  }

  .detailToolbar .detailActions {
    justify-content: flex-end;
  }

  .messageDetail {
    padding: 1.35rem 1.45rem 1.5rem;
  }

  .messageHero,
  .messageOpsSummary,
  .plainMessageBody,
  .messageHtmlFrame,
  .replyDock,
  .attachmentList,
  .threadStrip {
    max-width: 62rem;
  }
}

@media (max-width: 920px) {
  .inboxAppShell {
    background: #f4f6fa;
  }

  .desktopWindowBar {
    height: calc(3.55rem + env(safe-area-inset-top));
    padding: calc(0.48rem + env(safe-area-inset-top)) 0.95rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: rgba(248, 250, 253, 0.9);
    border-bottom: 1px solid var(--mail-separator);
  }

  .mobileAppTitle.mobileOnly strong {
    font-size: 1rem;
    letter-spacing: -0.03em;
  }

  .mobileAppTitle.mobileOnly span {
    color: var(--mail-muted);
    font-size: 0.78rem;
  }

  .avatarButton {
    background: rgba(10, 132, 255, 0.1);
    color: #0057c8;
    border-color: rgba(10, 132, 255, 0.16);
  }

  .systemBannerStack {
    top: calc(3.75rem + env(safe-area-inset-top));
  }

  .offlineBanner,
  .noticeBanner,
  .errorBanner {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
  }

  .inboxShell.nativeMailShell {
    height: calc(100dvh - 3.55rem - env(safe-area-inset-top));
    background: #f4f6fa;
  }

  .sidebar.mobileActive,
  .messageColumn.mobileActive,
  .detailColumn.mobileActive {
    background: #f4f6fa;
  }

  .sidebar.mobileActive {
    gap: 0.7rem;
    padding: 0.85rem 0.85rem calc(5.9rem + env(safe-area-inset-bottom));
  }

  .messageToolbar,
  .searchBar,
  .messageSubtoolbar,
  .folderRail.mobileOnly,
  .contextRibbon {
    background: #f4f6fa;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .messageToolbar {
    padding-top: 0.78rem;
  }

  .messageToolbar h2,
  .detailToolbar h2 {
    font-size: 1.45rem;
  }

  .searchInputShell {
    min-height: 2.75rem;
    border-radius: 16px;
  }

  .filterChips {
    grid-template-columns: repeat(4, minmax(4.6rem, 1fr));
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .filterChip {
    min-width: 4.6rem;
    scroll-snap-align: start;
  }

  .folderRail.mobileOnly {
    padding-bottom: 0.68rem;
  }

  .folderChip {
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  }

  .messageList {
    padding: 0 0.8rem calc(6rem + env(safe-area-inset-bottom));
    background: #f4f6fa;
  }

  .messageSectionLabel {
    padding: 0.6rem 0.1rem 0.42rem;
    background: #f4f6fa;
  }

  .messageButton {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    min-height: 6rem;
    margin-bottom: 0.58rem;
    padding: 0.82rem;
    border: 1px solid rgba(60, 60, 67, 0.11);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  }

  .messageButton::before {
    inset: 0.85rem auto auto 0.55rem;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
  }

  .messageButton.unread::before,
  .messageButton.active::before {
    background: var(--mail-selection);
  }

  .messageButton.active {
    border-radius: 20px;
    background: #ffffff;
    border-color: rgba(10, 132, 255, 0.25);
    box-shadow: 0 14px 32px rgba(10, 132, 255, 0.13);
  }

  .messageAvatar {
    width: 2.45rem;
    height: 2.45rem;
  }

  .messageTopRow strong,
  .messageSubjectRow span:first-child {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .detailToolbar {
    background: rgba(255, 255, 255, 0.94);
  }

  .detailToolbar .detailActions {
    margin-inline: -0.12rem;
    padding-bottom: 0.1rem;
  }

  .messageDetail {
    padding: 0.95rem 0.95rem calc(5.9rem + env(safe-area-inset-bottom));
    background: #ffffff;
  }

  .messageOpsSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .messageHero {
    padding: 0.95rem;
    border: 1px solid rgba(60, 60, 67, 0.11);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  }

  .messageHeroCopy h3 {
    max-width: none;
    font-size: 1.2rem;
  }

  .plainMessageBody,
  .messageHtmlFrame,
  .replyDock,
  .attachmentLink,
  .threadJumpButton {
    border-radius: 18px;
  }

  .messageHtmlFrame {
    height: min(64dvh, 34rem);
    max-height: 64dvh;
  }

  .replyDock {
    margin-top: 0.85rem;
  }

  .replyDockTools {
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  .mobileBottomNav {
    border-top: 1px solid rgba(60, 60, 67, 0.12);
    background: rgba(249, 250, 252, 0.9);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
            backdrop-filter: blur(24px) saturate(1.3);
  }

  .mobileNavButton {
    min-height: 3.05rem;
    border-radius: 18px;
  }

  .mobileNavButton.active {
    background: rgba(10, 132, 255, 0.12);
    color: #0057c8;
  }

  .mobileComposeFab {
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 20px;
    background: linear-gradient(180deg, #1c91ff, #006ee8);
    box-shadow: 0 16px 32px rgba(0, 122, 255, 0.32);
  }

  .composeOverlay {
    align-items: end;
    background: rgba(15, 23, 42, 0.32);
  }

  .composeCard {
    width: 100%;
    max-width: none;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 54px rgba(15, 23, 42, 0.18);
  }
}

/* Usability pass: native compose, reading, and action ergonomics. */
.composeOverlay {
  z-index: 70;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.28), transparent 20rem),
    rgba(15, 23, 42, 0.34);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
          backdrop-filter: blur(28px) saturate(1.18);
}

.composeCard {
  display: flex;
  flex-direction: column;
  width: min(47rem, calc(100vw - 1.5rem));
  max-height: min(46rem, calc(100dvh - 1.5rem));
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(60, 60, 67, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.composeTitlebar {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.35rem;
  padding: 0.52rem 0.72rem;
  border-bottom: 1px solid var(--mail-separator);
  background: rgba(248, 250, 253, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
          backdrop-filter: blur(24px) saturate(1.2);
}

.composeTitleCopy {
  min-width: 0;
  text-align: center;
}

.composeTitleCopy h2 {
  margin: 0;
  color: var(--mail-ink);
  font-size: 0.92rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.composeTitleCopy p {
  margin: 0.08rem 0 0;
  overflow: hidden;
  color: var(--mail-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composeFromLine,
.composeCard .field {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.58rem 1rem;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}

.composeFromLine span,
.composeCard .field > span {
  color: var(--mail-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.composeFromLine strong,
.composeFromLine small {
  min-width: 0;
}

.composeFromLine strong {
  color: var(--mail-ink);
  font-size: 0.9rem;
}

.composeFromLine small {
  grid-column: 2;
  color: var(--mail-muted);
  font-size: 0.78rem;
}

.composeCard .field input,
.composeCard .field textarea {
  width: 100%;
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mail-ink);
  font-size: 0.94rem;
}

.composeCard .field input:focus,
.composeCard .field textarea:focus {
  outline: none;
  box-shadow: none;
}

.composeTextarea {
  min-height: 16rem;
  line-height: 1.55;
  resize: none;
}

.composeCard .field:has(.composeTextarea) {
  flex: 1 1 auto;
  align-items: stretch;
  overflow: hidden;
}

.composeCard .field:has(.composeTextarea) > span {
  padding-top: 0.25rem;
}

.composeCard .field:has(.composeTextarea) textarea {
  min-height: 18rem;
  overflow: auto;
}

.composeCard .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.72rem 1rem;
  border-top: 1px solid var(--mail-separator);
  background: rgba(248, 250, 253, 0.9);
}

.composeCard .actions button {
  min-height: 2.35rem;
  border-radius: 11px;
  font-size: 0.86rem;
  font-weight: 700;
}

.composeCard .actions button:first-child {
  min-width: 5.5rem;
  background: linear-gradient(180deg, #1c91ff, #006ee8);
  box-shadow: 0 10px 20px rgba(0, 122, 255, 0.18);
}

.composeError {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(239, 68, 68, 0.16);
}

.inboxAppShell[data-compose-modal-open="true"] > .desktopWindowBar,
.inboxAppShell[data-compose-modal-open="true"] .dailyOpsHeader,
.inboxAppShell[data-compose-modal-open="true"] > .operationsPulseStrip,
.inboxAppShell[data-compose-modal-open="true"] > .systemBannerStack,
.inboxAppShell[data-compose-modal-open="true"] > .inboxShell,
.inboxAppShell[data-compose-modal-open="true"] > .mobileBottomNav,
.inboxAppShell[data-compose-modal-open="true"] > .mobileAppDock,
.inboxAppShell[data-compose-modal-open="true"] > .mobileComposeFab {
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.toolbarIconButton[title="Move to trash"],
.toolbarIconButton[title="Spam"],
.toolbarIconButton[title="Block"] {
  color: rgba(185, 28, 28, 0.78);
}

.toolbarIconButton[title="Move to trash"]:hover,
.toolbarIconButton[title="Spam"]:hover,
.toolbarIconButton[title="Block"]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.toolbarIconButton[title="Reply"] {
  color: #0057c8;
  background: rgba(10, 132, 255, 0.1);
}

.messageOpsSummary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 70ch;
  margin-bottom: 0.9rem;
}

.messageOpsSummary span {
  min-width: 0;
  border: 1px solid var(--mail-separator);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.76);
  padding: 0.55rem 0.62rem;
}

.messageOpsSummary span.ready {
  border-color: rgba(52, 199, 89, 0.24);
  background: rgba(240, 253, 244, 0.72);
}

.messageOpsSummary span.limited {
  border-color: rgba(255, 149, 0, 0.24);
  background: rgba(255, 251, 235, 0.78);
}

.messageOpsSummary span.info {
  background: rgba(248, 250, 252, 0.82);
}

.messageOpsSummary b,
.messageOpsSummary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageOpsSummary b {
  color: var(--mail-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.messageOpsSummary small {
  margin-top: 0.12rem;
  color: var(--mail-text);
  font-size: 0.78rem;
}

.messageBodyMode {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 0.8rem;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
}

.plainMessageBody,
.messageHtmlFrame {
  max-width: 70ch;
}

.plainMessageBody {
  font-size: 1rem;
}

.plainMessageBody p {
  font-size: 1rem;
  line-height: 1.62;
}

.attachmentList > strong,
.threadStrip > strong {
  color: var(--mail-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.attachmentItems {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 0.08rem;
}

.attachmentLink {
  flex: 0 0 auto;
}

.threadStripItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.replyDock {
  max-width: 70ch;
}

.messageCommentsPanel {
  display: grid;
  gap: 0.8rem;
  max-width: 70ch;
  margin-top: 1rem;
  padding: 0.95rem;
  border: 1px solid var(--mail-separator);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.messageCommentsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.messageCommentsHeader strong {
  color: var(--mail-ink);
  font-size: 0.92rem;
}

.messageCommentsHeader p,
.messageCommentsDisabled p {
  margin: 0.12rem 0 0;
  color: var(--mail-muted);
  font-size: 0.82rem;
}

.messageCommentsHeader span {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
  color: #0057c8;
  font-size: 0.78rem;
  font-weight: 800;
}

.messageCommentsList {
  display: grid;
  gap: 0.72rem;
}

.messageComment {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.62rem;
  align-items: start;
}

.messageCommentAvatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #62d6ff 0%, #0a84ff 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.messageCommentBubble {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 15px;
  background: rgba(248, 250, 253, 0.9);
}

.messageCommentMeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.24rem;
}

.messageCommentMeta strong {
  overflow: hidden;
  color: var(--mail-ink);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageCommentMeta span {
  flex: 0 0 auto;
  color: var(--mail-faint);
  font-size: 0.72rem;
}

.messageCommentBubble p {
  margin: 0;
  color: var(--mail-ink);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.messageCommentMentions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-top: 0.55rem;
  color: var(--mail-faint);
  font-size: 0.72rem;
}

.messageCommentMentions span {
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.1);
  color: #0057c8;
  font-weight: 750;
}

.messageCommentComposer {
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.13);
  border-radius: 16px;
  background: #fff;
}

.messageCommentComposer textarea {
  width: 100%;
  min-height: 5.8rem;
  padding: 0.75rem 0.82rem;
  border: 0;
  resize: vertical;
  background: transparent;
  color: var(--mail-ink);
  font: inherit;
  line-height: 1.45;
}

.messageCommentComposer textarea:focus {
  outline: none;
}

.messageCommentComposerFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.64rem;
  border-top: 1px solid rgba(60, 60, 67, 0.09);
  background: rgba(248, 250, 253, 0.86);
}

.messageCommentComposerFooter span {
  color: var(--mail-faint);
  font-size: 0.74rem;
}

.messageCommentComposerFooter button {
  min-height: 2.15rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #1c91ff, #006ee8);
  font-size: 0.82rem;
  font-weight: 750;
}

.messageCommentComposerFooter button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.messageCommentsDisabled {
  padding: 0.85rem;
  border-radius: 14px;
  background: rgba(118, 118, 128, 0.08);
}

.mentionPicker {
  display: grid;
  gap: 0.24rem;
  margin: 0 0.6rem 0.6rem;
  max-height: min(18rem, 45dvh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 14px;
  background: rgba(244, 249, 255, 0.96);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
  overscroll-behavior: contain;
}

.mentionPicker button {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.36rem 0.5rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--mail-ink);
  text-align: left;
}

.mentionPicker button:hover {
  background: rgba(10, 132, 255, 0.12);
}

.mentionAvatar {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8f3ff, #cfe7ff);
  color: #0057c8;
  font-size: 0.68rem;
  font-weight: 850;
}

.mentionPicker strong,
.mentionPicker small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mentionPicker strong {
  font-size: 0.82rem;
}

.mentionPicker small {
  color: var(--mail-muted);
  font-size: 0.72rem;
}

.mentionChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.65rem 0.62rem;
}

.mentionChips span {
  padding: 0.24rem 0.48rem;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.12);
  color: #0057c8;
  font-size: 0.74rem;
  font-weight: 750;
}

.notificationShell {
  position: relative;
}

.notificationButton {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.notificationButton:hover,
.notificationButton.active {
  background: rgba(255, 255, 255, 0.16);
}

.notificationButton span {
  position: absolute;
  top: -0.3rem;
  right: -0.22rem;
  display: grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border: 2px solid #07111d;
  border-radius: 999px;
  background: #0a84ff;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 850;
}

.notificationTray {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  z-index: 30;
  width: min(24rem, calc(100vw - 1.5rem));
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  color: var(--mail-ink);
}

.notificationTrayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(60, 60, 67, 0.11);
}

.notificationTrayHeader strong {
  font-size: 0.95rem;
}

.notificationTrayHeader button {
  min-height: 1.9rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.09);
  color: #0057c8;
  font-size: 0.72rem;
  font-weight: 750;
}

.notificationList {
  display: grid;
  max-height: 24rem;
  overflow: auto;
  padding: 0.35rem;
}

.notificationItem {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.notificationItem:hover {
  background: rgba(10, 132, 255, 0.08);
}

.notificationItem.unread {
  background: rgba(10, 132, 255, 0.1);
}

.notificationAvatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #63d8ff, #0a84ff);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 850;
}

.notificationItem strong,
.notificationItem small,
.notificationItem em {
  display: block;
}

.notificationKind {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
  padding: 0.14rem 0.42rem;
  font-size: 0.66rem;
  font-weight: 850;
}

.notificationItem strong {
  font-size: 0.84rem;
}

.notificationItem small {
  margin-top: 0.12rem;
  color: var(--mail-muted);
  font-size: 0.76rem;
}

.notificationItem em {
  margin-top: 0.25rem;
  color: var(--mail-faint);
  font-size: 0.68rem;
  font-style: normal;
}

.replyDockBody {
  grid-template-columns: minmax(0, 1fr) auto;
}

.replySendButton::after {
  content: "  R";
  opacity: 0.55;
  font-size: 0.76rem;
}

.searchInputShell::after {
  display: none;
}

@media (min-width: 921px) {
  .detailColumn {
    min-width: 0;
  }

  .messageDetail {
    scroll-padding-top: 1rem;
  }

  .messageHero {
    max-width: 70ch;
  }

  .messageHtmlFrame {
    height: min(44rem, 56vh);
    max-height: 56vh;
  }
}

@media (max-width: 920px) {
  .searchInputShell::after {
    display: none;
  }

  .messageToolbar {
    padding-bottom: 0.35rem;
  }

  .columnSubhead {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .messageSubtoolbar {
    padding-top: 0.08rem;
  }

  .filterChips {
    display: flex;
    padding: 0.16rem;
  }

  .filterChip {
    flex: 1 0 auto;
  }

  .messageMeta {
    -webkit-line-clamp: 2;
  }

  .detailToolbar {
    gap: 0.5rem;
    padding-bottom: 0.55rem;
  }

  .toolbarIconOnly {
    min-width: 2.35rem;
  }

  .messageBodyMode {
    top: -0.95rem;
    margin-inline: -0.1rem;
  }

  .plainMessageBody,
  .messageHtmlFrame,
  .replyDock {
    max-width: none;
  }

  .plainMessageBody {
    max-height: none;
  }

  .replyDockBody {
    grid-template-columns: 1fr;
  }

  .messageCommentsPanel {
    max-width: none;
    padding: 0.82rem;
    border-radius: 18px;
  }

  .messageComment {
    grid-template-columns: 1.85rem minmax(0, 1fr);
  }

  .messageCommentAvatar {
    width: 1.85rem;
    height: 1.85rem;
  }

  .messageCommentMeta {
    display: grid;
    gap: 0.1rem;
  }

  .messageCommentMeta span {
    font-size: 0.7rem;
  }

  .messageCommentComposerFooter {
    display: grid;
    grid-template-columns: 1fr;
  }

  .messageCommentComposerFooter button {
    width: 100%;
  }

  .mentionPicker {
    margin-inline: 0.5rem;
  }

  .notificationShell {
    position: static;
  }

  .notificationTray {
    position: fixed;
    top: 4.6rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: calc(100vh - 7rem);
  }

  .notificationList {
    max-height: calc(100vh - 12rem);
  }

  .replySendButton {
    justify-self: stretch;
  }

  .composeCard {
    width: 100%;
    max-height: calc(100dvh - 0.3rem);
    border-radius: 24px 24px 0 0;
  }

  .composeTitlebar {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    padding: 0.68rem 0.9rem;
  }

  .composeTitleCopy {
    text-align: center;
  }

  .composeFromLine,
  .composeCard .field {
    grid-template-columns: 3.7rem minmax(0, 1fr);
    padding-inline: 0.9rem;
  }

  .composeCard .field:has(.composeTextarea) textarea {
    min-height: 38dvh;
  }

  .composeCard .actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: calc(0.82rem + env(safe-area-inset-bottom));
  }

  .composeCard .actions button:first-child {
    grid-column: 1 / -1;
    order: -1;
  }

  .bulkActionBar {
    position: sticky;
    top: 0;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    margin: 0.2rem 0.8rem 0.55rem;
    padding: 0.52rem;
    border: 1px solid rgba(60, 60, 67, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  }

  .bulkActionBar.active {
    background: rgba(244, 250, 255, 0.92);
    border-color: rgba(10, 132, 255, 0.18);
  }

  .bulkSelectAllButton {
    flex: 0 0 auto;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding-inline: 0.95rem;
    border-radius: 16px;
  }

  .bulkActionButtons {
    width: 100%;
    min-width: 0;
    flex: 1 1;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.05rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .bulkActionButtons button {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .messageList {
    scroll-padding-top: 4.5rem;
  }

  .messageBulkSelect {
    min-width: 2.85rem;
    border-radius: 20px 0 0 20px;
  }
}

/* Final mobile scroll owners: keep each pane momentum-scrollable without letting
   an inner mail list trap or chain the whole webview. */
@media (max-width: 920px) {
  .sidebar.mobileActive,
  .messageList,
  .messageDetail,
  .detailToolbar .detailActions,
  .folderRail.mobileOnly,
  .bulkActionButtons,
  .replyDockTools,
  .attachmentItems,
  .notificationList {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .messageColumn.mobileActive,
  .detailColumn.mobileActive {
    overscroll-behavior: none;
  }
}

/* Native-readiness ergonomics: keyboard focus, motion preferences, and touch targets. */
@media (max-width: 920px) {
  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    font-size: max(16px, 1rem);
    line-height: 1.35;
  }
}

:where(button, a, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid rgba(47, 128, 237, 0.78);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(47, 128, 237, 0.16);
}

:where(.messageButton, .mailboxButton, .folderRow, .tagRow, .scopeRailButton, .mobileNavButton):focus-visible {
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

@media (pointer: coarse) {
  :where(button, .mailboxButton, .folderRow, .tagRow, .scopeRailButton, .messageButton, .threadJumpButton, .toolbarIconButton, .replyTab, .mobileNavButton, .segmentButton, .filterChip, .folderChip) {
    min-height: 44px;
  }

  :where(.toolbarIconOnly, .windowNavButton, .notificationButton, .avatarButton, .mobileComposeFab) {
    min-width: 44px;
    min-height: 44px;
  }
}

.windowTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
}

.appTabSwitch {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.2rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.appTabSwitch button {
  border: 0;
  border-radius: 9px;
  padding: 0.42rem 0.58rem;
  color: #475569;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
}

.appTabSwitch button.active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.11);
}

.operationsWorkbenchNav {
  max-width: min(58vw, 50rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.operationsWorkbenchNav::-webkit-scrollbar {
  display: none;
}

.operationsNavGroup {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: max-content;
}

.operationsNavGroup + .operationsNavGroup {
  padding-left: 0.2rem;
  border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.operationsNavGroupLabel {
  padding: 0 0.18rem;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 860;
  line-height: 1;
}

.operationsSurfaceButton {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 6.25rem;
  min-height: 2.2rem;
  gap: 0.42rem;
  text-align: left;
  white-space: nowrap;
}

.operationsSurfaceIcon {
  display: inline-grid;
  place-items: center;
  width: 1.28rem;
  height: 1.28rem;
  color: #334155;
}

.operationsSurfaceButton.active .operationsSurfaceIcon {
  color: #0369a1;
}

.operationsSurfaceCopy {
  display: grid;
  min-width: 0;
  gap: 0.02rem;
  line-height: 1.05;
}

.operationsSurfaceCopy span,
.operationsSurfaceCopy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.operationsSurfaceCopy small {
  color: #64748b;
  font-size: 0.6rem;
  font-weight: 760;
}

.operationsSurfacePanel {
  min-width: 0;
}

.operationsPulseStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr));
  gap: 0.24rem;
  margin: 0.32rem clamp(0.55rem, 1vw, 0.95rem) 0;
  padding: 0.24rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.58rem;
  background: rgba(255, 255, 255, 0.68);
}

.operationsPulseItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0.56rem;
  background: transparent;
  color: #334155;
  padding: 0.34rem 0.42rem;
  text-align: left;
}

.operationsPulseItem.active {
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.operationsPulseItem svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #64748b;
}

.operationsPulseItem.active svg {
  color: #0369a1;
}

.operationsPulseItem span {
  display: grid;
  min-width: 0;
  gap: 0.04rem;
}

.operationsPulseItem b,
.operationsPulseItem strong,
.operationsPulseItem small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operationsPulseItem b {
  color: #64748b;
  font-size: 0.62rem;
}

.operationsPulseItem strong {
  color: #0f172a;
  font-size: 0.78rem;
}

.operationsPulseItem small {
  display: none;
  color: #64748b;
  font-size: 0.66rem;
}

.appTabBadge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  padding: 0 5px;
  color: #ffffff;
  background: #0a84ff;
  font-size: 0.68rem;
  font-weight: 900;
}

/* Chat base console flattening: Chat should not need decorative overrides to match the Ops Console. */
.chatShell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 86px);
  padding: 0;
  color: #111827;
  background: #ffffff;
}

.chatConversationRail,
.chatMain {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.chatConversationRail {
  display: flex;
  flex-direction: column;
  border-right: 0;
}

.chatDetailWorkbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chatContextPanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-left: 0;
  background: #ffffff;
  box-shadow: none;
}

.chatContextPanelHeader {
  display: grid;
  gap: 3px;
  min-height: 52px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
  padding: 10px 12px;
}

.chatContextPanelHeader strong,
.chatContextFacts dd,
.chatContextMembers span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatContextPanelBody {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.chatContextFacts {
  display: grid;
  gap: 7px;
  margin: 0;
}

.chatContextFacts div {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.08);
  padding-bottom: 7px;
}

.chatContextFacts dt {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.chatContextFacts dd {
  margin: 0;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 760;
}

.chatContextActions {
  display: grid;
  gap: 7px;
}

.chatContextActions a,
.chatContextActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 8px;
  padding: 0 10px;
  color: #111827;
  background: #ffffff;
  font-size: 0.74rem;
  font-weight: 850;
  text-decoration: none;
}

.chatContextActions button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.chatContextMembers {
  display: grid;
  gap: 6px;
}

.chatContextMembers span {
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 760;
}

.chatContextEmpty {
  margin: 12px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.chatRailHeader,
.chatHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
}

.chatRailHeader h2,
.chatHeader h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.chatHeader p {
  margin: 3px 0 0;
  color: #6b7280;
  font-weight: 700;
}

.chatReadState {
  display: inline-flex;
  margin-top: 7px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #075985;
  background: #e0f2fe;
  font-size: 0.72rem;
  font-weight: 900;
}

.chatHeaderMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
}

.chatMobileContextStrip {
  display: none;
}

.chatContextBadge {
  display: inline-flex;
  max-width: 22rem;
  overflow: hidden;
  border-radius: 999px;
  padding: 4px 8px;
  color: #475569;
  background: rgba(148, 163, 184, 0.14);
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatContextBadge.linked {
  color: #166534;
  background: #dcfce7;
}

.chatRailHeader button,
.chatNewCard > button,
.chatComposerActions button:last-child,
.gifSearchRow button {
  border: 1px solid rgba(60, 60, 67, 0.14);
  border-radius: 8px;
  padding: 8px 11px;
  color: #ffffff;
  background: #0b63ce;
  font-weight: 900;
  cursor: pointer;
}

.chatRailHeader button:disabled,
.chatNewCard > button:disabled,
.chatComposerActions button:disabled,
.gifSearchRow button:disabled {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.18);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.chatNewCard {
  margin: 0;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 12px;
  background: #f8fafc;
}

.chatNewCard input,
.chatTriageBar input,
.gifSearchRow input {
  width: 100%;
  border: 1px solid rgba(60, 60, 67, 0.14);
  border-radius: 15px;
  padding: 11px 12px;
  background: #ffffff;
  color: #111827;
  font-weight: 750;
}

.chatTriageBar {
  display: grid;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(60, 60, 67, 0.08);
}

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

.chatTriageCounts span,
.chatConversationEmpty {
  border-radius: 999px;
  padding: 4px 8px;
  color: #64748b;
  background: rgba(148, 163, 184, 0.12);
  font-size: 0.72rem;
  font-weight: 850;
}

.chatConversationEmpty {
  margin: 10px 2px;
  border-radius: 12px;
  text-align: center;
}

.chatMemberPicker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.chatMemberPickerEmpty {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 780;
}

.chatMemberPicker button,
.chatMessageActions button,
.chatReactions button,
.chatComposerContext button,
.selectedGifPreview button,
.chatComposerActions button:not(:last-child) {
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: #1f2937;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 850;
  cursor: pointer;
}

.chatMemberPicker button.active,
.chatReactions button.active {
  color: #0057d9;
  border-color: rgba(10, 132, 255, 0.34);
  background: #e8f2ff;
}

.chatConversationList {
  min-height: 0;
  overflow: auto;
  padding: 8px 12px 16px;
}

.chatConversationList > button {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 0;
  padding: 12px;
  text-align: left;
  color: #111827;
  background: transparent;
  cursor: pointer;
}

.chatConversationList > button.active {
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.18);
}

.chatAvatar,
.chatMessageAvatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #111827;
  background: #eef2f7;
  font-weight: 950;
}

.chatConversationList strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatConversationList small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #6b7280;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatConversationList .chatContextLine {
  color: #166534;
  font-size: 0.7rem;
}

.chatConversationList em {
  min-width: 24px;
  border-radius: 999px;
  padding: 4px 7px;
  color: #ffffff;
  background: #0a84ff;
  text-align: center;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.chatMain {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.chatNotice,
.chatError {
  margin: 12px 18px 0;
  border-radius: 16px;
  padding: 11px 13px;
  font-weight: 800;
}

.chatNotice {
  color: #075985;
  background: #e0f2fe;
}

.chatError {
  color: #991b1b;
  background: #fee2e2;
}

.chatTimeline {
  min-height: 0;
  overflow: auto;
  padding: 20px clamp(16px, 3vw, 34px);
}

.chatMessage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.chatBubble {
  border: 1px solid rgba(60, 60, 67, 0.1);
  border-radius: 8px;
  padding: 13px 14px;
  background: #ffffff;
  box-shadow: none;
}

.chatMessageMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
  margin-bottom: 6px;
}

.chatMessageMeta span,
.chatMessageMeta em {
  color: #7c8594;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 750;
}

.chatBubble p {
  margin: 0 0 8px;
  color: #111827;
  line-height: 1.45;
  white-space: pre-wrap;
}

.chatGif {
  display: block;
  max-width: min(340px, 100%);
  max-height: 260px;
  border-radius: 16px;
  object-fit: cover;
}

.chatGif.small {
  max-width: 160px;
  max-height: 120px;
  margin-top: 6px;
}

.chatMessageActions,
.chatReactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.chatReplies {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-left: 3px solid rgba(10, 132, 255, 0.18);
  padding-left: 10px;
}

.chatReply {
  display: grid;
  gap: 2px;
  border-radius: 15px;
  padding: 9px 10px;
  background: rgba(242, 247, 252, 0.92);
}

.chatReply span {
  color: #374151;
  white-space: pre-wrap;
}

.chatEmpty {
  margin-top: 20vh;
  text-align: center;
}

.chatComposer {
  border-top: 1px solid rgba(60, 60, 67, 0.1);
  padding: 14px clamp(14px, 2.4vw, 24px) 18px;
  background: rgba(255, 255, 255, 0.9);
}

.chatComposerContext,
.selectedGifPreview,
.selectedAttachmentPreview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  border-radius: 16px;
  padding: 9px 11px;
  color: #0f172a;
  background: #eef6ff;
  font-weight: 850;
}

.selectedAttachmentPreview {
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.selectedGifPreview img {
  width: 92px;
  height: 62px;
  border-radius: 12px;
  object-fit: cover;
}

.chatAttachmentInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.chatAttachmentList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chatAttachmentList.small {
  gap: 6px;
  margin-top: 6px;
}

.chatAttachmentChip {
  display: inline-flex;
  min-width: 0;
  max-width: min(100%, 280px);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 8px;
  padding: 7px 9px;
  color: #111827;
  background: #ffffff;
}

.chatAttachmentChip.image {
  background: #f0fdf4;
}

.chatAttachmentChip strong,
.chatAttachmentChip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatAttachmentChip strong {
  font-size: 0.78rem;
  font-weight: 850;
}

.chatAttachmentChip small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 800;
}

.chatComposerInput {
  position: relative;
  border: 1px solid rgba(60, 60, 67, 0.14);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.chatComposerInput textarea {
  width: 100%;
  min-height: 72px;
  max-height: 180px;
  resize: vertical;
  border: 0;
  outline: 0;
  border-radius: 8px 8px 0 0;
  padding: 14px 15px 8px;
  color: #111827;
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.chatComposerActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
}

.chatComposerActions span {
  color: #7c8594;
  font-size: 0.78rem;
  font-weight: 850;
}

.chatMentionPicker {
  right: 12px;
  bottom: 54px;
}

.gifPicker {
  margin-top: 12px;
  border: 1px solid rgba(60, 60, 67, 0.12);
  border-radius: 20px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.96);
}

.gifSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.gifGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-height: 270px;
  overflow: auto;
}

.gifGrid button {
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  padding: 0;
  background: #e5e7eb;
  cursor: pointer;
}

.gifGrid img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}

.serviceShell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(270px, 0.74fr) minmax(420px, 1.38fr);
  gap: 16px;
  min-height: calc(100vh - 94px);
  padding: 16px;
  color: #0f172a;
}

.serviceCustomerPane,
.serviceProfilePane,
.serviceRecordsPane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.servicePaneHeader,
.serviceColumnHeader {
  padding: 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.servicePaneHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.servicePaneHeader h2,
.serviceColumnHeader h2 {
  margin: 3px 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.servicePaneHeader p,
.serviceColumnHeader p {
  margin: 0;
  color: #64748b;
  line-height: 1.35;
}

.serviceSearchBar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 12px;
}

.serviceSearchBar input {
  width: 100%;
  min-width: 0;
  flex: 1 1;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  padding: 12px 13px;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.92rem;
}

.serviceSearchBar button,
.serviceLoadMore,
.serviceOpenRecords {
  border: 0;
  border-radius: 16px;
  padding: 11px 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f766e, #0369a1);
  font-weight: 800;
  cursor: pointer;
}

.serviceSearchBar button {
  width: 100%;
}

.serviceOutboxStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 18px 12px;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(240, 253, 250, 0.78);
  color: #0f172a;
}

.serviceOutboxStatus span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.serviceOutboxStatus b {
  font-size: 0.9rem;
  font-weight: 850;
}

.serviceOutboxStatus small {
  color: #475569;
  font-size: 0.75rem;
  font-weight: 750;
}

.serviceOutboxStatus button {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  color: #ffffff;
  background: #0f766e;
  font-weight: 850;
  cursor: pointer;
}

.serviceOutboxStatus button:disabled {
  color: #64748b;
  background: #e2e8f0;
  cursor: not-allowed;
}

.serviceNoLiveSendBanner {
  display: grid;
  gap: 0.16rem;
  margin: -4px 18px 12px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 16px;
  padding: 0.72rem 0.82rem;
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.94));
  color: #7c2d12;
  box-shadow: 0 12px 26px rgba(146, 64, 14, 0.08);
}

.serviceNoLiveSendBanner strong {
  color: #78350f;
  font-size: 0.84rem;
  font-weight: 900;
}

.serviceNoLiveSendBanner span {
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.servicePortalActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: -4px 18px 12px;
}

.servicePortalActions button {
  min-width: 0;
}

.serviceInboundOpsPanel {
  display: grid;
  gap: 0.75rem;
  margin: 0 18px 14px;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 18px;
  padding: 0.85rem;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.serviceInboundOpsHeader,
.serviceInboundOpsCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.serviceInboundOpsHeader > div,
.serviceInboundOpsCardTop {
  min-width: 0;
}

.serviceInboundOpsHeader strong,
.serviceInboundOpsCardTop strong {
  display: block;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 900;
}

.serviceInboundOpsCardTop small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.serviceInboundOpsFilters,
.serviceInboundOpsMatches,
.serviceInboundOpsList {
  display: grid;
  gap: 0.5rem;
}

.serviceInboundOpsFilters {
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.serviceInboundOpsFilters button,
.serviceInboundOpsMatches button {
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 999px;
  padding: 0.45rem 0.6rem;
  background: #ffffff;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.serviceInboundOpsFilters button.active {
  border-color: rgba(13, 148, 136, 0.42);
  color: #0f766e;
  background: rgba(204, 251, 241, 0.64);
}

.serviceInboundOpsCard {
  display: grid;
  gap: 0.6rem;
  scroll-margin-top: 96px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  padding: 0.75rem;
  background: #ffffff;
}

.serviceInboundOpsCard p {
  margin: 0;
  color: #334155;
  font-size: 0.85rem;
  line-height: 1.4;
}

.serviceInboundOpsMatches button {
  border-radius: 14px;
  text-align: left;
}

.serviceInboundOpsMatches small {
  display: block;
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.68rem;
}

.serviceInboundOpsBookingStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.serviceInboundOpsBookingStrip span {
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.58rem;
  background: #eff6ff;
  color: #334155;
  padding: 0.42rem 0.48rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceInboundOpsBookingStrip b {
  display: block;
  color: #1d4ed8;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.serviceInboundOpsPrimaryBook,
.chatPrimaryBookAction {
  font-weight: 900;
}

.serviceInboundOpsReply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: stretch;
}

.serviceInboundOpsReply textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  color: #0f172a;
  font: inherit;
  resize: vertical;
}

.serviceOutboxGuide {
  display: grid;
  gap: 0.35rem;
  margin: -4px 18px 12px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
  background: rgba(248, 250, 252, 0.82);
  color: #334155;
}

.serviceOutboxGuide.hasPending {
  border-color: rgba(14, 116, 144, 0.2);
  background: rgba(236, 254, 255, 0.72);
}

.serviceOutboxGuide.needsRetry {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.82);
}

.serviceOutboxGuide strong {
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 900;
}

.serviceOutboxGuide ul {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding-left: 1rem;
}

.serviceOutboxGuide li {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.32;
}

.serviceOutboxDetails {
  display: grid;
  gap: 0.45rem;
  max-height: min(38vh, 24rem);
  margin: -4px 18px 12px;
  overflow: auto;
  overscroll-behavior: contain;
}

.serviceOutboxDetails article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 14px;
  padding: 0.55rem 0.65rem;
  background: rgba(255, 255, 255, 0.92);
}

.serviceOutboxDetails article.needsRetry {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(254, 242, 242, 0.9);
}

.serviceOutboxDetails span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.serviceOutboxDetails strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceOutboxDetails small,
.serviceOutboxDetails p {
  margin: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
}

.serviceOutboxDetails em {
  color: #991b1b;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.serviceOutboxProofChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.12rem;
}

.serviceOutboxProofChips em {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.9);
}

.serviceOutboxProofChips b {
  color: #0f172a;
  font-weight: 900;
}

.serviceOutboxDetails .serviceOutboxRecovery {
  color: #334155;
  line-height: 1.32;
  white-space: normal;
}

.serviceOutboxDetails .serviceOutboxRecovery b {
  color: #0f172a;
  font-weight: 900;
}

.serviceOutboxDetails button {
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  color: #334155;
  background: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.serviceOutboxDetails button:disabled {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.serviceOutboxDetails button.confirmDanger {
  border-color: rgba(220, 38, 38, 0.34);
  background: #fee2e2;
  color: #991b1b;
}

.serviceError {
  margin: 0 18px 12px;
  border-radius: 16px;
  padding: 11px 13px;
  color: #991b1b;
  background: #fee2e2;
}

.serviceCustomerList,
.serviceProfileContent,
.serviceRecordsBody {
  min-height: 0;
  overflow: auto;
}

.serviceCustomerList {
  padding: 6px 14px 18px;
}

.serviceCustomerCard {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 13px;
  text-align: left;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.serviceCustomerCard.active {
  border-color: rgba(14, 116, 144, 0.45);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(224, 242, 254, 0.86));
  box-shadow: 0 18px 38px rgba(14, 116, 144, 0.14);
}

.serviceCustomerCard:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 116, 144, 0.28);
}

.serviceAvatar,
.serviceHeroAvatar {
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ecfeff;
  background: linear-gradient(135deg, #155e75, #0f766e);
  font-weight: 900;
}

.serviceAvatar {
  width: 40px;
  height: 40px;
}

.serviceCustomerCopy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.serviceCustomerCopy strong,
.serviceCustomerCopy small,
.serviceCustomerCopy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceCustomerCopy strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
}

.serviceCustomerCopy small,
.serviceCustomerCopy em {
  color: #64748b;
  font-size: 0.78rem;
}

.serviceCustomerStats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0;
}

.serviceCustomerStats b {
  border-radius: 999px;
  padding: 3px 7px;
  color: #155e75;
  background: rgba(14, 165, 233, 0.1);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.serviceReadinessPill {
  grid-column: 2;
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  color: #0f766e;
  background: rgba(20, 184, 166, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
}

.serviceLoadMore {
  margin: 0 18px 18px;
}

.serviceProfileContent,
.serviceRecordsBody {
  padding: 18px;
}

.serviceHeroCard,
.serviceInfoCard,
.serviceRecordTableWrap {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.serviceHeroCard {
  display: flex;
  gap: 14px;
  align-items: center;
}

.serviceCallBookingRail {
  position: sticky;
  top: 0.75rem;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(12rem, 1.35fr) minmax(14rem, 2fr) auto;
  gap: 0.65rem;
  align-items: center;
  margin: 14px 0;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 44%),
    rgba(236, 254, 255, 0.94);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  padding: 0.78rem 0.9rem;
}

.serviceCallBookingRail.live {
  border-color: rgba(220, 38, 38, 0.2);
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), transparent 42%),
    rgba(255, 247, 237, 0.95);
}

.serviceCallBookingRail span,
.serviceCallBookingRail p,
.serviceCallBookingRail small {
  margin: 0;
  color: #475569;
}

.serviceCallBookingRail > div:first-child span {
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceCallBookingRail strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
}

.serviceCallBookingRail p {
  margin-top: 0.12rem;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.serviceCallBookingRailFacts,
.serviceCustomerHistoryStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.serviceCallBookingRailFacts span,
.serviceCustomerHistoryStrip > div {
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.48rem 0.56rem;
  text-align: left;
}

.serviceCallBookingRailFacts b,
.serviceCustomerHistoryStrip b {
  display: block;
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.serviceCallBookingRailFacts span,
.serviceCustomerHistoryStrip span,
.serviceCustomerHistoryStrip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceCallBookingRailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.serviceCallBookingRailActions button {
  min-height: 2rem;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  padding: 0 0.68rem;
  font-size: 0.74rem;
  font-weight: 900;
}

.serviceCustomerHistoryStrip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 14px 0;
}

.serviceCustomerHistoryStrip > div {
  display: grid;
  gap: 0.32rem;
}

.serviceCustomerHistoryStrip > div.warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.86);
}

.serviceCustomerHistoryStrip > div.danger {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(254, 242, 242, 0.86);
}

.serviceCustomerHistoryStrip > div.needsAction {
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(248, 250, 252, 0.9);
}

.serviceCustomerHistoryStrip button {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.serviceCustomerHistoryStrip button:hover {
  background: transparent;
}

.serviceCustomerHistoryStrip > div:hover {
  border-color: rgba(14, 116, 144, 0.28);
  background: rgba(240, 253, 250, 0.86);
}

.serviceCustomerHistoryStrip span {
  display: block;
  margin-top: 0.16rem;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.serviceCustomerHistoryStrip small {
  display: block;
  margin-top: 0.1rem;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
}

.serviceCustomerHistoryQuickAction {
  justify-self: start;
  border: 1px solid rgba(14, 116, 144, 0.16) !important;
  border-radius: 999px;
  background: #ffffff !important;
  color: #0f766e;
  padding: 0.24rem 0.52rem !important;
  font-size: 0.66rem;
  font-weight: 900;
}

.serviceMembershipRuleEditor {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(14rem, 1.2fr) minmax(10rem, 1fr) minmax(12rem, 1.25fr);
  gap: 0.55rem;
  align-items: end;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 44%),
    rgba(248, 250, 252, 0.92);
  padding: 0.65rem;
}

.serviceMembershipRuleEditor strong,
.serviceMembershipRuleEditor p {
  margin: 0;
}

.serviceMembershipRuleEditor strong {
  color: #0f172a;
  font-size: 0.86rem;
}

.serviceMembershipRuleEditor p {
  margin-top: 0.15rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.serviceUnifiedSyncStatus,
.fieldUnifiedSyncStatus,
.fieldNativeCloseoutProof {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.fieldUnifiedSyncStatus,
.fieldNativeCloseoutProof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fieldOfflineCloseoutVerdict {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 0.24rem solid #2563eb;
  border-radius: 0.9rem;
  background: #eff6ff;
  padding: 0.62rem 0.72rem;
}

.fieldOfflineCloseoutVerdict.pending {
  border-left-color: #d97706;
  background: #fffbeb;
}

.fieldOfflineCloseoutVerdict div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fieldOfflineCloseoutVerdict span {
  color: #1d4ed8;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fieldOfflineCloseoutVerdict strong,
.fieldOfflineCloseoutVerdict small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fieldOfflineCloseoutVerdict strong {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 950;
}

.fieldOfflineCloseoutVerdict small {
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.28;
}

.fieldOfflineCloseoutVerdict em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 0.2rem 0.54rem;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
}

.fieldOfflineCloseoutVerdict.pending em {
  background: #fed7aa;
  color: #9a3412;
}

.serviceUnifiedSyncStatus span,
.fieldUnifiedSyncStatus span,
.fieldNativeCloseoutProof span {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.8rem;
  background: rgba(240, 253, 250, 0.78);
  padding: 0.52rem 0.58rem;
}

.fieldNativeCloseoutProof span {
  background: rgba(239, 246, 255, 0.78);
}

.fieldNativeCloseoutProof span.ready {
  border-color: rgba(22, 163, 74, 0.22);
}

.fieldNativeCloseoutProof span.pending {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.8);
}

.fieldNativeCloseoutProof span.needs_action {
  border-color: rgba(37, 99, 235, 0.2);
}

.serviceUnifiedSyncStatus b,
.fieldUnifiedSyncStatus b,
.fieldNativeCloseoutProof b {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fieldNativeCloseoutProof strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceUnifiedSyncStatus small,
.fieldUnifiedSyncStatus small,
.fieldNativeCloseoutProof small {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.3;
}

.servicePricebookConfigEditor {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.76);
  padding: 0.68rem;
}

.servicePricebookConfigEditorHeader,
.servicePricebookWideField {
  grid-column: 1 / -1;
}

.servicePricebookConfigEditorHeader {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.servicePricebookConfigEditorHeader strong,
.servicePricebookConfigEditorHeader small {
  display: block;
}

.servicePricebookConfigEditorHeader small {
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
}

.servicePricebookConfigEditorHeader button {
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  padding: 0.34rem 0.68rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.servicePricebookConfigEditor label {
  display: grid;
  gap: 0.24rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 860;
}

.servicePricebookConfigEditor input {
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.55rem;
  font: inherit;
}

.servicePricebookActiveSwitch {
  align-self: end;
}

.serviceHeroAvatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.serviceHeroCard h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}

.serviceHeroCard p,
.serviceInfoCard p,
.serviceInfoCard small {
  margin: 0;
  color: #64748b;
}

.servicePillRow,
.serviceEventTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.servicePillRow span,
.serviceEventTags span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #155e75;
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.72rem;
  font-weight: 800;
}

.servicePillRow span.danger {
  color: #991b1b;
  background: #fee2e2;
}

.serviceMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.serviceMetricGrid div {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.serviceMetricGrid strong {
  display: block;
  font-size: 1.35rem;
}

.serviceMetricGrid span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.serviceActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.serviceActionGrid button,
.serviceActionGrid a {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 14px;
  text-align: left;
  color: #0f172a;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.13), transparent 42%),
    rgba(255, 255, 255, 0.76);
  cursor: pointer;
  text-decoration: none;
}

.serviceActionGrid button:disabled {
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.72;
}

.serviceActionGrid strong,
.serviceActionGrid span {
  display: block;
}

.serviceActionGrid span {
  margin-top: 3px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.serviceOpenRecords {
  width: 100%;
  margin-top: 14px;
}

.serviceHandoffCard {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.78);
}

.serviceWorkflowCard {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 20px;
  padding: 14px;
  background: rgba(240, 253, 250, 0.76);
}

.serviceWorkflowCard > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
}

.serviceWorkflowCard > summary::-webkit-details-marker {
  display: none;
}

.serviceWorkflowCard > summary::after {
  content: "Open";
  border: 1px solid rgba(14, 116, 144, 0.2);
  border-radius: 999px;
  padding: 0.32rem 0.62rem;
  color: #0f766e;
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 850;
}

.serviceWorkflowCard[open] > summary::after {
  content: "Hide";
}

.serviceWorkflowCard > summary span,
.serviceWorkflowCard > summary strong,
.serviceWorkflowCard > summary small {
  display: block;
  min-width: 0;
}

.serviceWorkflowCard > summary strong {
  color: #0f172a;
}

.serviceWorkflowCard > summary small {
  margin-top: 0.18rem;
  color: #64748b;
  font-weight: 750;
}

.serviceWorkflowList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.serviceWorkflowList button {
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 14px;
  padding: 0.7rem;
  text-align: left;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.serviceWorkflowList b,
.serviceWorkflowList span,
.serviceWorkflowList small {
  display: block;
  min-width: 0;
}

.serviceWorkflowList b {
  font-size: 0.82rem;
}

.serviceWorkflowList span {
  margin-top: 0.16rem;
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 850;
}

.serviceWorkflowList small {
  margin-top: 0.28rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.28;
}

.serviceWorkflowHandoffPlan {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
}

.serviceWorkflowHandoffPlan b {
  color: #0f172a;
  font-size: 0.78rem;
}

.serviceWorkflowHandoffPlan ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1rem;
}

.serviceWorkflowHandoffPlan li {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.32;
}

.serviceRecordsWorkflowHandoffCard,
.serviceOutboxWorkflowHandoffCard {
  margin: 0 0 10px;
}

.serviceContactActionCard {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.serviceContactActionCard strong,
.serviceContactActionCard p,
.serviceContactActionCard label,
.serviceContactActionCard span {
  min-width: 0;
}

.serviceContactActionCard p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.4;
}

.serviceContactActionCard label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
}

.serviceContactActionCard input,
.serviceContactActionCard select,
.serviceContactActionCard textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.92);
  color: #0f172a;
  font: inherit;
  font-size: 0.9rem;
  padding: 10px 11px;
}

.serviceContactActionCard textarea {
  min-height: 72px;
  resize: vertical;
}

.serviceContactActionCard .serviceInlineSwitch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
}

.serviceContactActionCard .serviceInlineSwitch input {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  padding: 0;
}

.serviceContactActionCard .serviceMembershipPackageWarning {
  justify-content: flex-start;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  padding: 0.55rem 0.65rem;
}

.serviceContactActionCard .serviceMembershipPackageWarning span {
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
}

.serviceMembershipTaskDetail {
  display: grid;
  gap: 0.45rem;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 0.55rem;
  background: rgba(236, 254, 255, 0.66);
  padding: 0.58rem 0.62rem;
}

.serviceMembershipTaskDetail strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.serviceMembershipTaskDetail p {
  margin: 0.12rem 0 0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.35;
}

.serviceMembershipTaskBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.serviceMembershipTaskBadges span {
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  padding: 0.16rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.2;
}

.serviceContactActionCard .serviceInlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.serviceContactActionCard .serviceInlineActions button {
  flex: 1 1 7rem;
}

.serviceContactActionCard input:disabled,
.serviceContactActionCard select:disabled,
.serviceContactActionCard textarea:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.serviceScheduleFit {
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.55rem;
  padding: 0.58rem 0.62rem;
  background: rgba(248, 250, 252, 0.92);
}

.serviceScheduleFit > div:first-child,
.serviceScheduleFitStats,
.serviceScheduleFitTimeline,
.serviceScheduleFitRisks,
.serviceScheduleFitZones {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.36rem;
}

.serviceScheduleFit > div:first-child {
  justify-content: space-between;
}

.serviceScheduleFit strong {
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.76rem;
}

.serviceScheduleBestFitButton {
  min-height: 2.25rem;
  border: 1px solid rgba(14, 165, 233, 0.32);
  border-radius: 999px;
  background: #eff6ff;
  color: #075985;
  padding: 0.34rem 0.68rem;
  font-size: 0.72rem;
  font-weight: 860;
}

.serviceScheduleBestFitButton:disabled {
  border-color: rgba(203, 213, 225, 0.82);
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.serviceScheduleFit.busy strong,
.serviceScheduleFit.full strong {
  background: #fff7ed;
  color: #9a3412;
}

.serviceScheduleFit p {
  margin: 0;
}

.serviceBookingPlan {
  display: grid;
  gap: 0.36rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.55rem;
  padding: 0.58rem 0.62rem;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
}

.serviceBookingPlan.ready {
  border-color: rgba(14, 116, 144, 0.2);
  background: rgba(236, 254, 255, 0.72);
}

.serviceBookingPlan strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.inboundBookingFinalReview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
  min-width: 0;
}

.inboundBookingFinalReview span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 0.48rem;
  background: #ffffff;
  padding: 0.42rem 0.48rem;
}

.inboundBookingFinalReview b,
.inboundBookingFinalReview small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inboundBookingFinalReview strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inboundBookingSaveOrder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.inboundBookingSaveOrder span {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.28rem 0.5rem;
}

.inboundBookingPreBookChecklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
}

.inboundBookingPreBookChecklist span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.42rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 0.62rem;
  background: #eff6ff;
  color: #334155;
  padding: 0.48rem 0.54rem;
}

.inboundBookingPreBookChecklist b {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.72rem;
}

.inboundBookingPreBookChecklist strong,
.inboundBookingPreBookChecklist small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inboundBookingPreBookChecklist strong {
  font-size: 0.78rem;
  font-weight: 900;
}

.inboundBookingPreBookChecklist small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.serviceBookingPlan ul {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding-left: 1rem;
}

.serviceBookingPlan li {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.32;
}

@media (max-width: 760px) {
  .inboundBookingFinalReview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.serviceEstimateBuilderPath {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceEstimateDecisionPath {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceEstimateRecommendedStart {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceMembershipPricingEvidence {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceMembershipBoundary {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceEstimateCloseoutHandoff {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  min-width: 0;
}

.serviceEstimateNextStep {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(5.5rem, 0.35fr) minmax(8rem, 0.75fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 0.65rem;
  background: #eff6ff;
  padding: 0.48rem 0.55rem;
  text-align: left;
}

.serviceMembershipPricingEvidence span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.55rem;
  background: rgba(240, 253, 250, 0.72);
  padding: 0.42rem 0.5rem;
}

.serviceMembershipBoundary span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.55rem;
  background: rgba(240, 253, 250, 0.72);
  padding: 0.42rem 0.5rem;
}

.serviceMembershipBoundary span.needsAction {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.74);
}

.serviceEstimateCloseoutHandoff span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.55rem;
  background: rgba(239, 246, 255, 0.76);
  padding: 0.42rem 0.5rem;
}

.serviceEstimateRecommendedStart span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.55rem;
  background: rgba(239, 246, 255, 0.76);
  padding: 0.42rem 0.5rem;
}

.serviceEstimateRecommendedStart span.needsAction {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.74);
}

.serviceMembershipPricingEvidence span.needsAction {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.74);
}

.serviceEstimateCloseoutHandoff span.needsAction {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.74);
}

.serviceEstimateCloseoutHandoff b,
.serviceEstimateCloseoutHandoff strong,
.serviceEstimateCloseoutHandoff small,
.serviceMembershipBoundary b,
.serviceMembershipBoundary strong,
.serviceMembershipBoundary small,
.serviceEstimateRecommendedStart b,
.serviceEstimateRecommendedStart strong,
.serviceEstimateRecommendedStart small,
.serviceEstimateNextStep b,
.serviceEstimateNextStep strong,
.serviceEstimateNextStep small,
.serviceMembershipPricingEvidence b,
.serviceMembershipPricingEvidence strong,
.serviceMembershipPricingEvidence small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serviceEstimateCloseoutHandoff b,
.serviceEstimateRecommendedStart b,
.serviceMembershipBoundary b,
.serviceMembershipPricingEvidence b {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.serviceEstimateCloseoutHandoff b {
  color: #1d4ed8;
}

.serviceEstimateNextStep b {
  color: #1d4ed8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.serviceEstimateCloseoutHandoff strong,
.serviceEstimateRecommendedStart strong,
.serviceMembershipBoundary strong,
.serviceEstimateNextStep strong,
.serviceMembershipPricingEvidence strong {
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
}

.serviceEstimateCloseoutHandoff small,
.serviceEstimateRecommendedStart small,
.serviceMembershipBoundary small,
.serviceEstimateNextStep small,
.serviceMembershipPricingEvidence small {
  color: #475569;
  font-size: 0.68rem;
  line-height: 1.25;
}

.serviceEstimateBuilderPath span,
.serviceEstimateDecisionPath span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid #dbe1ea;
  border-radius: 0.55rem;
  background: #f8fafc;
  padding: 0.42rem 0.5rem;
}

.serviceEstimateBuilderPath b,
.serviceEstimateBuilderPath small,
.serviceEstimateDecisionPath b,
.serviceEstimateDecisionPath small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serviceEstimateBuilderPath b,
.serviceEstimateDecisionPath b {
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 850;
}

.serviceEstimateBuilderPath small,
.serviceEstimateDecisionPath small {
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.25;
}

@media (max-width: 920px) {
  .serviceEstimateCloseoutHandoff,
  .serviceMembershipPricingEvidence,
  .serviceMembershipBoundary,
  .serviceEstimateRecommendedStart,
  .serviceEstimateDecisionPath,
  .serviceEstimateBuilderPath {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .serviceEstimateNextStep {
    grid-template-columns: 1fr;
  }
}

.serviceScheduleFitStats span,
.serviceScheduleFitTimeline span,
.serviceScheduleFitRisks span,
.serviceScheduleFitZones span {
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  background: #ffffff;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
}

.serviceScheduleFitTimeline span {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0.24rem;
}

.serviceScheduleFitTimeline b {
  color: #0f172a;
}

.serviceScheduleFitWindow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.36rem;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 0.48rem;
  background: #ffffff;
  padding: 0.34rem 0.46rem;
}

.serviceScheduleFitWindow.full,
.serviceScheduleFitWindow.busy {
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.serviceScheduleFitWindow strong,
.serviceScheduleFitWindow span,
.serviceScheduleFitWindow small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceScheduleFitWindow span {
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 850;
}

.serviceScheduleFitWindow small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.serviceScheduleDayBoard {
  display: grid;
  gap: 0.3rem;
}

.serviceDispatchRouteSheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.42rem;
}

.serviceDispatchRouteSheets article {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-left: 3px solid #0ea5e9;
  border-radius: 0.52rem;
  background: #ffffff;
  padding: 0.5rem;
}

.serviceDispatchRouteSheets article.review {
  border-left-color: #d97706;
  background: #fffbeb;
}

.serviceDispatchRouteSheets header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
}

.serviceDispatchRouteSheets header span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.serviceDispatchRouteSheets strong,
.serviceDispatchRouteSheets small,
.serviceDispatchRouteSheets p,
.serviceDispatchRouteSheets em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.serviceDispatchRouteSheets strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.serviceDispatchRouteSheets small,
.serviceDispatchRouteSheets p {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
}

.serviceDispatchRouteSheets p {
  margin: 0;
}

.serviceDispatchRouteSheets a,
.serviceDispatchRouteSheets header em {
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  padding: 0.22rem 0.46rem;
  text-decoration: none;
  white-space: nowrap;
}

.serviceDispatchRouteSheets header em {
  border-color: rgba(148, 163, 184, 0.42);
  color: #64748b;
}

.serviceDispatchRouteSheetStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.24rem;
}

.serviceDispatchRouteSheetStats span {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 0.38rem;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 850;
  padding: 0.24rem 0.34rem;
}

.serviceDispatchRouteSheetStats b {
  color: #64748b;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceDispatchRouteSheetStops {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.serviceDispatchRouteSheetStops li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.08rem 0.32rem;
  align-items: start;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.68);
  border-radius: 0.38rem;
  background: #ffffff;
  padding: 0.26rem 0.34rem;
}

.serviceDispatchRouteSheetStops li.blocked {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.72);
}

.serviceDispatchRouteSheetStops li > span {
  display: inline-grid;
  grid-row: span 2;
  width: 1.18rem;
  height: 1.18rem;
  place-items: center;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 0.62rem;
  font-weight: 900;
}

.serviceDispatchRouteSheetStops li.blocked > span {
  background: #fef3c7;
  color: #92400e;
}

.serviceScheduleBlockedRoutes {
  display: grid;
  gap: 0.3rem;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 0.52rem;
  background: rgba(255, 251, 235, 0.72);
  padding: 0.44rem;
}

.serviceScheduleBlockedRoutes > strong {
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 900;
}

.serviceScheduleBlockedRoutes > small {
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 760;
}

.serviceScheduleDayRow {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) minmax(5.8rem, 0.8fr) minmax(5.8rem, 0.8fr);
  align-items: center;
  gap: 0.18rem 0.45rem;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 0.42rem;
  background: #ffffff;
  padding: 0.34rem 0.46rem;
}

.serviceScheduleDayRow.blocked {
  border-color: rgba(245, 158, 11, 0.42);
  background: #fffbeb;
}

.serviceScheduleDayRow time,
.serviceScheduleDayRow strong,
.serviceScheduleDayRow span,
.serviceScheduleDayRow small,
.serviceScheduleDayRow em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceScheduleDayRow time {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 850;
}

.serviceScheduleDayRow strong {
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
}

.serviceScheduleDayRow span,
.serviceScheduleDayRow small,
.serviceScheduleDayRow em {
  color: #64748b;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
}

.serviceScheduleDayRow em {
  grid-column: 2 / -1;
}

.serviceScheduleDayRow .serviceDispatchStopActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.24rem;
  overflow: visible;
  white-space: normal;
}

.serviceScheduleDayRow .serviceDispatchStopActions a,
.serviceScheduleDayRow .serviceDispatchStopActions em {
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  padding: 0.18rem 0.38rem;
  text-decoration: none;
}

.serviceScheduleDayRow .serviceDispatchStopActions em {
  border-color: rgba(148, 163, 184, 0.42);
  color: #64748b;
}

.serviceScheduleFitSuggestions,
.serviceScheduleFitTechs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

.serviceScheduleFitSuggestions button,
.serviceScheduleFitTechs button {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  min-height: 2.85rem;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 0.48rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.34rem 0.46rem;
  text-align: left;
}

.serviceScheduleFitSuggestions button.full,
.serviceScheduleFitSuggestions button.busy,
.serviceScheduleFitTechs button.full,
.serviceScheduleFitTechs button.busy {
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.serviceScheduleFitTechs button.open {
  border-color: rgba(34, 197, 94, 0.35);
}

.serviceScheduleCalendar {
  display: grid;
  grid-auto-columns: minmax(11.5rem, 14rem);
  grid-auto-flow: column;
  gap: 0.42rem;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.serviceScheduleCalendar button {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-width: 0;
  min-height: 6.6rem;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 0.5rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.46rem;
  text-align: left;
}

.serviceScheduleCalendar button.full,
.serviceScheduleCalendar button.busy {
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.serviceScheduleCalendar button.selected {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);
}

.serviceScheduleCalendar button:disabled {
  cursor: not-allowed;
}

.serviceScheduleCalendar span,
.serviceScheduleCalendar em {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.serviceScheduleCalendar strong,
.serviceScheduleCalendar small,
.serviceScheduleCalendar b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceScheduleCalendar strong {
  font-size: 0.76rem;
  font-weight: 900;
}

.serviceScheduleCalendar small,
.serviceScheduleCalendar b {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.serviceScheduleCalendar em {
  font-style: normal;
}

.serviceScheduleCalendar b {
  border-radius: 0.36rem;
  background: rgba(241, 245, 249, 0.88);
  padding: 0.18rem 0.28rem;
}

.serviceScheduleFitSuggestions button:disabled,
.serviceScheduleFitTechs button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.serviceScheduleFitSuggestions strong,
.serviceScheduleFitSuggestions span,
.serviceScheduleFitSuggestions small,
.serviceScheduleFitTechs strong,
.serviceScheduleFitTechs span,
.serviceScheduleFitTechs small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceScheduleFitSuggestions strong,
.serviceScheduleFitTechs strong {
  font-size: 0.74rem;
  font-weight: 900;
}

.serviceScheduleFitSuggestions span,
.serviceScheduleFitSuggestions small,
.serviceScheduleFitTechs span,
.serviceScheduleFitTechs small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.serviceScheduleFitRisks span {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fffbeb;
  color: #92400e;
}

.serviceAppointmentConflictReview {
  display: grid;
  gap: 0.36rem;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: 0.5rem;
  background: #fffbeb;
  padding: 0.5rem 0.58rem;
}

.serviceAppointmentConflictReview strong {
  width: fit-content;
  background: #ffffff;
  color: #92400e;
}

.serviceAppointmentConflictReview ul {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  padding-left: 1rem;
  color: #78350f;
  font-size: 0.72rem;
  font-weight: 760;
}

.serviceAppointmentConflictReview .serviceInlineSwitch {
  border-color: rgba(245, 158, 11, 0.34);
  background: #ffffff;
}

@media (max-width: 760px) {
  .serviceScheduleCalendar {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .serviceScheduleFitTechs {
    grid-template-columns: 1fr;
  }

  .serviceScheduleDayRow {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.55rem;
  }

  .serviceScheduleDayRow time {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .serviceScheduleDayRow strong {
    grid-column: 1;
    grid-row: 1;
  }

  .serviceScheduleDayRow span,
  .serviceScheduleDayRow small,
  .serviceScheduleDayRow em {
    grid-column: 1 / -1;
  }
}

.serviceHandoffList {
  display: grid;
  gap: 8px;
}

.serviceHandoffList span {
  display: grid;
  gap: 3px;
  border-left: 3px solid rgba(15, 118, 110, 0.34);
  padding: 6px 10px;
  color: #334155;
  background: rgba(240, 253, 250, 0.72);
}

.serviceHandoffList b,
.serviceHandoffList em {
  color: #64748b;
  font-size: 0.74rem;
  font-style: normal;
}

.serviceCommunicationLinkActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}

.serviceCommunicationLinkActions a {
  min-height: 1.75rem;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 0.42rem;
  padding: 0.25rem 0.5rem;
  color: #0f766e;
  background: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.1;
  text-decoration: none;
}

.serviceCommunicationLinkActions a:hover {
  border-color: rgba(15, 118, 110, 0.44);
  background: rgba(240, 253, 250, 0.92);
}

.serviceEmptyState {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 360px;
  padding: 30px;
  text-align: center;
}

.serviceEmptyOrb {
  width: 86px;
  height: 86px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 30% 25%, #ffffff, transparent 28%),
    linear-gradient(135deg, #0f766e, #0ea5e9);
  box-shadow: 0 20px 45px rgba(14, 116, 144, 0.25);
}

.serviceCustomerEmptyState {
  align-content: center;
  justify-items: center;
  color: #172033;
}

.serviceCustomerEmptyState > div:first-of-type {
  display: grid;
  gap: 0.45rem;
  max-width: 36rem;
}

.serviceCustomerEmptyState strong {
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  letter-spacing: -0.03em;
}

.serviceCustomerEmptyState p {
  margin: 0;
  color: #52637a;
  font-size: 0.95rem;
  line-height: 1.45;
}

.serviceEmptySteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: min(100%, 48rem);
  margin-top: 0.25rem;
}

.serviceEmptySteps span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: center;
  min-height: 4rem;
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(240, 253, 250, 0.92));
  color: #26364d;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
}

.serviceEmptySteps b {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 0.8rem;
}

.serviceEmptyActions {
  justify-content: center;
}

.serviceCustomerEmptyState .serviceEmptyActions .compactButton {
  min-width: 8.5rem;
  border-color: rgba(15, 118, 110, 0.24);
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.serviceCustomerEmptyState .serviceEmptyActions .compactButton + .compactButton {
  background: #ffffff;
  color: #0f3f3a;
  box-shadow: none;
}

.serviceCustomerRecordsEmptyState {
  align-content: start;
  justify-items: start;
  gap: 0.65rem;
  padding: 1rem;
  min-height: 10rem;
  border: 1px dashed rgba(15, 118, 110, 0.2);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.82), rgba(248, 250, 252, 0.94));
  color: #1f2a3d;
  text-align: left;
}

.serviceCustomerRecordsEmptyState strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.serviceCustomerRecordsEmptyState p {
  margin: 0;
  color: #5f7086;
  font-size: 0.82rem;
  line-height: 1.4;
}

.serviceCustomerRecordsEmptyState .compactButton {
  border-color: rgba(15, 118, 110, 0.24);
  background: #ffffff;
  color: #0f3f3a;
}

.serviceRecordIndex {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr);
  gap: 0.7rem;
  align-items: start;
  margin: 0 18px 12px;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.13), transparent 42%),
    rgba(248, 250, 252, 0.96);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  padding: 0.72rem;
}

.serviceRecordIndex label {
  display: grid;
  gap: 0.3rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 880;
}

.serviceRecordIndex input {
  min-height: 2.3rem;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.7rem;
  font: inherit;
}

.serviceRecordIndex > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
}

.serviceRecordIndex button {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  padding: 0.38rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 900;
}

.serviceRecordIndex button.active {
  border-color: rgba(14, 116, 144, 0.35);
  background: #ccfbf1;
  color: #0f766e;
}

.serviceRecordIndex b,
.serviceRecordIndex span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceRecordIndex em {
  flex: 1 0 100%;
  overflow: hidden;
  color: #0f766e;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceRecordIndex p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.serviceRecordTabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 18px 0;
  scrollbar-width: thin;
}

.serviceRecordTabs button {
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 8px 10px;
  color: #475569;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 800;
  cursor: pointer;
}

.serviceRecordTabs button.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #155e75, #0f766e);
}

.serviceRecordTabs button:disabled {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.14);
  cursor: not-allowed;
  opacity: 1;
}

.serviceRecordTabs span {
  margin-left: 6px;
  opacity: 0.75;
}

.serviceTimeline {
  display: grid;
  gap: 12px;
}

.serviceTimelineSectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
}

.serviceTimelineSectionHeader span {
  color: #64748b;
  font-weight: 800;
}

.serviceTimelineEvent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
}

.serviceTimelineDot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: #0f766e;
  box-shadow: 0 0 0 6px rgba(20, 184, 166, 0.12);
}

.serviceTimelineEvent > div {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.serviceTimelineCommunicationEvent > div {
  border-color: rgba(15, 118, 110, 0.16);
  background: rgba(240, 253, 250, 0.72);
}

.serviceTimelineMeta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #0f172a;
}

.serviceTimelineMeta span,
.serviceTimelineEvent p {
  color: #64748b;
}

.serviceRecordTableHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.serviceRecordTableHeader span {
  color: #64748b;
  font-weight: 800;
}

.serviceOverviewGrid,
.serviceRecordStack,
.serviceRecordCardList,
.serviceAllDetails,
.serviceMediaWorkspace,
.serviceFileList {
  display: grid;
  gap: 14px;
}

.serviceOverviewGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serviceWideCard {
  grid-column: 1 / -1;
}

.serviceMiniCountGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.serviceMiniCountGrid span {
  border-radius: 16px;
  padding: 11px;
  color: #475569;
  background: rgba(248, 250, 252, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
}

.serviceMiniCountGrid b {
  display: block;
  color: #0f172a;
  font-size: 1.15rem;
}

.serviceDetailList {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
}

.serviceDetailList div {
  display: grid;
  grid-template-columns: minmax(105px, 0.38fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.serviceDetailList.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serviceDetailList.compact div {
  display: block;
}

.serviceDetailList dt {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceDetailList dd {
  min-width: 0;
  margin: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.serviceRecordCardGroup {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.serviceRecordCard {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.78));
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.serviceRecordCard.money {
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.75));
}

.serviceRecordCardTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.serviceRecordKicker {
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.serviceRecordCard h3 {
  margin: 2px 0 4px;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.serviceRecordCard p {
  margin: 0;
  color: #64748b;
}

.serviceRecordChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.serviceRecordChips span,
.serviceMediaStatus,
.serviceFileList article > span {
  border-radius: 999px;
  padding: 5px 8px;
  color: #475569;
  background: rgba(100, 116, 139, 0.1);
  font-size: 0.7rem;
  font-weight: 900;
}

.serviceRecordChips span.success,
.serviceMediaStatus.success {
  color: #065f46;
  background: rgba(16, 185, 129, 0.14);
}

.serviceRecordChips span.warning,
.serviceMediaStatus.warning {
  color: #92400e;
  background: rgba(245, 158, 11, 0.16);
}

.serviceRecordChips span.danger,
.serviceMediaStatus.danger,
.serviceFileList article > span.danger {
  color: #991b1b;
  background: #fee2e2;
}

.serviceAppointmentBookingEvidence {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
  margin: 0.2rem 0 0.45rem;
}

.serviceAppointmentBookingEvidence span {
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 0.58rem;
  background: rgba(239, 246, 255, 0.72);
  padding: 0.42rem 0.48rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceAppointmentBookingEvidence b {
  display: block;
  color: #1d4ed8;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceTimelineBookingEvidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0.45rem;
}

.serviceTimelineSourceEvidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
  margin-top: 0.45rem;
}

.serviceTimelineBookingEvidence span {
  min-width: 0;
  border: 1px solid rgba(22, 163, 74, 0.16);
  border-radius: 0.55rem;
  background: rgba(240, 253, 244, 0.74);
  padding: 0.38rem 0.44rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceTimelineSourceEvidence span {
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.55rem;
  background: rgba(239, 246, 255, 0.76);
  padding: 0.38rem 0.44rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceTimelineBookingEvidence b {
  display: block;
  color: #15803d;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceTimelineSourceEvidence b {
  display: block;
  color: #1d4ed8;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceRecordActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.serviceRecordActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.5rem;
  padding: 0 0.72rem;
  color: #0f172a;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.serviceRecordActionButton:disabled {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.serviceRecordActionNote {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  border: 1px solid rgba(59, 130, 246, 0.16);
  border-radius: 0.5rem;
  padding: 0 0.72rem;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.78rem;
  font-weight: 850;
}

.serviceRecordActionButton.danger {
  border-color: rgba(220, 38, 38, 0.28);
  background: #fff5f5;
  color: #991b1b;
}

.serviceRecordActionButton.danger.confirmDanger {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fee2e2;
  color: #7f1d1d;
}

.serviceAmountBadge {
  align-self: flex-start;
  border-radius: 999px;
  padding: 7px 10px;
  color: #065f46;
  background: rgba(16, 185, 129, 0.14);
  white-space: nowrap;
}

.serviceDetailsDisclosure {
  margin-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
}

.serviceDetailsDisclosure.group {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.serviceDetailsDisclosure summary {
  color: #155e75;
  font-weight: 900;
  cursor: pointer;
}

.serviceDetailsDisclosure pre {
  max-height: 360px;
  overflow: auto;
  border-radius: 16px;
  padding: 12px;
  color: #dbeafe;
  background: #0f172a;
  font-size: 0.76rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.serviceRecordInspectorGrid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.serviceRecordInspector h4 {
  margin: 0 0 8px;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 900;
}

.serviceNestedRecords summary {
  color: #0f766e;
}

.serviceNestedRecordList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.serviceNestedRecord {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-radius: 16px;
  padding: 10px;
  background: rgba(240, 253, 250, 0.72);
}

.serviceNestedRecord span {
  min-width: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.serviceNestedRecord b {
  display: block;
  color: #64748b;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceEstimateDraftEditor {
  border-color: rgba(37, 99, 235, 0.14);
}

.serviceEstimateDraftEditor > p {
  margin: 0.55rem 0 0;
}

.serviceEstimateDraftToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.65rem;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 0.8rem;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.98));
  padding: 0.55rem;
}

.serviceEstimateDraftToolbar span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 750;
}

.serviceEstimateDraftEditorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.75rem;
}

.serviceEstimateDraftEditor h4 {
  margin: 0 0 0.45rem;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceEstimateDraftRows {
  display: grid;
  gap: 0.45rem;
}

.serviceEstimateDraftRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid rgba(37, 99, 235, 0.1);
  border-radius: 0.7rem;
  background: rgba(239, 246, 255, 0.55);
  padding: 0.55rem;
}

.serviceEstimateDraftRow span {
  min-width: 0;
}

.serviceEstimateDraftRow b,
.serviceEstimateDraftRow small {
  display: block;
}

.serviceEstimateDraftRow b {
  color: #0f172a;
  font-size: 0.82rem;
}

.serviceEstimateDraftRow small {
  margin-top: 0.1rem;
  color: #64748b;
  font-size: 0.72rem;
}

.serviceEstimateDraftToolbar button,
.serviceEstimateDraftRow button,
.serviceEstimateEditPanel button {
  min-height: 2rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 0.55rem;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.serviceEstimateDraftToolbar button:disabled,
.serviceEstimateDraftRow button:disabled,
.serviceEstimateEditPanel button:disabled {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.serviceEstimateEditPanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  align-items: end;
  margin-top: 0.75rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.96);
  padding: 0.7rem;
}

.serviceEstimateEditPanel label {
  display: grid;
  gap: 0.2rem;
}

.serviceEstimateEditPanel label span {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 800;
}

.serviceEstimateEditPanel input {
  min-height: 2.15rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.55rem;
  padding: 0 0.6rem;
}

.serviceEstimateEditPanel > small {
  align-self: center;
  color: #64748b;
  font-size: 0.72rem;
}

.serviceNestedRecord em {
  color: #64748b;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.serviceMediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.serviceMediaCard,
.serviceFileList article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.serviceMediaStatus {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.serviceMediaCard button {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
  padding: 0;
  background: #e2e8f0;
  cursor: zoom-in;
}

.serviceMediaCard img,
.serviceMediaCard video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serviceMediaCard div,
.serviceFileList article {
  padding: 12px;
}

.serviceMediaCard strong,
.serviceMediaCard span,
.serviceFileList strong,
.serviceFileList span {
  display: block;
}

.serviceMediaCard strong,
.serviceFileList h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.serviceMediaCard span,
.serviceFileList p,
.serviceFileList small {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.78rem;
}

.serviceMediaCard a,
.serviceFileList a {
  display: inline-flex;
  margin-top: 9px;
  color: #0369a1;
  font-weight: 900;
}

.serviceMediaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}

.serviceMediaActions button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #ecfeff;
  background: linear-gradient(135deg, #155e75, #0f766e);
  font-weight: 900;
  cursor: pointer;
}

.serviceMediaActions a {
  margin-top: 0;
}

.serviceFileList article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.serviceFileList article > span {
  color: #64748b;
  font-weight: 800;
}

.serviceMediaLightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  background: rgba(15, 23, 42, 0.92);
}

.serviceMediaLightbox img,
.serviceMediaLightbox video {
  justify-self: center;
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.serviceMediaLightbox > div {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 920px;
  border-radius: 18px;
  padding: 12px 14px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.84);
}

.serviceMediaLightbox a,
.serviceMediaClose {
  color: #cffafe;
  font-weight: 900;
}

.serviceMediaClose {
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.serviceRecordTableScroller {
  overflow: auto;
}

.serviceRecordTable {
  min-width: 760px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.serviceRecordTable th,
.serviceRecordTable td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.serviceRecordTable th {
  color: #475569;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.serviceMobileNav {
  position: fixed;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 20;
  display: none;
  gap: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.2);
}

.serviceMobileNav button {
  flex: 1 1;
  border: 0;
  border-radius: 16px;
  padding: 11px;
  background: transparent;
  color: #475569;
  font-weight: 900;
}

.serviceMobileNav button.active {
  color: #ffffff;
  background: linear-gradient(135deg, #155e75, #0f766e);
}

.serviceMobileNav button:disabled {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.14);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 980px) {
  .windowTitle {
    gap: 8px;
  }

  .appTabSwitch button {
    padding: 6px 9px;
  }

  .serviceShell {
    display: block;
    min-height: calc(100vh - 120px);
    padding: 10px 10px 86px;
  }

  .serviceCustomerPane,
  .serviceProfilePane,
  .serviceRecordsPane {
    display: none;
    min-height: calc(100vh - 214px);
  }

  .serviceCustomerPane.mobileActive,
  .serviceProfilePane.mobileActive,
  .serviceRecordsPane.mobileActive {
    display: flex;
  }

  .servicePaneHeader,
  .serviceColumnHeader {
    padding: 18px;
  }

  .serviceActionGrid,
  .serviceMetricGrid,
  .serviceOverviewGrid,
  .serviceDetailList.compact,
  .serviceMiniCountGrid {
    grid-template-columns: 1fr;
  }

  .serviceProfileContent,
  .serviceRecordsBody {
    padding: 14px;
  }

  .serviceHeroCard,
  .serviceRecordCardTop,
  .serviceFileList article {
    align-items: flex-start;
    flex-direction: column;
  }

  .serviceHeroCard {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .serviceDetailList div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .serviceNestedRecord {
    grid-template-columns: 1fr;
  }

  .serviceMediaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .serviceMediaCard button {
    height: 132px;
  }

  .serviceDetailsDisclosure pre {
    max-height: 280px;
    font-size: 0.7rem;
  }

  .serviceMediaLightbox {
    padding: 10px;
  }

  .serviceMobileNav {
    display: flex;
  }

  .chatShell {
    display: block;
    min-height: calc(100dvh - 76px - env(safe-area-inset-bottom));
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .chatConversationRail,
  .chatMain {
    display: none;
    min-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    border-radius: 26px;
  }

  .chatDetailWorkbench {
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .chatContextPanel {
    display: none;
  }

  .chatConversationRail.mobileActive {
    display: flex;
  }

  .chatMain.mobileActive {
    display: grid;
  }

  .chatRailHeader,
  .chatHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
  }

  .chatHeader {
    flex-wrap: wrap;
  }

  .chatMobileContextStrip.mobileOnly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    width: 100%;
    border-top: 1px solid rgba(60, 60, 67, 0.08);
    padding-top: 0.58rem;
  }

  .chatMobileContextStrip > span {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
  }

  .chatMobileContextStrip strong,
  .chatMobileContextStrip small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatMobileContextStrip strong {
    color: #111827;
    font-size: 0.82rem;
    font-weight: 820;
  }

  .chatMobileContextStrip small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 760;
  }

  .chatHeader h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatTimeline {
    padding: 14px 12px 160px;
  }

  .chatMessage {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 14px;
  }

  .chatAvatar,
  .chatMessageAvatar {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    font-size: 0.8rem;
  }

  .chatBubble {
    border-radius: 19px;
    padding: 11px 12px;
  }

  .chatMessageActions {
    gap: 5px;
  }

  .chatMessageActions button:nth-of-type(n + 5) {
    display: none;
  }

  .chatComposer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 42px rgba(15, 23, 42, 0.12);
  }

  .chatComposerInput textarea {
    min-height: 58px;
  }

  .gifGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 230px;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .serviceShell {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }

  .serviceRecordsPane {
    grid-column: 1 / -1;
    min-height: 560px;
  }
}

@media (max-width: 520px) {
  .serviceMediaGrid {
    grid-template-columns: 1fr;
  }

  .serviceMediaCard button {
    height: 210px;
  }
}

/* Mail layout pass: closer to a native three-column email client. */
@media (min-width: 921px) {
  .inboxAppShell {
    padding: 0;
    background: #eef2f7;
  }

  .desktopWindowBar {
    height: 3rem;
    border-radius: 0;
  }

  .inboxShell.nativeMailShell {
    height: calc(100dvh - 3rem);
    grid-template-columns: minmax(13.5rem, 16rem) minmax(24rem, 31rem) minmax(38rem, 1fr);
    gap: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .sidebar {
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border-right: 1px solid var(--mail-separator);
    background: linear-gradient(180deg, rgba(236, 240, 247, 0.96), rgba(226, 232, 242, 0.96));
  }

  .sidebarBrandBlock {
    min-height: 2.2rem;
    padding: 0.25rem 0.35rem;
    background: transparent;
    border-color: transparent;
  }

  .brandGlyph,
  .profileCard,
  .sidebarStorageCard,
  .tagList {
    display: none;
  }

  .sidebarSectionHeader {
    margin: 0.45rem 0 0.18rem;
    padding: 0 0.45rem;
  }

  .mailboxList,
  .folderList {
    gap: 0.05rem;
  }

  .mailboxButton,
  .folderRow,
  .tagRow {
    min-height: 2.35rem;
    border: 0;
    border-radius: 10px;
    padding: 0.38rem 0.55rem;
    background: transparent;
    box-shadow: none;
  }

  .mailboxButton span:not(.mailboxTypePill),
  .mailboxButton small,
  .mailboxTypePill {
    display: none;
  }

  .mailboxButton.active,
  .folderRow.active {
    background: rgba(10, 132, 255, 0.16);
  }

  .folderRowLabel {
    font-size: 0.9rem;
    font-weight: 700;
  }

  .folderRowMeta,
  .sidebarCount {
    min-width: 1.65rem;
    border-radius: 999px;
    padding: 0.12rem 0.42rem;
    background: rgba(10, 132, 255, 0.13);
    color: #0057c8;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 850;
  }

  .messageColumn {
    border-right: 1px solid var(--mail-separator);
    background: #f8fafc;
  }

  .messageToolbar {
    min-height: 2.75rem;
    padding: 0.45rem 0.72rem 0.25rem;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid var(--mail-separator);
  }

  .messageToolbar h2 {
    margin: 0;
    font-size: 1.02rem;
  }

  .columnSubhead,
  .messageToolbarStats {
    display: none;
  }

  .searchBar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    padding: 0.48rem 0.62rem;
    background: rgba(248, 250, 252, 0.96);
  }

  .searchInputShell {
    min-height: 2.25rem;
  }

  .messageColumn .segmentedControl,
  .messageColumn .iconActionButton,
  .messageSubtoolbar .desktopOnly,
  .messageScopeRail,
  .bulkActionBar:not(.active),
  .contextRibbon {
    display: none;
  }

  .bulkActionBar.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 0.48rem;
    min-height: 6.15rem;
    overflow: visible;
  }

  .bulkActionBar.active > .bulkSelectAllButton {
    order: 2;
  }

  .bulkActionBar.active > .bulkActionButtons {
    display: flex !important;
    order: 1;
    width: 100%;
    min-height: 2.75rem;
    overflow-x: auto;
  }

  .messageSubtoolbar {
    padding: 0.42rem 0.62rem 0.5rem;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid var(--mail-separator);
  }

  .filterChips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.12rem;
    padding: 0.13rem;
    border-radius: 11px;
  }

  .filterChip {
    min-height: 1.85rem;
    padding: 0 0.4rem;
    font-size: 0.76rem;
  }

  .messageWorkspace {
    display: block;
    min-height: 0;
  }

  .messageResultsPanel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    background: #f8fafc;
  }

  .messageList {
    padding: 0;
    background: #f8fafc;
  }

  .messageSectionLabel {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.45rem 0.72rem 0.28rem;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid rgba(60, 60, 67, 0.08);
    text-transform: none;
  }

  .messageRowShell {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    border-bottom: 1px solid rgba(60, 60, 67, 0.09);
  }

  .messageBulkSelect {
    min-height: 4.65rem;
    background: transparent;
  }

  .messageBulkSelect .bulkCheckBox {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 5px;
  }

  .messageButton {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    min-height: 4.65rem;
    padding: 0.52rem 0.68rem 0.5rem 0.15rem;
    background: transparent;
  }

  .messageButton.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(10, 84, 188, 0.92), rgba(28, 98, 196, 0.86));
  }

  .messageButton.active .messageTopRow strong,
  .messageButton.active .messageSubjectRow,
  .messageButton.active .messageSubjectRow span,
  .messageButton.active .messageMeta,
  .messageButton.active .messageTopRow span {
    color: rgba(255, 255, 255, 0.92);
  }

  .messageAvatar {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    font-size: 0.68rem;
  }

  .messageTopRow strong,
  .messageSubjectRow span:first-child {
    font-size: 0.86rem;
    line-height: 1.15;
  }

  .messageTopRow span {
    font-size: 0.7rem;
  }

  .messageMeta {
    -webkit-line-clamp: 1;
    font-size: 0.78rem;
  }

  .threadMetaRow,
  .messageRowAction {
    display: none;
  }

  .messageListFooter {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.72rem;
    background: rgba(248, 250, 252, 0.96);
  }

  .detailColumn {
    background: #ffffff;
  }

  .detailToolbar {
    min-height: 3rem;
    padding: 0.48rem 0.75rem;
    border-bottom: 1px solid var(--mail-separator);
    background: rgba(255, 255, 255, 0.98);
  }

  .detailToolbar > div:first-child {
    display: none;
  }

  .detailToolbar .detailActions {
    width: 100%;
    justify-content: flex-start;
  }

  .toolbarIconOnly {
    min-width: 2.15rem;
    height: 2.15rem;
    border-radius: 9px;
  }

  .folderSelect.toolbarSelect {
    width: 7.5rem;
    min-height: 2.15rem;
  }

  .messageDetail {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
  }

  .messageHero {
    display: block;
    max-width: none;
    margin: 0;
    padding: 1.05rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--mail-separator);
  }

  .messageHeroAvatar {
    float: left;
    width: 2.45rem;
    height: 2.45rem;
    margin: 0.15rem 0.78rem 0.2rem 0;
    border-radius: 8px;
  }

  .messageHeroCopy h3 {
    max-width: none;
    margin: 0 0 0.62rem;
    font-size: clamp(1.55rem, 2vw, 2.25rem);
    font-weight: 520;
    letter-spacing: -0.04em;
    line-height: 1.08;
  }

  .messageInlineMeta {
    display: grid;
    gap: 0.14rem;
    color: var(--mail-muted);
  }

  .attachmentList,
  .threadStrip {
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-width: 0 0 1px;
    padding: 0.78rem 1.25rem;
    background: #ffffff;
  }

  .messageBodyMode {
    position: static;
    align-self: flex-start;
    margin: 0.7rem 1.25rem 0;
  }

  .plainMessageBody,
  .messageHtmlFrame {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .plainMessageBody {
    padding: 1.25rem clamp(2rem, 8vw, 7rem);
  }

  .messageHtmlFrame {
    flex: 1 1 36rem;
    height: auto;
    min-height: 36rem;
    max-height: none;
  }

  .messageCommentsPanel {
    position: sticky;
    bottom: 0;
    z-index: 3;
    max-width: none;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
            backdrop-filter: blur(18px) saturate(1.15);
  }

  .messageCommentsHeader,
  .messageCommentsList,
  .messageCommentsDisabled {
    display: none;
  }

  .messageCommentComposer {
    border: 0;
    border-radius: 0;
  }

  .messageCommentComposer textarea {
    min-height: 2.45rem;
    max-height: 6rem;
    padding: 0.75rem 1rem;
    resize: none;
  }

  .messageCommentComposerFooter {
    padding: 0.45rem 0.75rem;
  }

  .replyDock {
    display: none;
  }
}

@media (max-width: 920px) {
  .inboxShell.nativeMailShell[data-mobile-menu-open="true"] .messageColumn.mobileActive,
  .inboxShell.nativeMailShell[data-mobile-menu-open="true"] .detailColumn.mobileActive {
    display: flex !important;
  }

  .inboxShell.nativeMailShell[data-mobile-menu-open="true"] .sidebar.mobileDrawerOpen {
    position: fixed;
    top: calc(3.55rem + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    z-index: 42;
    display: flex !important;
    width: min(21.5rem, 86vw);
    min-width: 0;
    max-width: 86vw;
    height: auto;
    inline-size: min(21.5rem, 86vw);
    min-inline-size: 0;
    max-inline-size: 86vw;
    padding: 0.9rem 0.85rem calc(5.9rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-right: 1px solid rgba(60, 60, 67, 0.14);
    border-radius: 0 26px 26px 0;
    background:
      linear-gradient(180deg, rgba(247, 249, 252, 0.98), rgba(232, 238, 247, 0.97)),
      radial-gradient(circle at 0 0, rgba(10, 132, 255, 0.14), transparent 18rem);
    box-shadow: 18px 0 48px rgba(15, 23, 42, 0.22);
    transform: translateX(0);
    animation: mobileSidebarIn 180ms ease-out;
  }

  .mobileSidebarScrim {
    position: fixed;
    inset: calc(3.55rem + env(safe-area-inset-top)) 0 0;
    z-index: 41;
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.28);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }

  .inboxShell.nativeMailShell[data-mobile-menu-open="true"] .mobileSidebarScrim {
    pointer-events: auto;
  }

  .sidebar.mobileDrawerOpen .sidebarBrandBlock {
    position: sticky;
    top: -0.9rem;
    z-index: 2;
    margin: -0.9rem -0.85rem 0.3rem;
    padding: 0.85rem;
    border-radius: 0;
    background: rgba(247, 249, 252, 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
            backdrop-filter: blur(18px) saturate(1.15);
  }

  .sidebar.mobileDrawerOpen .profileCard,
  .sidebar.mobileDrawerOpen .sidebarStorageCard {
    display: flex;
  }

  .sidebar.mobileDrawerOpen .mailboxButton,
  .sidebar.mobileDrawerOpen .folderRow,
  .sidebar.mobileDrawerOpen .tagRow {
    min-height: 2.85rem;
  }

  .sidebar.mobileDrawerOpen .mailboxButton span:not(.mailboxTypePill),
  .sidebar.mobileDrawerOpen .mailboxButton small,
  .sidebar.mobileDrawerOpen .mailboxTypePill {
    display: initial;
  }

  .messageToolbar .backButton.mobileOnly {
    min-width: 4.3rem;
  }
}

@keyframes mobileSidebarIn {
  from {
    transform: translateX(-1.5rem);
    opacity: 0.72;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.phoneAppShell,
.fieldAppShell,
.adminAppShell {
  min-height: calc(100vh - 4.4rem);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 34rem),
    linear-gradient(135deg, #f7fbff 0%, #eef4fa 50%, #f8fafc 100%);
  color: #0f172a;
}

.phoneAppShell {
  display: grid;
  grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr);
  overflow: hidden;
}

.phoneAppShellHidden {
  display: none !important;
}

.phoneGlobalCallTray {
  position: fixed;
  top: calc(4.85rem + env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  width: min(30rem, calc(100vw - 1.7rem));
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0.8rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.8rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.phoneUrgentTaskDrawer {
  width: min(24rem, calc(100vw - 1.7rem));
  padding: 0.62rem 0.7rem;
  border-radius: 999px;
}

.phoneUrgentTaskDrawer .phoneGlobalCallCopy small {
  max-width: 16rem;
}

.phoneUrgentTaskDrawer .phoneGlobalCallActions {
  align-items: center;
  flex-wrap: nowrap;
}

.phoneUrgentTaskMore {
  position: relative;
}

.phoneUrgentTaskMore summary {
  display: inline-flex;
  min-height: 2.25rem;
  cursor: pointer;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #f8fafc;
  padding: 0 0.78rem;
  color: #172033;
  font-size: 0.82rem;
  font-weight: 850;
  list-style: none;
}

.phoneUrgentTaskMore summary::-webkit-details-marker {
  display: none;
}

.phoneUrgentTaskMore div {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 2;
  display: grid;
  min-width: 12rem;
  gap: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.9rem;
  background: #ffffff;
  padding: 0.5rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.phoneUrgentTaskMore:not([open]) div {
  display: none;
}

.phoneUrgentTaskMore .secondaryAction {
  justify-content: flex-start;
  width: 100%;
}

.phoneTroubleshootMenu {
  position: relative;
}

.phoneTroubleshootMenu summary {
  display: inline-flex;
  min-height: 2.5rem;
  cursor: pointer;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.65rem;
  background: #f8fafc;
  padding: 0 0.9rem;
  color: #172033;
  font-size: 0.82rem;
  font-weight: 800;
  list-style: none;
}

.phoneTroubleshootMenu summary::-webkit-details-marker {
  display: none;
}

.phoneTroubleshootMenu div {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 8;
  display: grid;
  min-width: 12rem;
  gap: 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.9rem;
  background: #ffffff;
  padding: 0.5rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.phoneTroubleshootMenu:not([open]) div {
  display: none;
}

.phoneTroubleshootMenu button {
  justify-content: flex-start;
  width: 100%;
}

.phoneGlobalCallTray.ringing {
  border-color: rgba(21, 128, 61, 0.24);
}

.phoneGlobalCallTray.callback {
  border-color: rgba(11, 99, 206, 0.24);
}

.phoneGlobalCallTray span,
.phoneGlobalCallTray small {
  display: block;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneGlobalCallTray span {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.phoneGlobalCallTray strong {
  display: block;
  overflow: hidden;
  margin: 0.12rem 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneGlobalCallActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.phoneGlobalCallActions.ringingOnly {
  display: grid;
  grid-template-columns: repeat(2, minmax(6.5rem, 1fr));
  width: min(17rem, 100%);
}

.phoneGlobalCallActions.ringingOnly .answerButton,
.phoneGlobalCallActions.ringingOnly .hangupButton {
  min-height: 2.75rem;
}

.phoneGlobalActiveQueue {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.phoneGlobalActiveQueue span {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.7rem;
  background: rgba(15, 23, 42, 0.05);
  padding: 0.35rem 0.45rem;
}

.phoneGlobalActiveQueue b,
.phoneGlobalActiveQueue em {
  overflow: hidden;
  color: #334155;
  font-size: 0.74rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneRail {
  border-right: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.phonePanelHeader,
.fieldHero,
.adminHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem;
}

.phonePanelHeader h2,
.fieldHero h2 {
  margin: 0.2rem 0 0.1rem;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  letter-spacing: -0.04em;
}

.phonePanelHeader p,
.fieldHero p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.fieldNativeReadinessStrip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0 1.15rem 0.75rem;
}

.fieldNativeReadinessStrip span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-left: 0.24rem solid #0ea5e9;
  border-radius: 0.62rem;
  background: rgba(248, 250, 252, 0.96);
  padding: 0.5rem 0.58rem;
}

.fieldNativeReadinessStrip span.ready {
  border-left-color: #16a34a;
}

.fieldNativeReadinessStrip span.pending {
  border-left-color: #2563eb;
}

.fieldNativeReadinessStrip span.needs_action {
  border-left-color: #d97706;
}

.fieldNativeReadinessStrip b,
.fieldNativeReadinessStrip strong,
.fieldNativeReadinessStrip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldNativeReadinessStrip b {
  color: #0369a1;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fieldNativeReadinessStrip strong {
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 900;
}

.fieldNativeReadinessStrip small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
}

.phonePanelHeader button,
.fieldHero button,
.phoneToolbarActions button,
.phoneComposer button,
.fieldTimeOffForm button,
.fieldJobNoteComposer button,
.fieldJobStatusComposer button,
.fieldMaterialComposer button,
.fieldPurchaseOrderComposer button {
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 750;
  padding: 0.72rem 1rem;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}

.phoneSearchRow {
  padding: 0 1.15rem 0.85rem;
}

.phoneRailStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0 1.15rem 0.85rem;
}

.phoneRailStats span {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.9rem;
  background: rgba(248, 250, 252, 0.78);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
  padding: 0.55rem;
}

.phoneRailStats strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
}

.phoneSearchRow input,
.fieldTimeOffForm input,
.fieldTimeOffForm textarea,
.fieldCallNoteComposer select,
.fieldJobNoteComposer textarea,
.fieldJobStatusComposer select,
.fieldMaterialComposer input,
.fieldMaterialComposer select,
.fieldPurchaseOrderComposer input,
.fieldPurchaseOrderComposer select,
.phoneComposer input,
.phoneComposer textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.84);
  color: #0f172a;
  font: inherit;
  padding: 0.8rem 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.phoneSegment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin: 0 1.15rem 0.9rem;
  padding: 0.35rem;
  border-radius: 1.1rem;
  background: rgba(226, 232, 240, 0.65);
}

.phoneSegment button {
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: #64748b;
  font-weight: 800;
  padding: 0.65rem 0.75rem;
}

.phoneSegment button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
}

.phoneThreadList {
  min-height: 0;
  overflow: auto;
  padding: 0 0.65rem 1rem;
}

.phoneThread {
  width: 100%;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  position: relative;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: #0f172a;
  padding: 0.75rem;
  text-align: left;
}

.phoneThread.active {
  background: #dbeafe;
  box-shadow: inset 3px 0 0 #0ea5e9;
}

.phoneAvatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #fff;
  font-weight: 850;
}

.phoneThreadText {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.phoneThreadText strong,
.phoneThreadText small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneThreadText small,
.phoneThreadMeta,
.phoneBubble span,
.phoneBubble small,
.fieldCardHeader span,
.fieldMetricGrid small,
.fieldJobList small,
.fieldMiniList span {
  color: #64748b;
  font-size: 0.78rem;
}

.phoneMarketingLine {
  color: #166534 !important;
  font-weight: 800;
}

.phoneMarketingChip {
  display: inline-flex;
  max-width: 100%;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  padding: 0.24rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneThread em {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  min-width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.phoneDetail {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
  min-height: 0;
}

.phoneToolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.68);
}

.phoneToolbar h3 {
  margin: 0.15rem 0 0;
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: -0.035em;
}

.phoneReadState {
  display: inline-flex;
  margin-top: 0.45rem;
  border-radius: 999px;
  padding: 0.26rem 0.52rem;
  color: #075985;
  background: #e0f2fe;
  font-size: 0.72rem;
  font-weight: 900;
}

.phoneToolbar span,
.eyebrow {
  color: #2563eb;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.phoneToolbarActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.phoneToolbarActions button {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow: none;
}

.phoneToolbarActions .phonePrimaryAction {
  background: #0f172a;
  color: #fff;
}

.phoneDiagnosticsToggle[aria-expanded="true"] {
  border-color: rgba(37, 99, 235, 0.35);
  background: #dbeafe;
  color: #1d4ed8;
}

.voiceStatusCard,
.phoneNotice,
.fieldNotice {
  margin: 0.9rem 1.35rem 0;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 1.1rem;
  background: rgba(239, 246, 255, 0.82);
  padding: 0.8rem 1rem;
  color: #1e3a8a;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.phoneConsole {
  display: grid;
  gap: 0.85rem;
  margin: 0.9rem 1.35rem 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 1rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.phoneConsole.ringing {
  border-color: rgba(34, 197, 94, 0.48);
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(255, 255, 255, 0.86));
  box-shadow: 0 22px 60px rgba(22, 163, 74, 0.15);
}

.phoneInboundWorkbench {
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr);
  gap: 0.85rem;
  margin: 0.9rem 1.35rem 0;
}

.phoneCallbackFocus,
.phoneCallbackQueue button {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.phoneCallbackFocus {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
}

.phoneCallbackFocus span,
.phoneCallbackQueue span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneCallbackFocus strong,
.phoneCallbackQueue strong {
  display: block;
  margin: 0.18rem 0;
  color: #0f172a;
}

.phoneCallbackFocus small,
.phoneCallbackQueue small,
.phoneCallbackQueue em {
  color: #64748b;
  line-height: 1.35;
}

.phoneCallbackActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.phoneCallbackResolution {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.phoneCallbackResolution span {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.7rem;
  background: rgba(248, 250, 252, 0.74);
  padding: 0.55rem 0.62rem;
}

.phoneSelectedActionPanel {
  display: grid;
  grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);
  gap: 0.75rem;
  align-items: center;
  margin: 0.9rem 1.35rem 0;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.9));
  padding: 0.85rem;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.phoneSelectedActionPanel span,
.phoneSelectedActionPanel small {
  display: block;
  color: #64748b;
}

.phoneSelectedActionPanel span {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneSelectedActionPanel strong {
  display: block;
  margin: 0.12rem 0;
  color: #0f172a;
}

.phoneSelectedActionButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.phoneSelectedActionButtons .phoneSelectedBookPrimary {
  order: -1;
  min-width: 8.5rem;
}

.adminSetupMap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.65rem;
  margin: 0.9rem 0 1rem;
}

.adminSetupMap a {
  display: grid;
  gap: 0.18rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.75rem 0.85rem;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.adminSetupMap a:hover {
  border-color: rgba(14, 116, 144, 0.36);
  background: #f8fafc;
}

.adminSetupMap small {
  color: #64748b;
  line-height: 1.25;
}

.adminControlCenter {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at top left, rgba(14, 116, 144, 0.14), transparent 28rem),
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  padding: 1rem;
}

.adminControlCenterIntro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.adminControlCenterIntro h3 {
  margin: 0.16rem 0 0.25rem;
  color: #0f172a;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.1;
}

.adminControlCenterIntro p {
  max-width: 48rem;
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.adminControlCenterIntro > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  padding: 0 1rem;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.adminHealthGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.adminHealthCard,
.adminSettingsCard {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.07);
}

.adminHealthCard {
  display: grid;
  gap: 0.2rem;
  border-radius: 1rem;
  padding: 0.8rem;
}

.adminHealthCard span,
.adminSettingsGroup {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adminHealthCard strong {
  font-size: 1.1rem;
  line-height: 1.08;
}

.adminHealthCard small,
.adminSettingsCard small,
.adminSettingsDetail {
  color: #64748b;
  line-height: 1.35;
}

.adminHealthCard.ready,
.adminSettingsCard.ready {
  border-color: rgba(22, 163, 74, 0.24);
}

.adminHealthCard.review,
.adminSettingsCard.review {
  border-color: rgba(217, 119, 6, 0.35);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.9));
}

.adminHealthCard.protected,
.adminSettingsCard.protected {
  border-color: rgba(37, 99, 235, 0.26);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.92));
}

.adminHealthCard.planned,
.adminSettingsCard.planned {
  border-style: dashed;
}

.adminHealthCard.loading,
.adminSettingsCard.loading {
  opacity: 0.78;
}

.adminSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.adminSettingsCard {
  position: relative;
  display: grid;
  gap: 0.38rem;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 0.9rem;
}

.adminSettingsCard::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.24rem;
  background: rgba(15, 23, 42, 0.16);
}

.adminSettingsCard.ready::after {
  background: #16a34a;
}

.adminSettingsCard.review::after {
  background: #d97706;
}

.adminSettingsCard.protected::after {
  background: #2563eb;
}

.adminSettingsCard.planned::after {
  background: repeating-linear-gradient(90deg, #94a3b8 0 0.45rem, transparent 0.45rem 0.8rem);
}

.adminSettingsCard strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.adminSettingsState {
  justify-self: flex-start;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0.24rem 0.5rem;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.adminSettingsCard.review .adminSettingsState {
  border-color: rgba(217, 119, 6, 0.24);
  background: #fffbeb;
  color: #92400e;
}

.adminSettingsCard.protected .adminSettingsState {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #1d4ed8;
}

.adminSettingsDetail {
  font-size: 0.78rem;
}

.adminProviderSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.adminProviderSettingsCard {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.95rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.adminProviderSettingsCard.ready {
  border-color: rgba(22, 163, 74, 0.25);
}

.adminProviderSettingsCard.review {
  border-color: rgba(217, 119, 6, 0.28);
}

.adminProviderSettingsCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.adminProviderSettingsCardHeader h4 {
  margin: 0.12rem 0 0.25rem;
  color: #0f172a;
  font-size: 1.05rem;
}

.adminProviderSettingsCardHeader small {
  display: block;
  color: #64748b;
  line-height: 1.35;
}

.adminProviderSettingsCardHeader em {
  flex: 0 0 auto;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0.24rem 0.55rem;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.adminProviderSecretList {
  display: grid;
  gap: 0.75rem;
}

.adminProviderSecretRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 0.75rem;
}

.adminProviderSecretRow > span,
.adminProviderSecretRow > small {
  min-width: 0;
}

.adminProviderSecretRow b,
.adminProviderSecretRow small {
  display: block;
}

.adminProviderSecretRow b {
  color: #0f172a;
}

.adminProviderSecretRow small {
  color: #64748b;
  line-height: 1.35;
}

.adminProviderSecretRow input {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  min-height: 2.35rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.7rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  padding: 0 0.75rem;
}

.adminProviderSecretRow button {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

.adminProviderSecretRow > small {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 0.78rem;
}

.adminProviderReadiness {
  display: grid;
  gap: 0.24rem;
  margin-top: 0.9rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.9rem;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 0.85rem;
}

.adminProviderReadiness strong,
.adminProviderReadiness small {
  display: block;
}

.adminProviderReadiness small {
  line-height: 1.4;
}

.adminProviderLiveSendControls {
  display: grid;
  grid-template-columns: minmax(16rem, 1.15fr) repeat(2, minmax(14rem, 1fr));
  gap: 0.55rem;
  align-items: start;
  margin-top: 0.6rem;
}

.adminProviderLiveSendControls label {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.adminProviderLiveSendControls input,
.adminProviderLiveSendControls select {
  min-width: 0;
  min-height: 2.35rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 0.72rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  padding: 0 0.72rem;
}

.adminProviderLiveSendControls button {
  min-height: 2.35rem;
  white-space: nowrap;
}

.adminProviderLiveSendActions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
  padding-top: 0.25rem;
}

.adminProviderLiveSendActions .compactButton {
  min-width: 10.5rem;
}

@media (max-width: 760px) {
  .adminProviderLiveSendControls {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminProviderLiveSendActions {
    justify-content: stretch;
  }

  .adminProviderLiveSendControls button,
  .adminProviderLiveSendActions .compactButton {
    width: 100%;
    min-width: 0;
  }
}

.adminDiagnosticsPanel > summary {
  cursor: pointer;
  list-style: none;
}

.adminDiagnosticsPanel > summary::-webkit-details-marker {
  display: none;
}

.adminDiagnosticsPanel > summary h3,
.adminDiagnosticsPanel > summary small {
  margin: 0;
}

.adminDiagnosticsPanel > summary small {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 750;
}

.fieldVisitChecklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
  margin: 0 1.35rem 0.95rem;
}

.fieldVisitChecklist span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 0.65rem 0.72rem;
}

.fieldVisitChecklist b,
.fieldVisitChecklist small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldVisitChecklist b {
  color: #0f172a;
  font-size: 0.82rem;
}

.fieldVisitChecklist small {
  color: #64748b;
}

.fieldVisitChecklist span:nth-child(2) {
  border-color: rgba(14, 116, 144, 0.24);
  background: rgba(240, 253, 250, 0.9);
}

.fieldVisitChecklist span:nth-child(2) small {
  white-space: normal;
}

.fieldDispatchEmptyBoard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
  border: 1px dashed rgba(14, 116, 144, 0.22);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.86);
  padding: 0.8rem;
}

.fieldDispatchEmptyBoard > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.68rem;
}

.fieldDispatchEmptyBoard span,
.fieldDispatchEmptyBoard small {
  color: #64748b;
}

.fieldDispatchEmptyBoard span {
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fieldDispatchEmptyBoard strong {
  color: #0f172a;
}

.fieldDispatchEmptyBoard p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 750;
}

.fieldDispatchEmptyActions {
  grid-column: 1 / -1;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45rem !important;
  align-items: center;
}

.fieldDispatchEmptyActions button {
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  padding: 0.48rem 0.72rem;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.9);
  font-weight: 850;
}

.inboundBookingOverlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.34);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.inboundBookingDrawer {
  display: flex;
  flex-direction: column;
  width: min(45rem, 100vw);
  max-height: 100vh;
  overflow: auto;
  border-left: 1px solid rgba(148, 163, 184, 0.24);
  background: #f8fafc;
  color: #0f172a;
  box-shadow: -24px 0 70px rgba(15, 23, 42, 0.24);
}

.inboundBookingHeader,
.inboundBookingFooter {
  position: sticky;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  background: rgba(248, 250, 252, 0.96);
  padding: 1rem;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.inboundBookingHeader {
  top: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.inboundBookingFooter {
  bottom: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.inboundBookingFooterAction {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
}

.inboundBookingFooterAction span {
  max-width: 12rem;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.25;
  text-align: right;
}

.inboundBookingFooterConflict {
  flex: 1 1 16rem;
  justify-content: flex-start;
  max-width: 22rem;
  border-radius: 0.7rem;
  background: #fffbeb;
}

.inboundBookingFooterConflict span {
  max-width: none;
  color: #78350f;
  text-align: left;
}

.inboundBookingFooter .primaryAction {
  min-width: 12rem;
  min-height: 2.6rem;
}

.inboundBookingHeader span,
.inboundBookingSectionHeader span,
.inboundBookingSteps span,
.inboundBookingQuickCreate span,
.inboundBookingFit small,
.inboundBookingSuggestions small,
.inboundBookingSelectedCard small,
.inboundBookingCandidateList small {
  color: #64748b;
}

.inboundBookingHeader h3,
.inboundBookingHeader p {
  margin: 0;
}

.inboundBookingHeader h3 {
  font-size: 1.2rem;
}

.inboundBookingHeader p {
  max-width: 34rem;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
}

.inboundBookingSteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.55rem;
  padding: 1rem 1rem 0;
}

.inboundBookingSteps span {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.45rem 0.58rem;
  font-size: 0.78rem;
  font-weight: 850;
}

.inboundBookingSteps b {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 0.72rem;
}

.inboundBookingRequiredSummary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
}

.inboundBookingRequiredSummary span {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 0.82rem;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  padding: 0.58rem 0.62rem;
}

.inboundBookingRequiredSummary b {
  color: #0f766e;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inboundBookingRequiredSummary strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inboundBookingRequiredSummary small {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 760px) {
  .inboundBookingRequiredSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inboundBookingRequiredSummary span {
    min-height: 4.4rem;
  }
}

.inboundBookingSourceCard {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 1rem 0;
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(37, 99, 235, 0.08));
  padding: 0.85rem;
}

.inboundBookingSourceCard strong,
.inboundBookingSourceCard p {
  margin: 0;
}

.inboundBookingSourceCard p {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.inboundBookingTrustGate {
  display: grid;
  gap: 0.35rem;
  border: 1px solid rgba(190, 18, 60, 0.28);
  border-radius: 0.85rem;
  background: #fff1f2;
  color: #9f1239;
  padding: 0.7rem;
}

.inboundBookingTrustGate strong,
.inboundBookingTrustGate p,
.inboundBookingTrustGate small {
  margin: 0;
}

.inboundBookingTrustGate p,
.inboundBookingTrustGate small {
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.serviceInboundBookingContext {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.serviceInboundBookingContext span {
  display: grid;
  gap: 0.12rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
  padding: 0.55rem 0.65rem;
  font-size: 0.75rem;
}

.serviceInboundBookingContext b {
  color: #64748b;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inboundBookingSection,
.inboundBookingPlan {
  display: grid;
  gap: 0.72rem;
  margin: 1rem 1rem 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.9rem;
}

.inboundBookingSectionHeader,
.inboundBookingSelectedCard,
.inboundBookingFit {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.inboundBookingSectionHeader strong,
.inboundBookingSelectedCard strong,
.inboundBookingFit strong {
  color: #0f172a;
}

.inboundBookingCandidateList,
.inboundBookingSuggestions {
  display: grid;
  gap: 0.5rem;
}

.inboundBookingCandidateList button,
.inboundBookingSuggestions button {
  display: grid;
  gap: 0.12rem;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.8rem;
  background: rgba(240, 253, 250, 0.68);
  color: #0f172a;
  padding: 0.65rem;
  text-align: left;
}

.inboundBookingCandidateList button strong,
.inboundBookingSuggestions button strong {
  color: #0f172a;
}

.inboundBookingCandidateList button small,
.inboundBookingSuggestions button small {
  color: #475569;
}

.inboundBookingQuickCreate,
.inboundBookingTimeGrid,
.inboundBookingModeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.65rem;
}

.inboundBookingDraftOnly {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.7rem;
  background: rgba(236, 254, 255, 0.82);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0.48rem 0.6rem;
}

.inboundBookingSection label,
.inboundBookingQuickCreate label {
  display: grid;
  gap: 0.3rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
}

.inboundBookingSection input,
.inboundBookingSection select,
.inboundBookingSection textarea,
.inboundBookingQuickCreate input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.72rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0.58rem 0.68rem;
  font: inherit;
}

.inboundBookingSection textarea {
  min-height: 5rem;
  resize: vertical;
}

.inboundBookingReuseGuide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.inboundBookingReuseGuide span {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.72rem;
  background: #fff;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
  padding: 0.48rem 0.55rem;
}

.inboundBookingReuseGuide b {
  display: block;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.inboundBookingDispatchProof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.inboundBookingDispatchProof span {
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 0.72rem;
  background: rgba(240, 253, 250, 0.72);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
  padding: 0.48rem 0.55rem;
}

.inboundBookingDispatchProof b {
  display: block;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 900;
}

.inboundBookingNotificationProof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.inboundBookingNotificationProof span {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.72rem;
  background: #fff;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
  padding: 0.48rem 0.55rem;
}

.inboundBookingNotificationProof b {
  display: block;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.inboundBookingModeGrid label,
.inboundBookingConflict {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.8);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}

.inboundBookingModeGrid input[type="radio"],
.inboundBookingSection .serviceInlineSwitch input[type="checkbox"] {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  accent-color: #0f766e;
  flex: 0 0 auto;
  margin: 0;
}

.inboundBookingSection .serviceInlineSwitch {
  min-height: 2.75rem;
  cursor: pointer;
}

.inboundBookingFit .compactButton {
  min-height: 2.75rem;
}

.inboundBookingFooter > button {
  min-width: 5.75rem;
  min-height: 2.75rem;
}

.inboundBookingHeader > button {
  min-height: 2.75rem;
}

.inboundBookingConflictReview {
  display: grid;
  gap: 0.45rem;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 0.85rem;
  background: rgba(255, 251, 235, 0.86);
  color: #92400e;
  padding: 0.65rem;
}

.inboundBookingConflictReview strong {
  color: #78350f;
  font-size: 0.82rem;
  font-weight: 900;
}

.inboundBookingConflictReview ul {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding-left: 1rem;
}

.inboundBookingConflictReview li,
.inboundBookingConflictReview small {
  font-size: 0.74rem;
  font-weight: 760;
}

.inboundBookingFit {
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.85rem;
  background: rgba(240, 253, 250, 0.72);
  padding: 0.7rem;
}

.inboundBookingFit.busy,
.inboundBookingFit.full {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(255, 251, 235, 0.86);
}

.inboundBookingPlan ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.45;
}

.inboundBookingPlan.ready {
  border-color: rgba(20, 184, 166, 0.26);
  background: rgba(240, 253, 250, 0.76);
}

.inboundBookingCompletion {
  display: grid;
  gap: 0.7rem;
  margin: 0.75rem 0;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  padding: 0.85rem;
}

.inboundBookingCompletionTop,
.inboundBookingCompletionActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.inboundBookingCompletionTop strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
}

.inboundBookingCompletionTop p {
  margin: 0.15rem 0 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 760;
}

.inboundBookingCompletionGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.inboundBookingCompletionGrid span {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.78rem;
  background: #fff;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 760;
  padding: 0.52rem 0.58rem;
}

.inboundBookingCompletionGrid b {
  display: block;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 950;
}

.inboundBookingDailyWorkflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.inboundBookingDailyWorkflow span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.45rem;
  row-gap: 0.08rem;
  align-items: start;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 0.82rem;
  background: #eff6ff;
  padding: 0.52rem 0.58rem;
}

.inboundBookingDailyWorkflow b {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  grid-row: span 2;
}

.inboundBookingDailyWorkflow strong,
.inboundBookingDailyWorkflow small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inboundBookingDailyWorkflow strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
}

.inboundBookingDailyWorkflow small {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.25;
}

.inboundBookingCompletionOrder {
  display: flex;
  gap: 0.38rem;
  flex-wrap: wrap;
  align-items: center;
}

.inboundBookingCompletionOrder span {
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  padding: 0.22rem 0.52rem;
  font-size: 0.7rem;
  font-weight: 850;
}

@media (max-width: 720px) {
  .opsConsoleShell .fieldPacketLaunchHandoff {
    grid-template-columns: 1fr !important;
  }

  .fieldEstimateBuilderHandoff {
    grid-template-columns: 1fr !important;
  }

  .fieldCloseoutActionRail {
    grid-template-columns: 1fr !important;
  }

  .inboundBookingOverlay {
    align-items: stretch;
  }

  .inboundBookingDrawer {
    width: 100vw;
    border-left: 0;
  }

  .inboundBookingHeader,
  .inboundBookingFooter {
    align-items: stretch;
    flex-direction: column;
    padding: 0.8rem;
  }

  .inboundBookingHeader {
    align-items: flex-start;
  }

  .inboundBookingHeader > div,
  .inboundBookingHeader p,
  .inboundBookingFooterAction,
  .inboundBookingFooter .primaryAction {
    width: 100%;
    min-width: 0;
  }

  .inboundBookingHeader :is(span, h3, p),
  .inboundBookingSectionHeader :is(strong, span),
  .inboundBookingSelectedCard :is(strong, small),
  .inboundBookingFit :is(strong, small),
  .inboundBookingSteps span,
  .serviceInboundBookingContext span,
  .inboundBookingReuseGuide span,
  .inboundBookingDispatchProof span,
  .inboundBookingNotificationProof span,
  .inboundBookingFinalReview span,
  .inboundBookingPreBookChecklist span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .inboundBookingSteps,
  .inboundBookingSection,
  .inboundBookingPlan,
  .inboundBookingCompletion {
    margin-left: 0.65rem;
    margin-right: 0.65rem;
  }

  .inboundBookingSteps,
  .serviceInboundBookingContext,
  .inboundBookingQuickCreate,
  .inboundBookingTimeGrid,
  .inboundBookingModeGrid,
  .inboundBookingReuseGuide,
  .inboundBookingDispatchProof,
  .inboundBookingNotificationProof,
  .inboundBookingFinalReview,
  .inboundBookingPreBookChecklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .inboundBookingFooterAction {
    align-items: stretch;
    justify-content: stretch;
  }

  .inboundBookingFooterAction span {
    max-width: none;
    text-align: left;
  }

  .inboundBookingCompletionGrid {
    grid-template-columns: 1fr;
  }

  .inboundBookingDailyWorkflow {
    grid-template-columns: 1fr;
  }
}

.phoneCallbackResolution small,
.phoneCallbackResolution strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallbackResolution small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.phoneCallbackResolution strong {
  margin-top: 0.14rem;
  color: #0f172a;
  font-size: 0.82rem;
}

.phoneCallbackActions a,
.phoneCallbackActions button {
  min-height: 2.35rem;
  text-decoration: none;
}

.phoneCallbackActions .disabled {
  background: rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  pointer-events: none;
}

.phoneCallbackQueue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.phoneCallbackQueue button {
  display: grid;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  text-align: left;
}

.phoneCallbackQueue button.active {
  border-color: rgba(37, 99, 235, 0.5);
  background: #eff6ff;
}

.phoneCallbackQueue strong,
.phoneCallbackQueue small,
.phoneCallbackQueue em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallbackQueue em {
  font-size: 0.75rem;
  font-style: normal;
}

.phoneStatusStrip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(10rem, 1.2fr);
  gap: 0.8rem;
  align-items: center;
}

.phoneStatusStrip strong,
.phoneStatusStrip em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneStatusStrip em {
  color: #64748b;
  font-style: normal;
  font-size: 0.84rem;
}

.phoneOnline,
.phoneOffline {
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 850;
}

.phoneOnline {
  background: #dcfce7;
  color: #166534;
}

.phoneOffline {
  background: #f1f5f9;
  color: #475569;
}

.phoneReadinessStrip,
.fieldPayGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.phoneReadinessStrip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phoneReadinessStrip div,
.fieldPayGrid div {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.82);
  padding: 0.75rem;
}

.phoneReadinessStrip span,
.fieldPayGrid span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneReadinessStrip strong,
.fieldPayGrid strong {
  display: block;
  margin: 0.22rem 0;
  font-size: 1rem;
}

.phoneReadinessStrip small {
  color: #64748b;
  line-height: 1.35;
}

.phoneNextMoveStrip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 1rem;
  background: #eff6ff;
  padding: 0.72rem 0.82rem;
}

.phoneNextMoveStrip.answer {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
}

.phoneNextMoveStrip.hangup {
  border-color: rgba(220, 38, 38, 0.2);
  background: #fef2f2;
}

.phoneNextMoveStrip span,
.phoneNextMoveStrip small {
  display: block;
}

.phoneNextMoveStrip span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneNextMoveStrip strong {
  display: block;
  margin: 0.16rem 0;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.phoneNextMoveStrip small {
  color: #64748b;
  line-height: 1.35;
}

.phoneLiveProofCard {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-left: 4px solid #2563eb;
  border-radius: 1rem;
  background: #f8fafc;
  padding: 0.72rem 0.82rem;
}

.phoneLiveProofCard.ready {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

.phoneLiveProofCard.blocked {
  border-left-color: #dc2626;
  background: #fef2f2;
}

.phoneLiveProofCard > div:first-child,
.phoneLiveProofSteps span {
  min-width: 0;
}

.phoneLiveProofCard span,
.phoneLiveProofCard small {
  display: block;
}

.phoneLiveProofCard > div:first-child > span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneLiveProofCard strong {
  display: block;
  margin: 0.16rem 0;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.phoneLiveProofCard small {
  color: #64748b;
  line-height: 1.35;
}

.phoneLiveProofSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.phoneLiveProofSteps span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.74);
  padding: 0.48rem;
}

.phoneLiveProofSteps b {
  display: block;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 880;
}

.phoneProofCard {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.9);
  padding: 0.8rem;
}

.phoneProofHeader {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.phoneProofHeader div {
  min-width: 0;
}

.phoneProofActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.phoneProofHeader span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneProofHeader strong {
  display: block;
  margin: 0.2rem 0;
  color: #0f172a;
}

.phoneProofHeader small {
  display: block;
  color: #64748b;
  line-height: 1.35;
}

.phoneIncomingDebug {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 0.6rem;
  background: rgba(240, 249, 255, 0.72);
  padding: 0.62rem;
}

.phoneIncomingDebugHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
}

.phoneIncomingDebugHeader div,
.phoneIncomingDebugGrid span {
  min-width: 0;
}

.phoneIncomingDebugHeader span,
.phoneIncomingDebugGrid b {
  display: block;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.phoneIncomingDebugHeader strong,
.phoneIncomingDebugHeader small,
.phoneIncomingDebugGrid strong,
.phoneIncomingDebugSources {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneIncomingDebugHeader strong {
  margin: 0.12rem 0;
  color: #0f172a;
  font-size: 0.88rem;
}

.phoneIncomingDebugHeader small,
.phoneIncomingDebugSources {
  color: #64748b;
  font-size: 0.74rem;
}

.phoneIncomingDebugHeader em {
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.78);
  color: #92400e;
  padding: 0.2rem 0.46rem;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.phoneIncomingDebugHeader em.matched {
  border-color: rgba(22, 163, 74, 0.26);
  background: rgba(240, 253, 244, 0.78);
  color: #166534;
}

.phoneIncomingDebugGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.phoneIncomingDebugGrid span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0.46rem;
}

.phoneIncomingDebugGrid strong {
  margin-top: 0.12rem;
  color: #0f172a;
  font-size: 0.78rem;
}

.phoneActionProof {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.7rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 4px solid #2563eb;
  border-radius: 0.6rem;
  background: rgba(239, 246, 255, 0.72);
  padding: 0.62rem;
}

.phoneActionProof.local_released {
  border-left-color: #0ea5e9;
}

.phoneActionProof.confirmed {
  border-color: rgba(22, 163, 74, 0.26);
  border-left-color: #16a34a;
  background: rgba(240, 253, 244, 0.78);
}

.phoneActionProof.timeout {
  border-color: rgba(245, 158, 11, 0.28);
  border-left-color: #f59e0b;
  background: rgba(255, 251, 235, 0.78);
}

.phoneActionProof.failed {
  border-color: rgba(220, 38, 38, 0.22);
  border-left-color: #dc2626;
  background: rgba(254, 242, 242, 0.78);
}

.phoneActionProofHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
}

.phoneActionProofHeader div,
.phoneActionProofFacts span {
  min-width: 0;
}

.phoneActionProofHeader span,
.phoneActionProofFacts b {
  display: block;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.phoneActionProofHeader strong,
.phoneActionProofHeader small,
.phoneActionProofFacts strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneActionProofHeader strong {
  margin: 0.12rem 0;
  color: #0f172a;
  font-size: 0.88rem;
}

.phoneActionProofHeader small {
  color: #64748b;
  font-size: 0.74rem;
}

.phoneActionProofHeader em {
  max-width: 9rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
  padding: 0.2rem 0.46rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.phoneActionProofFacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.phoneActionProofFacts span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.48rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.4rem 0.46rem;
}

.phoneActionProofFacts strong {
  margin-top: 0.12rem;
  color: #0f172a;
  font-size: 0.78rem;
}

.phoneProofList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.phoneProofItem {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-left-width: 4px;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.55rem 0.6rem;
}

.phoneProofItem b,
.phoneProofItem strong,
.phoneProofItem small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneProofItem b {
  color: #64748b;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.phoneProofItem strong {
  margin: 0.18rem 0;
  color: #0f172a;
  font-size: 0.84rem;
}

.phoneProofItem small {
  color: #64748b;
  font-size: 0.75rem;
}

.phoneProofItem.pass {
  border-left-color: #16a34a;
}

.phoneProofItem.warn {
  border-left-color: #f59e0b;
}

.phoneProofItem.fail {
  border-left-color: #dc2626;
}

.phoneProofItem.info {
  border-left-color: #2563eb;
}

.phoneProofEmpty {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 0.84rem;
}

.phoneProviderProof {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.72rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding-top: 0.72rem;
}

.phoneProviderProof > div:first-child span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneProviderProof > div:first-child strong,
.phoneProviderProof > div:first-child small {
  display: block;
}

.phoneProviderProof > div:first-child strong {
  margin: 0.16rem 0;
  color: #0f172a;
}

.phoneProviderProof > div:first-child small {
  color: #64748b;
  line-height: 1.35;
}

.phoneProviderProofCoverage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.44rem;
}

.phoneProviderProofCoverage span {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.5rem;
  background: #f8fafc;
  padding: 0.42rem 0.5rem;
}

.phoneProviderProofCoverage span.ready {
  border-color: rgba(22, 163, 74, 0.26);
  background: rgba(240, 253, 244, 0.78);
}

.phoneProviderProofCoverage span.missing {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.78);
}

.phoneProviderProofCoverage b,
.phoneProviderProofCoverage small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneProviderProofCoverage b {
  color: #0f172a;
  font-size: 0.86rem;
}

.phoneProviderProofCoverage small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.phoneProviderProofList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.phoneProviderProofList span {
  min-width: 0;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 0.6rem;
  background: rgba(240, 249, 255, 0.72);
  padding: 0.5rem 0.58rem;
}

.phoneProviderProofList strong,
.phoneProviderProofList small,
.phoneProviderProofList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneProviderProofList strong {
  color: #075985;
  font-size: 0.82rem;
}

.phoneProviderProofList small,
.phoneProviderProofList em {
  color: #64748b;
  font-size: 0.74rem;
  font-style: normal;
}

.phoneProviderProofList .phoneProofMatchLine {
  color: #334155;
  font-weight: 800;
}

.phoneProviderProofList .phoneProofMatchLine.matched {
  color: #166534;
}

.phoneProviderProofList .phoneProofMatchLine.unmatched {
  color: #92400e;
}

.phoneProviderProofList .phoneProofCandidateLine {
  color: #64748b;
}

.phoneRingControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: stretch;
}

.phoneRingControls label {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.82);
  padding: 0.68rem 0.8rem;
}

.phoneRingControls input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: #2563eb;
}

.phoneRingControls span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.phoneRingControls strong,
.phoneRingControls small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneRingControls small {
  color: #64748b;
}

.phoneRingControls button,
.fieldActionGrid button,
.fieldActionGrid a {
  border: 0;
  border-radius: 0.95rem;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  display: grid;
  min-height: 2.65rem;
  place-items: center;
  font-weight: 820;
  padding: 0.72rem 0.9rem;
  text-align: center;
  text-decoration: none;
}

.activeIncomingCalls {
  display: grid;
  gap: 0.7rem;
}

.incomingCallCard {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-radius: 1.1rem;
  background: #0f172a;
  color: #fff;
  padding: 0.9rem 1rem;
}

.incomingCallCard span,
.incomingCallCard small {
  color: rgba(255, 255, 255, 0.72);
}

.incomingCallCard strong {
  display: block;
  font-size: 1.2rem;
  margin: 0.15rem 0;
}

.phoneReturnNumber {
  display: grid;
  gap: 0.55rem;
}

.phoneReturnNumber input,
.phoneUtilityControls select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font: inherit;
  padding: 0.72rem 0.9rem;
}

.secondaryAction,
.answerButton,
.hangupButton {
  border: 0;
  border-radius: 0.9rem;
  font-weight: 800;
  padding: 0.72rem 0.9rem;
}

.phoneReturnCallPanel {
  display: grid;
  gap: 0.55rem;
  border: 1px dashed rgba(100, 116, 139, 0.36);
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.72);
  padding: 0.75rem;
}

.phoneReturnCallPanel span,
.phoneReturnCallPanel small {
  color: #64748b;
}

.phoneReturnCallPanel span {
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phoneReturnCallPanel strong,
.phoneReturnCallPanel small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneReturnCallPanel strong {
  color: #0f172a;
}

.secondaryAction {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.phonePrimaryControls,
.phoneUtilityControls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.answerButton {
  background: #16a34a;
  color: #fff;
}

.hangupButton {
  background: #dc2626;
  color: #fff;
}

.phonePanelHeader button:disabled,
.phoneToolbarActions button:disabled,
.phoneComposer button:disabled,
.phoneRingControls button:disabled,
.secondaryAction:disabled,
.answerButton:disabled,
.hangupButton:disabled {
  background: rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.phoneCallInbox {
  margin: 0 1.35rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.66);
  padding: 0.8rem 1rem;
}

.phoneCallInboxHeader {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.phoneCallInboxHeader div {
  display: grid;
  gap: 0.12rem;
}

.phoneCallInboxHeader span,
.phoneCallInboxHeader em,
.fieldCardHeader p,
.fieldCardNote {
  color: #64748b;
  font-size: 0.82rem;
  font-style: normal;
}

.phoneCallEventList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.phoneCallEventList span {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.82);
  padding: 0.55rem 0.65rem;
}

.phoneCallEventList strong,
.phoneCallEventList small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoneCallEventList small {
  color: #64748b;
}

.phoneTimeline {
  overflow: auto;
  min-height: 0;
  padding: 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.phoneBubble {
  max-width: min(42rem, 82%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.85rem 1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.phoneBubble.outbound {
  align-self: flex-end;
  background: #0f172a;
  color: #fff;
}

.phoneBubble.outbound span,
.phoneBubble.outbound small {
  color: rgba(255, 255, 255, 0.7);
}

.phoneBubble div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.phoneBubble p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.phoneComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.9rem 1.35rem 1.2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.72);
}

.phoneComposer input {
  grid-column: 1 / -1;
}

.phoneSmsContext {
  grid-column: 1 / -1;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
}

.phoneComposer textarea {
  min-height: 3rem;
  max-height: 9rem;
  resize: vertical;
}

.phoneComposer .callNoteBox {
  min-height: 3rem;
}

.callNoteComposer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: stretch;
}

.callNoteComposer select {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font: inherit;
  padding: 0.72rem 0.9rem;
}

.phoneEmpty {
  color: #64748b;
  padding: 1rem;
}

.phoneEmpty.detail {
  margin: auto;
}

.fieldAppShell {
  overflow: auto;
  padding: 1rem;
}

.adminAppShell {
  overflow: auto;
  padding: 1rem;
}

.fieldHero,
.adminHeader {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.1);
}

.adminHeader h2 {
  margin: 0.18rem 0 0.3rem;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.adminHeader p {
  max-width: 46rem;
  margin: 0;
  color: #475569;
}

.adminHeaderStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(5rem, 1fr));
  gap: 0.5rem;
  min-width: min(22rem, 100%);
}

.adminHeaderStats span {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.82);
  padding: 0.65rem 0.75rem;
  color: #64748b;
  font-size: 0.78rem;
}

.adminHeaderStats strong {
  display: block;
  color: #0f172a;
  font-size: 1.1rem;
}

.adminStatusBar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.9rem;
  font-weight: 750;
}

.adminStatusBar button {
  min-height: 2.25rem;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 0.65rem;
  background: #fff;
  color: #0f172a;
  font-weight: 850;
  padding: 0 0.8rem;
}

.adminNotice {
  margin-top: 0.75rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0.8rem 1rem;
  font-weight: 800;
}

.adminWorkspaceShell {
  display: grid;
  grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr) minmax(12rem, 15rem);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
  max-width: 100%;
  overflow-x: clip;
}

.adminWorkspaceShell[data-active-section]:not([data-active-section="overview"]) {
  grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
}

.adminWorkspaceShell[data-active-section]:not([data-active-section="overview"]) .adminWorkspaceRail {
  display: none;
}

.adminWorkspaceNav,
.adminWorkspaceRail {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.62rem;
  min-width: 0;
}

.adminWorkspaceNavIntro,
.adminWorkspaceNav a,
.adminWorkspaceRailCard,
.adminWorkspaceCurrent {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}

.adminWorkspaceNavIntro {
  display: grid;
  gap: 0.22rem;
  border-radius: 1.1rem;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(14, 116, 144, 0.16), transparent 12rem),
    rgba(255, 255, 255, 0.9);
}

.adminWorkspaceNavIntro strong {
  font-size: 1.05rem;
}

.adminWorkspaceNavIntro small,
.adminWorkspaceNav a small,
.adminWorkspaceRailCard small,
.adminWorkspaceCurrent small {
  color: #64748b;
  line-height: 1.35;
}

.adminWorkspaceNav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  border-radius: 0.95rem;
  padding: 0.72rem;
  text-decoration: none;
}

.adminWorkspaceNav a b,
.adminWorkspaceNav a small,
.adminWorkspaceRailCard span,
.adminWorkspaceRailCard strong,
.adminWorkspaceRailCard small {
  display: block;
}

.adminWorkspaceNav a b {
  font-size: 0.86rem;
}

.adminWorkspaceNav a small {
  margin-top: 0.14rem;
  font-size: 0.74rem;
}

.adminWorkspaceNav a em {
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 0.25rem 0.48rem;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.adminWorkspaceNav a.active {
  border-color: rgba(15, 23, 42, 0.42);
  background: #0f172a;
  color: #ffffff;
}

.adminWorkspaceNav a.active small {
  color: rgba(255, 255, 255, 0.78);
}

.adminWorkspaceNav a.active em {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.adminWorkspaceNav a.review:not(.active),
.adminWorkspaceRailCard.review,
.adminWorkspaceBadge.review {
  border-color: rgba(217, 119, 6, 0.3);
  background: #fffbeb;
  color: #92400e;
}

.adminWorkspaceNav a.protected:not(.active),
.adminWorkspaceRailCard.protected,
.adminWorkspaceBadge.protected {
  border-color: rgba(37, 99, 235, 0.24);
  background: #eff6ff;
  color: #1d4ed8;
}

.adminWorkspaceNav a.loading:not(.active),
.adminWorkspaceRailCard.loading,
.adminWorkspaceBadge.loading {
  opacity: 0.76;
}

.adminWorkspaceMain {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.adminWorkspaceMain > .adminControlCenter,
.adminWorkspaceMain > .adminTriageBar,
.adminWorkspaceMain > .adminRoleOverview,
.adminWorkspaceMain > .adminReportPanel,
.adminWorkspaceMain > .adminRulePanel,
.adminWorkspaceMain > .adminPermissionLayout {
  margin-left: 0;
  margin-right: 0;
}

.adminWorkspaceCurrent {
  display: flex;
  gap: 0.72rem;
  align-items: center;
  margin-bottom: 0.8rem;
  border-radius: 1rem;
  padding: 0.78rem 0.9rem;
}

.adminWorkspaceCurrent strong {
  display: block;
  font-size: 1rem;
}

.adminWorkspaceBadge {
  flex: 0 0 auto;
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  padding: 0.32rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.adminWorkspaceRailCard {
  display: grid;
  gap: 0.22rem;
  border-radius: 0.95rem;
  padding: 0.78rem;
  text-decoration: none;
}

.adminWorkspaceRailCard span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adminWorkspaceRailCard strong {
  font-size: 0.98rem;
}

.adminWorkspaceMain .adminReportPanel,
.adminWorkspaceMain .adminRulePanel,
.adminWorkspaceMain .adminPermissionSection {
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}

@media (max-width: 600px) {
  .adminAppShell {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  .adminWorkspaceShell {
    margin-top: 0.72rem;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .adminWorkspaceNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  .adminWorkspaceNavIntro,
  .adminWorkspaceNav a {
    min-height: 0;
    padding: 0.62rem;
  }

  .adminWorkspaceNavIntro {
    grid-column: 1 / -1;
  }

  .adminWorkspaceNav a {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.28rem;
  }

  .adminWorkspaceNav a small {
    display: none;
  }

  .adminWorkspaceNav a em {
    justify-self: flex-start;
    font-size: 0.64rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .adminWorkspaceNav a b {
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .adminWorkspaceRail,
  .adminSettingsGrid,
  .adminRoleOverview,
  .adminProviderSettingsGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminPermissionLayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminPermissionNav {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminPermissionNav a {
    padding: 0.58rem;
  }

  .permissionMatrixHeader {
    display: none;
  }

  .permissionMatrix {
    overflow-x: visible;
  }

  .permissionMatrixRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 0.55rem;
    padding: 0.75rem;
  }

  .permissionStateControl {
    width: 100%;
  }

  .adminHealthGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
  }

  .adminHealthCard {
    padding: 0.62rem;
  }

  .adminHealthCard strong {
    font-size: 0.94rem;
  }

  .adminHealthCard small {
    font-size: 0.72rem;
  }

  .adminWorkspaceCurrent {
    display: none;
  }

  .adminWorkspaceBadge {
    justify-self: flex-start;
  }

  .adminControlCenter {
    margin-top: 0.65rem;
    padding: 0.76rem;
  }

  .adminControlCenterIntro h3 {
    font-size: 1.22rem;
  }

  .adminControlCenterIntro > a {
    width: 100%;
  }
}

.adminTriageBar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(14rem, auto) auto;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.75rem;
}

.adminPermissionSearch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.adminPermissionSearch span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 850;
}

.adminPermissionSearch input,
.adminPermissionSearch button {
  min-width: 0;
  min-height: 2.35rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.65rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.86rem;
}

.adminPermissionSearch input {
  padding: 0 0.75rem;
}

.adminPermissionSearch button {
  padding: 0 0.75rem;
  font-weight: 850;
}

.adminQuickFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  min-width: 0;
}

.adminQuickFilters button {
  min-height: 1.85rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  padding: 0 0.62rem;
  font-size: 0.72rem;
  font-weight: 850;
}

.adminQuickFilters button.active {
  border-color: rgba(15, 23, 42, 0.9);
  background: #0f172a;
  color: #ffffff;
}

.adminTriageCounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.adminTriageCounts span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.8rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 820;
  white-space: nowrap;
}

.adminTriageCounts b {
  color: #0f172a;
}

.adminRoleOverview {
  display: grid;
  grid-template-columns: repeat(6, minmax(8rem, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.adminRoleOverview div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.72rem;
}

.adminRoleOverview strong,
.adminRoleOverview span,
.adminRoleOverview em {
  display: block;
}

.adminRoleOverview strong {
  margin-bottom: 0.45rem;
  color: #0f172a;
}

.adminRoleOverview span {
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.45;
}

.adminRoleOverview b {
  color: #0f172a;
}

.adminRoleOverview em {
  margin-top: 0.45rem;
  color: #2563eb;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 850;
}

.adminControlBand {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-top: 1rem;
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 0.85rem;
  background: rgba(240, 249, 255, 0.78);
  padding: 0.95rem;
}

.adminControlBand h3 {
  margin: 0.15rem 0 0.28rem;
}

.adminControlBand p {
  margin: 0;
  color: #475569;
  line-height: 1.42;
}

.adminPolicyList {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.adminPolicyList span {
  min-width: 0;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.62rem;
}

.adminPolicyList b,
.adminPolicyList small,
.adminPolicyList em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adminPolicyList b {
  color: #0f172a;
  font-size: 0.8rem;
  white-space: nowrap;
}

.adminPolicyList small {
  margin-top: 0.18rem;
  color: #475569;
  font-size: 0.74rem;
  line-height: 1.32;
}

.adminPolicyList em {
  margin-top: 0.35rem;
  color: #0369a1;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.adminPermissionLayout {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  min-width: 0;
  max-width: 100%;
}

.adminPermissionNav {
  position: sticky;
  top: 5.2rem;
  align-self: start;
  display: grid;
  gap: 0.45rem;
}

.adminPermissionNav a {
  display: grid;
  gap: 0.1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.65rem 0.75rem;
  color: #0f172a;
  text-decoration: none;
}

.adminPermissionNav span {
  color: #64748b;
  font-size: 0.78rem;
}

.adminPermissionSections {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.adminPermissionEmpty {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.86);
  color: #64748b;
  padding: 1rem;
  font-weight: 820;
}

.adminPermissionSection {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

.adminPermissionSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.adminPermissionSectionHeader h3 {
  margin: 0;
}

.adminPermissionSectionHeader p {
  margin: 0.2rem 0 0;
  color: #64748b;
}

.adminPermissionSectionHeader > span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.permissionMatrix {
  overflow-x: auto;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.adminRulePanel {
  margin: 0 1rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
  padding: 1rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.adminRuleHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem);
  gap: 1rem;
  align-items: start;
}

.adminRuleHeader h3 {
  margin: 0.15rem 0 0.2rem;
  font-size: 1.05rem;
}

.adminRuleHeader p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.adminRuleFacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.45rem;
}

.adminRuleFacts span,
.adminRuleCard {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.8rem;
  background: #f8fafc;
}

.adminRuleFacts span {
  display: grid;
  gap: 0.15rem;
  padding: 0.62rem;
}

.adminRuleFacts strong {
  font-size: 0.72rem;
}

.adminRuleFacts small {
  color: #64748b;
  font-size: 0.7rem;
}

.adminRuleFacts select {
  width: 100%;
  min-height: 1.9rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.45rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0 0.38rem;
}

.adminRuleGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.adminRuleCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.8rem;
}

.adminRuleCard strong,
.adminRuleCard small {
  display: block;
  min-width: 0;
}

.adminRuleCard small {
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.35;
}

.adminRuleCard > span {
  justify-self: end;
  border-radius: 999px;
  padding: 0.25rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.adminRuleCard.allowed > span {
  background: #dcfce7;
  color: #166534;
}

.adminRuleCard.limited > span {
  background: #fef3c7;
  color: #92400e;
}

.adminRuleCard.denied > span {
  background: #e2e8f0;
  color: #475569;
}

.adminRuleCard select {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.65rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.52rem 0.6rem;
}

.adminReportPanel {
  margin: 0 1rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.84);
  padding: 1rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.adminReportHeader,
.adminReportHeaderActions,
.adminReportStats,
.adminReportGrid,
.adminReportTableHeader,
.adminReportTable [role="row"],
.adminReportSideBlock,
.adminReportSideBlock span {
  min-width: 0;
}

.adminReportHeader {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
}

.adminReportHeader h3 {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
}

.adminReportHeaderActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.adminReportHeaderActions span {
  border-radius: 999px;
  padding: 0.34rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.adminReportHeaderActions span.ready {
  background: #dcfce7;
  color: #166534;
}

.adminReportHeaderActions span.review {
  background: #fef3c7;
  color: #92400e;
}

.adminReportDateControl {
  min-height: 2rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.18rem 0.48rem;
  white-space: nowrap;
}

.adminReportDateControl small {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.adminReportDateControl input {
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  min-width: 8.7rem;
  outline: none;
}

.adminReportHeaderActions button,
.adminReportHeaderActions a {
  min-height: 2rem;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 0.55rem;
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0 0.7rem;
  text-decoration: none;
}

.adminReportStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.adminReportStats span,
.adminReportSideBlock span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.7rem;
  background: #f8fafc;
  padding: 0.58rem 0.65rem;
}

.adminReportStats strong,
.adminReportSideBlock b,
.adminReportTable strong,
.adminReportTable b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminReportStats strong {
  margin-bottom: 0.1rem;
  font-size: 0.95rem;
}

.adminReportGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.adminReportTable {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.8rem;
  background: #fff;
}

.adminReportTableHeader,
.adminReportTable [role="row"] {
  display: grid;
  grid-template-columns: minmax(10rem, 1.1fr) minmax(10rem, 1.25fr) minmax(5.8rem, 0.65fr) minmax(4.2rem, 0.42fr);
  gap: 0.55rem;
  align-items: center;
  min-width: 38rem;
  padding: 0.62rem 0.75rem;
}

.adminReportTableHeader {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.adminReportTable [role="row"] {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.adminReportTable [role="row"].review {
  background: #fffbeb;
}

.adminReportTable [role="row"].ready {
  background: #ffffff;
}

.adminProofRunActions {
  display: none;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding: 0.62rem 0.75rem;
}

.adminProofRunActions strong {
  margin-right: 0.1rem;
  color: #0f172a;
  font-size: 0.78rem;
}

.adminNextProofCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 1rem;
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.adminNextProofCard.ready {
  border-color: rgba(34, 197, 94, 0.24);
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.adminNextProofCard .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}

.adminNextProofCard strong,
.adminNextProofCard small {
  display: block;
}

.adminNextProofCard strong {
  color: #0f172a;
  font-size: 0.95rem;
}

.adminNextProofCard small {
  margin-top: 0.2rem;
  color: #475569;
  font-size: 0.76rem;
  line-height: 1.35;
}

.adminNextProofActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.adminProofRunOrder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.adminProofRunOrder a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.9rem;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.adminProofRunOrder b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.76rem;
}

.adminProofRunOrder strong,
.adminProofRunOrder small {
  display: block;
}

.adminProofRunOrder small {
  margin-top: 0.18rem;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
}

.adminCutoverBlockerLadder {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.42rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.78rem;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  padding: 0.66rem;
}

.adminCutoverBlockerLadder > strong,
.adminCutoverBlockerLadder > small {
  display: block;
}

.adminCutoverBlockerLadder > strong {
  color: #0f172a;
  font-size: 0.8rem;
}

.adminCutoverBlockerLadder > small,
.adminCutoverBlockerLadder span small {
  color: #64748b;
  font-size: 0.7rem;
  line-height: 1.28;
}

.adminCutoverBlockerLadder span {
  display: grid;
  gap: 0.12rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.64rem;
  background: #ffffff;
  padding: 0.5rem 0.56rem;
}

.adminCutoverBlockerLadder span[data-cutover-status="blocked"] {
  border-color: rgba(239, 68, 68, 0.24);
  background: #fff7ed;
}

.adminCutoverBlockerLadder span[data-cutover-status="ready"] {
  border-color: rgba(34, 197, 94, 0.24);
  background: #f0fdf4;
}

.adminCutoverBlockerLadder span[data-cutover-status="review"] {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffbeb;
}

.adminCutoverBlockerLadder span b {
  color: #0f172a;
  font-size: 0.74rem;
}

@media (max-width: 760px) {
  .adminProofRunActions {
    display: flex;
  }

  .adminProofRunOrder {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminNextProofCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminNextProofActions {
    justify-content: flex-start;
  }
}

.adminReportTable small,
.adminReportSideBlock small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminReportSide {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.adminReportSideBlock {
  display: grid;
  gap: 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.8rem;
  background: #fff;
  padding: 0.7rem;
}

.adminReportSideBlock > strong {
  font-size: 0.78rem;
}

.adminReportSideBlock span {
  display: grid;
  gap: 0.12rem;
}

.adminReportActionLink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.7rem;
  background: #f8fafc;
  color: inherit;
  padding: 0.58rem 0.65rem;
  text-decoration: none;
}

.adminReportActionLink.review {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffbeb;
}

.adminReportActionLink b,
.adminReportActionLink small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminReportActionLink b {
  color: #0f172a;
}

.adminReportActionLink small {
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
}

.adminReportActionLink em {
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  padding: 0.22rem 0.48rem;
  white-space: nowrap;
}

.adminReportActionLink.review em {
  background: #fef3c7;
  color: #92400e;
}

.adminFormAssignmentEditor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  margin-top: 0.45rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 0.7rem;
  background: rgba(239, 246, 255, 0.72);
  padding: 0.55rem;
}

.adminFormAssignmentEditor label {
  min-width: 0;
}

.adminFormAssignmentEditor input {
  width: 100%;
}

.adminFormAssignmentEditor .serviceInlineSwitch,
.adminFormAssignmentEditor em {
  align-self: end;
}

.adminFormAssignmentEditor em {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.adminReportEmpty {
  color: #64748b;
  font-weight: 800;
}

.permissionMatrixHeader,
.permissionMatrixRow {
  display: grid;
  grid-template-columns: minmax(13rem, 1.4fr) repeat(6, minmax(4.7rem, 0.5fr)) minmax(10rem, 0.9fr) minmax(5rem, 0.45fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 60rem;
  padding: 0.65rem 0.85rem;
}

.permissionMatrixHeader {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.permissionMatrixRow {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.permissionAbility {
  display: grid;
  gap: 0.15rem;
}

.permissionAbility small,
.permissionScope {
  color: #64748b;
  line-height: 1.35;
}

.permissionState,
.permissionEnforcement {
  justify-self: start;
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 850;
}

.permissionState.allowed,
.permissionEnforcement.enforced {
  background: #dcfce7;
  color: #166534;
}

.permissionState.limited,
.permissionEnforcement.partially_enforced {
  background: #fef3c7;
  color: #92400e;
}

.permissionState.denied,
.permissionEnforcement.planned {
  background: #f1f5f9;
  color: #475569;
}

.permissionStateControl {
  display: grid;
  gap: 0.25rem;
  min-width: 5.2rem;
}

.permissionStateControl > span {
  justify-self: start;
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 850;
}

.permissionStateControl.allowed > span {
  background: #dcfce7;
  color: #166534;
}

.permissionStateControl.limited > span {
  background: #fef3c7;
  color: #92400e;
}

.permissionStateControl.denied > span {
  background: #f1f5f9;
  color: #475569;
}

.permissionStateControl.overridden > span {
  outline: 2px solid rgba(37, 99, 235, 0.2);
}

.permissionStateSummary em,
.permissionRoleLabel {
  font-style: normal;
}

.permissionRoleLabel {
  display: none;
}

.permissionStateControl select {
  width: 100%;
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.55rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 0.35rem;
}

.fieldHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
}

.fieldOfflineCatalogStatus {
  display: grid;
  gap: 0.1rem;
  min-width: 8.4rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.38rem 0.52rem;
}

.fieldOfflineCatalogStatus b {
  color: #0f172a;
  font-size: 0.76rem;
  line-height: 1.1;
}

.fieldOfflineCatalogStatus small {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 760;
}

.fieldTechContactSettings {
  min-width: 9rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.fieldTechContactSettings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0.38rem 0.52rem;
  cursor: pointer;
  list-style: none;
}

.fieldTechContactSettings summary::-webkit-details-marker {
  display: none;
}

.fieldTechContactSettings summary span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fieldTechContactSettings b {
  color: #0f172a;
  font-size: 0.76rem;
  line-height: 1.1;
}

.fieldTechContactSettings small {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 760;
}

.fieldTechContactSettings em {
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  padding: 0.18rem 0.34rem;
}

.fieldTechContactForm {
  display: grid;
  gap: 0.42rem;
  padding: 0 0.52rem 0.52rem;
}

.fieldTechContactForm label {
  display: grid;
  gap: 0.2rem;
  color: #475569;
  font-size: 0.66rem;
  font-weight: 800;
}

.fieldTechContactForm input {
  min-height: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 0.52rem;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.5rem;
}

.fieldModeSwitch {
  display: inline-flex;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.35rem;
  border-radius: 1rem;
  background: rgba(226, 232, 240, 0.72);
}

.fieldModeSwitch button {
  border: 0;
  border-radius: 0.78rem;
  background: transparent;
  color: #64748b;
  font-weight: 850;
  padding: 0.65rem 0.85rem;
}

.fieldModeSwitch button.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
}

.fieldRangeSwitch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

.fieldRangeSwitch button {
  min-height: 2.35rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-weight: 850;
  padding: 0 0.85rem;
}

.fieldRangeSwitch button.active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.13);
}

.fieldMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.fieldMetricGrid article,
.fieldCard {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.fieldMetricGrid span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.fieldMetricGrid strong {
  display: block;
  margin: 0.35rem 0;
  font-size: clamp(1.45rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
}

.fieldMainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.fieldJobsCard {
  grid-row: span 2;
}

.fieldCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.fieldCardHeader h3 {
  margin: 0;
  font-size: 1.05rem;
}

.fieldCardHeader p,
.fieldCardNote {
  margin: 0.18rem 0 0;
}

.fieldPayGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fieldCard.activePanel {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 20px 54px rgba(37, 99, 235, 0.13);
}

.fieldJobList,
.fieldMiniList {
  display: grid;
  gap: 0.7rem;
}

.fieldJobButton,
.fieldMiniList div {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.85);
  padding: 0.85rem;
}

.fieldJobButton {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  color: #0f172a;
  text-align: left;
}

.fieldJobButton.active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.fieldJobButton span,
.fieldMiniList div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.fieldJobButton em {
  color: #64748b;
  font-style: normal;
  font-size: 0.78rem;
}

.fieldJobButton p {
  margin: 0.35rem 0;
  color: #334155;
}

.fieldFocusBody {
  display: grid;
  gap: 0.85rem;
}

.fieldFocusBody > strong {
  font-size: 1.25rem;
}

.fieldFocusBody p {
  margin: 0;
  color: #334155;
  line-height: 1.45;
}

.fieldFocusFacts,
.fieldPacketGrid,
.fieldCompletionChecklist,
.fieldPacketStatus,
.fieldPrimaryActionDock,
.fieldActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.fieldPrimaryActionDock {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.42rem;
}

.fieldPacketBookingEvidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.45rem;
}

.fieldPacketBookingEvidence span {
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 0.58rem;
  background: rgba(239, 246, 255, 0.75);
  padding: 0.44rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldPacketBookingEvidence b {
  display: block;
  color: #1d4ed8;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fieldPrimaryActionDock button,
.fieldPrimaryActionDock a {
  display: grid;
  min-width: 0;
  min-height: 3.05rem;
  align-content: center;
  gap: 0.12rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  padding: 0.42rem 0.5rem;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.fieldPrimaryActionDock button:disabled {
  background: rgba(148, 163, 184, 0.42);
  color: rgba(255, 255, 255, 0.88);
  cursor: not-allowed;
}

.fieldPrimaryActionDock span,
.fieldPrimaryActionDock small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldPrimaryActionDock span {
  font-size: 0.76rem;
  font-weight: 820;
}

.fieldPrimaryActionDock small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  font-weight: 720;
}

.fieldSecondaryActionRail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.fieldSecondaryActionRail button,
.fieldSecondaryActionRail a {
  min-height: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  padding: 0 0.58rem;
  font-size: 0.72rem;
  font-weight: 760;
  text-decoration: none;
  box-shadow: none;
}

.fieldSecondaryActionRail button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.fieldFocusFacts span,
.fieldPacketGrid span,
.fieldCompletionChecklist button,
.fieldPacketStatus span {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.95rem;
  background: rgba(248, 250, 252, 0.82);
  color: #334155;
  padding: 0.7rem;
}

.fieldCompletionChecklist button {
  width: 100%;
  min-width: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fieldCompletionChecklist button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

.fieldFocusFacts b,
.fieldPacketGrid b,
.fieldCompletionChecklist b,
.fieldPacketStatus b {
  display: block;
  color: #64748b;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fieldCompletionChecklist button.ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(240, 253, 244, 0.82);
}

.fieldCompletionChecklist button.needs_action {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.78);
}

.fieldCompletionChecklist small {
  display: block;
  margin-top: 0.12rem;
  overflow: hidden;
  color: #334155;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldCloseoutSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 0.95rem;
  background: rgba(255, 251, 235, 0.78);
  color: #334155;
  padding: 0.7rem 0.8rem;
}

.fieldCloseoutSummary.ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(240, 253, 244, 0.84);
}

.fieldCloseoutSummary.pending {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.84);
}

.fieldCloseoutSummary b,
.fieldCloseoutSummary small {
  display: block;
}

.fieldCloseoutSummary b {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 860;
}

.fieldCloseoutSummary small {
  margin-top: 0.14rem;
  color: #475569;
  font-size: 0.74rem;
  line-height: 1.25;
}

.fieldCloseoutSummary em {
  flex: 0 0 auto;
  min-width: 2.65rem;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  padding: 0.24rem 0.5rem;
  text-align: center;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.fieldCloseoutSummary button {
  flex: 0 0 auto;
  min-height: 2rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.55rem;
  background: #0f172a;
  color: #ffffff;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 820;
}

.fieldCloseoutSummary button:disabled {
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
}

.fieldCloseoutOverride {
  flex: 1 1 15rem;
  min-width: min(100%, 14rem);
}

.fieldCloseoutOverride span {
  display: block;
  margin-bottom: 0.22rem;
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 850;
}

.fieldCloseoutOverride textarea {
  width: 100%;
  min-height: 2.45rem;
  resize: vertical;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.25;
}

.fieldCompletionChecklist button.pending {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.82);
}

.fieldMaskedCallPolicy {
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 0.95rem;
  background: rgba(240, 249, 255, 0.82);
  color: #334155;
  padding: 0.75rem 0.85rem;
}

.fieldMaskedCallPolicy b {
  display: block;
  color: #0369a1;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fieldMaskedCallPolicy span {
  display: block;
  margin-top: 0.18rem;
  line-height: 1.38;
}

.fieldPacketList {
  display: grid;
  gap: 0.5rem;
}

.fieldPacketList span {
  display: grid;
  gap: 0.18rem;
  border-left: 3px solid rgba(37, 99, 235, 0.36);
  padding: 0.35rem 0.55rem;
  background: rgba(239, 246, 255, 0.7);
}

.fieldPacketList small {
  color: #64748b;
  line-height: 1.35;
}

.fieldPacketList button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  padding: 0.28rem 0.58rem;
}

.fieldPacketList button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.fieldPacketList .fieldInlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.fieldCustomerContactCorrectionActions button.confirmDanger,
.fieldPacketList button.confirmDanger,
.fieldFormActions button.confirmDanger,
.fieldEstimateHeaderRow button.confirmDanger,
.fieldEstimateOptionRow button.confirmDanger,
.fieldEstimateLineItems button.confirmDanger,
.fieldPaymentActionRow button.confirmDanger {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fee2e2;
  color: #7f1d1d;
}

.fieldWorkLaneSwitch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.fieldWorkLaneSwitch button {
  min-height: 2.35rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.7rem;
  background: rgba(248, 250, 252, 0.86);
  color: #475569;
  font-weight: 800;
}

.fieldWorkLaneSwitch button.active {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

.fieldWorkLanePanel,
.fieldWorkLaneStack {
  display: grid;
  gap: 0.6rem;
}

.fieldJobDetailsComposer,
.fieldJobNoteComposer,
.fieldJobStatusComposer,
.fieldMaterialComposer,
.fieldPurchaseOrderComposer,
.fieldFormComposer,
.fieldMediaComposer,
.fieldSalesComposer {
  display: grid;
  gap: 0.6rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 0.95rem;
  background: rgba(239, 246, 255, 0.62);
  padding: 0.75rem;
}

.fieldJobDetailsComposer label,
.fieldJobNoteComposer label,
.fieldJobStatusComposer label,
.fieldMaterialComposer label,
.fieldPurchaseOrderComposer label,
.fieldFormComposer label,
.fieldMediaComposer label,
.fieldSalesComposer label {
  display: grid;
  gap: 0.4rem;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 760;
}

.fieldMaterialComposer .fieldInlineCheck {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.fieldMaterialComposer .fieldInlineCheck input {
  width: auto;
}

.fieldJobDetailsComposer textarea,
.fieldJobNoteComposer textarea,
.fieldFormComposer textarea {
  min-height: 4.8rem;
  resize: vertical;
}

.fieldJobDetailsComposer {
  grid-template-columns: minmax(12rem, 1.25fr) repeat(4, minmax(6rem, 0.58fr)) auto;
  align-items: end;
  background: rgba(238, 242, 255, 0.68);
}

.fieldFollowUpJobComposer {
  grid-template-columns: minmax(12rem, 1fr) auto;
  background: rgba(239, 246, 255, 0.72);
}

.fieldWorkCommandPanel {
  display: grid;
  gap: 0.58rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 0.95rem;
  background: linear-gradient(135deg, #eff6ff, #ffffff 64%);
  padding: 0.78rem;
}

.fieldWorkCommandHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.fieldWorkCommandHeader span,
.fieldWorkNextActionButton,
.fieldWorkCommandGrid button,
.fieldWorkAdvancedDetails summary span {
  min-width: 0;
}

.fieldWorkCommandHeader b,
.fieldWorkCommandHeader small,
.fieldWorkNextActionButton span,
.fieldWorkNextActionButton b,
.fieldWorkNextActionButton small,
.fieldWorkCommandGrid span,
.fieldWorkCommandGrid small,
.fieldWorkAdvancedDetails summary b,
.fieldWorkAdvancedDetails summary small {
  display: block;
}

.fieldWorkCommandHeader b,
.fieldWorkNextActionButton b,
.fieldWorkCommandGrid span,
.fieldWorkAdvancedDetails summary b {
  color: #0f172a;
  font-weight: 860;
}

.fieldWorkCommandHeader small,
.fieldWorkNextActionButton span,
.fieldWorkNextActionButton small,
.fieldWorkCommandGrid small,
.fieldWorkAdvancedDetails summary small {
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
}

.fieldWorkCommandHeader em,
.fieldWorkAdvancedDetails summary em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 820;
  padding: 0.18rem 0.48rem;
}

.fieldWorkNextActionButton {
  display: grid;
  gap: 0.18rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.78rem;
  background: #ffffff;
  padding: 0.7rem 0.78rem;
  text-align: left;
}

.fieldWorkNextActionButton:not(:disabled) {
  cursor: pointer;
}

.fieldWorkNextActionButton:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.fieldWorkCommandGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

.fieldWorkCommandGrid button {
  display: grid;
  gap: 0.12rem;
  align-content: center;
  min-height: 3rem;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 0.72rem;
  background: #ffffff;
  padding: 0.48rem;
  text-align: left;
}

.fieldWorkCommandGrid button:not(:disabled) {
  cursor: pointer;
}

.fieldWorkAdvancedDetails {
  display: grid;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.85rem;
  background: #ffffff;
}

.fieldWorkAdvancedDetails summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
  padding: 0.62rem 0.72rem;
}

.fieldWorkAdvancedDetails summary::-webkit-details-marker {
  display: none;
}

.fieldWorkAdvancedDetails[open] {
  gap: 0.56rem;
  padding-bottom: 0.62rem;
}

.fieldWorkAdvancedDetails[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.fieldWorkAdvancedDetails > .fieldJobDetailsComposer {
  margin: 0 0.62rem;
}

.fieldFormSummary,
.fieldMediaSummary,
.fieldFormActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.fieldFormSchemaSections {
  display: grid;
  gap: 0.55rem;
}

.fieldFormSchemaSection {
  display: grid;
  gap: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.62rem;
}

.fieldFormSchemaSection > strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 860;
}

.fieldFormSchemaField {
  min-width: 0;
}

.fieldFormSchemaCheckbox {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.fieldPartnerReferralComposer {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(10rem, 1.2fr) minmax(10rem, 1fr);
  gap: 0.45rem;
  align-items: end;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 0.78rem;
  background: rgba(240, 253, 244, 0.72);
  padding: 0.55rem;
}

.fieldPartnerReferralComposer label {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
}

.fieldPartnerReferralConsent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.fieldPartnerReferralEvidence {
  grid-column: 1 / -1;
  align-self: center;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.fieldFormSummary span,
.fieldMediaSummary span {
  display: grid;
  gap: 0.15rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.72rem;
  background: rgba(248, 250, 252, 0.78);
  color: #64748b;
  padding: 0.55rem 0.65rem;
}

.fieldFormSummary b,
.fieldMediaSummary b {
  color: #0f172a;
  font-size: 0.72rem;
}

.fieldJobStatusComposer {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  background: rgba(240, 253, 244, 0.62);
}

.fieldAppointmentDispatchComposer {
  grid-template-columns: repeat(4, minmax(7rem, 1fr)) repeat(6, auto);
}

.fieldAppointmentDispatchInstructions {
  grid-column: 1 / -7;
}

.fieldAppointmentDispatchInstructions textarea {
  min-height: 4.4rem;
  resize: vertical;
}

.fieldMaterialComposer {
  grid-template-columns: minmax(10rem, 1fr) minmax(4.5rem, 6rem) minmax(4.5rem, 7rem) auto;
  align-items: end;
  background: rgba(255, 251, 235, 0.68);
}

.fieldPurchaseOrderComposer {
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.6fr) auto;
  align-items: end;
  background: rgba(236, 253, 245, 0.7);
}

.fieldSalesComposer {
  background: rgba(240, 249, 255, 0.72);
}

.fieldMediaComposer {
  background: rgba(245, 243, 255, 0.68);
}

.fieldMediaSummary,
.fieldMediaForms {
  display: grid;
  gap: 0.55rem;
}

.fieldMediaSummary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fieldMediaForms {
  grid-template-columns: minmax(7rem, 0.7fr) minmax(7rem, 0.7fr) minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(12rem, auto);
  align-items: end;
}

.fieldMediaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.fieldMediaActions button {
  min-height: 2.2rem;
  white-space: nowrap;
}

.fieldPendingMediaQueue {
  display: grid;
  gap: 0.38rem;
}

.fieldPendingMediaQueue div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.65rem;
  background: rgba(248, 250, 252, 0.86);
  padding: 0.46rem 0.55rem;
}

.fieldPendingMediaQueue span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.fieldPendingMediaQueue b,
.fieldPendingMediaQueue small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldPendingMediaQueue b {
  color: #0f172a;
  font-size: 0.74rem;
}

.fieldPendingMediaQueue small {
  color: #64748b;
  font-size: 0.72rem;
}

.fieldPendingMediaQueue .fieldPendingApprovalPlan {
  color: #334155;
  white-space: normal;
}

.fieldPendingMediaQueue .fieldPendingRecovery {
  color: #334155;
  line-height: 1.32;
  white-space: normal;
}

.fieldPendingMediaQueue .fieldPendingRecovery b {
  color: #0f172a;
  font-weight: 900;
}

.fieldPendingMediaQueue em {
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  padding: 0.16rem 0.42rem;
}

.fieldPendingApprovalActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.34rem;
}

.fieldPendingApprovalActions button {
  min-height: 1.9rem;
  border-radius: 8px;
  padding: 0 0.58rem;
  white-space: nowrap;
}

.fieldPendingApprovalActions button.confirmDanger {
  border-color: rgba(220, 38, 38, 0.34);
  background: #fee2e2;
  color: #991b1b;
}

.fieldPendingError {
  color: #b91c1c !important;
}

.fieldMediaComposer > small {
  color: #64748b;
  line-height: 1.35;
}

.fieldEstimateBuilderHandoff,
.fieldSalesSummary,
.fieldOfflineReadiness,
.fieldCloseoutReadiness,
.fieldSalesForms,
.fieldTemplateStarter {
  display: grid;
  gap: 0.55rem;
}

.fieldEstimateBuilderHandoff {
  grid-column: 1 / -1;
  grid-template-columns: minmax(12rem, 1.1fr) repeat(5, minmax(0, 1fr));
  align-items: stretch;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 36%),
    rgba(240, 253, 250, 0.7);
  padding: 0.62rem;
}

.fieldEstimateBuilderHandoffHeader,
.fieldEstimateRecommendedStart,
.fieldEstimateBuilderHandoff button {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.56rem 0.62rem;
  text-align: left;
}

.fieldEstimateRecommendedStart {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  background: rgba(239, 246, 255, 0.82);
  border-color: rgba(37, 99, 235, 0.18);
}

.fieldEstimateRecommendedStart span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 0.62rem;
  background: #ffffff;
  padding: 0.42rem 0.5rem;
}

.fieldEstimateRecommendedStart span.needs_action {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.fieldEstimateRecommendedStart span.pending {
  border-color: rgba(14, 116, 144, 0.18);
  background: #f0fdfa;
}

.fieldEstimateBuilderHandoff button {
  cursor: pointer;
}

.fieldEstimateBuilderHandoff button.ready {
  border-color: rgba(20, 184, 166, 0.34);
  background: #f0fdfa;
}

.fieldEstimateBuilderHandoff button.needs_action {
  border-color: rgba(245, 158, 11, 0.28);
  background: #fffbeb;
}

.fieldEstimateBuilderHandoff span,
.fieldEstimateBuilderHandoff b,
.fieldEstimateRecommendedStart b {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fieldEstimateBuilderHandoff strong,
.fieldEstimateBuilderHandoff small,
.fieldEstimateRecommendedStart strong,
.fieldEstimateRecommendedStart small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldEstimateBuilderHandoff strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.fieldEstimateRecommendedStart strong {
  color: #0f172a;
  font-size: 0.76rem;
  font-weight: 900;
}

.fieldEstimateBuilderHandoff small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 740;
}

.fieldEstimateRecommendedStart small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
}

.fieldEstimateBuilderHandoff em {
  justify-self: start;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  padding: 0.18rem 0.48rem;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.fieldCloseoutActionRail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(13rem, 1.1fr) repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: stretch;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.11), transparent 34%),
    rgba(239, 246, 255, 0.74);
  padding: 0.62rem;
}

.fieldCloseoutActionRailHeader,
.fieldCloseoutActionRail button {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.56rem 0.62rem;
  text-align: left;
}

.fieldCloseoutActionRail button {
  cursor: pointer;
}

.fieldCloseoutActionRail button.ready {
  border-color: rgba(22, 163, 74, 0.3);
  background: #f0fdf4;
}

.fieldCloseoutActionRail button.pending {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
}

.fieldCloseoutActionRail button.fieldNextCloseoutAction {
  border-color: rgba(79, 70, 229, 0.28);
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.16), transparent 42%),
    #eef2ff;
}

.fieldCloseoutActionRail button.fieldNextCloseoutAction em {
  background: #c7d2fe;
  color: #3730a3;
}

.fieldCloseoutActionRail button.needs_action {
  border-color: rgba(245, 158, 11, 0.32);
  background: #fffbeb;
}

.fieldCloseoutActionRail span,
.fieldCloseoutActionRail b {
  color: #1d4ed8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fieldCloseoutActionRail strong,
.fieldCloseoutActionRail small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldCloseoutActionRail strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.fieldCloseoutActionRail small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 740;
}

.fieldCloseoutActionRail em {
  justify-self: start;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 0.18rem 0.48rem;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.fieldCloseoutProofStrip,
.fieldEstimateReviewHandoff {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.42rem;
}

.fieldEstimateReviewHandoff {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fieldCloseoutProofStrip span,
.fieldEstimateReviewHandoff span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-left: 0.22rem solid #2563eb;
  border-radius: 0.68rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.48rem 0.56rem;
}

.fieldCloseoutProofStrip span.ready,
.fieldEstimateReviewHandoff span.ready {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

.fieldCloseoutProofStrip span.pending,
.fieldEstimateReviewHandoff span.pending {
  border-left-color: #2563eb;
  background: #eff6ff;
}

.fieldCloseoutProofStrip span.needs_action,
.fieldEstimateReviewHandoff span.needs_action {
  border-left-color: #d97706;
  background: #fffbeb;
}

.fieldCloseoutProofStrip b,
.fieldCloseoutProofStrip strong,
.fieldCloseoutProofStrip small,
.fieldEstimateReviewHandoff b,
.fieldEstimateReviewHandoff strong,
.fieldEstimateReviewHandoff small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fieldCloseoutProofStrip b,
.fieldEstimateReviewHandoff b {
  color: #1d4ed8;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fieldCloseoutProofStrip strong,
.fieldEstimateReviewHandoff strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.fieldCloseoutProofStrip small,
.fieldEstimateReviewHandoff small {
  color: #64748b;
  font-size: 0.68rem;
  line-height: 1.25;
}

.fieldSalesSummary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fieldSellCoachingStrip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
}

.fieldSellCoachingStrip button {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.78rem;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.82);
  padding: 0.56rem 0.62rem;
  text-align: left;
  cursor: pointer;
}

.fieldSellCoachingStrip button:hover {
  border-color: rgba(14, 116, 144, 0.3);
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 44%),
    rgba(240, 253, 250, 0.9);
}

.fieldSellCoachingStrip b {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fieldSellCoachingStrip strong,
.fieldSellCoachingStrip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldSellCoachingStrip strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.fieldSellCoachingStrip small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 740;
}

.fieldSellCoachingStrip em {
  justify-self: start;
  margin-top: 0.18rem;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  padding: 0.18rem 0.48rem;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.fieldSalesSummary span {
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.74);
  color: #334155;
  padding: 0.62rem;
}

.fieldSalesSummary b {
  display: block;
  color: #0e7490;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fieldSalesSummary small {
  display: block;
  margin-top: 0.12rem;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 740;
  line-height: 1.25;
  white-space: normal;
}

.fieldMembershipBoundary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  min-width: 0;
}

.fieldMembershipBoundary span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 0.72rem;
  background: rgba(240, 253, 250, 0.82);
  padding: 0.48rem 0.54rem;
}

.fieldMembershipBoundary span.pending {
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(240, 249, 255, 0.82);
}

.fieldMembershipBoundary span.needs_action {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.fieldMembershipBoundary b,
.fieldMembershipBoundary strong,
.fieldMembershipBoundary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldMembershipBoundary b {
  color: #0f766e;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.fieldMembershipBoundary strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.fieldMembershipBoundary small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
}

.fieldOfflineReadiness {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.fieldOfflineReadinessItems {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.fieldOfflineReadinessItems span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.78rem;
  background: rgba(248, 250, 252, 0.78);
  padding: 0.58rem 0.64rem;
}

.fieldOfflineReadinessItems span.ready {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

.fieldOfflineReadinessItems span.pending {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.82);
}

.fieldOfflineReadinessItems span.needs_action {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.78);
}

.fieldOfflineReadinessItems b,
.fieldOfflineReadinessItems small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldOfflineReadinessItems b {
  color: #0f172a;
  font-size: 0.7rem;
}

.fieldOfflineReadinessItems small {
  color: #475569;
  font-size: 0.74rem;
}

.fieldOfflineReadinessActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: stretch;
}

.fieldOfflineReadinessActions button {
  min-height: 2.2rem;
  white-space: nowrap;
}

.fieldCloseoutReadiness {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto;
  align-items: stretch;
}

.fieldCloseoutReadiness > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.42rem;
  row-gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.78rem;
  background: rgba(248, 250, 252, 0.78);
  color: inherit;
  text-align: left;
  padding: 0.58rem 0.64rem;
}

.fieldCloseoutReadiness > button i {
  grid-row: span 2;
  display: inline-grid;
  align-self: center;
  width: 1.42rem;
  height: 1.42rem;
  place-items: center;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.fieldCloseoutReadiness > button.ready {
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

.fieldCloseoutReadiness > button.pending {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.82);
}

.fieldCloseoutReadiness > button.needs_action {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.78);
}

.fieldCloseoutReadiness b,
.fieldCloseoutReadiness small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldCloseoutReadiness b {
  color: #0f172a;
  font-size: 0.7rem;
  align-self: end;
}

.fieldCloseoutReadiness small {
  color: #475569;
  font-size: 0.74rem;
  align-self: start;
}

.fieldSalesForms {
  grid-template-columns: minmax(10rem, 1.2fr) auto minmax(7rem, 0.8fr) minmax(10rem, 1fr) auto auto;
  align-items: end;
}

.fieldTemplateStarter {
  grid-template-columns: minmax(12rem, 18rem) auto minmax(0, 1fr);
  align-items: end;
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  padding: 0.52rem;
}

.fieldTemplateStarter label {
  display: grid;
  gap: 0.24rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
}

.fieldTemplateStarter select {
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.5rem;
  font: inherit;
}

.fieldTemplateStarter button {
  min-height: 2.1rem;
  border: 1px solid rgba(14, 116, 144, 0.2);
  border-radius: 8px;
  background: #0f766e;
  color: #ffffff;
  padding: 0 0.65rem;
  font-weight: 800;
}

.fieldTemplateStarter button:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.fieldTemplateStarter small {
  min-width: 0;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.3;
}

.fieldCustomEstimateOptionComposer,
.fieldCustomEstimateLineComposer {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(12rem, 1.2fr) minmax(4.8rem, 0.4fr) minmax(6rem, 0.55fr) auto;
  align-items: end;
  gap: 0.5rem;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.68);
  padding: 0.52rem;
}

.fieldCustomEstimateOptionComposer {
  grid-template-columns: minmax(12rem, 1.1fr) minmax(10rem, 0.9fr) minmax(14rem, 1.2fr) minmax(8rem, 0.65fr) auto;
}

.fieldCustomEstimateOptionComposer label,
.fieldCustomEstimateLineComposer label {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
}

.fieldCustomEstimateOptionComposer input,
.fieldCustomEstimateOptionComposer select,
.fieldCustomEstimateLineComposer input,
.fieldCustomEstimateLineComposer select {
  width: 100%;
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.5rem;
  font: inherit;
}

.fieldCustomEstimateOptionComposer button,
.fieldCustomEstimateLineComposer button {
  min-height: 2.1rem;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px;
  background: #1d4ed8;
  color: #ffffff;
  padding: 0 0.65rem;
  font-weight: 800;
}

.fieldCustomEstimateOptionComposer button:disabled,
.fieldCustomEstimateLineComposer button:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.fieldInvoiceDeliveryPlan {
  color: #0f766e;
  font-weight: 800;
}

.fieldPaymentReaderCloseoutPlan {
  color: #0f766e;
  font-weight: 800;
  white-space: normal;
}

.fieldEstimateSignatureUpload {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1.2fr) auto;
  gap: 0.55rem;
  align-items: end;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  padding: 0.58rem;
}

.fieldEstimateCloseoutPlan {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  gap: 0.45rem;
  align-items: end;
}

.fieldEstimateCloseoutPlan label {
  display: grid;
  gap: 0.24rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
}

.fieldEstimateCloseoutPlan select {
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  padding: 0 0.5rem;
  font: inherit;
}

.fieldEstimateCloseoutOutcome {
  grid-column: 1 / -1;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.fieldInlineSwitch {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 0.55rem;
  white-space: nowrap;
}

.fieldInlineSwitch input {
  width: 1rem;
  height: 1rem;
}

.fieldMembershipPackageWarning {
  grid-column: 1 / -1;
  justify-content: flex-start;
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
  color: #92400e;
  white-space: normal;
}

.fieldMembershipPackageWarning span {
  line-height: 1.25;
}

.fieldMembershipPackagePlan {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.32rem;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.76);
  padding: 0.52rem 0.58rem;
  color: #0f766e;
}

.fieldMembershipPackagePlan.ready {
  border-color: rgba(13, 148, 136, 0.28);
  background: rgba(204, 251, 241, 0.58);
}

.fieldMembershipPackagePlan strong {
  color: #134e4a;
  font-size: 0.76rem;
  font-weight: 900;
}

.fieldMembershipPackagePlan ul {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding-left: 1rem;
}

.fieldMembershipPackagePlan li {
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.32;
}

.fieldMembershipActionHint {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  padding: 0.44rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 820;
}

@media (max-width: 980px) {
  .serviceCallBookingRail {
    grid-template-columns: 1fr;
  }

  .serviceCallBookingRailFacts,
  .serviceCustomerHistoryStrip,
  .fieldSellCoachingStrip,
  .serviceMembershipRuleEditor,
  .serviceUnifiedSyncStatus,
  .fieldUnifiedSyncStatus,
  .fieldNativeCloseoutProof,
  .servicePricebookConfigEditor,
  .serviceRecordIndex,
  .serviceRecordIndex > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fieldMembershipTaskDetail,
.fieldTemplateDetail {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.35rem;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 8px;
  background: rgba(236, 254, 255, 0.72);
  padding: 0.5rem 0.58rem;
}

.fieldMembershipTaskDetail strong,
.fieldTemplateDetail strong {
  color: #134e4a;
  font-size: 0.76rem;
  font-weight: 900;
}

.fieldMembershipTaskBadges,
.fieldTemplateDetail div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.fieldMembershipTaskBadges span,
.fieldTemplateDetail span {
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #0f766e;
  padding: 0.14rem 0.38rem;
  font-size: 0.67rem;
  font-weight: 820;
  line-height: 1.2;
}

.fieldEstimateSignatureUpload small {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.3;
}

.fieldEstimateSignatureUpload button {
  min-height: 2.1rem;
  border-radius: 8px;
  padding: 0 0.72rem;
  white-space: nowrap;
}

.fieldPackagePreview {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.25;
}

.fieldSalesList {
  margin-top: 0.1rem;
}

.fieldEstimateActionList .fieldEstimateActionCard {
  display: grid;
  gap: 0.55rem;
}

.fieldEstimateBuilderIntro {
  display: grid;
  gap: 0.16rem;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.78));
  padding: 0.55rem 0.65rem;
}

.fieldEstimateBuilderIntro strong {
  color: #1d4ed8;
  font-size: 0.82rem;
}

.fieldEstimateBuilderIntro small {
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.35;
}

.fieldEstimateHeaderRow,
.fieldEstimateOptionRow {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
}

.fieldEstimateHeaderRow span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fieldEstimateOptions {
  display: grid;
  gap: 0.4rem;
}

.fieldEstimateOptionRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.45rem 0.5rem;
}

.fieldEstimateLineItems {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.28rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding-top: 0.34rem;
}

.fieldEstimateLineItems > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, auto) auto;
  align-items: center;
  gap: 0.42rem;
  min-height: 2rem;
}

.fieldEstimateEditPanel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  align-items: end;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.94);
  padding: 0.5rem;
}

.fieldEstimateEditPanel label {
  display: grid;
  gap: 0.18rem;
}

.fieldEstimateEditPanel label span {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 760;
}

.fieldEstimateEditPanel input {
  min-height: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  padding: 0 0.55rem;
}

.fieldPaymentActionRow {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
}

.fieldInvoiceActionRow {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 8px;
  background: rgba(240, 249, 255, 0.72);
  padding: 0.5rem 0.55rem;
}

.fieldBillingLaunchTarget {
  border-color: rgba(245, 158, 11, 0.72);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
}

.fieldLaunchTargetNote {
  color: #92400e;
  font-weight: 850;
}

.fieldEstimateOptionRow span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.fieldEstimateOptionActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.fieldPaymentActionRow span,
.fieldInvoiceActionRow span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fieldPaymentActionRow .fieldPaymentActionButtons,
.fieldInvoiceActionRow .fieldInvoiceActionButtons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: min(17rem, 100%);
}

.fieldMembershipSourceChip {
  flex: 0 0 auto;
  border: 1px solid rgba(14, 116, 144, 0.22);
  border-radius: 999px;
  background: rgba(236, 254, 255, 0.78);
  color: #0f766e;
  padding: 0.18rem 0.48rem;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.fieldEstimateOptionRow b,
.fieldEstimateOptionRow small,
.fieldInvoiceActionRow strong,
.fieldInvoiceActionRow small,
.fieldPaymentActionRow strong,
.fieldPaymentActionRow small,
.fieldEstimateApprovalNote {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fieldEstimateOptionRow b {
  color: #0f172a;
  font-size: 0.78rem;
}

.fieldEstimateOptionRow small,
.fieldEstimateApprovalNote {
  color: #64748b;
  font-size: 0.72rem;
}

.fieldEstimateOptionRow .fieldEstimateApprovalPromise {
  color: #047857;
  font-weight: 720;
  white-space: normal;
}

.fieldEstimateOptionRow .fieldEstimateInvoiceHandoff {
  color: #1d4ed8;
  font-weight: 720;
  white-space: normal;
}

.fieldEstimateCloseoutPath,
.fieldEstimateDecisionPath {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.34rem;
  min-width: 0;
}

.fieldEstimateCloseoutPath span,
.fieldEstimateDecisionPath span {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 0.48rem;
  background: #f8fafc;
  padding: 0.42rem 0.5rem;
}

.fieldEstimateCloseoutPath b,
.fieldEstimateCloseoutPath small,
.fieldEstimateDecisionPath b,
.fieldEstimateDecisionPath small {
  overflow: hidden;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldEstimateCloseoutPath b,
.fieldEstimateDecisionPath b {
  color: #0f172a;
  font-weight: 900;
}

.fieldEstimateHeaderRow button,
.fieldEstimateOptionRow button {
  min-height: 2.1rem;
  border-radius: 8px;
  padding: 0 0.72rem;
  white-space: nowrap;
}

.fieldEstimateLineItems button {
  min-height: 1.75rem;
  padding: 0 0.48rem;
  font-size: 0.7rem;
}

.fieldPaymentActionRow button {
  min-height: 2.1rem;
  border-radius: 8px;
  padding: 0 0.72rem;
  white-space: nowrap;
}

.fieldPaymentActionRow button.confirmDanger {
  border-color: rgba(220, 38, 38, 0.42);
}

.fieldJobDetailsComposer button:disabled,
.fieldJobNoteComposer button:disabled,
.fieldJobStatusComposer button:disabled,
.fieldMaterialComposer button:disabled,
.fieldPurchaseOrderComposer button:disabled,
.fieldFormComposer button:disabled,
.fieldMediaComposer button:disabled,
.fieldSalesComposer button:disabled {
  background: rgba(148, 163, 184, 0.42);
  color: rgba(255, 255, 255, 0.88);
  cursor: not-allowed;
  box-shadow: none;
}

.fieldPacketStatus {
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding-top: 0.75rem;
}

.fieldVoucherList div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.fieldVoucherList small {
  display: block;
  margin-top: 0.15rem;
  color: #64748b;
}

.fieldVoucherAction {
  min-height: 2.35rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 850;
}

.fieldVoucherAction:disabled {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  cursor: not-allowed;
}

.fieldTimeOffForm {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}

.fieldTimeOffForm textarea {
  min-height: 5rem;
  resize: vertical;
}

.fieldEmpty {
  color: #64748b;
  margin: 0;
}

/* Operations shell density pass for the long-term Economy Plumbing OS workbench. */
@media (min-width: 921px) {
  .inboxAppShell {
    padding: 0.38rem;
  }

  .desktopWindowBar {
    grid-template-columns: auto minmax(38rem, 1fr) auto;
    min-height: 2.9rem;
    padding: 0.32rem 0.55rem;
    border-radius: 10px 10px 0 0;
  }

  .appHeaderBrand {
    min-width: 11.4rem;
  }

  .appHeaderGlyph {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
  }

  .activeSurfaceSummary {
    min-width: 9.5rem;
    max-width: min(19vw, 17rem);
  }

  .inboxShell.nativeMailShell {
    min-height: calc(100vh - 3.65rem);
    grid-template-columns: 13.4rem minmax(27rem, 32vw) minmax(0, 1fr);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 14px 42px rgba(23, 31, 45, 0.12);
  }

  .sidebar {
    padding: 0.68rem 0.54rem;
  }

  .messageButton {
    min-height: 4.65rem;
    padding-block: 0.52rem;
  }
}

@media (max-width: 920px) {
  .phoneAppShell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 4rem);
  }

  .phoneRail {
    max-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  }

  .phoneDetail {
    min-height: 56vh;
  }

  .phoneToolbar,
  .phonePanelHeader,
  .fieldHero,
  .fieldNativeReadinessStrip,
  .adminHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .phoneToolbarActions {
    justify-content: stretch;
  }

  .phoneToolbarActions button,
  .phonePanelHeader button,
  .fieldHero button {
    flex: 1 1;
  }

  .adminWorkspaceShell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .adminWorkspaceNav,
  .adminWorkspaceRail {
    position: static;
  }

  .adminWorkspaceNav {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.08rem 0 0.38rem;
    scroll-snap-type: x proximity;
  }

  .adminWorkspaceNavIntro {
    flex: 0 0 13.5rem;
    scroll-snap-align: start;
  }

  .adminWorkspaceNav a {
    flex: 0 0 min(17rem, 82vw);
    scroll-snap-align: start;
  }

  .adminWorkspaceCurrent {
    align-items: flex-start;
  }

  .adminWorkspaceRail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminProviderSecretRow,
  .adminTriageBar {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminTriageCounts {
    justify-content: flex-start;
  }

  .adminPermissionLayout {
    grid-template-columns: 1fr;
  }

  .adminRoleOverview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminControlBand,
  .adminPolicyList {
    grid-template-columns: 1fr;
  }

  .adminPermissionNav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneBubble {
    max-width: 94%;
  }

  .phoneComposer {
    grid-template-columns: 1fr;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .callNoteComposer {
    grid-template-columns: 1fr;
  }

  .phoneStatusStrip,
  .phoneInboundWorkbench,
  .phoneReadinessStrip,
  .phoneIncomingDebugGrid,
  .phoneProofList,
  .phoneProviderProofCoverage,
  .phoneProviderProofList,
  .phoneCallbackQueue,
  .phoneCallbackResolution,
  .phoneRingControls,
  .phoneCallEventList,
  .fieldPayGrid,
  .fieldTemplateStarter,
  .fieldEstimateRecommendedStart,
  .fieldMembershipBoundary,
  .fieldCustomEstimateOptionComposer,
  .fieldCustomEstimateLineComposer {
    grid-template-columns: 1fr;
  }

  .fieldFormSummary,
  .fieldFormActions {
    grid-template-columns: 1fr;
  }

  .phoneProofHeader {
    flex-direction: column;
  }

  .incomingCallCard,
  .phoneCallInboxHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .fieldModeSwitch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldVoucherList div {
    grid-template-columns: 1fr;
  }

  .fieldMetricGrid,
  .fieldMainGrid,
  .fieldFocusFacts,
  .fieldPacketGrid,
  .fieldCompletionChecklist,
  .fieldPacketStatus,
  .fieldPrimaryActionDock,
  .fieldWorkLaneSwitch,
  .fieldActionGrid,
  .fieldJobDetailsComposer,
  .fieldMaterialComposer,
  .fieldPurchaseOrderComposer,
  .fieldMediaSummary,
  .fieldMediaForms,
  .fieldSalesSummary,
  .fieldNativeCloseoutProof,
  .fieldOfflineReadiness,
  .fieldOfflineReadinessItems,
  .fieldCloseoutReadiness,
  .fieldSalesForms,
  .fieldEstimateSignatureUpload,
  .fieldEstimateCloseoutPlan,
  .fieldEstimateRecommendedStart,
  .fieldEstimateCloseoutPath,
  .fieldEstimateDecisionPath {
    grid-template-columns: 1fr;
  }

  .fieldJobsCard {
    grid-row: auto;
  }

  .fieldPrimaryActionDock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldWorkLaneSwitch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldSecondaryActionRail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final mobile app-shell pass: keep every Team App surface reachable. */
@media (max-width: 920px) {
  .inboxAppShell {
    min-height: 100dvh;
    padding: env(safe-area-inset-top) 0 calc(6.25rem + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .desktopWindowBar {
    position: sticky;
    top: 0;
    z-index: 35;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    min-height: 4rem;
    border-radius: 0;
    padding: 0.55rem 0.75rem;
  }

  .windowLeftChrome {
    min-width: 0;
  }

  .appHeaderBrand {
    display: none;
  }

  .mobileAppTitle.mobileOnly {
    display: grid;
    min-width: 0;
  }

  .mobileAppTitle.mobileOnly strong,
  .mobileAppTitle.mobileOnly span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .windowTitle {
    display: none;
  }

  .windowMeta {
    min-width: 0;
    gap: 0.45rem;
  }

  .syncPill {
    display: none;
  }

  .notificationTray {
    position: fixed;
    top: calc(4.25rem + env(safe-area-inset-top));
    right: 0.65rem;
    left: 0.65rem;
    width: auto;
    max-width: none;
  }

  .mobileAppDock {
    position: fixed;
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: max(0.65rem, env(safe-area-inset-bottom));
    left: max(0.65rem, env(safe-area-inset-left));
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.2rem, 1fr));
    gap: 0.28rem;
    padding: 0.42rem;
    border: 1px solid rgba(15, 23, 42, 0.11);
    border-radius: 1.65rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
            backdrop-filter: blur(24px) saturate(1.2);
  }

  .mobileAppDock button {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.08rem;
    min-width: 0;
    min-height: 3.4rem;
    border: 0;
    border-radius: 1.18rem;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 850;
  }

  .mobileAppDock svg {
    width: 1.18rem;
    height: 1.18rem;
  }

  .mobileAppDock span,
  .mobileAppDock small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileAppDock small {
    color: #64748b;
    font-size: 0.56rem;
    font-weight: 760;
  }

  .mobileAppDock button.active {
    background: linear-gradient(180deg, #ffffff, #dbeafe);
    color: #0f4c81;
    box-shadow: 0 0.7rem 1.7rem rgba(37, 99, 235, 0.16);
  }

  .mobileAppDock em {
    position: absolute;
    top: 0.32rem;
    right: 0.48rem;
    min-width: 1.05rem;
    height: 1.05rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #0a84ff;
    color: #fff;
    font-size: 0.58rem;
    font-style: normal;
    line-height: 1;
  }

  .mobileBottomNav {
    right: max(0.8rem, env(safe-area-inset-right));
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
    left: max(0.8rem, env(safe-area-inset-left));
    z-index: 48;
    border-radius: 1.45rem;
    padding: 0.38rem;
  }

  .mobileComposeFab {
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(9.7rem + env(safe-area-inset-bottom));
    z-index: 49;
  }

  .inboxShell.nativeMailShell,
  .chatShell,
  .serviceShell,
  .phoneAppShell,
  .fieldAppShell,
  .adminAppShell {
    min-height: calc(100dvh - 4rem);
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
  }

  .phoneAppShell {
    display: block;
    overflow: visible;
  }

  .phoneRail {
    max-height: none;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  }

  .phoneThreadList {
    max-height: 42dvh;
    overscroll-behavior: contain;
  }

  .phoneDetail {
    min-height: 52dvh;
    display: flex;
    flex-direction: column;
  }

  .phoneTimeline {
    flex: 1 1;
    max-height: none;
    min-height: 16rem;
  }

  .phoneComposer {
    position: relative;
    bottom: auto;
    z-index: 8;
    margin: 0 0.75rem calc(6.9rem + env(safe-area-inset-bottom));
    border-radius: 1.25rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .phoneEmpty.detail {
    display: none;
  }

  .chatShell {
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
  }

  .chatComposer {
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
  }

  .fieldAppShell {
    padding: 0.75rem 0.75rem calc(6.5rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 390px) {
  .mobileAppDock {
    gap: 0.18rem;
    padding: 0.32rem;
  }

  .mobileAppDock button {
    min-height: 3rem;
    font-size: 0.62rem;
  }

  .mobileAppDock small {
    display: none;
  }

  .mobileAppDock svg {
    width: 1.05rem;
    height: 1.05rem;
  }
}

/* Functional UX scroll contract: keep the OS usable before it is pretty. */
html,
body {
  overflow-x: hidden;
  overscroll-behavior-y: auto;
}

.inboxAppShell {
  background: #f5f7fa;
}

.desktopWindowBar,
.operationsPulseStrip,
.inboxShell.nativeMailShell,
.chatShell,
.serviceShell,
.phoneAppShell,
.fieldAppShell,
.adminAppShell {
  background-image: none;
}

.desktopWindowBar,
.operationsPulseStrip,
.chatConversationRail,
.chatMain,
.serviceCustomerPane,
.serviceProfilePane,
.serviceRecordsPane,
.phoneConsole,
.phoneCallbackFocus,
.phoneCallbackQueue button,
.fieldHero,
.adminHeader,
.fieldMetricGrid article,
.fieldCard,
.adminRulePanel {
  border-radius: 8px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.operationsPulseStrip,
.chatShell,
.serviceShell,
.phoneAppShell,
.fieldAppShell,
.adminAppShell {
  border-color: rgba(15, 23, 42, 0.12);
}

@media (min-width: 921px) {
  .inboxAppShell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 0.35rem;
  }

  .inboxShell.nativeMailShell {
    height: calc(100dvh - 6.05rem);
    min-height: 0;
    overflow: hidden;
  }

  .chatShell,
  .serviceShell,
  .phoneAppShell,
  .fieldAppShell,
  .adminAppShell {
    height: calc(100dvh - 6.05rem);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .phoneAppShell {
    grid-template-rows: minmax(0, 1fr);
  }

  .phoneRail,
  .phoneDetail {
    min-height: 0;
  }
}

@media (max-width: 920px) {
  .inboxAppShell {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: env(safe-area-inset-top) 0 calc(5.35rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .desktopWindowBar {
    position: sticky;
    top: 0;
  }

  .inboxShell.nativeMailShell,
  .chatShell,
  .serviceShell,
  .phoneAppShell,
  .fieldAppShell,
  .adminAppShell {
    height: auto;
    min-height: calc(100dvh - 4rem);
    overflow: visible;
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom));
  }

  .inboxShell.nativeMailShell {
    display: block;
  }

  .sidebar,
  .messageColumn,
  .detailColumn {
    height: auto !important;
    min-height: calc(100dvh - 4rem) !important;
  }

  .sidebar.mobileActive,
  .messageColumn.mobileActive,
  .detailColumn.mobileActive,
  .phoneThreadList,
  .phoneTimeline,
  .chatConversationList,
  .chatTimeline,
  .serviceProfileContent,
  .serviceRecordsBody,
  .fieldAppShell,
  .adminAppShell {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .phoneRail {
    max-height: none;
  }

  .phoneThreadList {
    max-height: 40dvh;
  }

  .phoneTimeline {
    min-height: 18rem;
    max-height: none;
  }

  .mobileAppDock {
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  }

  .mobileAppDock button,
  .mobileAppDock button.active {
    border-radius: 6px;
    box-shadow: none;
  }
}

/* Functional UX copy reduction: keep navigation terse; actions carry context through labels. */
.activeSurfaceSummary small,
.operationsSurfaceCopy small,
.mobileAppTitle.mobileOnly span {
  display: none;
}

@media (max-width: 920px) {
  .phoneGlobalCallTray {
    top: auto;
    right: max(0.65rem, env(safe-area-inset-right));
    bottom: calc(5.85rem + env(safe-area-inset-bottom));
    left: max(0.65rem, env(safe-area-inset-left));
    grid-template-columns: 1fr;
    width: auto;
  }

  .phoneGlobalCallActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
}

/* Economy OS operations-console redesign pass: compact shell, mail-first workbench, app-ready mobile. */
.opsConsoleShell {
  --ops-rail-width: 3.7rem;
  --ops-header-height: 3.1rem;
  --ops-border: #dbe1ea;
  --ops-border-soft: #e7ebf1;
  --ops-bg: #f6f7f9;
  --ops-surface: #ffffff;
  --ops-text: #111827;
  --ops-muted: #667085;
  --ops-accent: #0b63ce;
  color: var(--ops-text);
  background: var(--ops-bg);
  letter-spacing: 0;
}

.opsConsoleShell *,
.opsConsoleShell *::before,
.opsConsoleShell *::after {
  letter-spacing: 0;
}

@media (min-width: 921px) {
  .opsConsoleShell {
    display: grid;
    grid-template-columns: var(--ops-rail-width) minmax(0, 1fr);
    grid-template-rows: var(--ops-header-height) minmax(0, 1fr);
    gap: 0;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .opsConsoleShell .desktopWindowBar {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    height: var(--ops-header-height);
    border: 0;
    border-bottom: 1px solid var(--ops-border);
    border-radius: 0;
    padding: 0 0.72rem;
    background: var(--ops-surface);
    color: var(--ops-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .opsConsoleShell .appHeaderBrand {
    min-width: 0;
    gap: 0.48rem;
  }

  .opsConsoleShell .appHeaderGlyph {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.38rem;
    background: #0b63ce;
    box-shadow: none;
  }

  .opsConsoleShell .appHeaderBrand strong,
  .opsConsoleShell .activeSurfaceSummary strong {
    color: var(--ops-text);
    font-size: 0.86rem;
    line-height: 1.1;
  }

  .opsConsoleShell .appHeaderBrand small,
  .opsConsoleShell .surfaceKicker,
  .opsConsoleShell .activeSurfaceSummary small,
  .opsConsoleShell .operationsSurfaceCopy small {
    display: none !important;
  }

  .opsConsoleShell .windowTitle {
    justify-self: start;
    min-width: 0;
  }

  .opsConsoleShell .activeSurfaceSummary {
    display: flex;
    min-width: 0;
    max-width: none;
    align-items: center;
  }

  .opsConsoleShell .operationsWorkbenchNav {
    display: none;
  }

  .opsConsoleShell .windowMeta {
    gap: 0.42rem;
  }

  .opsConsoleShell .syncPill {
    min-height: 2rem;
    padding: 0.3rem 0.58rem;
    border: 1px solid var(--ops-border-soft);
    border-radius: 0.38rem;
    background: #f8fafc;
    color: var(--ops-muted);
    font-size: 0.72rem;
    font-weight: 650;
  }

  .opsConsoleShell .primaryIconButton,
  .opsConsoleShell .notificationButton,
  .opsConsoleShell .avatarButton {
    min-height: 2rem;
    border-radius: 0.38rem;
    box-shadow: none;
  }

  .opsConsoleShell .primaryIconButton {
    padding-inline: 0.72rem;
    background: var(--ops-accent);
  }

  .opsConsoleShell .operationsPulseStrip {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex !important;
    flex-direction: column;
    gap: 0.22rem;
    margin: 0;
    padding: 0.45rem 0.32rem;
    border: 0;
    border-right: 1px solid var(--ops-border);
    border-radius: 0;
    background: var(--ops-surface);
    box-shadow: none;
  }

  .opsConsoleShell .operationsPulseItem {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    min-height: 3.05rem;
    justify-items: center;
    gap: 0.12rem;
    padding: 0.32rem 0.12rem;
    border-radius: 0.44rem;
    color: #475467;
    text-align: center;
  }

  .opsConsoleShell .operationsPulseItem.active {
    background: #eef5ff;
    color: #084a9f;
    box-shadow: inset 0 0 0 1px rgba(11, 99, 206, 0.14);
  }

  .opsConsoleShell .operationsPulseItem svg {
    width: 1.13rem;
    height: 1.13rem;
  }

  .opsConsoleShell .operationsPulseItem span {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0;
  }

  .opsConsoleShell .operationsPulseItem b {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.6rem;
    font-weight: 760;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .operationsPulseItem strong,
  .opsConsoleShell .operationsPulseItem small {
    display: none !important;
  }

  .opsConsoleShell .systemBannerStack {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    z-index: 12;
    margin: 0.5rem;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .opsConsoleShell .inboxShell.nativeMailShell {
    display: grid;
    grid-template-columns: 12.5rem minmax(20rem, 29vw) minmax(0, 1fr);
    overflow: hidden;
    background: var(--ops-surface);
  }

  .opsConsoleShell .sidebar {
    gap: 0.56rem;
    padding: 0.62rem 0.52rem;
    border-right: 1px solid var(--ops-border);
    background: #f8fafc;
    color: var(--ops-text);
  }

  .opsConsoleShell .sidebarBrandBlock {
    min-height: auto;
    padding: 0.24rem 0.18rem 0.34rem;
    border: 0;
    background: transparent;
  }

  .opsConsoleShell .brandGlyph,
  .opsConsoleShell .brandLockup p,
  .opsConsoleShell .profileCard,
  .opsConsoleShell .sidebarStorageCard,
  .opsConsoleShell .messageScopeRail,
  .opsConsoleShell .contextRibbon,
  .opsConsoleShell .messageListFooter {
    display: none !important;
  }

  .opsConsoleShell .brandLockup strong {
    font-size: 0.86rem;
  }

  .opsConsoleShell .sidebarSectionHeader {
    margin-top: 0.22rem;
    padding: 0.1rem 0.18rem;
  }

  .opsConsoleShell .eyebrow,
  .opsConsoleShell .sidebarCount {
    color: #667085;
    font-size: 0.62rem;
  }

  .opsConsoleShell .mailboxList,
  .opsConsoleShell .folderList,
  .opsConsoleShell .tagList {
    gap: 0.16rem;
  }

  .opsConsoleShell .mailboxButton,
  .opsConsoleShell .folderRow,
  .opsConsoleShell .tagRow {
    min-height: 2rem;
    padding: 0.34rem 0.42rem;
    border: 1px solid transparent;
    border-radius: 0.42rem;
    background: transparent;
    color: var(--ops-text);
    box-shadow: none;
  }

  .opsConsoleShell .mailboxButton.active,
  .opsConsoleShell .folderRow.active,
  .opsConsoleShell .tagRow.active {
    border-color: rgba(11, 99, 206, 0.14);
    background: #eef5ff;
  }

  .opsConsoleShell .mailboxButton span,
  .opsConsoleShell .mailboxButton small,
  .opsConsoleShell .folderRowMeta,
  .opsConsoleShell .tagRow small {
    font-size: 0.66rem;
  }

  .opsConsoleShell .mailboxTypePill {
    padding: 0.08rem 0.24rem;
    border-radius: 0.3rem;
    font-size: 0.56rem;
  }

  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    border-color: var(--ops-border);
    background: var(--ops-surface);
  }

  .opsConsoleShell .messageWorkspace {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    flex: 1 1;
  }

  .opsConsoleShell .messageResultsPanel {
    padding-left: 0;
    border-left: 0;
  }

  .opsConsoleShell .searchBar,
  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .detailToolbar {
    border-color: var(--ops-border);
    background: var(--ops-surface);
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .opsConsoleShell .searchBar {
    gap: 0.34rem;
    padding: 0.46rem 0.52rem;
  }

  .opsConsoleShell .messageSubtoolbar {
    gap: 0.4rem;
    padding: 0.38rem 0.52rem;
  }

  .opsConsoleShell .filterChip.mutedOnly {
    display: none;
  }

  .opsConsoleShell .messageList {
    padding: 0;
    overflow-y: auto;
  }

  .opsConsoleShell .messageRowShell {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    border-color: var(--ops-border-soft);
  }

  .opsConsoleShell .messageBulkSelect,
  .opsConsoleShell .messageButton {
    min-height: 4.35rem;
  }

  .opsConsoleShell .messageBulkSelect {
    min-width: 2.15rem;
    border-radius: 0;
  }

  .opsConsoleShell .messageButton {
    padding: 0.5rem 0.62rem;
    border-radius: 0;
  }

  .opsConsoleShell .messageAvatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.38rem;
  }

  .opsConsoleShell .messageTopRow strong {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .opsConsoleShell .messageTopRow span,
  .opsConsoleShell .messageSubjectRow,
  .opsConsoleShell .messageMeta {
    font-size: 0.7rem;
  }

  .opsConsoleShell .messageSubjectRow,
  .opsConsoleShell .messageMeta {
    line-height: 1.28;
  }

  .opsConsoleShell .threadMetaRow {
    display: none;
  }

  .opsConsoleShell .detailToolbar {
    min-height: 2.72rem;
    padding: 0.32rem 0.52rem;
  }

  .opsConsoleShell .detailToolbar .detailActions {
    gap: 0.24rem;
  }

  .opsConsoleShell .toolbarIconButton,
  .opsConsoleShell .folderSelect {
    min-width: 2rem;
    min-height: 2rem;
    height: 2rem;
    border-radius: 0.38rem;
    box-shadow: none;
  }

  .opsConsoleShell .folderSelect {
    max-width: 8.5rem;
  }

  .opsConsoleShell .messageDetail {
    padding: 0.72rem 0.92rem 1rem;
    overflow-y: auto;
    background: var(--ops-surface);
  }

  .opsConsoleShell .messageActionStrip {
    position: static;
    margin: 0 0 0.72rem;
    padding: 0.44rem 0.52rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.45rem;
    background: #f8fafc;
  }

  .opsConsoleShell .messageActionStrip div {
    gap: 0.28rem;
  }

  .opsConsoleShell .messageActionStrip button {
    min-height: 2rem;
    padding: 0.3rem 0.52rem;
    border-radius: 0.38rem;
  }

  .opsConsoleShell .messageOpsSummary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.34rem;
  }

  .opsConsoleShell .messageOpsSummary span {
    min-height: 3rem;
    padding: 0.36rem 0.44rem;
    border-radius: 0.42rem;
  }

  .opsConsoleShell .messageHero {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.58rem;
    padding: 0.48rem 0 0.72rem;
  }

  .opsConsoleShell .messageHeroAvatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.38rem;
  }

  .opsConsoleShell .messageHeroCopy h3 {
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .opsConsoleShell .messageInlineMeta {
    gap: 0.26rem;
    font-size: 0.72rem;
  }

  .opsConsoleShell .messageHtmlFrame {
    height: min(26dvh, 15rem);
    min-height: 0;
    border: 0;
    background: #ffffff;
  }

  .opsConsoleShell .messageBodyMode {
    display: none;
  }

  .opsConsoleShell .plainMessageBody {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .opsConsoleShell .messageCommentsPanel,
  .opsConsoleShell .replyDock,
  .opsConsoleShell .attachmentList,
  .opsConsoleShell .threadStrip {
    border-radius: 0.5rem;
    box-shadow: none;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-header-height: 3.65rem;
    min-height: 100dvh;
    padding: 0 0 calc(4.45rem + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ops-surface);
  }

  .opsConsoleShell .desktopWindowBar {
    min-height: var(--ops-header-height);
    border: 0;
    border-bottom: 1px solid var(--ops-border);
    border-radius: 0;
    padding: calc(0.34rem + env(safe-area-inset-top)) 0.68rem 0.34rem;
    background: var(--ops-surface);
    color: var(--ops-text);
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .opsConsoleShell .mobileAppTitle.mobileOnly strong {
    color: var(--ops-text);
    font-size: 0.95rem;
    line-height: 1.12;
  }

  .opsConsoleShell .mobileAppTitle.mobileOnly span,
  .opsConsoleShell .syncPill,
  .opsConsoleShell .windowMeta .primaryIconButton {
    display: none !important;
  }

  .opsConsoleShell .windowMeta {
    gap: 0.34rem;
  }

  .opsConsoleShell .notificationButton,
  .opsConsoleShell .avatarButton {
    width: 2.12rem;
    height: 2.12rem;
    min-height: 2.12rem;
    border-radius: 0.46rem;
    box-shadow: none;
  }

  .opsConsoleShell .mobileAppDock {
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.08rem;
    padding: 0.32rem max(0.46rem, env(safe-area-inset-left)) calc(0.34rem + env(safe-area-inset-bottom)) max(0.46rem, env(safe-area-inset-right));
    border: 0;
    border-top: 1px solid var(--ops-border);
    border-radius: 0;
    background: var(--ops-surface);
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .opsConsoleShell .mobileAppDock button,
  .opsConsoleShell .mobileAppDock button.active {
    min-height: 3.18rem;
    border-radius: 0.42rem;
    box-shadow: none;
  }

  .opsConsoleShell .mobileAppDock button {
    gap: 0.08rem;
    min-width: 0;
    padding: 0 !important;
    color: #667085;
    font-size: 0.62rem;
    font-weight: 760;
  }

  .opsConsoleShell .mobileAppDock button.active {
    background: #eef5ff;
    color: #084a9f;
  }

  .opsConsoleShell .mobileAppDock small {
    display: none !important;
  }

  .opsConsoleShell .mobileBottomNav {
    position: sticky;
    top: var(--ops-header-height);
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 28;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: auto;
    margin: 0.46rem 0.58rem;
    padding: 0.22rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.52rem;
    background: #f8fafc;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  .opsConsoleShell .mobileNavButton {
    min-height: 2.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.38rem;
    background: transparent;
    color: #667085;
    box-shadow: none;
  }

  .opsConsoleShell .mobileNavButton svg {
    display: none;
  }

  .opsConsoleShell .mobileNavButton.active {
    background: var(--ops-surface);
    color: var(--ops-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  }

  .opsConsoleShell .mobileComposeFab {
    right: max(0.78rem, env(safe-area-inset-right));
    bottom: calc(4.65rem + env(safe-area-inset-bottom));
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    background: var(--ops-accent);
    box-shadow: 0 0.8rem 1.8rem rgba(11, 99, 206, 0.22);
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    min-height: calc(100dvh - var(--ops-header-height));
    padding-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--ops-surface);
  }

  .opsConsoleShell .sidebar,
  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    min-height: calc(100dvh - var(--ops-header-height) - 4.45rem) !important;
    background: var(--ops-surface);
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen {
    position: fixed;
    top: calc(var(--ops-header-height) + 0.4rem);
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    left: max(0.55rem, env(safe-area-inset-left));
    z-index: 45;
    width: min(82vw, 20rem);
    min-height: auto !important;
    padding: 0.68rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.6rem;
    background: #f8fafc;
    color: var(--ops-text);
    box-shadow: 0 1.4rem 3.6rem rgba(16, 24, 40, 0.22);
  }

  .opsConsoleShell .profileCard,
  .opsConsoleShell .sidebarStorageCard,
  .opsConsoleShell .brandLockup p {
    display: none !important;
  }

  .opsConsoleShell .columnHeader,
  .opsConsoleShell .searchBar,
  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .contextRibbon,
  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .messageDetailPlaceholder {
    padding-inline: 0.72rem;
  }

  .opsConsoleShell .columnHeader {
    padding-block: 0.56rem;
  }

  .opsConsoleShell .columnHeader h2 {
    font-size: 1.05rem;
    letter-spacing: 0;
  }

  .opsConsoleShell .columnSubhead {
    font-size: 0.72rem;
  }

  .opsConsoleShell .messageToolbarStats .toolbarMailboxAvatar {
    display: none;
  }

  .opsConsoleShell .searchBar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.32rem;
    padding-block: 0.38rem;
    border-color: var(--ops-border);
    background: var(--ops-surface);
  }

  .opsConsoleShell .segmentedControl {
    display: none;
  }

  .opsConsoleShell .messageSubtoolbar {
    padding-block: 0.3rem;
    overflow-x: auto;
    border-color: var(--ops-border);
  }

  .opsConsoleShell .filterChip.mutedOnly {
    display: none;
  }

  .opsConsoleShell .folderRail.mobileOnly {
    padding: 0.28rem 0.72rem;
  }

  .opsConsoleShell .messageList {
    padding-bottom: 1rem;
  }

  .opsConsoleShell .messageRowShell {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .opsConsoleShell .messageBulkSelect,
  .opsConsoleShell .messageButton {
    min-height: 4.45rem;
  }

  .opsConsoleShell .messageAvatar {
    display: none;
  }

  .opsConsoleShell .threadMetaRow {
    display: none;
  }

  .opsConsoleShell .detailToolbar {
    position: sticky;
    top: var(--ops-header-height);
    z-index: 20;
    padding: 0.42rem 0.6rem;
    border-color: var(--ops-border);
    background: var(--ops-surface);
    box-shadow: none;
  }

  .opsConsoleShell .detailToolbar .detailActions {
    flex-wrap: nowrap;
    gap: 0.24rem;
    overflow-x: auto;
  }

  .opsConsoleShell .toolbarIconButton,
  .opsConsoleShell .folderSelect {
    min-height: 2.24rem;
    border-radius: 0.42rem;
    box-shadow: none;
  }

  .opsConsoleShell .messageDetail {
    padding-top: 0.62rem;
    background: var(--ops-surface);
  }

  .opsConsoleShell .messageActionStrip {
    position: static;
    margin: 0 0 0.68rem;
    padding: 0.46rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.5rem;
    background: #f8fafc;
  }

  .opsConsoleShell .messageActionStrip > span {
    font-size: 0.72rem;
  }

  .opsConsoleShell .messageActionStrip div {
    gap: 0.28rem;
    overflow-x: auto;
  }

  .opsConsoleShell .messageActionStrip button {
    min-height: 2.2rem;
    border-radius: 0.4rem;
    white-space: nowrap;
  }

  .opsConsoleShell .messageOpsSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
  }

  .opsConsoleShell .messageOpsSummary span {
    min-height: 2.9rem;
    border-radius: 0.46rem;
  }

  .opsConsoleShell .messageHero {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.56rem;
  }

  .opsConsoleShell .messageHeroAvatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.42rem;
  }

  .opsConsoleShell .messageHeroCopy h3 {
    font-size: 1.02rem;
    line-height: 1.24;
    letter-spacing: 0;
  }

  .opsConsoleShell .replyDock,
  .opsConsoleShell .messageCommentsPanel,
  .opsConsoleShell .attachmentList,
  .opsConsoleShell .threadStrip {
    border-radius: 0.55rem;
    box-shadow: none;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    bottom: calc(4.45rem + env(safe-area-inset-bottom));
  }
}

/* Reference alignment pass: match the approved mail/client concept structure. */
@media (min-width: 921px) {
  .opsConsoleShell {
    --ops-header-height: 3.65rem;
    grid-template-rows: var(--ops-header-height) minmax(0, 1fr);
  }

  .opsConsoleShell .desktopWindowBar {
    grid-column: 1 / -1;
    grid-row: 1;
    height: var(--ops-header-height);
    padding: 0 0.72rem;
  }

  .opsConsoleShell .operationsPulseStrip {
    grid-column: 1;
    grid-row: 2;
    padding-top: 3.2rem;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    grid-column: 2;
    grid-row: 2;
  }

  .opsConsoleShell .inboxShell.nativeMailShell {
    grid-template-columns: 11.9rem minmax(19rem, 26vw) minmax(0, 1fr);
    grid-template-rows: 3.05rem minmax(0, 1fr);
  }

  .opsConsoleShell .mailCommandBar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    padding: 0.42rem 0.62rem;
    border-bottom: 1px solid var(--ops-border);
    background: var(--ops-surface);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .opsConsoleShell .mailCommandBar::-webkit-scrollbar {
    display: none;
  }

  .opsConsoleShell .mailCommandBar button {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-height: 2.05rem;
    padding: 0 0.54rem;
    border: 1px solid transparent;
    border-radius: 0.34rem;
    background: transparent;
    color: #344054;
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: none;
  }

  .opsConsoleShell .mailCommandBar button:hover:not(:disabled) {
    background: #f2f4f7;
  }

  .opsConsoleShell .mailCommandBar button:disabled {
    color: #98a2b3;
    cursor: not-allowed;
  }

  .opsConsoleShell .mailCommandBar .mailCommandPrimary {
    min-width: 8.2rem;
    justify-content: center;
    background: #0b63ce;
    color: #fff;
  }

  .opsConsoleShell .mailCommandBar .mailCommandPrimary:hover {
    background: #084a9f;
  }

  .opsConsoleShell .mailCommandDivider {
    width: 1px;
    height: 1.45rem;
    margin: 0 0.18rem;
    background: var(--ops-border);
  }

  .opsConsoleShell .sidebar,
  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    grid-row: 2;
  }

  .opsConsoleShell .detailColumn {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  .opsConsoleShell .detailToolbar {
    display: none;
  }

  .opsConsoleShell .detailContentFrame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.2rem;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .opsConsoleShell .detailContentFrame > .messageDetailPlaceholder {
    grid-column: 1 / -1;
  }

  .opsConsoleShell .messageActionStrip,
  .opsConsoleShell .messageOpsSummary,
  .opsConsoleShell .threadStrip,
  .opsConsoleShell .messageCommentsPanel {
    display: none;
  }

  .opsConsoleShell .messageDetail {
    min-width: 0;
    border-right: 1px solid var(--ops-border);
  }

  .opsConsoleShell .mailContextPanel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow-y: auto;
    background: #ffffff;
  }

  .opsConsoleShell .contextTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 2.55rem;
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .contextTabs button {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #475467;
    font-size: 0.68rem;
    font-weight: 720;
    box-shadow: none;
  }

  .opsConsoleShell .contextTabs button.active {
    color: #084a9f;
    box-shadow: inset 0 -2px 0 #0b63ce;
  }

  .opsConsoleShell .contextPanelSection {
    display: grid;
    gap: 0.56rem;
    padding: 0.76rem;
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .contextPersonHeader {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
  }

  .opsConsoleShell .contextPersonHeader strong,
  .opsConsoleShell .contextJobCard strong,
  .opsConsoleShell .contextSectionHeader strong,
  .opsConsoleShell .quickContextActions > strong {
    overflow: hidden;
    color: var(--ops-text);
    font-size: 0.76rem;
    line-height: 1.2;
    text-overflow: ellipsis;
  }

  .opsConsoleShell .contextPersonHeader small,
  .opsConsoleShell .contextJobCard small,
  .opsConsoleShell .customerNotesCard p {
    color: #667085;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .opsConsoleShell .contextAvatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: #e4eaf2;
    color: #344054;
    font-size: 0.68rem;
    font-weight: 760;
  }

  .opsConsoleShell .contextPersonHeader button,
  .opsConsoleShell .contextSectionHeader button,
  .opsConsoleShell .contextJobCard button {
    min-height: 1.8rem;
    padding: 0 0.36rem;
    border: 0;
    background: transparent;
    color: #0b63ce;
    font-size: 0.68rem;
    font-weight: 720;
    box-shadow: none;
  }

  .opsConsoleShell .contextContactRows,
  .opsConsoleShell .quickContextActions {
    display: grid;
    gap: 0.36rem;
  }

  .opsConsoleShell .contextContactRows button,
  .opsConsoleShell .contextContactRows span,
  .opsConsoleShell .quickContextActions button {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    gap: 0.46rem;
    min-height: 1.82rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #344054;
    font-size: 0.68rem;
    text-align: left;
    box-shadow: none;
  }

  .opsConsoleShell .contextContactRows button:disabled,
  .opsConsoleShell .quickContextActions button:disabled {
    color: #98a2b3;
  }

  .opsConsoleShell .quickContextActions .mailPrimaryBookAction {
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 0.62rem;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 850;
    padding: 0.48rem 0.58rem;
  }

  .opsConsoleShell .contextContactRows svg,
  .opsConsoleShell .quickContextActions svg {
    width: 0.92rem;
    height: 0.92rem;
    color: #667085;
  }

  .opsConsoleShell .contextSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .opsConsoleShell .contextJobCard {
    display: grid;
    gap: 0.5rem;
    padding: 0.58rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.45rem;
    background: #f8fafc;
  }

  .opsConsoleShell .contextJobCard span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.18rem;
    padding: 0.12rem 0.32rem;
    border-radius: 0.28rem;
    background: #dbeafe;
    color: #084a9f;
    font-size: 0.58rem;
    font-weight: 760;
  }

  .opsConsoleShell .customerNotesCard p {
    margin: 0;
  }

  .opsConsoleShell .replyDock {
    border: 1px solid var(--ops-border);
    background: #ffffff;
  }

  .opsConsoleShell .replyTabs {
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .replyTab {
    min-height: 2.2rem;
    border-radius: 0;
    color: #344054;
  }

  .opsConsoleShell .replyTab:first-child {
    color: #0b63ce;
    box-shadow: inset 0 -2px 0 #0b63ce;
  }

  .opsConsoleShell .replyComposerInline {
    display: grid;
    gap: 0;
    padding: 0;
    text-align: left;
  }

  .opsConsoleShell .replyDockRow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.42rem;
    min-height: 2.25rem;
    align-items: center;
    padding: 0 0.72rem;
    border-bottom: 1px solid var(--ops-border);
    color: #667085;
    font-size: 0.72rem;
  }

  .opsConsoleShell .replyDockRow em {
    color: #475467;
    font-style: normal;
    font-weight: 650;
  }

  .opsConsoleShell .replyInlineTextarea {
    display: block;
    min-height: 7.2rem;
    padding: 0.72rem;
    color: #98a2b3;
    font-size: 0.76rem;
    font-weight: 500;
  }

  .opsConsoleShell .replyDockTools {
    display: flex;
    gap: 0.65rem;
    padding: 0.42rem 0.72rem;
    border-top: 1px solid var(--ops-border);
    color: #475467;
    font-size: 0.76rem;
  }

  .opsConsoleShell .replyDockActions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.58rem 0.72rem 0.72rem;
  }

  .opsConsoleShell .replyDockActions span {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.62rem;
    border: 1px solid var(--ops-border);
    border-radius: 0.34rem;
    background: #fff;
    color: #344054;
    font-size: 0.68rem;
    font-weight: 720;
  }

  .opsConsoleShell .replyDockActions .replySendButton {
    min-width: 4.5rem;
    border-color: #084a9f;
    background: #0b63ce;
    color: #fff;
  }

  .opsConsoleShell .replySendButton::after {
    content: none;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    top: 0.62rem;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(41rem, calc(100vw - 30rem));
    transform: translateX(-50%);
    border: 1px solid var(--ops-border);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0.7rem 2rem rgba(16, 24, 40, 0.16);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .operationsPulseStrip.desktopOnly {
    display: none !important;
  }

  .opsConsoleShell .detailContentFrame {
    display: block;
    min-height: 0;
  }

  .opsConsoleShell .mailContextPanel {
    display: none;
  }

  .opsConsoleShell .bulkActionBar:not(.active),
  .opsConsoleShell .messageBulkSelect {
    display: none;
  }

  .opsConsoleShell .messageRowShell {
    grid-template-columns: minmax(0, 1fr);
  }

  .opsConsoleShell .messageButton {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0.82rem;
  }

  .opsConsoleShell .replyPreviewLine {
    display: none;
  }

  .opsConsoleShell .replyDockActions {
    display: none;
  }

  .opsConsoleShell .replyInlineTextarea {
    display: block;
    min-height: 4.5rem;
    color: #98a2b3;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .messageHtmlFrame {
    display: block;
    flex: 0 0 auto;
    height: min(22dvh, 12.5rem) !important;
    min-height: 0 !important;
    max-height: 12.5rem !important;
    overflow: auto;
  }

  .opsConsoleShell .replyDock {
    display: block !important;
    margin-top: 0.84rem;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .messageToolbar .backButton.mobileOnly {
    display: inline-grid;
    width: 2.12rem;
    min-width: 2.12rem;
    height: 2.12rem;
    place-items: center;
    border-radius: 0.42rem;
    color: var(--ops-text);
  }

  .opsConsoleShell .messageToolbar .backButton.mobileOnly svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  .opsConsoleShell .mobileAppDock {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .opsConsoleShell .mobileAppDock span {
    max-width: none;
    overflow: visible;
    font-size: 0.57rem;
    line-height: 1;
    text-overflow: clip;
  }
}

/* Approved concept lock: match the compact Ops Console reference without reintroducing decorative chrome. */
@media (min-width: 921px) {
  .opsConsoleShell {
    --ops-rail-width: 3.8rem;
    --ops-header-height: 3.8rem;
    background: #f4f6f8;
  }

  .opsConsoleShell .desktopWindowBar {
    grid-template-columns: 12.8rem minmax(0, 1fr) auto;
    padding: 0 0.82rem;
    background: #ffffff;
  }

  .opsConsoleShell .appHeaderBrand {
    min-width: 0;
    gap: 0.48rem;
  }

  .opsConsoleShell .appHeaderGlyph {
    width: 1.78rem;
    height: 1.78rem;
    border-radius: 0.46rem;
    background: transparent;
    color: inherit;
  }

  .opsConsoleShell .appHeaderGlyph img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .opsConsoleShell .appHeaderBrand strong {
    max-width: 8.8rem;
    font-size: 0.78rem;
    font-weight: 780;
    line-height: 1.05;
  }

  .opsConsoleShell .operationsPulseStrip {
    padding: 3.05rem 0.28rem 0.44rem;
    background: #ffffff;
  }

  .opsConsoleShell .operationsPulseItem {
    min-height: 3.35rem;
    border-radius: 0.36rem;
  }

  .opsConsoleShell .operationsPulseItem b {
    overflow: visible;
    font-size: 0.54rem;
    line-height: 1.05;
    text-overflow: clip;
    white-space: normal;
  }

  .opsConsoleShell .inboxShell.nativeMailShell {
    grid-template-columns: 11.7rem minmax(20rem, 26vw) minmax(0, 1fr);
    grid-template-rows: 3.15rem minmax(0, 1fr);
  }

  .opsConsoleShell .mailCommandBar {
    padding-inline: 0.72rem;
  }

  .opsConsoleShell .sidebar {
    padding: 0.74rem 0.62rem;
    background: #fbfcfd;
  }

  .opsConsoleShell .sidebarBrandBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .opsConsoleShell .sidebarGhostButton {
    display: none;
  }

  .opsConsoleShell .brandLockup strong {
    font-size: 0.82rem;
    font-weight: 760;
  }

  .opsConsoleShell .mailboxButton,
  .opsConsoleShell .folderRow,
  .opsConsoleShell .tagRow {
    min-height: 1.9rem;
    padding: 0.32rem 0.42rem;
  }

  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    min-width: 0;
    overflow: hidden;
  }

  .opsConsoleShell .messageList {
    border-right: 1px solid var(--ops-border);
  }

  .opsConsoleShell .messageButton {
    min-height: 4.15rem;
    padding-block: 0.48rem;
  }

  .opsConsoleShell .messageAvatar {
    display: none;
  }

  .opsConsoleShell .messageButton {
    grid-template-columns: minmax(0, 1fr);
  }

  .opsConsoleShell .messageDetail {
    padding: 0.78rem 0.92rem 1rem;
  }

  .opsConsoleShell .messageHero {
    padding-top: 0.28rem;
  }

  .opsConsoleShell .messageInlineMeta {
    line-height: 1.35;
  }

  .opsConsoleShell .messageHtmlFrame,
  .opsConsoleShell .plainMessageBody {
    margin-top: 0.28rem;
  }

  .opsConsoleShell .replyDock {
    margin-top: 0.76rem;
  }

  .opsConsoleShell .mailContextPanel {
    border-left: 0;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    gap: 0.68rem;
    align-items: center;
    width: min(41rem, calc(100vw - 38rem));
    min-width: 28rem;
    padding: 0.52rem 0.62rem;
    border-left: 1px solid var(--ops-border);
  }

  .opsConsoleShell .phoneGlobalCallIcon {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 999px;
    background: #dff7e7;
    color: #12833b;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallIcon {
    background: #e8f1ff;
    color: #0b63ce;
  }

  .opsConsoleShell .phoneTrayIcon {
    width: 1rem;
    height: 1rem;
  }

  .opsConsoleShell .phoneGlobalCallCopy {
    min-width: 0;
  }

  .opsConsoleShell .phoneGlobalCallCopy span {
    color: #667085;
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  .opsConsoleShell .phoneGlobalCallCopy strong {
    margin: 0.08rem 0 0.04rem;
    font-size: 0.82rem;
    font-weight: 780;
  }

  .opsConsoleShell .phoneGlobalCallCopy small {
    color: #344054;
    font-size: 0.7rem;
  }

  .opsConsoleShell .phoneGlobalCallActions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  .opsConsoleShell .phoneGlobalCallActions button {
    min-height: 2rem;
    padding: 0 0.9rem;
    border-radius: 0.32rem;
    box-shadow: none;
    font-size: 0.68rem;
  }

  .opsConsoleShell .phoneGlobalCloseButton {
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    color: #667085;
    background: #ffffff;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell {
    min-height: 100dvh;
    padding: 0 0 calc(4.45rem + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .opsConsoleShell .desktopWindowBar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .opsConsoleShell .windowLeftChrome {
    min-width: 0;
  }

  .opsConsoleShell .appHeaderBrand {
    min-width: 0;
  }

  .opsConsoleShell .appHeaderGlyph {
    display: none;
  }

  .opsConsoleShell .mobileAppTitle.mobileOnly {
    min-width: 0;
  }

  .opsConsoleShell .mobileAppTitle.mobileOnly strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    min-height: auto !important;
    overflow: visible !important;
  }

  .opsConsoleShell .sidebar,
  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .opsConsoleShell .sidebar:not(.mobileActive),
  .opsConsoleShell .messageColumn:not(.mobileActive),
  .opsConsoleShell .detailColumn:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileActive,
  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive {
    display: flex !important;
    min-height: calc(100dvh - var(--ops-header-height) - 4.45rem);
    overflow: visible;
  }

  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive {
    flex-direction: column;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail {
    overflow: visible;
  }

  .opsConsoleShell .messageList {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .messageToolbar {
    position: sticky !important;
    top: var(--ops-header-height);
    z-index: 42;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
  }

  .opsConsoleShell .messageToolbar > div:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
  }

  .opsConsoleShell .messageToolbar h2,
  .opsConsoleShell .columnSubhead {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .searchBar,
  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .folderRail.mobileOnly {
    position: sticky;
    z-index: 38;
    background: #ffffff;
  }

  .opsConsoleShell .searchBar {
    top: calc(var(--ops-header-height) + 3.25rem);
  }

  .opsConsoleShell .messageSubtoolbar {
    top: calc(var(--ops-header-height) + 6.25rem);
  }

  .opsConsoleShell .folderRail.mobileOnly {
    top: calc(var(--ops-header-height) + 8.95rem);
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .detailToolbar {
    position: sticky !important;
    top: var(--ops-header-height);
    z-index: 42;
  }

  .opsConsoleShell .messageButton {
    min-height: 4.25rem;
  }

  .opsConsoleShell .messageSection {
    gap: 0;
  }

  .opsConsoleShell .messageSectionLabel {
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .messageRowShell,
  .opsConsoleShell .messageRowShell.selected {
    border-bottom: 1px solid var(--ops-border);
    border-radius: 0;
    background: #ffffff;
  }

  .opsConsoleShell .messageButton,
  .opsConsoleShell .messageButton.active {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .opsConsoleShell .messageButton.active {
    box-shadow: inset 3px 0 0 #0b63ce;
  }

  .opsConsoleShell .messageButton.active .messageTopRow strong,
  .opsConsoleShell .messageButton.active .messageSubjectRow,
  .opsConsoleShell .messageButton.active .messageSubjectRow span,
  .opsConsoleShell .messageButton.active .messageMeta,
  .opsConsoleShell .messageButton.active .messageTopRow span {
    color: var(--ops-text);
  }

  .opsConsoleShell .replyDock,
  .opsConsoleShell .messageCommentsPanel,
  .opsConsoleShell .attachmentList,
  .opsConsoleShell .threadStrip {
    margin-inline: 0;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    right: max(0.72rem, env(safe-area-inset-right));
    bottom: calc(4.85rem + env(safe-area-inset-bottom));
    left: max(0.72rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.56rem;
    padding: 0.62rem;
    border-radius: 0.74rem 0.74rem 0 0;
  }

  .opsConsoleShell .phoneGlobalCallIcon {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: 999px;
    background: #dff7e7;
    color: #12833b;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallIcon {
    background: #e8f1ff;
    color: #0b63ce;
  }

  .opsConsoleShell .phoneTrayIcon {
    width: 1rem;
    height: 1rem;
  }

  .opsConsoleShell .phoneGlobalCallActions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.55rem;
  }

  .opsConsoleShell .phoneGlobalOpenButton {
    display: none;
  }

  .opsConsoleShell .phoneGlobalCloseButton {
    width: 2.4rem;
    padding-inline: 0;
  }
}

/* Final screenshot reference lock: this layer must remain after legacy shell rules. */
@media (min-width: 921px) {
  .opsConsoleShell .operationsPulseItem.disabled {
    opacity: 0.42;
    cursor: not-allowed;
  }

  .opsConsoleShell .operationsPulseItem.disabled:hover {
    background: transparent;
  }

  .opsConsoleShell .operationsRailProfile {
    display: grid;
    justify-items: center;
    gap: 0.14rem;
    margin-top: auto;
    padding: 0.38rem 0.08rem 0.1rem;
    color: #344054;
    text-align: center;
  }

  .opsConsoleShell .operationsRailProfile span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid #dbe1ea;
    border-radius: 999px;
    background: #f1f5f9;
    color: #344054;
    font-size: 0.66rem;
    font-weight: 760;
  }

  .opsConsoleShell .operationsRailProfile strong,
  .opsConsoleShell .operationsRailProfile small {
    display: block;
    max-width: 3.2rem;
    overflow: hidden;
    font-size: 0.56rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .operationsRailProfile small {
    color: #16a34a;
    font-weight: 720;
  }

  .opsConsoleShell .messageToolbar {
    min-height: 3.05rem;
    padding: 0.48rem 0.66rem;
    border-bottom: 1px solid var(--ops-border);
    background: #ffffff;
  }

  .opsConsoleShell .messageToolbar h2 {
    font-size: 0.82rem;
    font-weight: 760;
  }

  .opsConsoleShell .messageToolbarStats {
    display: flex;
    align-items: center;
    gap: 0.24rem;
  }

  .opsConsoleShell .messageSortButton {
    min-height: 2rem;
    padding: 0 0.46rem;
    border: 0;
    background: transparent;
    color: #344054;
    font-size: 0.68rem;
    font-weight: 680;
    box-shadow: none;
  }

  .opsConsoleShell .messageSortButton::after {
    content: "";
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    margin-left: 0.32rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.1rem) rotate(45deg);
  }

  .opsConsoleShell .messageToolbarStats .toolbarIconButton {
    min-width: 2rem;
    min-height: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
  }

  .opsConsoleShell .searchBar {
    display: none;
  }

  .opsConsoleShell .searchBar.mobileSearchOpen {
    display: grid;
  }

  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .messageSectionLabel,
  .opsConsoleShell .phoneGlobalOpenButton {
    display: none !important;
  }

  .opsConsoleShell .messageButton.active {
    background: #eef5ff;
    box-shadow: inset 3px 0 0 #0b63ce;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-header-height: calc(4.55rem + env(safe-area-inset-top));
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
    background: #ffffff;
  }

  .opsConsoleShell .desktopWindowBar {
    min-height: var(--ops-header-height);
    grid-template-rows: 2.3rem 1.55rem;
    gap: 0.32rem;
    padding: calc(0.42rem + env(safe-area-inset-top)) 0.7rem 0.48rem;
  }

  .opsConsoleShell .windowLeftChrome,
  .opsConsoleShell .windowTitle,
  .opsConsoleShell .windowMeta {
    display: none !important;
  }

  .opsConsoleShell .mobileReferenceTopBar {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 2.3rem;
  }

  .opsConsoleShell .dailyOpsHeader {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    gap: 0.32rem;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    scrollbar-width: none;
  }

  .opsConsoleShell .dailyOpsHeader::-webkit-scrollbar {
    display: none;
  }

  .opsConsoleShell .dailyOpsHeader button {
    flex: 0 0 auto;
    min-width: 4.75rem;
    max-width: 5.6rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.32rem;
    border: 1px solid #dbe1ea;
    border-radius: 0.42rem;
    background: #f8fafc;
    color: #111827;
    padding: 0 0.44rem;
  }

  .opsConsoleShell .dailyOpsHeader button.attention {
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  .opsConsoleShell .dailyOpsHeader span {
    overflow: hidden;
    color: #667085;
    font-size: 0.56rem;
    font-weight: 820;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .opsConsoleShell .dailyOpsHeader strong {
    color: #0b63ce;
    font-size: 0.78rem;
    line-height: 1;
  }

  .opsConsoleShell .dailyOpsHeader small {
    display: none;
  }

  .opsConsoleShell .dailyOpsHeader[data-source-status="unavailable"] button {
    border-color: #fed7aa;
    background: #fff7ed;
  }

  .opsConsoleShell .mobileReferenceTitle {
    display: grid;
    justify-items: center;
    min-width: 0;
  }

  .opsConsoleShell .mobileReferenceTitle strong {
    max-width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 780;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .mobileReferenceTitle span {
    margin-top: 0.1rem;
    color: #667085;
    font-size: 0.68rem;
    line-height: 1;
  }

  .opsConsoleShell .mobileReferenceActions,
  .opsConsoleShell .mobileHeaderActions {
    position: fixed !important;
    top: calc(0.42rem + env(safe-area-inset-top));
    right: 0.7rem;
    z-index: 120;
    display: flex !important;
    align-items: center;
    gap: 0.14rem;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .opsConsoleShell .mobileReferenceTopBar > .mobileTopIconButton:first-child {
    position: absolute;
    top: 0;
    left: 0;
  }

  .opsConsoleShell .mobileTopIconButton {
    position: relative;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    min-width: 2.3rem;
    min-height: 2.3rem;
    place-items: center;
    border: 0;
    border-radius: 0.46rem;
    background: transparent;
    color: #111827;
    box-shadow: none;
  }

  .opsConsoleShell .mobileTopIconButton svg {
    width: 1.08rem;
    height: 1.08rem;
  }

  .opsConsoleShell .mobileTopIconButton em {
    position: absolute;
    top: 0.18rem;
    right: 0.18rem;
    min-width: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #0b63ce;
    color: #ffffff;
    font-size: 0.55rem;
    font-style: normal;
    font-weight: 760;
  }

  .opsConsoleShell .mobileAppDock {
    min-height: calc(4.1rem + env(safe-area-inset-bottom));
    padding-top: 0.4rem;
  }

  .opsConsoleShell .mobileAppDock button,
  .opsConsoleShell .mobileAppDock button.active {
    min-height: 3.15rem;
    background: transparent;
  }

  .opsConsoleShell .mobileAppDock button.active {
    color: #0b63ce;
  }

  .opsConsoleShell .mobileAppDock svg {
    width: 1.18rem;
    height: 1.18rem;
  }

  .opsConsoleShell .mobileAppDock span {
    font-size: 0.62rem;
    font-weight: 720;
  }

  .opsConsoleShell .messageToolbar {
    position: static !important;
    min-height: 0;
    padding: 0.72rem 0.86rem 0.44rem;
    border-bottom: 1px solid var(--ops-border);
  }

  .opsConsoleShell .messageToolbar .backButton.mobileOnly,
  .opsConsoleShell .messageToolbar h2,
  .opsConsoleShell .columnSubhead,
  .opsConsoleShell .messageToolbarStats {
    display: none !important;
  }

  .opsConsoleShell .searchBar {
    display: none;
    position: sticky;
    top: var(--ops-header-height);
    padding: 0.52rem 0.72rem;
  }

  .opsConsoleShell .searchBar.mobileSearchOpen {
    display: grid;
  }

  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .folderRail.mobileOnly,
  .opsConsoleShell .messageSectionLabel {
    display: none !important;
  }

  .opsConsoleShell .messageList {
    padding: 0 0 calc(4.75rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .messageColumn.hasMobilePreview .messageList {
    padding-bottom: 0;
  }

  .opsConsoleShell .messageButton {
    min-height: 4.55rem;
    padding: 0.62rem 0.86rem;
  }

  .opsConsoleShell .messageButton.active {
    background: #eef5ff;
    box-shadow: inset 3px 0 0 #0b63ce;
  }

  .opsConsoleShell .messageTopRow strong {
    font-size: 0.86rem;
  }

  .opsConsoleShell .messageSubjectRow,
  .opsConsoleShell .messageMeta,
  .opsConsoleShell .messageTopRow span {
    font-size: 0.74rem;
  }

  .opsConsoleShell .mobileReaderPreview {
    position: relative;
    z-index: 42;
    display: grid !important;
    gap: 0.58rem;
    max-height: 11rem;
    margin: 0.58rem 0.7rem calc(8.9rem + env(safe-area-inset-bottom));
    padding: 0.7rem 0.82rem 0.62rem;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 0.78rem 0.78rem 0.38rem 0.38rem;
    background: #ffffff;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.1);
  }

  .opsConsoleShell .mobileReaderPreviewGrip {
    justify-self: center;
    width: 2.1rem;
    height: 0.2rem;
    border-radius: 999px;
    background: #d0d5dd;
  }

  .opsConsoleShell .mobileReaderPreviewHeader,
  .opsConsoleShell .mobileReaderPreviewMeta,
  .opsConsoleShell .mobileReaderPreviewActions {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .opsConsoleShell .mobileReaderPreviewHeader {
    justify-content: space-between;
    gap: 0.7rem;
  }

  .opsConsoleShell .mobileReaderPreviewHeader button {
    min-height: 1.5rem;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 0.91rem;
    font-weight: 800;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
  }

  .opsConsoleShell .mobileReaderPreviewHeader time {
    flex: 0 0 auto;
    color: #667085;
    font-size: 0.68rem;
  }

  .opsConsoleShell .mobileReaderPreviewMeta {
    gap: 0.58rem;
  }

  .opsConsoleShell .mobileReaderPreviewMeta > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: #e6edf7;
    color: #344054;
    font-size: 0.68rem;
    font-weight: 780;
  }

  .opsConsoleShell .mobileReaderPreviewMeta div {
    display: grid;
    min-width: 0;
  }

  .opsConsoleShell .mobileReaderPreviewMeta strong,
  .opsConsoleShell .mobileReaderPreviewMeta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .mobileReaderPreviewMeta strong {
    color: #111827;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .opsConsoleShell .mobileReaderPreviewMeta small {
    color: #667085;
    font-size: 0.62rem;
  }

  .opsConsoleShell .mobileReaderPreview p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 0.76rem;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opsConsoleShell .mobileReaderPreviewActions {
    justify-content: space-between;
    gap: 0.35rem;
    margin: 0.05rem -0.16rem 0;
  }

  .opsConsoleShell .mobileReaderPreviewActions button {
    display: grid;
    min-width: 3.6rem;
    min-height: 2.15rem;
    place-items: center;
    gap: 0.12rem;
    padding: 0.18rem 0.25rem;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 0.58rem;
    font-weight: 720;
    box-shadow: none;
  }

  .opsConsoleShell .mobileReaderPreviewActions svg {
    width: 1rem;
    height: 1rem;
  }

  .opsConsoleShell .detailToolbar {
    top: var(--ops-header-height);
  }

  .opsConsoleShell .phoneGlobalCallTray {
    bottom: calc(4.42rem + env(safe-area-inset-bottom));
    grid-template-columns: 2.25rem minmax(0, 1fr);
    border-radius: 0.78rem 0.78rem 0 0;
  }

  .opsConsoleShell .phoneGlobalCallActions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    padding-right: 2.75rem;
  }

  .opsConsoleShell .phoneGlobalCloseButton {
    position: absolute;
    top: 0.58rem;
    right: 0.58rem;
    width: 2.15rem;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

/* Ops Console screenshot fidelity pass: final overrides for the approved desktop/mobile reference. */
.opsConsoleShell .bulkMoveSelect {
  min-height: 2.05rem;
  max-width: 9.5rem;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.42rem;
  background: #ffffff;
  color: #111827;
  font-size: 0.72rem;
  font-weight: 720;
  padding: 0 0.48rem;
  box-shadow: none;
}

.opsConsoleShell .bulkMoveSelect:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mailCommandLeadState,
.mailCustomerActionState,
.mailActionBlockedState {
  display: inline-flex;
  min-height: 2.05rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.65rem;
  background: #f8fafc;
  color: #475467;
  padding: 0 0.72rem;
  font-size: 0.78rem;
  font-weight: 780;
}

@media (min-width: 921px) {
  .opsConsoleShell {
    --ops-rail-width: 4.45rem;
    --ops-header-height: 3.55rem;
    background: #f3f5f8;
  }

  .opsConsoleShell .desktopWindowBar {
    grid-column: 1 / -1;
    grid-template-columns: 12.9rem minmax(0, 1fr);
    height: var(--ops-header-height);
    padding: 0 0.74rem;
    background: #ffffff;
  }

  .opsConsoleShell .dailyOpsHeader.mobileOnly {
    display: none !important;
  }

  .opsConsoleShell .dailyOpsHeader {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(6.7rem, 1fr));
    gap: 0.36rem;
    min-width: 0;
    align-self: center;
    overflow: hidden;
  }

  .opsConsoleShell .dailyOpsHeader button {
    min-width: 0;
    height: 2.55rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 0.08rem 0.42rem;
    border: 1px solid #dbe1ea;
    border-radius: 0.46rem;
    background: #f8fafc;
    color: #111827;
    padding: 0.28rem 0.5rem;
    text-align: left;
    box-shadow: none;
  }

  .opsConsoleShell .dailyOpsHeader button.attention {
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  .opsConsoleShell .dailyOpsHeader span,
  .opsConsoleShell .dailyOpsHeader strong,
  .opsConsoleShell .dailyOpsHeader small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .dailyOpsHeader span {
    color: #667085;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  .opsConsoleShell .dailyOpsHeader strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #0b63ce;
    font-size: 1.12rem;
    line-height: 1;
  }

  .opsConsoleShell .dailyOpsHeader small {
    color: #344054;
    font-size: 0.65rem;
    font-weight: 720;
    line-height: 1.1;
  }

  .opsConsoleShell .dailyOpsHeader[data-source-status="unavailable"] button {
    border-color: #fed7aa;
    background: #fff7ed;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback {
    top: auto;
    right: 1rem;
    bottom: 1rem;
    width: min(26rem, calc(100vw - 6rem));
    border-radius: 1rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
  }

  .opsConsoleShell .windowTitle,
  .opsConsoleShell .windowMeta {
    display: none !important;
  }

  .opsConsoleShell .appHeaderBrand strong {
    max-width: 9.2rem;
    color: #111827;
    font-size: 0.82rem;
    line-height: 1.05;
  }

  .opsConsoleShell .operationsPulseStrip {
    grid-column: 1;
    grid-row: 2;
    padding: 0.6rem 0.32rem 0.42rem;
    border-right: 1px solid #dbe1ea;
    background: #ffffff;
  }

  .opsConsoleShell .operationsPulseItem {
    min-height: 3.58rem;
    border-radius: 0.34rem;
    color: #111827;
  }

  .opsConsoleShell .operationsPulseItem.active {
    background: #eaf2ff;
    color: #084a9f;
    box-shadow: inset 3px 0 0 #0b63ce;
  }

  .opsConsoleShell .operationsPulseItem b {
    font-size: 0.61rem;
    font-weight: 720;
  }

  .opsConsoleShell .inboxShell.nativeMailShell {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 11.6rem minmax(20rem, 28vw) minmax(0, 1fr);
    grid-template-rows: 3.05rem minmax(0, 1fr);
    border-left: 0;
    background: #ffffff;
  }

  .opsConsoleShell .mailCommandBar {
    min-height: 3.05rem;
    padding: 0.46rem 0.66rem;
    border-bottom: 1px solid #dbe1ea;
    background: #ffffff;
  }

  .opsConsoleShell .mailCommandBar button {
    min-height: 2rem;
    border-radius: 0.34rem;
    font-size: 0.7rem;
  }

  .opsConsoleShell .mailCommandBar .mailCommandPrimary {
    min-width: 8.05rem;
    background: #0b63ce;
  }

  .opsConsoleShell .sidebar {
    gap: 0.4rem;
    padding: 0.7rem 0.55rem;
    border-right: 1px solid #dbe1ea;
    background: #fbfcfd;
  }

  .opsConsoleShell .profileCard,
  .opsConsoleShell .sidebarStorageCard,
  .opsConsoleShell .brandGlyph,
  .opsConsoleShell .brandLockup p,
  .opsConsoleShell .messageScopeRail,
  .opsConsoleShell .contextRibbon,
  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .messageSectionLabel,
  .opsConsoleShell .messageListFooter,
  .opsConsoleShell .messageActionStrip,
  .opsConsoleShell .messageOpsSummary,
  .opsConsoleShell .threadStrip,
  .opsConsoleShell .messageCommentsPanel {
    display: none !important;
  }

  .opsConsoleShell .mailboxButton,
  .opsConsoleShell .folderRow,
  .opsConsoleShell .tagRow {
    min-height: 1.92rem;
    padding: 0.3rem 0.42rem;
    border-radius: 0.34rem;
  }

  .opsConsoleShell .mailboxButton span,
  .opsConsoleShell .mailboxButton small,
  .opsConsoleShell .tagRow small {
    display: none;
  }

  .opsConsoleShell .messageWorkspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .opsConsoleShell .messageResultsPanel {
    padding-left: 0;
  }

  .opsConsoleShell .messageToolbar {
    min-height: 3.05rem;
    padding: 0.46rem 0.66rem;
    border-bottom: 1px solid #dbe1ea;
  }

  .opsConsoleShell .messageToolbar h2 {
    font-size: 0.82rem;
  }

  .opsConsoleShell .messageButton {
    min-height: 4.28rem;
    padding: 0.52rem 0.64rem;
  }

  .opsConsoleShell .messageAvatar,
  .opsConsoleShell .threadMetaRow {
    display: none !important;
  }

  .opsConsoleShell .detailToolbar {
    display: none !important;
  }

  .opsConsoleShell .detailContentFrame {
    grid-template-columns: minmax(0, 1fr) 15.25rem;
  }

  .opsConsoleShell .messageDetail {
    padding: 0.85rem 0.95rem 1rem;
    border-right: 1px solid #dbe1ea;
  }

  .opsConsoleShell .messageHeroCopy h3 {
    font-size: 1rem;
    font-weight: 760;
  }

  .opsConsoleShell .plainMessageBody {
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .opsConsoleShell .replyDock {
    margin-top: 0.78rem;
    border-radius: 0.36rem;
  }

  .opsConsoleShell .mailContextPanel {
    border-left: 0;
    background: #ffffff;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    top: 0.46rem;
    width: min(48rem, calc(100vw - 30rem));
    min-width: 29rem;
    border-radius: 0.52rem;
  }

  .opsConsoleShell .phoneGlobalCallActions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .opsConsoleShell .phoneGlobalCallActions .secondaryAction:not(.phoneGlobalCloseButton) {
    min-width: auto;
    padding-inline: 0.58rem;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-header-height: calc(4.55rem + env(safe-area-inset-top));
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .opsConsoleShell .messageRowShell {
    grid-template-columns: minmax(0, 1fr);
  }

  .opsConsoleShell .messageBulkSelect,
  .opsConsoleShell .messageSubtoolbar,
  .opsConsoleShell .folderRail.mobileOnly,
  .opsConsoleShell .messageSectionLabel,
  .opsConsoleShell .contextRibbon {
    display: none !important;
  }

  .opsConsoleShell .bulkActionBar.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.44rem;
    padding: 0.52rem 0.68rem;
  }

  .opsConsoleShell .bulkActionButtons {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }

  .opsConsoleShell .bulkMoveSelect {
    flex: 0 0 8.8rem;
    min-height: 2.25rem;
  }

  .opsConsoleShell .mobileReaderPreview {
    margin-bottom: calc(8.65rem + env(safe-area-inset-bottom));
  }
}

/* Empty-reader lock: keep desktop Mail from reflowing when no message is selected. */
@media (min-width: 921px) {
  .opsConsoleShell .detailContentFrame > .messageDetailPlaceholder.compactNoMessage {
    grid-column: 1;
    display: grid;
    min-height: 0;
    place-items: center;
    padding: 1rem;
    border-right: 1px solid #dbe1ea;
    background: #ffffff;
    text-align: center;
  }

  .opsConsoleShell .messageDetailPlaceholder.compactNoMessage .placeholderOrb {
    display: none;
  }

  .opsConsoleShell .messageDetailPlaceholder.compactNoMessage strong {
    color: #111827;
    font-size: 0.88rem;
    font-weight: 760;
  }

  .opsConsoleShell .messageDetailPlaceholder.compactNoMessage p {
    margin: 0.24rem 0 0;
    color: #667085;
    font-size: 0.72rem;
  }

  .opsConsoleShell .emptyContextPanel {
    opacity: 0.78;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .emptyContextPanel {
    display: none !important;
  }
}

/* Legacy scroll ownership baseline; the final clamp below owns mobile workspace scroll. */
@media (min-width: 921px) {
  .opsConsoleShell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .sidebar,
  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn,
  .opsConsoleShell .detailContentFrame {
    min-width: 0;
    min-height: 0;
  }

  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .mailContextPanel {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .detailContentFrame {
    overflow: hidden;
  }
}

@media (max-width: 920px) {
  html,
  body {
    overflow-x: hidden;
    overscroll-behavior-y: auto;
  }

  .opsConsoleShell {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .sidebar.mobileActive,
  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive {
    min-height: calc(100dvh - var(--ops-header-height) - 4.25rem);
    overflow: visible !important;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .detailContentFrame,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .phoneComposer,
  .opsConsoleShell .callNoteComposer {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .phoneComposer {
    margin: 0.55rem 0.55rem calc(6.9rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Final reference sidebar lock: these rules intentionally win over all legacy mail-shell layers. */
@media (min-width: 921px) {
  .opsConsoleShell .mailCommandBar {
    grid-column: 2 / -1 !important;
  }

  .opsConsoleShell .mailCommandBar .mailCommandPrimary {
    display: none !important;
  }

  .opsConsoleShell .sidebar {
    grid-row: 1 / -1 !important;
    gap: 0.52rem !important;
    padding: 0.72rem 0.6rem 0.58rem !important;
  }

  .opsConsoleShell .sidebarComposeBlock {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.05rem;
    min-height: 2.25rem;
    border-radius: 0.36rem;
    overflow: hidden;
  }

  .opsConsoleShell .sidebarComposeButton,
  .opsConsoleShell .sidebarComposeChevron {
    min-height: 2.25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b63ce !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .sidebarComposeButton {
    justify-content: flex-start;
    gap: 0.42rem;
    padding: 0 0.58rem;
    font-size: 0.72rem;
    font-weight: 760;
  }

  .opsConsoleShell .sidebarComposeChevron {
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
  }

  .opsConsoleShell .sidebarComposeChevron svg {
    width: 0.9rem;
    height: 0.9rem;
    transform: rotate(90deg);
  }

  .opsConsoleShell .sidebarTitleRow {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    padding: 0.18rem 0.12rem 0.02rem;
  }

  .opsConsoleShell .sidebarTitleRow strong {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 780;
  }

  .opsConsoleShell .sidebarIconButton,
  .opsConsoleShell .sidebarAddButton {
    display: grid !important;
    width: 1.8rem;
    min-width: 1.8rem;
    height: 1.8rem;
    min-height: 1.8rem !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0.32rem;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .mailboxButton,
  .opsConsoleShell .folderRow,
  .opsConsoleShell .tagRow {
    display: grid !important;
    grid-template-columns: 1rem minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 0.42rem;
    min-height: 1.86rem !important;
    padding: 0.28rem 0.4rem !important;
    border: 0 !important;
    border-radius: 0.28rem !important;
    background: transparent;
    color: #344054;
    text-align: left;
    box-shadow: none !important;
  }

  .opsConsoleShell .mailboxButton.active,
  .opsConsoleShell .folderRow.active,
  .opsConsoleShell .tagRow.active {
    background: #eaf2ff !important;
    color: #084a9f !important;
  }

  .opsConsoleShell .mailboxButton svg,
  .opsConsoleShell .folderRow svg,
  .opsConsoleShell .tagRow svg {
    width: 0.86rem;
    height: 0.86rem;
  }

  .opsConsoleShell .mailboxButton span,
  .opsConsoleShell .folderRowLabel,
  .opsConsoleShell .tagRow span,
  .opsConsoleShell .folderRowMeta,
  .opsConsoleShell .tagRow small {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    color: currentColor !important;
    font-size: 0.7rem;
    font-weight: 660;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .opsConsoleShell .folderRowMeta,
  .opsConsoleShell .tagRow small {
    color: #2563eb !important;
    font-size: 0.66rem;
    font-weight: 760;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .sidebarComposeBlock {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    margin: 0.72rem;
    border-radius: 0.58rem;
    overflow: hidden;
  }

  .opsConsoleShell .sidebarComposeButton,
  .opsConsoleShell .sidebarComposeChevron {
    min-height: 2.55rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b63ce !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .sidebarComposeButton {
    justify-content: flex-start;
    gap: 0.48rem;
    padding: 0 0.72rem;
    font-size: 0.82rem;
  }

  .opsConsoleShell .sidebarComposeChevron {
    padding: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
  }

  .opsConsoleShell .sidebarComposeChevron svg {
    transform: rotate(90deg);
  }

  .opsConsoleShell .mailboxButton,
  .opsConsoleShell .folderRow,
  .opsConsoleShell .tagRow {
    display: grid !important;
    grid-template-columns: 1.15rem minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 0.58rem;
    margin-inline: 0.72rem;
    min-height: 2.42rem !important;
    padding: 0.42rem 0.56rem !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    background: transparent;
    color: #111827;
    box-shadow: none !important;
  }

  .opsConsoleShell .mailboxButton.active,
  .opsConsoleShell .folderRow.active,
  .opsConsoleShell .tagRow.active {
    background: #eaf2ff !important;
    color: #084a9f !important;
  }

  .opsConsoleShell .mailboxButton span,
  .opsConsoleShell .folderRowLabel,
  .opsConsoleShell .tagRow span,
  .opsConsoleShell .folderRowMeta,
  .opsConsoleShell .tagRow small {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    color: currentColor !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Final visible-fidelity fixes from the desktop/mobile fixture pass. */
@media (min-width: 921px) {
  .opsConsoleShell .operationsPulseItem {
    background: transparent !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .operationsPulseItem.active {
    background: #eaf2ff !important;
    color: #084a9f !important;
    box-shadow: inset 3px 0 0 #0b63ce !important;
  }

  .opsConsoleShell .messageRowShell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .messageBulkSelect {
    display: none !important;
  }

  .opsConsoleShell .messageButton.active,
  .opsConsoleShell .messageButton.active .messageTopRow strong,
  .opsConsoleShell .messageButton.active .messageSubjectRow,
  .opsConsoleShell .messageButton.active .messageSubjectRow span,
  .opsConsoleShell .messageButton.active .messageMeta,
  .opsConsoleShell .messageButton.active .messageTopRow span {
    color: #111827 !important;
  }

  .opsConsoleShell .contextPersonHeader {
    grid-template-columns: 2.1rem minmax(0, 1fr) 1.7rem;
  }

  .opsConsoleShell .contextPersonHeader > div {
    min-width: 0;
  }

  .opsConsoleShell .contextPersonHeader small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Approved mockup convergence: quiet mail-client details and global call tray behavior. */
.opsConsoleShell .messageButton {
  position: relative;
}

.opsConsoleShell .messageButton.unread {
  padding-left: 1.42rem !important;
}

.opsConsoleShell .unreadDot {
  position: absolute;
  top: 1.05rem;
  left: 0.62rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #0b63ce;
  box-shadow: none;
}

.opsConsoleShell .attachmentList {
  gap: 0.5rem;
  margin: 0.8rem 0 0;
}

.opsConsoleShell .attachmentList > strong {
  color: #475467;
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}

.opsConsoleShell .attachmentItems {
  gap: 0.46rem;
}

.opsConsoleShell .attachmentLink {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  min-width: min(100%, 15rem);
  max-width: 18rem;
  min-height: 3.28rem;
  padding: 0.48rem 0.64rem;
  border: 1px solid #dbe1ea;
  border-radius: 0.42rem;
  background: #ffffff;
  color: #111827;
  box-shadow: none;
}

.opsConsoleShell .attachmentFileIcon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.32rem;
  background: #eef2f7;
  color: #667085;
}

.opsConsoleShell .attachmentFileIcon svg,
.opsConsoleShell .attachmentTools svg {
  width: 1rem;
  height: 1rem;
}

.opsConsoleShell .attachmentCopy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.opsConsoleShell .attachmentCopy b,
.opsConsoleShell .attachmentCopy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opsConsoleShell .attachmentCopy b {
  font-size: 0.72rem;
  font-weight: 760;
}

.opsConsoleShell .attachmentCopy small {
  color: #667085;
  font-size: 0.68rem;
}

.opsConsoleShell .attachmentTools {
  display: grid;
  color: #475467;
}

.opsConsoleShell .phoneGlobalCallActions .answerButton {
  min-width: 5rem;
  border: 1px solid #15803d !important;
  background: #16803a !important;
  color: #ffffff !important;
}

.opsConsoleShell .phoneGlobalCallActions .hangupButton {
  min-width: 5rem;
  border: 1px solid #dbe1ea !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.opsConsoleShell .phoneGlobalCallActions .secondaryAction {
  border: 1px solid #dbe1ea !important;
  background: #ffffff !important;
  color: #344054 !important;
}

.opsConsoleShell .phoneGlobalCallActions .phoneGlobalCloseButton {
  min-width: 2rem;
  color: #111827 !important;
}

.opsConsoleShell .phoneGlobalCloseButton .phoneTrayIcon {
  display: block;
  width: 1.08rem;
  height: 1.08rem;
  color: #111827 !important;
}

.opsConsoleShell .phoneGlobalCloseButton .phoneTrayIcon path {
  stroke: #111827 !important;
  stroke-width: 2.2;
}

/* Approved mockup exactness pass: flat mail rows and explicit call dismiss controls. */
.opsConsoleShell .messageButton::before {
  content: none !important;
}

.opsConsoleShell .mailCommandMoreShell {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
}

.opsConsoleShell .mailCommandBar {
  overflow: visible !important;
}

.opsConsoleShell .mailCommandBar .mailCommandMoreShell > button.active {
  background: #eef5ff;
  color: #084a9f;
}

.opsConsoleShell .mailCommandMoreMenu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 80;
  display: grid;
  width: 16.2rem;
  gap: 0.12rem;
  padding: 0.38rem;
  border: 1px solid #dbe1ea;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 1rem 2.6rem rgba(16, 24, 40, 0.16);
}

.opsConsoleShell .mailCommandMoreMenu button,
.opsConsoleShell .mailCommandMoveField {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  min-height: 2rem;
  align-items: center;
  gap: 0.46rem;
  padding: 0.32rem 0.45rem;
  border: 0;
  border-radius: 0.36rem;
  background: transparent;
  color: #344054;
  font-size: 0.7rem;
  font-weight: 650;
  text-align: left;
  box-shadow: none;
}

.opsConsoleShell .mailCommandMoreMenu button:hover:not(:disabled) {
  background: #f2f4f7;
}

.opsConsoleShell .mailCommandMoreMenu button:disabled,
.opsConsoleShell .mailCommandMoveField:has(select:disabled) {
  color: #98a2b3;
}

.opsConsoleShell .mailCommandMoveField {
  grid-template-columns: 4rem minmax(0, 1fr);
}

.opsConsoleShell .mailCommandMoveField span {
  color: #667085;
  font-size: 0.66rem;
}

.opsConsoleShell .mailCommandMoveField select {
  min-width: 0;
  width: 100%;
  height: 1.82rem;
  border: 1px solid #dbe1ea;
  border-radius: 0.34rem;
  background: #ffffff;
  color: #111827;
  font-size: 0.68rem;
}

.opsConsoleShell .mailCommandMoreDivider {
  display: block;
  height: 1px;
  margin: 0.16rem 0;
  background: #e7ebf1;
}

.opsConsoleShell .phoneGlobalCallActions .phoneGlobalCloseButton {
  display: grid !important;
  flex: 0 0 2rem;
  place-items: center;
  padding: 0 !important;
}

.opsConsoleShell .phoneGlobalCloseButton .phoneTrayIcon {
  display: block !important;
  flex: 0 0 auto;
}

.opsConsoleShell .phoneGlobalCloseButton .phoneTrayIcon path {
  opacity: 1 !important;
  stroke: #111827 !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .messageButton.unread {
    padding-left: 1.35rem !important;
  }

  .opsConsoleShell .messageButton.active {
    background: #eef5ff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .messageDetail {
    padding-top: 0.95rem;
  }

  .opsConsoleShell .messageHero {
    padding-bottom: 0.58rem;
  }

  .opsConsoleShell .messageHeroCopy h3 {
    font-size: 0.98rem;
    line-height: 1.2;
  }

  .opsConsoleShell .plainMessageBody {
    margin-top: 0.72rem;
    font-size: 0.84rem;
    line-height: 1.58;
  }

  .opsConsoleShell .plainMessageBody p {
    margin: 0 0 0.76rem;
  }

  .opsConsoleShell .replyDock {
    margin-top: 0.78rem;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    width: min(41rem, calc(100vw - 33rem));
    min-width: 32rem;
    padding: 0.5rem 0.58rem;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .messageButton {
    min-height: 4.86rem;
    margin: 0 !important;
    padding: 0.72rem 0.86rem 0.72rem 1.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .messageButton.active {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .messageRowShell,
  .opsConsoleShell .messageRowShell.selected {
    border-bottom: 1px solid #dbe1ea !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .unreadDot {
    top: 1.16rem;
    left: 0.68rem;
  }

  .opsConsoleShell .mobileReaderPreview {
    margin-top: 0.72rem;
    margin-bottom: calc(8.45rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .mobileReaderPreview.actionSheetOpen {
    max-height: min(72dvh, 31rem);
    overflow: visible;
  }

  .opsConsoleShell .mobileReaderPreview .mailCommandMoreMenu.mobileActionSheet {
    position: static;
    width: 100%;
    max-height: 16rem;
    margin-top: 0.08rem;
    overflow-y: auto;
    border-radius: 0.58rem;
    box-shadow: none;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    border: 1px solid #dbe1ea;
    background: #ffffff;
    box-shadow: 0 -0.65rem 1.8rem rgba(16, 24, 40, 0.12);
  }

  .opsConsoleShell .phoneGlobalCallActions {
    grid-template-columns: 1fr 1fr;
    padding-right: 2.65rem;
  }

  .opsConsoleShell .phoneGlobalCallActions .phoneGlobalCloseButton {
    position: absolute;
    top: 0.58rem;
    right: 0.58rem;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    box-shadow: none;
  }
}

/* Final Ops Console convergence lock: this intentionally wins over legacy surface CSS. */
.opsConsoleShell .chatShell {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatConversationRail,
.opsConsoleShell .chatMain {
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.opsConsoleShell .chatConversationRail {
  border-right: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .chatRailHeader,
.opsConsoleShell .chatHeader {
  min-height: 3.15rem !important;
  padding: 0.62rem 0.82rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatRailHeader .eyebrow,
.opsConsoleShell .chatReadState,
.opsConsoleShell .fieldHero p,
.opsConsoleShell .adminHeader p,
.opsConsoleShell .servicePaneHeader p,
.opsConsoleShell .serviceColumnHeader p,
.opsConsoleShell .phonePanelHeader p,
.opsConsoleShell .phoneProofHeader p,
.opsConsoleShell .phoneCallInboxHeader p {
  display: none !important;
}

.opsConsoleShell .chatRailHeader h2,
.opsConsoleShell .chatHeader h2,
.opsConsoleShell .fieldHero h2,
.opsConsoleShell .adminHeader h2 {
  margin: 0 !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.96rem !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
}

.opsConsoleShell .chatHeader p {
  margin: 0.14rem 0 0 !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.72rem !important;
  font-weight: 620 !important;
}

.opsConsoleShell .chatHeaderMeta {
  gap: 0.28rem !important;
  margin-top: 0.24rem !important;
}

.opsConsoleShell .chatContextBadge {
  max-width: 16rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0.15rem 0.42rem !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .chatContextBadge.linked,
.opsConsoleShell .chatConversationList .chatContextLine {
  color: #166534 !important;
}

.opsConsoleShell .chatRailHeader button,
.opsConsoleShell .chatNewCard > button,
.opsConsoleShell .chatComposerActions button:last-child,
.opsConsoleShell .gifSearchRow button {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.72rem !important;
  background: var(--ops-accent, #0b63ce) !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
}

.opsConsoleShell .chatNewCard,
.opsConsoleShell .gifPicker,
.opsConsoleShell .chatComposerInput,
.opsConsoleShell .chatBubble,
.opsConsoleShell .chatReply {
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatConversationList {
  padding: 0 !important;
}

.opsConsoleShell .chatConversationList > button {
  min-height: 4.35rem !important;
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  gap: 0.64rem !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  padding: 0.62rem 0.82rem !important;
}

.opsConsoleShell .chatConversationList > button.active {
  background: #eef5ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .chatAvatar,
.opsConsoleShell .chatMessageAvatar {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.72rem !important;
  box-shadow: inset 0 0 0 1px var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .chatTimeline {
  padding: 0.85rem clamp(0.85rem, 2vw, 1.2rem) !important;
  background: #f8fafc !important;
}

.opsConsoleShell .chatMessage {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: 0.62rem !important;
  margin-bottom: 0.72rem !important;
}

.opsConsoleShell .chatBubble {
  max-width: 48rem !important;
  padding: 0.64rem 0.72rem !important;
}

.opsConsoleShell .chatBubble p {
  margin-bottom: 0.45rem !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
}

.opsConsoleShell .chatComposer {
  border-top: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.62rem 0.82rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatComposerInput textarea {
  min-height: 3.35rem !important;
  border-radius: 0.48rem 0.48rem 0 0 !important;
  padding: 0.72rem !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
}

.opsConsoleShell .fieldEstimateActionButtons,
.opsConsoleShell .fieldInvoiceActionButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.42rem !important;
  min-width: max-content !important;
}

.opsConsoleShell .fieldPaymentActionButtons button,
.opsConsoleShell .fieldInvoiceActionButtons button,
.opsConsoleShell .fieldEstimateActionButtons button {
  min-width: 4.75rem !important;
}

.opsConsoleShell .fieldHero,
.opsConsoleShell .adminHeader {
  min-height: 3.2rem !important;
  border-radius: 0 !important;
  padding: 0.62rem 0.82rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .chatShell {
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline {
    overflow-y: auto !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .chatShell {
    display: block !important;
    min-height: 0 !important;
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .chatConversationRail,
  .opsConsoleShell .chatMain {
    min-height: calc(100dvh - 8.9rem) !important;
    border-right: 0 !important;
  }

  .opsConsoleShell .chatConversationRail:not(.mobileActive),
  .opsConsoleShell .chatMain:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .chatTimeline {
    padding: 0.72rem !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .chatComposer {
    position: static !important;
    bottom: auto !important;
    padding-bottom: calc(0.72rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldEstimateHeaderRow,
  .opsConsoleShell .fieldEstimateOptionRow,
  .opsConsoleShell .fieldInvoiceActionRow,
  .opsConsoleShell .fieldPaymentActionRow {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons,
  .opsConsoleShell .fieldEstimateOptionActions,
  .opsConsoleShell .fieldInvoiceActionButtons,
  .opsConsoleShell .fieldPaymentActionButtons {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Ops surface parity pass: keep Service, Chat, and Admin in the same compact console language. */
.opsConsoleShell .serviceShell {
  gap: 0 !important;
  padding: 0 !important;
  color: var(--ops-text, #111827) !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceCustomerPane,
.opsConsoleShell .serviceProfilePane,
.opsConsoleShell .serviceRecordsPane {
  border: 0 !important;
  border-right: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.opsConsoleShell .serviceRecordsPane {
  border-right: 0 !important;
  grid-column: auto !important;
  min-height: 0 !important;
}

.opsConsoleShell .serviceCustomerPane {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.opsConsoleShell .servicePaneHeader,
.opsConsoleShell .serviceColumnHeader,
.opsConsoleShell .adminHeader,
.opsConsoleShell .adminStatusBar {
  min-height: 3.15rem !important;
  padding: 0.62rem 0.82rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .servicePaneHeader .eyebrow,
.opsConsoleShell .serviceColumnHeader .eyebrow,
.opsConsoleShell .servicePaneHeader p,
.opsConsoleShell .serviceColumnHeader p,
.opsConsoleShell .serviceHeroCard p,
.opsConsoleShell .serviceContactActionCard p,
.opsConsoleShell .serviceInfoCard small,
.opsConsoleShell .adminHeader p,
.opsConsoleShell .adminControlBand p,
.opsConsoleShell .adminRuleHeader p,
.opsConsoleShell .adminPermissionSectionHeader p,
.opsConsoleShell .adminStatusBar > span {
  display: none !important;
}

.opsConsoleShell .servicePaneHeader h2,
.opsConsoleShell .serviceColumnHeader h2,
.opsConsoleShell .adminHeader h2,
.opsConsoleShell .adminControlBand h3,
.opsConsoleShell .adminRuleHeader h3,
.opsConsoleShell .adminPermissionSectionHeader h3 {
  margin: 0 !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.96rem !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .serviceSearchBar {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.45rem !important;
  padding: 0.58rem 0.72rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .serviceSearchBar input,
.opsConsoleShell .serviceSearchBar button,
.opsConsoleShell .serviceLoadMore,
.opsConsoleShell .serviceOpenRecords,
.opsConsoleShell .adminStatusBar button,
.opsConsoleShell .adminRuleFacts select,
.opsConsoleShell .adminRuleCard select,
.opsConsoleShell .permissionStateControl select {
  min-height: 2.05rem !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .serviceSearchBar button,
.opsConsoleShell .serviceLoadMore,
.opsConsoleShell .serviceOpenRecords,
.opsConsoleShell .adminStatusBar button {
  width: auto !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.72rem !important;
}

.opsConsoleShell .serviceTriageBar {
  padding: 0.46rem 0.72rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceTriageCounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceTriageCounts span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-height: 1.38rem !important;
  border-radius: 0.38rem !important;
  padding: 0.22rem 0.42rem !important;
  color: var(--ops-muted, #667085) !important;
  background: #f8fafc !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .serviceTriageCounts b {
  color: var(--ops-text, #111827) !important;
  font-weight: 820 !important;
}

.opsConsoleShell .serviceOutboxStatus {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  padding: 0.46rem 0.72rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceOutboxStatus b {
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .serviceOutboxStatus small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .serviceOutboxStatus button {
  min-height: 1.85rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0 0.58rem !important;
  color: var(--ops-text, #111827) !important;
  background: #ffffff !important;
  font-size: 0.7rem !important;
}

.opsConsoleShell .serviceOutboxStatus button:disabled {
  color: var(--ops-muted, #667085) !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceOutboxDetails {
  gap: 0.28rem !important;
  max-height: min(34vh, 18rem) !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  overflow: auto !important;
  padding: 0.42rem 0.72rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceOutboxDetails article {
  border-radius: 0.45rem !important;
  padding: 0.38rem 0.48rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceOutboxDetails strong {
  font-size: 0.68rem !important;
}

.opsConsoleShell .serviceOutboxDetails small,
.opsConsoleShell .serviceOutboxDetails p,
.opsConsoleShell .serviceOutboxDetails em {
  font-size: 0.62rem !important;
}

.opsConsoleShell .serviceOutboxProofChips {
  gap: 0.18rem !important;
}

.opsConsoleShell .serviceOutboxProofChips em {
  padding: 0.1rem 0.28rem !important;
}

.opsConsoleShell .serviceOutboxDetails button {
  border-radius: 0.35rem !important;
  padding: 0.24rem 0.45rem !important;
  font-size: 0.62rem !important;
}

.opsConsoleShell .serviceCustomerList {
  padding: 0 !important;
}

.opsConsoleShell .serviceCustomerCard {
  grid-template-columns: 2rem minmax(0, 1fr) auto !important;
  gap: 0.62rem !important;
  min-height: 4.35rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.opsConsoleShell .serviceCustomerCard.active {
  background: #eef5ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .serviceAvatar,
.opsConsoleShell .serviceHeroAvatar {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: inset 0 0 0 1px var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .serviceCustomerStats {
  display: none !important;
}

.opsConsoleShell .serviceReadinessPill,
.opsConsoleShell .servicePillRow span,
.opsConsoleShell .serviceEventTags span,
.opsConsoleShell .adminRuleCard > span,
.opsConsoleShell .permissionEnforcement {
  border-radius: 999px !important;
  padding: 0.22rem 0.48rem !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody {
  padding: 0.72rem !important;
}

.opsConsoleShell .serviceHeroCard,
.opsConsoleShell .serviceInfoCard,
.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceWorkflowCard,
.opsConsoleShell .serviceContactActionCard,
.opsConsoleShell .serviceMetricGrid div,
.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a,
.opsConsoleShell .adminRoleOverview div,
.opsConsoleShell .adminControlBand,
.opsConsoleShell .adminPolicyList span,
.opsConsoleShell .adminRulePanel,
.opsConsoleShell .adminRuleFacts span,
.opsConsoleShell .adminRuleCard,
.opsConsoleShell .adminPermissionNav a,
.opsConsoleShell .adminPermissionSection {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceHeroCard {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: 0.56rem !important;
  margin: -0.72rem -0.72rem 0.6rem !important;
  padding: 0.62rem 0.72rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceHeroCard h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .servicePillRow {
  gap: 0.28rem !important;
  margin-top: 0.32rem !important;
}

.opsConsoleShell .serviceActionGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin: 0.6rem 0 !important;
}

.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a,
.opsConsoleShell .serviceMetricGrid div,
.opsConsoleShell .serviceContactActionCard,
.opsConsoleShell .serviceWorkflowCard,
.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceInfoCard {
  padding: 0.62rem !important;
}

.opsConsoleShell .serviceWorkflowCard {
  gap: 0.46rem !important;
  margin: 0.6rem 0 !important;
}

.opsConsoleShell .serviceWorkflowList {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceWorkflowList button {
  border-radius: 0.42rem !important;
  padding: 0.46rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceWorkflowHandoffPlan {
  border-radius: 0.55rem !important;
  gap: 0.36rem !important;
  padding: 0.5rem 0.56rem !important;
}

.opsConsoleShell .serviceWorkflowHandoffPlan ul {
  gap: 0.3rem !important;
}

.opsConsoleShell .serviceWorkflowHandoffPlan li {
  font-size: 0.68rem !important;
}

.opsConsoleShell .serviceRecordsWorkflowHandoffCard,
.opsConsoleShell .serviceOutboxWorkflowHandoffCard {
  margin: 0.5rem 0 !important;
}

.opsConsoleShell .serviceWorkflowList b,
.opsConsoleShell .serviceWorkflowList span,
.opsConsoleShell .serviceWorkflowList small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .serviceWorkflowList b,
.opsConsoleShell .serviceWorkflowList span {
  white-space: nowrap !important;
}

.opsConsoleShell .serviceActionGrid strong,
.opsConsoleShell .serviceActionGrid span,
.opsConsoleShell .serviceMetricGrid strong,
.opsConsoleShell .serviceMetricGrid span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin: 0.6rem 0 !important;
}

.opsConsoleShell .serviceMetricGrid strong {
  font-size: 0.95rem !important;
}

.opsConsoleShell .serviceContactActionCard {
  gap: 0.5rem !important;
  margin: 0.6rem 0 !important;
}

.opsConsoleShell .serviceContactActionCard input,
.opsConsoleShell .serviceContactActionCard select,
.opsConsoleShell .serviceContactActionCard textarea {
  border-radius: 0.38rem !important;
  padding: 0.48rem 0.58rem !important;
}

.opsConsoleShell .serviceEmptyState {
  min-height: 12rem !important;
}

.opsConsoleShell .serviceEmptyOrb {
  display: none !important;
}

.opsConsoleShell .serviceCustomerEmptyState {
  gap: 0.85rem !important;
  padding: 1.2rem !important;
}

.opsConsoleShell .serviceCustomerEmptyState strong {
  font-size: clamp(1rem, 1.8vw, 1.35rem) !important;
}

.opsConsoleShell .serviceEmptySteps {
  gap: 0.5rem !important;
}

.opsConsoleShell .serviceEmptySteps span {
  min-height: 3.35rem !important;
  border-radius: 0.75rem !important;
  padding: 0.58rem !important;
}

@media (max-width: 920px) {
  .serviceEmptySteps,
  .opsConsoleShell .serviceEmptySteps {
    grid-template-columns: 1fr !important;
  }
}

.opsConsoleShell .adminAppShell {
  padding: 0.72rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .adminHeader,
.opsConsoleShell .adminStatusBar,
.opsConsoleShell .adminTriageBar,
.opsConsoleShell .adminControlBand,
.opsConsoleShell .adminRulePanel,
.opsConsoleShell .adminPermissionLayout {
  margin: 0 0 0.6rem !important;
}

.opsConsoleShell .adminTriageBar {
  grid-template-columns: minmax(14rem, 1fr) minmax(16rem, auto) minmax(13rem, auto) !important;
  gap: 0.5rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0.52rem 0.62rem !important;
}

.opsConsoleShell .adminPermissionSearch {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .adminPermissionSearch span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .adminPermissionSearch input,
.opsConsoleShell .adminPermissionSearch button {
  min-height: 2.05rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .adminPermissionSearch button {
  width: auto !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.62rem !important;
}

.opsConsoleShell .adminQuickFilters {
  gap: 0.28rem !important;
}

.opsConsoleShell .adminQuickFilters button {
  min-height: 1.52rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0 0.44rem !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .adminQuickFilters button.active {
  border-color: var(--ops-accent, #0b63ce) !important;
  background: #eef5ff !important;
  color: var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .adminTriageCounts {
  justify-content: flex-end !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .adminTriageCounts span {
  min-height: 1.38rem !important;
  border-radius: 0.38rem !important;
  padding: 0.22rem 0.42rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .adminTriageCounts b {
  color: var(--ops-text, #111827) !important;
  font-weight: 820 !important;
}

.opsConsoleShell .adminHeaderStats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .adminHeaderStats span {
  min-width: 4.6rem !important;
  border-radius: 0.38rem !important;
  padding: 0.38rem 0.48rem !important;
  font-size: 0.68rem !important;
}

.opsConsoleShell .adminHeaderStats strong {
  font-size: 0.82rem !important;
}

.opsConsoleShell .adminRoleOverview {
  display: flex !important;
  gap: 0.45rem !important;
  margin: 0 0 0.6rem !important;
  overflow-x: auto !important;
  padding-bottom: 0.08rem !important;
}

.opsConsoleShell .adminRoleOverview div {
  flex: 0 0 9.2rem !important;
  padding: 0.55rem !important;
}

.opsConsoleShell .adminRoleOverview strong {
  margin-bottom: 0.22rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .adminRoleOverview span,
.opsConsoleShell .adminRoleOverview em {
  font-size: 0.68rem !important;
  line-height: 1.28 !important;
}

.opsConsoleShell .adminControlBand {
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) !important;
  gap: 0.6rem !important;
  padding: 0.62rem !important;
}

.opsConsoleShell .adminPolicyList {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) !important;
  gap: 0.4rem !important;
}

.opsConsoleShell .adminPolicyList span,
.opsConsoleShell .adminRuleFacts span,
.opsConsoleShell .adminRuleCard {
  padding: 0.5rem !important;
}

.opsConsoleShell .adminRulePanel {
  padding: 0.62rem !important;
}

.opsConsoleShell .adminRuleHeader {
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr) !important;
  gap: 0.6rem !important;
}

.opsConsoleShell .adminRuleFacts {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .adminRuleGrid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) !important;
  gap: 0.5rem !important;
  margin-top: 0.55rem !important;
}

.opsConsoleShell .adminPermissionLayout {
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) !important;
  gap: 0.6rem !important;
}

.opsConsoleShell .adminPermissionNav {
  gap: 0.34rem !important;
  top: 0.72rem !important;
}

.opsConsoleShell .adminPermissionNav a,
.opsConsoleShell .adminPermissionSectionHeader,
.opsConsoleShell .permissionMatrixHeader,
.opsConsoleShell .permissionMatrixRow {
  padding: 0.52rem 0.62rem !important;
}

.opsConsoleShell .permissionMatrixHeader,
.opsConsoleShell .permissionMatrixRow {
  gap: 0.38rem !important;
}

.opsConsoleShell .chatNewCard {
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
}

.opsConsoleShell .chatMemberPicker {
  max-height: 9.5rem !important;
  overflow-y: auto !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceShell {
    grid-template-columns: minmax(16rem, 20rem) minmax(19rem, 0.82fr) minmax(0, 1.35fr) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminAppShell {
    overflow-y: auto !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceShell {
    display: block !important;
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane {
    border-right: 0 !important;
  }

  .opsConsoleShell .serviceCustomerPane:not(.mobileActive),
  .opsConsoleShell .serviceProfilePane:not(.mobileActive),
  .opsConsoleShell .serviceRecordsPane:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    display: flex !important;
    min-height: calc(100dvh - var(--ops-header-height) - 4.45rem);
    overflow: visible !important;
  }

  .opsConsoleShell .serviceSearchBar,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminRuleHeader,
  .opsConsoleShell .adminPermissionLayout,
  .opsConsoleShell .adminControlBand {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceActionGrid,
  .opsConsoleShell .serviceMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .adminHeaderStats,
  .opsConsoleShell .adminRoleOverview,
  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminTriageCounts {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

  .opsConsoleShell .adminPermissionSearch {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .adminPermissionSearch span {
    display: none !important;
  }

  .opsConsoleShell .adminPermissionNav {
    position: static !important;
    display: flex !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .adminPermissionNav a {
    flex: 0 0 9.5rem !important;
  }
}

/* Ops surface parity hardening: Chat, Service, and Admin should read like one compact console. */
.opsConsoleShell .chatRailHeader,
.opsConsoleShell .chatHeader,
.opsConsoleShell .servicePaneHeader,
.opsConsoleShell .serviceColumnHeader,
.opsConsoleShell .adminHeader {
  align-items: center !important;
}

.opsConsoleShell .chatRailHeader > div,
.opsConsoleShell .chatHeader > div,
.opsConsoleShell .servicePaneHeader > div,
.opsConsoleShell .serviceColumnHeader > div,
.opsConsoleShell .adminHeader > div {
  min-width: 0 !important;
}

.opsConsoleShell .chatRailHeader h2,
.opsConsoleShell .chatHeader h2,
.opsConsoleShell .servicePaneHeader h2,
.opsConsoleShell .serviceColumnHeader h2,
.opsConsoleShell .adminHeader h2 {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatNewCard {
  display: grid !important;
  gap: 0.5rem !important;
  padding: 0.6rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .chatNewCard input,
.opsConsoleShell .chatTriageBar input,
.opsConsoleShell .gifSearchRow input {
  min-height: 2.05rem !important;
  border-radius: 0.38rem !important;
  font-size: 0.76rem !important;
}

.opsConsoleShell .chatTriageBar {
  gap: 0.42rem !important;
  padding: 0.52rem 0.62rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatTriageCounts {
  gap: 0.32rem !important;
}

.opsConsoleShell .chatTriageCounts span,
.opsConsoleShell .chatConversationEmpty {
  border-radius: 0.38rem !important;
  padding: 0.22rem 0.42rem !important;
  color: var(--ops-muted, #667085) !important;
  background: #f8fafc !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .chatConversationEmpty {
  margin: 0.55rem !important;
}

.opsConsoleShell .chatMemberPicker button,
.opsConsoleShell .chatMessageActions button,
.opsConsoleShell .chatReactions button,
.opsConsoleShell .chatComposerContext button,
.opsConsoleShell .selectedGifPreview button {
  min-height: 1.85rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .chatConversationList strong,
.opsConsoleShell .chatConversationList small,
.opsConsoleShell .chatMessageMeta strong,
.opsConsoleShell .chatMessageMeta span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatConversationList em {
  min-width: 1.4rem !important;
  min-height: 1.4rem !important;
  border-radius: 999px !important;
  background: #0b63ce !important;
  color: #ffffff !important;
  font-size: 0.64rem !important;
}

.opsConsoleShell .chatMessageActions,
.opsConsoleShell .chatReactions {
  gap: 0.32rem !important;
}

.opsConsoleShell .chatReplies {
  margin-top: 0.46rem !important;
  padding-left: 0.55rem !important;
  border-left: 2px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .chatComposerContext,
.opsConsoleShell .selectedGifPreview {
  margin-bottom: 0.42rem !important;
  border-radius: 0.42rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .gifPicker {
  margin-top: 0.5rem !important;
  padding: 0.55rem !important;
}

.opsConsoleShell .gifGrid {
  max-height: 12rem !important;
  overflow-y: auto !important;
}

.opsConsoleShell .serviceRecordTabs {
  gap: 0.34rem !important;
  padding: 0.5rem 0.62rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  overflow-x: auto !important;
}

.opsConsoleShell .serviceRecordTabs button {
  flex: 0 0 auto !important;
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.62rem !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .serviceTimeline,
.opsConsoleShell .serviceRecordCardList,
.opsConsoleShell .serviceRecordStack {
  gap: 0.55rem !important;
}

.opsConsoleShell .serviceTimelineEvent,
.opsConsoleShell .serviceRecordCard,
.opsConsoleShell .serviceMediaCard {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceTimelineEvent {
  padding: 0.58rem !important;
}

.opsConsoleShell .serviceTimelineDot {
  width: 0.42rem !important;
  height: 0.42rem !important;
  margin-top: 0.45rem !important;
}

.opsConsoleShell .serviceRecordCard {
  padding: 0.62rem !important;
}

.opsConsoleShell .serviceRecordKicker,
.opsConsoleShell .serviceRecordCard p {
  display: none !important;
}

.opsConsoleShell .serviceRecordCard h3 {
  margin: 0 !important;
  font-size: 0.86rem !important;
}

.opsConsoleShell .serviceRecordChips {
  gap: 0.28rem !important;
}

.opsConsoleShell .serviceRecordTableHeader {
  margin-bottom: 0.46rem !important;
}

.opsConsoleShell .adminControlBand,
.opsConsoleShell .adminRulePanel,
.opsConsoleShell .adminPermissionSection {
  overflow: hidden !important;
}

.opsConsoleShell .adminPolicyList em,
.opsConsoleShell .adminRuleCard small {
  display: none !important;
}

.opsConsoleShell .permissionMatrix {
  overflow-x: auto !important;
}

.opsConsoleShell .permissionMatrixHeader,
.opsConsoleShell .permissionMatrixRow {
  min-width: 46rem !important;
}

.opsConsoleShell .permissionMatrixRow strong,
.opsConsoleShell .permissionMatrixRow p {
  margin: 0 !important;
}

.opsConsoleShell .permissionMatrixRow p {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
  line-height: 1.28 !important;
}

/* Admin settings console lock: permissions stay scan-first, not decorative. */
.opsConsoleShell .adminHeader,
.opsConsoleShell .adminStatusBar,
.opsConsoleShell .adminTriageBar,
.opsConsoleShell .adminRoleOverview,
.opsConsoleShell .adminReportPanel,
.opsConsoleShell .adminControlBand,
.opsConsoleShell .adminRulePanel,
.opsConsoleShell .adminPermissionLayout {
  max-width: none !important;
}

.opsConsoleShell .adminStatusBar {
  min-height: 2.35rem !important;
  padding: 0.42rem 0.62rem !important;
}

.opsConsoleShell .adminRoleOverview div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.2rem 0.42rem !important;
  align-items: center !important;
}

.opsConsoleShell .adminReportPanel {
  margin: 0 0.72rem 0.72rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.opsConsoleShell .adminReportStats {
  grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)) !important;
}

.opsConsoleShell .adminReportStats span,
.opsConsoleShell .adminReportSideBlock span {
  border-radius: 8px !important;
  padding: 0.46rem 0.52rem !important;
}

.opsConsoleShell .adminReportGrid {
  grid-template-columns: minmax(0, 1fr) minmax(13.5rem, 17rem) !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.opsConsoleShell .adminReportTable,
.opsConsoleShell .adminReportTableHeader,
.opsConsoleShell .adminReportTable [role="row"],
.opsConsoleShell .adminReportTable [role="cell"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.opsConsoleShell .adminReportTableHeader,
.opsConsoleShell .adminReportTable [role="row"] {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 0.6fr) minmax(0, auto) !important;
  padding: 0.5rem 0.62rem !important;
}

.opsConsoleShell .adminFieldLifecyclePanel .adminReportGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(14rem, 18rem) !important;
}

.opsConsoleShell .adminFieldLifecyclePanel .adminReportSide {
  min-width: 0 !important;
}

.opsConsoleShell .adminReportSideBlock {
  border-radius: 8px !important;
  padding: 0.58rem !important;
}

.opsConsoleShell .adminRoleOverview strong,
.opsConsoleShell .adminRoleOverview em {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .adminRoleOverview span {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .adminPolicyList span,
.opsConsoleShell .adminRuleFacts span {
  min-height: 2.55rem !important;
}

.opsConsoleShell .adminRuleHeader {
  align-items: stretch !important;
}

.opsConsoleShell .adminRuleHeader > div:first-child {
  align-self: start !important;
}

.opsConsoleShell .adminRuleFacts select,
.opsConsoleShell .adminRuleCard select,
.opsConsoleShell .permissionStateControl select {
  min-height: 1.9rem !important;
}

.opsConsoleShell .adminRuleCard {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .adminRuleCard small,
.opsConsoleShell .permissionAbility small,
.opsConsoleShell .permissionScope,
.opsConsoleShell .adminPolicyList small {
  display: none !important;
}

.opsConsoleShell .adminPermissionNav a {
  min-height: 2.35rem !important;
  align-content: center !important;
}

.opsConsoleShell .adminPermissionNav a strong,
.opsConsoleShell .permissionAbility strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .permissionMatrixHeader,
.opsConsoleShell .permissionMatrixRow {
  grid-template-columns: minmax(13rem, 1.45fr) repeat(6, minmax(4.8rem, 0.5fr)) minmax(5rem, 0.48fr) !important;
  min-width: 56rem !important;
}

.opsConsoleShell .permissionScope {
  display: none !important;
}

.opsConsoleShell .permissionMatrixHeader span:nth-last-child(2),
.opsConsoleShell .permissionMatrixRow .permissionScope {
  display: none !important;
}

.opsConsoleShell .permissionStateControl {
  gap: 0.18rem !important;
}

.opsConsoleShell .permissionStateControl > span {
  justify-self: stretch !important;
  text-align: center !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .adminRuleHeader,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminReportGrid,
  .opsConsoleShell .adminPermissionLayout {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    flex-basis: 8.8rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .chatTimeline {
    padding: 0.6rem !important;
  }

  .opsConsoleShell .chatMessage {
    grid-template-columns: 1.85rem minmax(0, 1fr) !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .chatBubble {
    padding: 0.56rem 0.62rem !important;
  }

  .opsConsoleShell .serviceRecordTabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
  }

  .opsConsoleShell .permissionMatrixHeader,
  .opsConsoleShell .permissionMatrixRow {
    min-width: 42rem !important;
  }
}

/* Secondary surface UX finish: Chat and Admin stay app-like without explainer-heavy chrome. */
.opsConsoleShell .chatShell {
  gap: 0 !important;
  padding: 0 !important;
  border-left: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .chatConversationRail {
  border-width: 0 1px 0 0 !important;
}

.opsConsoleShell .chatMain {
  border: 0 !important;
}

.opsConsoleShell .chatConversationList {
  padding: 0 !important;
}

.opsConsoleShell .chatConversationList > button {
  min-height: 4.05rem !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatConversationList > button.active {
  background: #eef5ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .chatAvatar,
.opsConsoleShell .chatMessageAvatar {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: inset 0 0 0 1px var(--ops-border, #dbe1ea) !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .chatTimeline {
  padding: 0.72rem !important;
}

.opsConsoleShell .chatMessage {
  grid-template-columns: 2rem minmax(0, 1fr) !important;
  gap: 0.55rem !important;
  margin-bottom: 0.62rem !important;
}

.opsConsoleShell .chatBubble {
  border-radius: 0.48rem !important;
  padding: 0.58rem 0.64rem !important;
}

.opsConsoleShell .chatComposer {
  border-top-color: var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  padding: 0.55rem 0.72rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatComposerInput {
  border-radius: 0.48rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatComposerInput textarea {
  min-height: 2.7rem !important;
  border-radius: 0.48rem 0.48rem 0 0 !important;
  padding: 0.58rem 0.64rem 0.36rem !important;
}

.opsConsoleShell .adminHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.opsConsoleShell .adminHeaderStats span:nth-child(n + 4) {
  display: none !important;
}

.opsConsoleShell .adminPermissionLayout {
  align-items: start !important;
}

.opsConsoleShell .adminPermissionNav {
  max-height: calc(100dvh - var(--ops-header-height) - 4rem) !important;
  overflow-y: auto !important;
}

.opsConsoleShell .permissionMatrix {
  max-width: 100% !important;
  border-top: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .permissionMatrixHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #f8fafc !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatShell {
    display: block !important;
    border-left: 0 !important;
  }

  .opsConsoleShell .chatConversationRail,
  .opsConsoleShell .chatMain {
    min-height: 0 !important;
    border: 0 !important;
  }

  .opsConsoleShell .chatConversationRail:not(.mobileActive),
  .opsConsoleShell .chatMain:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .chatComposer {
    position: sticky !important;
    bottom: calc(4.65rem + env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
    margin: 0 0.55rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.6rem !important;
  }

  .opsConsoleShell .adminAppShell {
    padding: 0.55rem 0.55rem calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminHeader {
    grid-template-columns: 1fr !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .adminHeaderStats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .opsConsoleShell .adminHeaderStats span {
    min-width: 0 !important;
  }

  .opsConsoleShell .adminTriageBar {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .adminReportHeader {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .adminReportHeaderActions {
    justify-content: stretch !important;
  }

  .opsConsoleShell .adminReportHeaderActions button,
  .opsConsoleShell .adminReportHeaderActions a,
  .opsConsoleShell .adminReportDateControl {
    flex: 1 1 auto !important;
  }

  .opsConsoleShell .adminReportTable {
    overflow: visible !important;
  }

  .opsConsoleShell .adminReportTableHeader {
    display: none !important;
  }

  .opsConsoleShell .adminReportTable [role="row"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    gap: 0.35rem !important;
  }

  .opsConsoleShell .permissionMatrixHeader {
    display: none !important;
  }
}

/* Admin mobile matrix fit: role labels stay visible without forcing a sideways table. */
@media (max-width: 920px) {
  .opsConsoleShell .permissionMatrix {
    overflow: visible !important;
  }

  .opsConsoleShell .permissionMatrixRow {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    gap: 0.48rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.5rem !important;
    margin: 0 0 0.55rem !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .permissionStateControl {
    display: grid !important;
    grid-template-columns: minmax(5.75rem, 0.6fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .permissionStateSummary {
    display: grid !important;
    justify-self: stretch !important;
    gap: 0.06rem !important;
    min-width: 0 !important;
    border-radius: 0.42rem !important;
    padding: 0.34rem 0.46rem !important;
    text-align: left !important;
  }

  .opsConsoleShell .permissionRoleLabel {
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .permissionStateSummary em {
    display: block !important;
    overflow: hidden !important;
    font-size: 0.62rem !important;
    font-style: normal !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    opacity: 0.82 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .permissionEnforcement {
    justify-self: stretch !important;
    text-align: center !important;
  }
}

/* Ops surface cohesion finish: Phone and secondary surfaces stay compact beside Mail. */
.opsConsoleShell .phoneAppShell {
  grid-template-columns: minmax(16.5rem, 20.5rem) minmax(0, 1fr) !important;
  background: #ffffff !important;
}

.opsConsoleShell .phoneRail,
.opsConsoleShell .phoneDetail {
  background: #ffffff !important;
}

.opsConsoleShell .phonePanelHeader,
.opsConsoleShell .phoneToolbar {
  min-height: 3.05rem !important;
  padding: 0.58rem 0.72rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .phonePanelHeader h2,
.opsConsoleShell .phoneToolbar h3 {
  margin: 0 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .phonePanelHeader p,
.opsConsoleShell .phoneReadinessStrip small,
.opsConsoleShell .phoneRingControls small,
.opsConsoleShell .phoneReturnCallPanel small,
.opsConsoleShell .phoneProofHeader small,
.opsConsoleShell .phoneProviderProof small {
  display: none !important;
}

.opsConsoleShell .phoneSearchRow {
  padding: 0.55rem 0.7rem !important;
}

.opsConsoleShell .phoneRailStats,
.opsConsoleShell .phoneSegment {
  margin: 0 0.7rem 0.55rem !important;
  padding: 0.28rem !important;
}

.opsConsoleShell .phoneRailStats span,
.opsConsoleShell .phoneCallbackResolution span,
.opsConsoleShell .phoneReadinessStrip div {
  border-radius: 0.42rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.opsConsoleShell .phoneThread {
  min-height: 4.2rem !important;
  border-radius: 0.42rem !important;
  padding: 0.55rem 0.62rem !important;
}

.opsConsoleShell .phoneThread.active {
  background: #eef4ff !important;
  box-shadow: none !important;
}

.opsConsoleShell .phoneInboundWorkbench,
.opsConsoleShell .phoneConsole,
.opsConsoleShell .voiceStatusCard,
.opsConsoleShell .phoneNotice {
  margin: 0.62rem 0.72rem 0 !important;
}

.opsConsoleShell .phoneConsole,
.opsConsoleShell .phoneProofCard,
.opsConsoleShell .phoneIncomingDebug,
.opsConsoleShell .phoneCallerMatchStrip,
.opsConsoleShell .phoneProviderProof,
.opsConsoleShell .phoneActionProof,
.opsConsoleShell .phoneRingControls,
.opsConsoleShell .phoneUtilityControls,
.opsConsoleShell .phoneReturnCallPanel,
.opsConsoleShell .phoneCallbackFocus,
.opsConsoleShell .phoneCallbackQueue button {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .phoneConsole {
  gap: 0.55rem !important;
  padding: 0.62rem !important;
}

.opsConsoleShell .phoneProofActions {
  gap: 0.32rem !important;
}

.opsConsoleShell .phoneProofActions button {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .phoneReadinessStrip {
  gap: 0.38rem !important;
}

.opsConsoleShell .phoneNextMoveStrip {
  gap: 0.5rem !important;
  padding: 0.58rem 0.64rem !important;
}

.opsConsoleShell .phoneNextMoveStrip button {
  min-height: 2.1rem !important;
  border-radius: 0.44rem !important;
  padding: 0 0.72rem !important;
  white-space: nowrap !important;
}

.opsConsoleShell .phoneCallerMatchStrip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.54rem 0.62rem !important;
}

.opsConsoleShell .phoneCallerMatchStrip div {
  min-width: 0 !important;
}

.opsConsoleShell .phoneCallerMatchStrip span,
.opsConsoleShell .phoneCallerMatchStrip small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .phoneCallerMatchStrip span {
  color: var(--ops-muted, #64748b) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .phoneCallerMatchStrip strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .phoneCallerMatchStrip small {
  color: var(--ops-muted, #64748b) !important;
  font-size: 0.73rem !important;
}

.opsConsoleShell .phoneCallerMatchStrip.matched {
  border-color: rgba(22, 101, 52, 0.22) !important;
  background: #f0fdf4 !important;
}

.opsConsoleShell .phoneCallerMatchStrip.unmatched {
  border-color: rgba(180, 83, 9, 0.25) !important;
  background: #fffbeb !important;
}

.opsConsoleShell .phoneCallerMatchStrip.pending {
  background: #f8fafc !important;
}

.opsConsoleShell .phoneCallerMatchStrip button {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.64rem !important;
}

.opsConsoleShell .phoneProofList,
.opsConsoleShell .phoneProviderProofList,
.opsConsoleShell .phoneCallbackQueue {
  max-height: 12rem !important;
  overflow-y: auto !important;
}

.opsConsoleShell .fieldInvoiceActionRow {
  border-color: var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Field Ops Console cohesion: flatten field job focus and sales work. */
.opsConsoleShell .fieldAppShell {
  padding: 0.72rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .fieldHero {
  min-height: 3.05rem !important;
  margin: 0 0 0.55rem !important;
  padding: 0.58rem 0.72rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .fieldHero h2,
.opsConsoleShell .fieldCardHeader h3 {
  margin: 0 !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .fieldHero p,
.opsConsoleShell .fieldMetricGrid small,
.opsConsoleShell .fieldCardHeader p,
.opsConsoleShell .fieldMediaComposer > small,
.opsConsoleShell .fieldEstimateApprovalNote,
.opsConsoleShell .fieldPackagePreview {
  display: none !important;
}

.opsConsoleShell .fieldHeroActions,
.opsConsoleShell .fieldModeSwitch,
.opsConsoleShell .fieldRangeSwitch {
  gap: 0.34rem !important;
}

.opsConsoleShell .fieldOfflineCatalogStatus {
  min-width: 7.6rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  padding: 0.28rem 0.42rem !important;
}

.opsConsoleShell .fieldOfflineCatalogStatus b {
  font-size: 0.7rem !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .fieldOfflineCatalogStatus small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
}

.opsConsoleShell .fieldTechContactSettings {
  flex: 0 1 8.6rem !important;
  min-width: 7.6rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .fieldTechContactSettings[open] {
  flex: 1 1 18rem !important;
  max-width: min(20rem, 100%) !important;
}

.opsConsoleShell .fieldTechContactSettings summary {
  min-height: 2.16rem !important;
  padding: 0.28rem 0.42rem !important;
}

.opsConsoleShell .fieldTechContactSettings b {
  font-size: 0.7rem !important;
  line-height: 1.1 !important;
}

.opsConsoleShell .fieldTechContactSettings small,
.opsConsoleShell .fieldTechContactForm label {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
}

.opsConsoleShell .fieldTechContactSettings em {
  background: #e8eef7 !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.58rem !important;
}

.opsConsoleShell .fieldTechContactForm {
  gap: 0.34rem !important;
  padding: 0 0.42rem 0.42rem !important;
}

.opsConsoleShell .fieldTechContactForm input {
  min-height: 1.96rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .fieldTechContactForm button {
  min-height: 1.96rem !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  padding: 0 0.58rem !important;
}

.opsConsoleShell .fieldModeSwitch {
  margin: 0.5rem 0 0 !important;
  border-radius: 0.44rem !important;
  background: #f1f5f9 !important;
  padding: 0.24rem !important;
}

.opsConsoleShell .fieldModeSwitch button,
.opsConsoleShell .fieldRangeSwitch button {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  letter-spacing: 0 !important;
  padding: 0 0.58rem !important;
}

.opsConsoleShell .fieldRangeSwitch {
  margin: 0 0 0.55rem !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
}

.opsConsoleShell .fieldRangeSwitch button {
  flex: 0 0 auto !important;
  background: #ffffff !important;
}

.opsConsoleShell .fieldMetricGrid {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) !important;
  gap: 0.5rem !important;
  margin: 0 0 0.55rem !important;
}

.opsConsoleShell .fieldMetricGrid article,
.opsConsoleShell .fieldCard,
.opsConsoleShell .fieldJobButton,
.opsConsoleShell .fieldMiniList div,
.opsConsoleShell .fieldFocusFacts span,
.opsConsoleShell .fieldPacketGrid span,
.opsConsoleShell .fieldCompletionChecklist button,
.opsConsoleShell .fieldPacketStatus span,
.opsConsoleShell .fieldCloseoutSummary,
.opsConsoleShell .fieldJobDetailsComposer,
.opsConsoleShell .fieldJobNoteComposer,
.opsConsoleShell .fieldJobStatusComposer,
.opsConsoleShell .fieldMaterialComposer,
.opsConsoleShell .fieldPurchaseOrderComposer,
.opsConsoleShell .fieldFormComposer,
.opsConsoleShell .fieldMediaComposer,
.opsConsoleShell .fieldSalesComposer,
.opsConsoleShell .fieldSalesSummary span,
.opsConsoleShell .fieldOfflineReadinessItems span,
.opsConsoleShell .fieldCloseoutReadiness > button,
.opsConsoleShell .fieldEstimateSignatureUpload,
.opsConsoleShell .fieldEstimateOptionRow,
.opsConsoleShell .fieldInvoiceActionRow,
.opsConsoleShell .fieldPaymentActionRow {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .fieldMetricGrid article,
.opsConsoleShell .fieldCard {
  padding: 0.62rem !important;
}

.opsConsoleShell .fieldMetricGrid span,
.opsConsoleShell .fieldFocusFacts b,
.opsConsoleShell .fieldPacketGrid b,
.opsConsoleShell .fieldCompletionChecklist b,
.opsConsoleShell .fieldCloseoutSummary small,
.opsConsoleShell .fieldPacketStatus b,
.opsConsoleShell .fieldSalesSummary b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.opsConsoleShell .fieldMetricGrid strong {
  margin: 0.12rem 0 0 !important;
  font-size: 1.08rem !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .fieldMainGrid {
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) !important;
  gap: 0.62rem !important;
}

.opsConsoleShell .fieldCardHeader {
  min-height: 2.65rem !important;
  margin: -0.62rem -0.62rem 0.56rem !important;
  padding: 0.52rem 0.62rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .fieldCardHeader span {
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0.18rem 0.42rem !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .fieldJobList,
.opsConsoleShell .fieldMiniList,
.opsConsoleShell .fieldFocusBody,
.opsConsoleShell .fieldEmptyWorkbench,
.opsConsoleShell .fieldEstimateOptions {
  gap: 0.48rem !important;
}

.opsConsoleShell .fieldJobButton {
  min-height: 4.1rem !important;
  padding: 0.55rem 0.62rem !important;
}

.opsConsoleShell .fieldJobButton.active {
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .fieldJobButton p,
.opsConsoleShell .fieldFocusBody > p,
.opsConsoleShell .fieldMaskedCallPolicy span {
  display: none !important;
}

.opsConsoleShell .fieldFocusBody > strong {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .fieldEmptyWorkbench {
  display: grid !important;
}

.opsConsoleShell .fieldEmptyWorkbench .fieldEmpty {
  margin: 0 !important;
}

.opsConsoleShell .fieldFocusFacts,
.opsConsoleShell .fieldPacketGrid,
.opsConsoleShell .fieldCompletionChecklist,
.opsConsoleShell .fieldPacketStatus,
.opsConsoleShell .fieldSalesSummary,
.opsConsoleShell .fieldOfflineReadinessItems,
.opsConsoleShell .fieldCloseoutReadiness {
  grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .fieldFocusFacts span,
.opsConsoleShell .fieldPacketGrid span,
.opsConsoleShell .fieldCompletionChecklist button,
.opsConsoleShell .fieldPacketStatus span,
.opsConsoleShell .fieldSalesSummary span,
.opsConsoleShell .fieldOfflineReadinessItems span,
.opsConsoleShell .fieldCloseoutReadiness > button {
  padding: 0.48rem 0.52rem !important;
}

.opsConsoleShell .fieldCloseoutSummary {
  min-height: 3.05rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  background: #f8fafc !important;
  padding: 0.48rem 0.52rem !important;
}

.opsConsoleShell .fieldCloseoutSummary b {
  color: var(--ops-text, #111827) !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .fieldCloseoutSummary em {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  font-size: 0.7rem !important;
}

.opsConsoleShell .fieldCloseoutSummary button {
  min-height: 1.85rem !important;
  border-radius: 0.45rem !important;
  padding: 0.24rem 0.46rem !important;
  font-size: 0.69rem !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldPacketLaunchHandoff {
  display: grid !important;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 1.4fr) auto !important;
  align-items: center !important;
  gap: 0.55rem !important;
  border: 1px solid rgba(20, 184, 166, 0.32) !important;
  border-radius: 0.65rem !important;
  background: #f0fdfa !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.62rem 0.72rem !important;
}

.opsConsoleShell .fieldPacketLaunchHandoff span {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldPacketLaunchHandoff strong {
  font-size: 0.92rem !important;
  font-weight: 950 !important;
}

.opsConsoleShell .fieldPacketLaunchHandoff small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldPrimaryActionDock {
  grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)) !important;
  gap: 0.34rem !important;
}

.opsConsoleShell .fieldPrimaryActionDock button,
.opsConsoleShell .fieldPrimaryActionDock a,
.opsConsoleShell .fieldSecondaryActionRail button,
.opsConsoleShell .fieldSecondaryActionRail a,
.opsConsoleShell .fieldSalesComposer button,
.opsConsoleShell .fieldJobNoteComposer button,
.opsConsoleShell .fieldJobStatusComposer button,
.opsConsoleShell .fieldMaterialComposer button,
.opsConsoleShell .fieldPurchaseOrderComposer button,
.opsConsoleShell .fieldFormComposer button,
.opsConsoleShell .fieldMediaComposer button,
.opsConsoleShell .fieldOfflineReadinessActions button {
  min-height: 2.05rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldPrimaryActionDock button:not(:disabled):first-child,
.opsConsoleShell .fieldPrimaryActionDock a:first-child {
  border-color: rgba(11, 99, 206, 0.28) !important;
  background: #eef4ff !important;
  color: #0b63ce !important;
}

.opsConsoleShell .fieldPrimaryActionDock small {
  color: var(--ops-muted, #667085) !important;
}

.opsConsoleShell .fieldSecondaryActionRail {
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldWorkLaneSwitch {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldWorkLaneSwitch button {
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-muted, #667085) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .fieldWorkLaneSwitch button.active {
  border-color: rgba(11, 99, 206, 0.32) !important;
  background: #eef4ff !important;
  color: var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .fieldWorkLanePanel,
.opsConsoleShell .fieldWorkLaneStack {
  gap: 0.45rem !important;
}

.opsConsoleShell .fieldPacketList span {
  border-left: 0 !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  padding: 0.42rem 0.5rem !important;
}

.opsConsoleShell .fieldJobNoteComposer,
.opsConsoleShell .fieldJobStatusComposer,
.opsConsoleShell .fieldMaterialComposer,
.opsConsoleShell .fieldPurchaseOrderComposer,
.opsConsoleShell .fieldFormComposer,
.opsConsoleShell .fieldMediaComposer,
.opsConsoleShell .fieldSalesComposer {
  gap: 0.5rem !important;
  padding: 0.58rem !important;
}

.opsConsoleShell .fieldJobDetailsComposer label,
.opsConsoleShell .fieldJobNoteComposer label,
.opsConsoleShell .fieldJobStatusComposer label,
.opsConsoleShell .fieldMaterialComposer label,
.opsConsoleShell .fieldPurchaseOrderComposer label,
.opsConsoleShell .fieldFormComposer label,
.opsConsoleShell .fieldMediaComposer label,
.opsConsoleShell .fieldSalesComposer label {
  gap: 0.28rem !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
}

.opsConsoleShell .fieldJobDetailsComposer textarea,
.opsConsoleShell .fieldJobNoteComposer textarea,
.opsConsoleShell .fieldFormComposer textarea {
  min-height: 3.8rem !important;
}

.opsConsoleShell .fieldJobDetailsComposer {
  grid-template-columns: minmax(10rem, 1.2fr) repeat(4, minmax(5.2rem, 0.58fr)) auto !important;
}

.opsConsoleShell .fieldFollowUpJobComposer {
  grid-template-columns: minmax(10rem, 1fr) auto !important;
}

.opsConsoleShell .fieldMaterialComposer {
  grid-template-columns: minmax(9rem, 1fr) minmax(4rem, 5.4rem) minmax(4rem, 6rem) auto !important;
}

.opsConsoleShell .fieldPurchaseOrderComposer {
  grid-template-columns: minmax(9rem, 1fr) minmax(7.4rem, 0.62fr) auto !important;
}

.opsConsoleShell .fieldMediaForms {
  grid-template-columns: minmax(6.2rem, 0.62fr) minmax(6.2rem, 0.62fr) minmax(10rem, 1fr) minmax(9rem, 1fr) minmax(12rem, auto) !important;
}

.opsConsoleShell .fieldMediaActions {
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldMediaActions button {
  flex: 1 1 5.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldPendingMediaQueue {
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldPendingMediaQueue div {
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #f8fafc !important;
  padding: 0.4rem 0.46rem !important;
}

.opsConsoleShell .fieldPendingMediaQueue b {
  font-size: 0.7rem !important;
}

.opsConsoleShell .fieldPendingMediaQueue small,
.opsConsoleShell .fieldPendingMediaQueue > small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
}

.opsConsoleShell .fieldPendingMediaQueue .fieldPendingApprovalPlan {
  color: #344054 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldPendingMediaQueue em {
  background: #eef4ff !important;
  color: var(--ops-accent, #0b63ce) !important;
  font-size: 0.66rem !important;
}

.opsConsoleShell .fieldPendingApprovalActions {
  gap: 0.28rem !important;
}

.opsConsoleShell .fieldPendingApprovalActions button {
  min-height: 1.78rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.48rem !important;
  font-size: 0.7rem !important;
}

.opsConsoleShell .fieldOfflineReadiness {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .fieldOfflineReadinessItems {
  grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .fieldOfflineReadinessItems b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.opsConsoleShell .fieldOfflineReadinessItems small {
  color: var(--ops-text, #111827) !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .fieldOfflineReadinessActions {
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldOfflineReadinessActions button {
  flex: 1 1 6.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldSalesForms {
  grid-template-columns: minmax(9rem, 1.2fr) auto minmax(7rem, 0.82fr) minmax(9rem, 1fr) auto auto !important;
  gap: 0.45rem !important;
}

.opsConsoleShell .fieldEstimateSignatureUpload {
  grid-template-columns: minmax(11rem, 1fr) auto !important;
  padding: 0.5rem !important;
}

.opsConsoleShell .fieldSignaturePad {
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldSignatureCanvas {
  display: block !important;
  width: 100% !important;
  height: 8.25rem !important;
  border: 1px dashed var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    repeating-linear-gradient(0deg, #f8fafc 0, #f8fafc 1px, transparent 1px, transparent 1.15rem) border-box !important;
  cursor: crosshair !important;
  touch-action: none !important;
}

.opsConsoleShell .fieldSignaturePadActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldSignaturePadActions button {
  flex: 1 1 7rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldEstimateCloseoutPlan {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(7.5rem, 1fr) auto minmax(7.5rem, 1fr) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .fieldEstimateCloseoutPlan label,
.opsConsoleShell .fieldInlineSwitch {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
}

.opsConsoleShell .fieldEstimateCloseoutPlan select,
.opsConsoleShell .fieldInlineSwitch {
  min-height: 2rem !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .fieldEstimateSignatureUpload small {
  display: none !important;
}

.opsConsoleShell .fieldEstimateSignatureUpload .fieldEstimateCloseoutOutcome {
  display: block !important;
  color: var(--ops-text, #182230) !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
}

.opsConsoleShell .fieldEstimateHeaderRow,
.opsConsoleShell .fieldEstimateOptionRow,
.opsConsoleShell .fieldInvoiceActionRow,
.opsConsoleShell .fieldPaymentActionRow {
  gap: 0.5rem !important;
}

.opsConsoleShell .fieldEstimateOptionRow,
.opsConsoleShell .fieldInvoiceActionRow,
.opsConsoleShell .fieldPaymentActionRow {
  padding: 0.48rem 0.52rem !important;
}

.opsConsoleShell .fieldEstimateActionButtons,
.opsConsoleShell .fieldEstimateOptionActions,
.opsConsoleShell .fieldInvoiceActionButtons,
.opsConsoleShell .fieldPaymentActionButtons {
  gap: 0.32rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneAppShell {
    display: block !important;
    padding-bottom: calc(5.85rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    grid-template-columns: 1fr !important;
    margin: 0.55rem !important;
  }

  .opsConsoleShell .phoneConsole,
  .opsConsoleShell .voiceStatusCard,
  .opsConsoleShell .phoneNotice {
    margin: 0.55rem !important;
  }

  .opsConsoleShell .phoneCallbackResolution,
  .opsConsoleShell .phoneReadinessStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .phoneProofHeader {
    display: grid !important;
  }

  .opsConsoleShell .phoneProofActions {
    justify-content: flex-start !important;
  }

  .opsConsoleShell .phoneCallerMatchStrip {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .opsConsoleShell .phoneNextMoveStrip {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .opsConsoleShell .fieldAppShell {
    padding: 0.55rem 0.55rem calc(5.85rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHero,
  .opsConsoleShell .fieldCardHeader,
  .opsConsoleShell .fieldEstimateHeaderRow,
  .opsConsoleShell .fieldEstimateOptionRow,
  .opsConsoleShell .fieldInvoiceActionRow,
  .opsConsoleShell .fieldPaymentActionRow {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .fieldMetricGrid,
  .opsConsoleShell .fieldJobDetailsComposer,
  .opsConsoleShell .fieldMaterialComposer,
  .opsConsoleShell .fieldPurchaseOrderComposer,
  .opsConsoleShell .fieldMediaForms,
  .opsConsoleShell .fieldSalesForms,
  .opsConsoleShell .fieldOfflineReadiness,
  .opsConsoleShell .fieldEstimateSignatureUpload,
  .opsConsoleShell .fieldEstimateCloseoutPlan {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldSecondaryActionRail,
  .opsConsoleShell .fieldWorkLaneSwitch,
  .opsConsoleShell .fieldFocusFacts,
  .opsConsoleShell .fieldPacketGrid,
  .opsConsoleShell .fieldCompletionChecklist,
  .opsConsoleShell .fieldPacketStatus,
  .opsConsoleShell .fieldSalesSummary,
  .opsConsoleShell .fieldOfflineReadinessItems,
  .opsConsoleShell .fieldCloseoutReadiness {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons,
  .opsConsoleShell .fieldEstimateOptionActions,
  .opsConsoleShell .fieldInvoiceActionButtons,
  .opsConsoleShell .fieldPaymentActionButtons {
    justify-content: flex-start !important;
  }
}

/* Secondary Ops Console unification: keep Chat, Customers, Phone, Field, and Admin in the same lightweight workbench. */
.opsConsoleShell .chatShell,
.opsConsoleShell .serviceShell,
.opsConsoleShell .phoneAppShell,
.opsConsoleShell .fieldAppShell,
.opsConsoleShell .adminAppShell {
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .chatConversationRail,
.opsConsoleShell .chatMain,
.opsConsoleShell .serviceCustomerPane,
.opsConsoleShell .serviceProfilePane,
.opsConsoleShell .serviceRecordsPane,
.opsConsoleShell .phoneRail,
.opsConsoleShell .phoneDetail,
.opsConsoleShell .fieldCard,
.opsConsoleShell .adminControlBand,
.opsConsoleShell .adminRulePanel,
.opsConsoleShell .adminPermissionSection {
  min-width: 0 !important;
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.opsConsoleShell .chatHeader p,
.opsConsoleShell .serviceActionGrid span,
.opsConsoleShell .serviceHandoffCard > p,
.opsConsoleShell .adminPolicyList small,
.opsConsoleShell .fieldCardNote,
.opsConsoleShell .fieldPackagePreview,
.opsConsoleShell .phoneReadState,
.opsConsoleShell .phoneProviderProof > div:first-child small {
  display: none !important;
}

.opsConsoleShell .chatTimeline,
.opsConsoleShell .phoneTimeline,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody {
  background: #ffffff !important;
}

.opsConsoleShell .chatEmpty,
.opsConsoleShell .phoneEmpty,
.opsConsoleShell .fieldEmpty,
.opsConsoleShell .serviceCustomerList > p,
.opsConsoleShell .adminPermissionEmpty {
  margin: 0.55rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0.58rem 0.64rem !important;
  text-align: left !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

.opsConsoleShell .chatBubble,
.opsConsoleShell .chatComposerInput,
.opsConsoleShell .gifPicker,
.opsConsoleShell .serviceHeroCard,
.opsConsoleShell .serviceInfoCard,
.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceContactActionCard,
.opsConsoleShell .serviceRecordCardGroup,
.opsConsoleShell .serviceRecordCard,
.opsConsoleShell .serviceRecordTableWrap,
.opsConsoleShell .serviceDetailsDisclosure.group,
.opsConsoleShell .serviceNestedRecord,
.opsConsoleShell .serviceMediaCard,
.opsConsoleShell .serviceFileList article,
.opsConsoleShell .phoneConsole,
.opsConsoleShell .phoneProofCard,
.opsConsoleShell .phoneProofItem,
.opsConsoleShell .phoneProviderProof,
.opsConsoleShell .phoneProviderProofList span,
.opsConsoleShell .phoneCallbackFocus,
.opsConsoleShell .phoneCallbackQueue button,
.opsConsoleShell .phoneBubble,
.opsConsoleShell .fieldMetricGrid article,
.opsConsoleShell .fieldFocusFacts span,
.opsConsoleShell .fieldPacketGrid span,
.opsConsoleShell .fieldCompletionChecklist button,
.opsConsoleShell .fieldPacketStatus span,
.opsConsoleShell .fieldSalesSummary span,
.opsConsoleShell .fieldOfflineReadinessItems span,
.opsConsoleShell .fieldCloseoutReadiness > button,
.opsConsoleShell .adminRoleOverview div,
.opsConsoleShell .adminPolicyList span,
.opsConsoleShell .adminRuleFacts span,
.opsConsoleShell .adminRuleCard {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatComposerInput textarea {
  min-height: 2.9rem !important;
  resize: vertical !important;
}

.opsConsoleShell .chatComposerActions {
  justify-content: flex-end !important;
}

.opsConsoleShell .chatComposerActions button:not(:last-child),
.opsConsoleShell .chatMessageActions button,
.opsConsoleShell .chatReactions button,
.opsConsoleShell .serviceMediaActions button,
.opsConsoleShell .serviceRecordActionButton,
.opsConsoleShell .phoneCallbackActions a,
.opsConsoleShell .phoneCallbackActions button,
.opsConsoleShell .phoneToolbarActions button,
.opsConsoleShell .adminStatusBar button {
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .serviceOutboxDetails button.confirmDanger,
.opsConsoleShell .serviceRecordActionButton.danger.confirmDanger {
  border-color: rgba(220, 38, 38, 0.42) !important;
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

.opsConsoleShell .serviceActionGrid {
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)) !important;
}

.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a {
  min-height: 2.25rem !important;
  text-align: center !important;
}

.opsConsoleShell .serviceRecordTableHeader,
.opsConsoleShell .serviceRecordCardTop,
.opsConsoleShell .phoneCallInboxHeader {
  align-items: center !important;
}

.opsConsoleShell .phoneProofItem {
  border-left-width: 1px !important;
}

.opsConsoleShell .phoneBubble {
  max-width: min(38rem, 88%) !important;
}

.opsConsoleShell .fieldPayGrid div {
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceMobileNav {
    position: sticky !important;
    right: auto !important;
    bottom: calc(4.65rem + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    z-index: 8 !important;
    margin: 0.55rem !important;
    border-radius: 0.48rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .chatHeader,
  .opsConsoleShell .phoneToolbar,
  .opsConsoleShell .servicePaneHeader,
  .opsConsoleShell .serviceColumnHeader,
  .opsConsoleShell .fieldHero,
  .opsConsoleShell .adminHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
  }
}

/* Ops Console action parity: keep linked chat, field sharing, and secondary actions in the same compact language. */
.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a,
.opsConsoleShell .fieldPrimaryActionDock button,
.opsConsoleShell .fieldPrimaryActionDock a,
.opsConsoleShell .chatNewCard > button,
.opsConsoleShell .chatComposerActions button,
.opsConsoleShell .adminStatusBar button {
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0.1rem !important;
  min-height: 2.45rem !important;
  border-radius: 0.38rem !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.opsConsoleShell .serviceActionGrid strong,
.opsConsoleShell .serviceActionGrid span,
.opsConsoleShell .fieldPrimaryActionDock span,
.opsConsoleShell .fieldPrimaryActionDock small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.12 !important;
}

.opsConsoleShell .serviceActionGrid strong,
.opsConsoleShell .fieldPrimaryActionDock span {
  color: var(--ops-text, #111827) !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .serviceActionGrid span,
.opsConsoleShell .fieldPrimaryActionDock small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
}

.opsConsoleShell .serviceActionGrid button:not(:disabled):hover,
.opsConsoleShell .serviceActionGrid a:hover,
.opsConsoleShell .fieldPrimaryActionDock button:not(:disabled):hover,
.opsConsoleShell .fieldPrimaryActionDock a:hover {
  border-color: rgba(11, 99, 206, 0.32) !important;
  background: #eef4ff !important;
  color: var(--ops-accent, #0b63ce) !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceActionGrid,
  .opsConsoleShell .fieldPrimaryActionDock {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceActionGrid button,
  .opsConsoleShell .serviceActionGrid a,
  .opsConsoleShell .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldPrimaryActionDock a {
    min-width: 0 !important;
  }
}

.publicEstimatePage {
  min-height: 100dvh;
  background: #f4f7fb;
  color: #111827;
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: clamp(1rem, 3vw, 2rem);
}

.publicEstimateShell {
  width: min(100%, 58rem);
  margin: 0 auto;
  border: 1px solid #d8e0ea;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.publicEstimateShell.invalid {
  padding: clamp(1.2rem, 4vw, 2rem);
}

.publicEstimateShell.invalid span,
.publicEstimateHeader span,
.publicEstimateTotal small,
.publicEstimateTotal em,
.publicEstimateOptions article header span,
.publicEstimateLineItems small,
.publicEstimateContext dt {
  color: #5b6677;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.publicEstimateShell.invalid h1,
.publicEstimateHeader h1,
.publicEstimateOptions h2 {
  margin: 0;
  color: #0f172a;
  letter-spacing: 0;
}

.publicEstimateShell.invalid p,
.publicEstimateHeader p,
.publicEstimateOptions p,
.publicEstimateFooter p {
  margin: 0;
  color: #3f4a5c;
  line-height: 1.5;
}

.publicEstimateHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #d8e0ea;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: #ffffff;
}

.publicEstimateHeader h1 {
  margin-top: 0.25rem;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.08;
}

.publicEstimateHeader p {
  margin-top: 0.5rem;
}

.publicEstimateTotal {
  min-width: 9.5rem;
  border: 1px solid #d8e0ea;
  border-radius: 0.45rem;
  padding: 0.75rem;
  background: #f8fafc;
  text-align: right;
}

.publicEstimateTotal strong {
  display: block;
  margin: 0.18rem 0;
  font-size: 1.35rem;
}

.publicEstimateTotal em {
  display: block;
  font-style: normal;
  text-transform: capitalize;
}

.publicEstimateContext {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #d8e0ea;
  margin: 0;
}

.publicEstimateContext div {
  min-width: 0;
  padding: 0.85rem 1rem;
  border-right: 1px solid #d8e0ea;
}

.publicEstimateContext div:last-child {
  border-right: 0;
}

.publicEstimateContext dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-weight: 700;
}

.publicJobStatusSteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid #d8e0ea;
  background: #ffffff;
}

.publicJobStatusSteps span {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.78rem 1rem;
  border-right: 1px solid #d8e0ea;
}

.publicJobStatusSteps span:last-child {
  border-right: 0;
}

.publicJobStatusSteps b,
.publicJobStatusSteps small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.publicJobStatusSteps b {
  color: #0f172a;
  font-size: 0.86rem;
}

.publicJobStatusSteps small {
  color: #64748b;
  font-size: 0.74rem;
}

.publicJobStatusSteps span.done {
  background: #f0fdf4;
}

.publicJobStatusSteps span.done b {
  color: #166534;
}

.publicJobStatusSteps span.stopped {
  background: #fff7ed;
}

.publicJobStatusSteps span.stopped b {
  color: #9a3412;
}

.publicJobStatusBilling a {
  color: #0b63ce;
  text-decoration: none;
}

.publicJobStatusBilling a:hover {
  text-decoration: underline;
}

.publicJobStatusNextSteps {
  display: grid;
  gap: 0.7rem;
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
  border-top: 1px solid #d8e0ea;
  background: #f8fafc;
}

.publicJobStatusNextSteps h2 {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
}

.publicJobStatusNextSteps div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.publicJobStatusNextSteps span {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid #d8e0ea;
  border-radius: 18px;
  background: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.publicJobStatusNextSteps b {
  color: #0f172a;
  font-size: 0.78rem;
}

.publicCustomerPortalShell {
  width: min(100%, 64rem);
}

.publicPortalSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  border-bottom: 1px solid #d8e0ea;
  background: #f8fafc;
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
}

.publicPortalSummary span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 760;
  padding: 0.8rem;
}

.publicPortalSummary b {
  color: #0b63ce;
  font-size: 1.35rem;
  line-height: 1;
}

.publicPortalRequest {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid #d8e0ea;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
  padding: clamp(0.9rem, 2.5vw, 1.15rem);
}

.publicPortalRequest > div {
  display: grid;
  gap: 0.42rem;
}

.publicPortalRequest span {
  color: #0b63ce;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.publicPortalRequest h2,
.publicPortalRequest p {
  margin: 0;
}

.publicPortalRequest h2 {
  color: #0f172a;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.publicPortalRequest p {
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.45;
}

.publicPortalRequest strong[role] {
  color: #0f766e;
  font-size: 0.85rem;
}

.publicPortalRequest strong[role='alert'] {
  color: #b91c1c;
}

.publicPortalRequest form {
  display: grid;
  gap: 0.7rem;
  border: 1px solid #cfe1f4;
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  padding: 0.9rem;
}

.publicPortalRequest form > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.publicPortalRequest label {
  display: grid;
  gap: 0.28rem;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
}

.publicPortalRequest input,
.publicPortalRequest select,
.publicPortalRequest textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.48rem;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.68rem 0.72rem;
}

.publicPortalRequest textarea {
  resize: vertical;
}

.publicPortalRequest button {
  justify-self: end;
  min-height: 2.45rem;
  border: 0;
  border-radius: 999px;
  background: #0b63ce;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 850;
  padding: 0 1rem;
}

.publicPortalSections {
  display: grid;
  gap: 0.85rem;
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
}

.publicPortalSections article {
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  overflow: hidden;
}

.publicPortalSections article header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e7edf4;
  padding: 0.85rem;
}

.publicPortalSections article header span {
  color: #5b6677;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.publicPortalSections h2 {
  margin: 0.18rem 0 0;
  color: #0f172a;
  font-size: 1.05rem;
}

.publicPortalRecordList {
  display: grid;
}

.publicPortalRecordList > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  padding: 0.78rem 0.85rem;
}

.publicPortalRecordList > div:last-child {
  border-bottom: 0;
}

.publicPortalRecordList span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.publicPortalRecordList b,
.publicPortalRecordList small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.publicPortalRecordList b {
  color: #111827;
  font-size: 0.92rem;
}

.publicPortalRecordList small {
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
}

.publicPortalRecordList strong {
  color: #0f172a;
  font-size: 0.9rem;
  white-space: nowrap;
}

.publicPortalRecordList a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  border: 1px solid #0b63ce;
  border-radius: 0.42rem;
  background: #0b63ce;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0 0.72rem;
  text-decoration: none;
  white-space: nowrap;
}

.publicPortalRecordList p {
  margin: 0;
  color: #64748b;
  padding: 0.85rem;
}

.publicPortalNextSteps {
  margin-top: 0;
}

.publicEstimateOptions {
  display: grid;
  gap: 0.8rem;
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
}

.publicEstimateOptions article {
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  overflow: hidden;
}

.publicEstimateOptions article.approved {
  border-color: #8fc79d;
  box-shadow: inset 3px 0 0 #16803a;
}

.publicEstimateOptions article header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e7edf4;
  padding: 0.85rem;
}

.publicEstimateOptions h2 {
  margin-top: 0.18rem;
  font-size: 1.05rem;
}

.publicEstimateOptions article header strong {
  white-space: nowrap;
  color: #0f172a;
  font-size: 1.05rem;
}

.publicEstimateLineItems {
  display: grid;
}

.publicEstimateLineItems div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 6rem;
  gap: 0.75rem;
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  padding: 0.7rem 0.85rem;
}

.publicEstimateLineItems div:last-child {
  border-bottom: 0;
}

.publicEstimateLineItems span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 650;
}

.publicEstimateLineItems strong {
  text-align: right;
}

.publicEstimateLineItems p,
.publicEstimateEmpty {
  padding: 0.85rem;
}

.publicInvoicePayments {
  display: grid;
  gap: 0;
  margin: 0 clamp(0.85rem, 2.5vw, 1.1rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  overflow: hidden;
}

.publicInvoicePayments header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #e7edf4;
  padding: 0.85rem;
}

.publicInvoicePayments header span,
.publicInvoicePaymentGroup span,
.publicInvoicePaymentGroup small {
  color: #5b6677;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.publicInvoicePayments h2 {
  margin: 0.18rem 0 0;
  color: #0f172a;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.publicInvoicePayments header strong {
  color: #166534;
  font-size: 0.86rem;
  white-space: nowrap;
}

.publicInvoicePaymentRows {
  display: grid;
}

.publicInvoicePaymentGroup {
  display: grid;
  gap: 0.58rem;
  border-bottom: 1px solid #edf1f6;
  padding: 0.78rem 0.85rem;
}

.publicInvoicePaymentGroup:last-child {
  border-bottom: 0;
}

.publicInvoicePaymentGroup > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.publicInvoicePaymentGroup p {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0;
  color: #3f4a5c;
  line-height: 1.45;
}

.publicInvoicePaymentGroup p strong {
  color: #111827;
}

.publicInvoicePaymentGroup a,
.publicEstimateBillingActions a,
.publicEstimateFooter a {
  width: fit-content;
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0b63ce;
  border-radius: 0.42rem;
  background: #0b63ce;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 0.82rem;
  text-decoration: none;
}

.publicEstimateBillingHandoff {
  display: grid;
  gap: 0.7rem;
  margin: 0 clamp(0.85rem, 2.5vw, 1.1rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border: 1px solid #bfdbfe;
  border-radius: 0.48rem;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 66%);
  padding: 0.85rem;
}

.publicEstimateBillingHandoff header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.publicEstimateBillingHandoff header span {
  display: block;
  color: #0758b7;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.publicEstimateBillingHandoff h2 {
  margin: 0.18rem 0 0;
  color: #0f172a;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.publicEstimateBillingHandoff header strong {
  color: #0b63ce;
  font-size: 0.86rem;
  text-transform: capitalize;
  white-space: nowrap;
}

.publicEstimateBillingActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.publicEstimateBillingActions span {
  color: #526176;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.publicInvoiceNextSteps {
  display: grid;
  gap: 0.6rem;
  margin: 0 clamp(0.85rem, 2.5vw, 1.1rem) clamp(0.85rem, 2.5vw, 1.1rem);
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  padding: 0.85rem;
}

.publicInvoiceNextSteps h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.02rem;
  letter-spacing: 0;
}

.publicInvoiceNextSteps div,
.publicEstimateNextSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.publicInvoiceNextSteps span,
.publicEstimateNextSteps span {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.42rem;
  background: #f8fafc;
  color: #475569;
  font-size: 0.74rem;
  line-height: 1.35;
  padding: 0.55rem;
}

.publicInvoiceNextSteps b,
.publicEstimateNextSteps b {
  color: #0b63ce;
  font-size: 0.72rem;
  font-weight: 900;
}

.publicEstimateApproval {
  display: grid;
  gap: 0.75rem;
  border: 1px solid #d8e0ea;
  border-radius: 0.48rem;
  background: #ffffff;
  padding: 0.85rem;
}

.publicEstimateApproval.approved {
  border-color: #8fc79d;
  background: #f6fbf7;
}

.publicEstimateApproval span,
.publicEstimateApproval label {
  color: #3f4a5c;
  font-size: 0.78rem;
  font-weight: 700;
}

.publicEstimateApproval > div:first-child span {
  display: block;
  color: #5b6677;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.publicEstimateApproval h2 {
  margin: 0.18rem 0 0;
  color: #0f172a;
  font-size: 1.04rem;
  letter-spacing: 0;
}

.publicEstimateApproval p {
  margin: 0.35rem 0 0;
}

.publicEstimateApproval label {
  display: grid;
  gap: 0.32rem;
}

.publicEstimateApproval input,
.publicEstimateApproval select {
  min-height: 2.45rem;
  border: 1px solid #cfd8e3;
  border-radius: 0.42rem;
  background: #ffffff;
  color: #111827;
  font: inherit;
  padding: 0 0.68rem;
}

.publicEstimateApprovalCheck {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem !important;
  line-height: 1.35;
}

.publicEstimateApprovalCheck input {
  min-height: 1rem;
  width: 1rem;
  margin-top: 0.12rem;
  padding: 0;
}

.publicEstimateApprovalSelected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid #d8e0ea;
  border-radius: 0.42rem;
  background: #f8fafc;
  padding: 0.68rem;
}

.publicEstimateApprovalSelected strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.publicEstimateSignaturePad {
  display: grid;
  gap: 0.45rem;
  border: 1px solid #cfd8e3;
  border-radius: 0.42rem;
  background: #f8fafc;
  padding: 0.58rem;
}

.publicEstimateSignaturePad > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.publicEstimateSignaturePad strong {
  color: #334155;
  font-size: 0.78rem;
}

.publicEstimateSignaturePad canvas {
  width: 100%;
  max-width: 100%;
  height: 9.5rem;
  border: 1px dashed #9fb0c2;
  border-radius: 0.38rem;
  background: #ffffff;
  cursor: crosshair;
  touch-action: none;
}

.publicEstimateSignaturePad small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}

.publicEstimateApproval button {
  min-height: 2.5rem;
  border: 0;
  border-radius: 0.42rem;
  background: #0b63ce;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.publicEstimateApproval button:disabled {
  background: #a8b3c2;
  cursor: not-allowed;
}

.publicEstimateApproval .publicEstimateSignaturePad button {
  min-height: 1.85rem;
  border: 1px solid #cfd8e3;
  border-radius: 0.36rem;
  background: #ffffff;
  color: #334155;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0 0.62rem;
}

.publicEstimateApproval .publicEstimateSignaturePad button:disabled {
  background: #eef2f7;
  color: #94a3b8;
}

.publicEstimateApprovalError,
.publicEstimateApprovalNotice {
  border-radius: 0.42rem;
  padding: 0.58rem 0.64rem;
  font-weight: 700;
}

.publicEstimateApprovalError {
  background: #fff1f2;
  color: #9f1239 !important;
}

.publicEstimateApprovalNotice {
  background: #eef6ff;
  color: #0758b7 !important;
}

.publicEstimateFooter {
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid #d8e0ea;
  padding: 0.9rem 1rem;
  background: #f8fafc;
}

@media (max-width: 720px) {
  .publicEstimatePage {
    padding: 0;
    background: #ffffff;
  }

  .publicEstimateShell {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .publicEstimateHeader,
  .publicEstimateOptions article header {
    display: grid;
  }

  .publicEstimateTotal {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .publicEstimateContext {
    grid-template-columns: 1fr;
  }

  .publicJobStatusSteps {
    grid-template-columns: 1fr 1fr;
  }

  .publicJobStatusSteps span:nth-child(2n) {
    border-right: 0;
  }

  .publicJobStatusSteps span:nth-child(n + 3) {
    border-top: 1px solid #d8e0ea;
  }

  .publicJobStatusNextSteps div {
    grid-template-columns: 1fr;
  }

  .publicPortalSummary,
  .publicPortalRequest,
  .publicPortalRequest form > div,
  .publicPortalRecordList > div {
    grid-template-columns: 1fr;
  }

  .publicPortalRequest button {
    justify-self: stretch;
  }

  .publicPortalRecordList strong {
    white-space: normal;
  }

  .publicPortalRecordList a {
    width: fit-content;
  }

  .publicEstimateContext div {
    border-right: 0;
    border-bottom: 1px solid #d8e0ea;
  }

  .publicEstimateContext div:last-child {
    border-bottom: 0;
  }

  .publicEstimateLineItems div {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .publicEstimateLineItems small {
    grid-column: 1 / -1;
    order: 3;
  }

  .publicInvoicePayments header,
  .publicEstimateBillingHandoff header,
  .publicInvoicePaymentGroup > div {
    display: grid;
  }

  .publicInvoiceNextSteps div,
  .publicEstimateNextSteps {
    grid-template-columns: 1fr;
  }

  .publicInvoicePayments header strong,
  .publicEstimateBillingHandoff header strong,
  .publicInvoicePaymentGroup small {
    white-space: normal;
  }

  .publicEstimateApprovalSelected {
    display: grid;
  }
}

/* Chat Ops Console alignment: keep team chat in the same compact workbench language as Mail. */
.opsConsoleShell .chatRailHeader {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
}

.opsConsoleShell .chatRailTitle {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
}

.opsConsoleShell .chatRailTitle strong {
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.98rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatRailTitle small {
  overflow: hidden !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatPrimaryAction {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.6rem !important;
  min-height: 2rem !important;
  gap: 0.28rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.58rem !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatTriageBar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.45rem !important;
  padding: 0.55rem 0.62rem !important;
}

.opsConsoleShell .chatSearchRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .chatSearchRow button,
.opsConsoleShell .chatFilterTabs button,
.opsConsoleShell .chatHeaderActions a,
.opsConsoleShell .chatHeaderActions button {
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .chatSearchClear {
  width: 2rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
}

.opsConsoleShell .chatFilterTabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.32rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .chatFilterTabs button {
  width: 100% !important;
  padding: 0 0.35rem !important;
}

.opsConsoleShell .chatFilterTabs button.active,
.opsConsoleShell .chatFilterTabs button[aria-pressed="true"] {
  border-color: rgba(11, 99, 206, 0.35) !important;
  background: #eef5ff !important;
  color: var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .chatTriageCounts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .chatTriageCounts span {
  min-width: 0 !important;
  max-width: 100% !important;
}

.opsConsoleShell .chatHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.55rem !important;
}

.opsConsoleShell .chatHeader h2 {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatHeaderActions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .chatHeaderActions a,
.opsConsoleShell .chatHeaderActions button {
  display: inline-grid !important;
  align-content: center !important;
  justify-content: center !important;
  min-width: 4.6rem !important;
  padding: 0 0.62rem !important;
  text-decoration: none !important;
}

.opsConsoleShell .chatHeaderActions button:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
}

.opsConsoleShell .chatDeleteAction {
  color: #8a1c1c !important;
  border-color: rgba(138, 28, 28, 0.22) !important;
}

.opsConsoleShell .chatComposerActions span {
  display: block !important;
  min-width: 4.5rem !important;
  max-width: 9rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatHeader {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .opsConsoleShell .chatHeaderActions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 0.1rem !important;
  }

  .opsConsoleShell .chatHeaderActions a,
  .opsConsoleShell .chatHeaderActions button {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .chatSearchRow {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .chatFilterTabs {
    grid-template-columns: repeat(3, minmax(4.6rem, 1fr)) !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .chatComposerActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .opsConsoleShell .chatComposerActions span {
    min-width: 0 !important;
  }
}

/* Service Ops Console alignment: customer files should feel like the same workbench as Mail. */
.opsConsoleShell .servicePaneHeader p,
.opsConsoleShell .serviceColumnHeader p,
.opsConsoleShell .serviceHeroCard p,
.opsConsoleShell .serviceHandoffCard > strong {
  display: none !important;
}

.opsConsoleShell .servicePaneHeader,
.opsConsoleShell .serviceColumnHeader {
  min-height: 3rem !important;
  padding: 0.54rem 0.66rem !important;
}

.opsConsoleShell .servicePaneHeader h2,
.opsConsoleShell .serviceColumnHeader h2 {
  font-size: 0.98rem !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .serviceSearchBar,
.opsConsoleShell .serviceTriageBar {
  padding: 0.5rem 0.62rem !important;
}

.opsConsoleShell .serviceCustomerList,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody {
  padding: 0.55rem !important;
}

.opsConsoleShell .serviceCustomerCard {
  min-height: 3.8rem !important;
  margin-bottom: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  padding: 0.54rem 0.62rem !important;
}

.opsConsoleShell .serviceCustomerCard.active {
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .serviceAvatar,
.opsConsoleShell .serviceHeroAvatar {
  border-radius: 0.42rem !important;
  background: #e8eef7 !important;
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .serviceHeroCard {
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.52rem !important;
  padding: 0.58rem 0.62rem !important;
}

.opsConsoleShell .serviceHeroAvatar {
  width: 2.35rem !important;
  height: 2.35rem !important;
}

.opsConsoleShell .servicePillRow {
  gap: 0.28rem !important;
  margin-top: 0.34rem !important;
}

.opsConsoleShell .servicePillRow span {
  border-radius: 0.34rem !important;
  padding: 0.2rem 0.38rem !important;
  background: #f1f5f9 !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
}

.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a {
  min-height: 2.2rem !important;
  border-radius: 0.38rem !important;
  padding: 0.42rem 0.5rem !important;
}

.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceContactActionCard {
  margin: 0.55rem 0 0 !important;
  border-radius: 0.48rem !important;
  padding: 0.58rem 0.62rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceActionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Customers Ops Console tightening: customer files behave like an operating file, not a projection dashboard. */
.opsConsoleShell .serviceSearchBar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceSearchBar input,
.opsConsoleShell .serviceSearchBar button,
.opsConsoleShell .serviceLoadMore,
.opsConsoleShell .serviceOpenRecords {
  min-height: 2.1rem !important;
  border-radius: 0.38rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceSearchBar button {
  width: auto !important;
  min-width: 4.7rem !important;
  padding-inline: 0.7rem !important;
}

.opsConsoleShell .serviceProfileContent {
  display: grid !important;
  align-content: start !important;
  gap: 0.55rem !important;
}

.opsConsoleShell .serviceHeroCard h3,
.opsConsoleShell .serviceInfoCard strong,
.opsConsoleShell .serviceHandoffList b,
.opsConsoleShell .serviceHandoffList em,
.opsConsoleShell .serviceRecordTableHeader strong,
.opsConsoleShell .serviceRecordTableHeader span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .servicePillRow {
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .servicePillRow::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .serviceActionGrid {
  gap: 0.42rem !important;
  margin: 0 !important;
}

.opsConsoleShell .serviceMetricGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  margin: 0 !important;
}

.opsConsoleShell .serviceMetricGrid div,
.opsConsoleShell .serviceMiniCountGrid span {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0.46rem 0.52rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceMetricGrid strong,
.opsConsoleShell .serviceMiniCountGrid b {
  font-size: 0.9rem !important;
  line-height: 1.08 !important;
}

.opsConsoleShell .serviceMetricGrid span,
.opsConsoleShell .serviceMiniCountGrid span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.66rem !important;
}

.opsConsoleShell .serviceInfoCard {
  padding: 0.58rem 0.62rem !important;
}

.opsConsoleShell .serviceOverviewGrid,
.opsConsoleShell .serviceMiniCountGrid,
.opsConsoleShell .serviceRecordStack,
.opsConsoleShell .serviceAllDetails,
.opsConsoleShell .serviceMediaWorkspace,
.opsConsoleShell .serviceFileList {
  gap: 0.55rem !important;
}

.opsConsoleShell .serviceHandoffList {
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceHandoffList span {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 1px !important;
  border-radius: 0.38rem !important;
  padding: 0.42rem 0.48rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceContactActionCard {
  gap: 0.48rem !important;
}

.opsConsoleShell .serviceContactActionCard label {
  gap: 0.24rem !important;
  font-size: 0.7rem !important;
}

.opsConsoleShell .serviceContactActionCard .serviceInlineSwitch {
  min-height: 2rem !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceContactActionCard input,
.opsConsoleShell .serviceContactActionCard select,
.opsConsoleShell .serviceContactActionCard textarea {
  min-height: 2.08rem !important;
  border-radius: 0.38rem !important;
  padding: 0.42rem 0.5rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .serviceContactActionCard textarea {
  min-height: 3.15rem !important;
}

.opsConsoleShell .serviceScheduleFit {
  grid-column: 1 / -1 !important;
  gap: 0.34rem !important;
  border-radius: 0.42rem !important;
  padding: 0.48rem 0.52rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceScheduleFit span,
.opsConsoleShell .serviceScheduleFit p,
.opsConsoleShell .serviceScheduleFit strong {
  min-width: 0 !important;
}

.opsConsoleShell .serviceScheduleDayBoard {
  max-height: 12.4rem !important;
  overflow-y: auto !important;
  padding-right: 0.08rem !important;
}

.opsConsoleShell .serviceScheduleDayRow {
  border-radius: 0.38rem !important;
  min-height: 2.55rem !important;
  padding: 0.3rem 0.42rem !important;
}

.opsConsoleShell .serviceOpenRecords {
  width: auto !important;
  margin: 0 !important;
  justify-self: stretch !important;
}

@media (min-width: 1180px) {
  .opsConsoleShell .serviceContactActionCard {
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(0, 1fr) !important;
    align-items: end !important;
  }

  .opsConsoleShell .serviceContactActionCard > div,
  .opsConsoleShell .serviceContactActionCard > button,
  .opsConsoleShell .serviceContactActionCard > p {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .serviceFeedbackActionCard label:nth-of-type(n + 5) {
    grid-column: 1 / -1 !important;
  }
}

/* Chat final parity lock: compact controls and bounded panels stay inside the Ops Console. */
.opsConsoleShell .chatNewCard .segmentedControl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
  border: 0 !important;
  border-radius: 0.42rem !important;
  background: #f1f5f9 !important;
  padding: 0.22rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatNewCard .segmentedControl button {
  min-width: 0 !important;
  min-height: 1.9rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.34rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .chatNewCard .segmentedControl button.active,
.opsConsoleShell .chatNewCard .segmentedControl button[aria-pressed="true"] {
  border-color: rgba(11, 99, 206, 0.28) !important;
  background: #ffffff !important;
  color: var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .chatMemberPicker,
.opsConsoleShell .gifPicker {
  max-height: min(22rem, 48dvh) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.opsConsoleShell .chatMemberPickerEmpty {
  padding: 0.32rem 0.12rem !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .chatMessageActions,
.opsConsoleShell .chatReactions,
.opsConsoleShell .chatComposerActions,
.opsConsoleShell .gifSearchRow {
  min-width: 0 !important;
  max-width: 100% !important;
}

.opsConsoleShell .chatMessageActions,
.opsConsoleShell .chatReactions {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  scrollbar-width: none !important;
  transform: translateY(-0.12rem) !important;
  transition: opacity 120ms ease, transform 120ms ease !important;
}

.opsConsoleShell .chatMessage:hover .chatMessageActions,
.opsConsoleShell .chatMessage:focus-within .chatMessageActions,
.opsConsoleShell .chatMessage:hover .chatReactions,
.opsConsoleShell .chatMessage:focus-within .chatReactions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.opsConsoleShell .chatMessageActions::-webkit-scrollbar,
.opsConsoleShell .chatReactions::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .chatMessageActions button,
.opsConsoleShell .chatReactions button {
  flex: 0 0 auto !important;
}

.opsConsoleShell .chatComposerInput,
.opsConsoleShell .chatComposerInput textarea {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatMemberPicker {
    max-height: 8rem !important;
  }

  .opsConsoleShell .gifPicker {
    max-height: 34dvh !important;
  }

  .opsConsoleShell .chatMessageActions,
  .opsConsoleShell .chatReactions {
    padding-bottom: 0.1rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceSearchBar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    padding-bottom: calc(7.8rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceMetricGrid,
  .opsConsoleShell .serviceMiniCountGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceMobileNav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Field action console tightening: job, estimate, invoice, and payment controls stay scan-first. */
.opsConsoleShell .fieldNotice {
  margin: 0 0 0.55rem !important;
  border-radius: 0.38rem !important;
  padding: 0.48rem 0.6rem !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

.opsConsoleShell .fieldFocusBody,
.opsConsoleShell .fieldSalesComposer {
  gap: 0.48rem !important;
}

.opsConsoleShell .fieldJobList,
.opsConsoleShell .fieldMiniList,
.opsConsoleShell .fieldPacketList,
.opsConsoleShell .fieldEstimateOptions {
  gap: 0.36rem !important;
}

.opsConsoleShell .fieldPrimaryActionDock {
  grid-template-columns: repeat(auto-fit, minmax(6.15rem, 1fr)) !important;
}

.opsConsoleShell .fieldCustomerContactEditor {
  display: grid !important;
  grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1fr) auto !important;
  align-items: end !important;
  gap: 0.38rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #f8fafc !important;
  padding: 0.44rem !important;
}

.opsConsoleShell .fieldCustomerContactEditor label {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldCustomerContactEditor span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldCustomerContactEditor input {
  min-height: 2rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.48rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .fieldCustomerContactEditor button {
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.58rem !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .fieldCustomerContactCorrectionActions {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .fieldPrimaryActionDock button,
.opsConsoleShell .fieldPrimaryActionDock a,
.opsConsoleShell .fieldSecondaryActionRail button,
.opsConsoleShell .fieldSecondaryActionRail a {
  min-width: 0 !important;
  padding: 0.34rem 0.44rem !important;
}

.opsConsoleShell .fieldPrimaryActionDock span,
.opsConsoleShell .fieldPrimaryActionDock small,
.opsConsoleShell .fieldJobButton strong,
.opsConsoleShell .fieldJobButton small,
.opsConsoleShell .fieldFocusBody > strong,
.opsConsoleShell .fieldPacketGrid span,
.opsConsoleShell .fieldSalesSummary span,
.opsConsoleShell .fieldOfflineReadinessItems span,
.opsConsoleShell .fieldCloseoutReadiness > button,
.opsConsoleShell .fieldEstimateHeaderRow strong,
.opsConsoleShell .fieldInvoiceActionRow strong,
.opsConsoleShell .fieldPaymentActionRow strong {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .fieldPacketGrid,
.opsConsoleShell .fieldSalesSummary,
.opsConsoleShell .fieldOfflineReadinessItems,
.opsConsoleShell .fieldCloseoutReadiness,
.opsConsoleShell .fieldPacketStatus {
  grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)) !important;
}

.opsConsoleShell .fieldPacketGrid span,
.opsConsoleShell .fieldSalesSummary span,
.opsConsoleShell .fieldOfflineReadinessItems span,
.opsConsoleShell .fieldCloseoutReadiness > button,
.opsConsoleShell .fieldPacketStatus span {
  gap: 0.12rem !important;
  min-height: 3.05rem !important;
  padding: 0.42rem 0.46rem !important;
}

.opsConsoleShell .fieldSalesForms {
  grid-template-columns: minmax(9rem, 1fr) auto minmax(8rem, 0.82fr) minmax(8rem, 1fr) auto auto !important;
  align-items: end !important;
}

.opsConsoleShell .fieldTemplateStarter,
.opsConsoleShell .fieldCustomEstimateOptionComposer,
.opsConsoleShell .fieldCustomEstimateLineComposer {
  grid-template-columns: minmax(10rem, 16rem) auto minmax(0, 1fr) !important;
  border-radius: 0.45rem !important;
  padding: 0.42rem !important;
}

.opsConsoleShell .fieldSalesForms input,
.opsConsoleShell .fieldSalesForms select,
.opsConsoleShell .fieldTemplateStarter select,
.opsConsoleShell .fieldTemplateStarter button,
.opsConsoleShell .fieldCustomEstimateOptionComposer input,
.opsConsoleShell .fieldCustomEstimateOptionComposer select,
.opsConsoleShell .fieldCustomEstimateOptionComposer button,
.opsConsoleShell .fieldCustomEstimateLineComposer input,
.opsConsoleShell .fieldCustomEstimateLineComposer select,
.opsConsoleShell .fieldCustomEstimateLineComposer button,
.opsConsoleShell .fieldEstimateCloseoutPlan select {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .fieldEstimateHeaderRow > span:first-child,
.opsConsoleShell .fieldEstimateOptionRow > span:first-child,
.opsConsoleShell .fieldInvoiceActionRow > span:first-child,
.opsConsoleShell .fieldPaymentActionRow > span:first-child {
  min-width: 0 !important;
}

.opsConsoleShell .fieldEstimateHeaderRow small,
.opsConsoleShell .fieldEstimateOptionRow small,
.opsConsoleShell .fieldInvoiceActionRow small,
.opsConsoleShell .fieldPaymentActionRow small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldEstimateOptionRow .fieldEstimateApprovalPromise {
  color: #047857 !important;
  font-weight: 760 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldEstimateOptionRow .fieldEstimateInvoiceHandoff {
  color: #1d4ed8 !important;
  font-weight: 760 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldEstimateLineItems {
  gap: 0.22rem !important;
  padding-top: 0.28rem !important;
}

.opsConsoleShell .fieldEstimateLineItems > span {
  grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto) auto !important;
  min-height: 1.78rem !important;
}

.opsConsoleShell .fieldPaymentReaderBoundary {
  margin-top: 0.12rem !important;
  color: #7c2d12 !important;
  font-weight: 760 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldPaymentVisibilityEvidence,
.fieldPaymentVisibilityEvidence {
  margin-top: 0.12rem !important;
  color: #0f4f7a !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldPaymentReaderCloseoutPlan {
  color: #047857 !important;
  font-weight: 780 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.opsConsoleShell .fieldEstimateActionButtons,
.opsConsoleShell .fieldEstimateOptionActions,
.opsConsoleShell .fieldInvoiceActionButtons,
.opsConsoleShell .fieldPaymentActionButtons {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.opsConsoleShell .fieldEstimateActionButtons button,
.opsConsoleShell .fieldEstimateOptionActions button,
.opsConsoleShell .fieldEstimateLineItems button,
.opsConsoleShell .fieldInvoiceActionButtons button,
.opsConsoleShell .fieldPaymentActionButtons button {
  flex: 0 1 auto !important;
  min-width: 4.9rem !important;
  min-height: 1.95rem !important;
  border-radius: 0.34rem !important;
  padding: 0.28rem 0.48rem !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldCustomerContactCorrectionActions button.confirmDanger,
.opsConsoleShell .fieldPacketList button.confirmDanger,
.opsConsoleShell .fieldFormActions button.confirmDanger,
.opsConsoleShell .fieldEstimateHeaderRow button.confirmDanger,
.opsConsoleShell .fieldEstimateOptionRow button.confirmDanger,
.opsConsoleShell .fieldEstimateLineItems button.confirmDanger,
.opsConsoleShell .fieldPendingApprovalActions button.confirmDanger,
.opsConsoleShell .fieldPaymentActionRow button.confirmDanger {
  border-color: rgba(220, 38, 38, 0.42) !important;
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

.opsConsoleShell .fieldEstimateSignatureUpload {
  align-items: end !important;
}

.opsConsoleShell .fieldEstimateCloseoutPlan {
  grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr) !important;
}

/* Field daily schedule rail: keep secondary dispatch context in one compact strip. */
.opsConsoleShell .fieldScheduleRail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.58rem !important;
  padding: 0.58rem !important;
}

.opsConsoleShell .fieldScheduleColumn {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .fieldScheduleColumn header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  min-height: 1.75rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0 0 0.38rem !important;
}

.opsConsoleShell .fieldScheduleColumn header strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.8rem !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleColumn header span {
  flex: 0 0 auto !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0.16rem 0.42rem !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
}

/* Field pay parity: source and period stay in the pay panel, not a second card. */
.opsConsoleShell .fieldPayStatusRail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  margin-top: 0.5rem !important;
}

.opsConsoleShell .fieldPayStatusRail span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.12rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.42rem 0.48rem !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .fieldPayStatusRail b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldSecondaryActionRail,
  .opsConsoleShell .fieldPacketGrid,
  .opsConsoleShell .fieldSalesSummary,
  .opsConsoleShell .fieldOfflineReadinessItems,
  .opsConsoleShell .fieldCloseoutReadiness,
  .opsConsoleShell .fieldPacketStatus {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldOfflineReadiness,
  .opsConsoleShell .fieldSalesForms,
  .opsConsoleShell .fieldCustomEstimateOptionComposer,
  .opsConsoleShell .fieldCustomEstimateLineComposer,
  .opsConsoleShell .fieldCustomerContactEditor,
  .opsConsoleShell .fieldEstimateSignatureUpload,
  .opsConsoleShell .fieldEstimateCloseoutPlan {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldScheduleRail {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldPayStatusRail {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons,
  .opsConsoleShell .fieldEstimateOptionActions,
  .opsConsoleShell .fieldInvoiceActionButtons,
  .opsConsoleShell .fieldPaymentActionButtons {
    justify-content: flex-start !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons button,
  .opsConsoleShell .fieldEstimateOptionActions button,
  .opsConsoleShell .fieldInvoiceActionButtons button,
  .opsConsoleShell .fieldPaymentActionButtons button {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 0.22rem);
    min-width: 0 !important;
  }
}

/* Secondary workspace usability lock: Calls, Field, and Admin stay scrollable and dense. */
.opsConsoleShell .phoneRail,
.opsConsoleShell .phoneDetail,
.opsConsoleShell .fieldMainGrid,
.opsConsoleShell .adminPermissionLayout,
.opsConsoleShell .adminPermissionSections {
  min-width: 0 !important;
}

.opsConsoleShell .phoneDetail {
  background: #ffffff !important;
  overflow-x: hidden !important;
}

.opsConsoleShell .phonePanelHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.opsConsoleShell .phonePanelHeader button,
.opsConsoleShell .phoneSegment button,
.opsConsoleShell .phoneRingControls button,
.opsConsoleShell .phonePrimaryControls button,
.opsConsoleShell .phoneUtilityControls button {
  width: auto !important;
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  padding: 0 0.62rem !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.opsConsoleShell .phonePanelHeader button {
  justify-self: end !important;
}

.opsConsoleShell .phoneSegment {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.28rem !important;
  border-radius: 0.48rem !important;
  background: #f1f5f9 !important;
  box-shadow: none !important;
  padding: 0.24rem !important;
}

.opsConsoleShell .phoneSegment button.active {
  border-color: rgba(11, 99, 206, 0.28) !important;
  background: #ffffff !important;
  color: var(--ops-accent, #0b63ce) !important;
  box-shadow: none !important;
}

.opsConsoleShell .phoneThread {
  min-height: 3.85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0.54rem 0.62rem !important;
}

.opsConsoleShell .phoneThread.active {
  background: #eef5ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .phoneMarketingLine {
  color: #166534 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .phoneMarketingChip {
  border-radius: 0.36rem !important;
  background: #edfdf3 !important;
  color: #166534 !important;
  box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.14) !important;
}

.opsConsoleShell .phoneAvatar {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.42rem !important;
  background: #e8eef7 !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: inset 0 0 0 1px var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .phoneToolbarActions,
.opsConsoleShell .phoneCallbackActions,
.opsConsoleShell .phonePrimaryControls,
.opsConsoleShell .phoneUtilityControls,
.opsConsoleShell .fieldHeroActions,
.opsConsoleShell .fieldSecondaryActionRail {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .phoneToolbarActions::-webkit-scrollbar,
.opsConsoleShell .phoneCallbackActions::-webkit-scrollbar,
.opsConsoleShell .phonePrimaryControls::-webkit-scrollbar,
.opsConsoleShell .phoneUtilityControls::-webkit-scrollbar,
.opsConsoleShell .fieldHeroActions::-webkit-scrollbar,
.opsConsoleShell .fieldSecondaryActionRail::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .phoneCallbackFocus,
.opsConsoleShell .phoneConsole,
.opsConsoleShell .phoneCallInbox,
.opsConsoleShell .phoneComposer,
.opsConsoleShell .adminNotice,
.opsConsoleShell .fieldNotice {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .phoneCallInbox,
.opsConsoleShell .phoneComposer {
  margin: 0.62rem 0.72rem 0 !important;
  padding: 0.58rem 0.62rem !important;
}

.opsConsoleShell .phoneComposer {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.opsConsoleShell .phoneComposer button {
  min-height: 2.25rem !important;
  border-radius: 0.38rem !important;
  background: var(--ops-accent, #0b63ce) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  padding: 0 0.82rem !important;
}

.opsConsoleShell .phoneSmsContext {
  grid-column: 1 / -1 !important;
  color: var(--ops-muted, #566274) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .phoneComposer textarea,
.opsConsoleShell .phoneComposer input,
.opsConsoleShell .callNoteComposer select,
.opsConsoleShell .callNoteComposer textarea {
  min-width: 0 !important;
  border-radius: 0.38rem !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .phoneStatusStrip,
.opsConsoleShell .phoneCallInboxHeader,
.opsConsoleShell .adminRuleCard {
  min-width: 0 !important;
}

.opsConsoleShell .phoneStatusStrip strong,
.opsConsoleShell .phoneStatusStrip em,
.opsConsoleShell .phoneCallInboxHeader strong,
.opsConsoleShell .phoneCallInboxHeader span,
.opsConsoleShell .adminRuleCard strong,
.opsConsoleShell .adminRuleCard small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .phoneReadinessStrip,
.opsConsoleShell .phoneCallbackResolution,
.opsConsoleShell .phoneIncomingDebugGrid,
.opsConsoleShell .phoneProviderProofCoverage,
.opsConsoleShell .phoneProviderProofList,
.opsConsoleShell .phoneProofList,
.opsConsoleShell .phoneActionProofFacts {
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)) !important;
}

.opsConsoleShell .adminPermissionSections {
  gap: 0.55rem !important;
}

.opsConsoleShell .adminPermissionSection {
  overflow: hidden !important;
}

.opsConsoleShell .adminNotice {
  margin: 0 0 0.6rem !important;
  color: var(--ops-accent, #0b63ce) !important;
  padding: 0.5rem 0.62rem !important;
  font-size: 0.78rem !important;
}

/* Chat compact parity lock: Chat should feel like the same operating console as Mail. */
.opsConsoleShell .chatShell {
  grid-template-columns: minmax(15.5rem, 18rem) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.5rem !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatConversationRail,
.opsConsoleShell .chatMain {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.opsConsoleShell .chatConversationRail {
  border-right: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .chatRailHeader,
.opsConsoleShell .chatHeader {
  min-height: 3rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.52rem 0.66rem !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

.opsConsoleShell .chatRailTitle strong,
.opsConsoleShell .chatHeader h2 {
  font-size: 0.9rem !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
}

.opsConsoleShell .chatRailTitle small,
.opsConsoleShell .chatHeaderMeta,
.opsConsoleShell .chatTriageCounts span,
.opsConsoleShell .chatMessageMeta span,
.opsConsoleShell .chatMessageMeta em,
.opsConsoleShell .chatComposerActions span {
  font-size: 0.68rem !important;
}

.opsConsoleShell .chatTriageBar,
.opsConsoleShell .chatNewCard {
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 0.5rem 0.58rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatNewCard {
  display: grid !important;
  gap: 0.48rem !important;
}

.opsConsoleShell .chatNewCard input,
.opsConsoleShell .chatTriageBar input,
.opsConsoleShell .gifSearchRow input {
  min-height: 2rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.55rem !important;
  font-size: 0.78rem !important;
  font-weight: 620 !important;
}

.opsConsoleShell .chatConversationList > button {
  min-height: 3.55rem !important;
  grid-template-columns: 1.9rem minmax(0, 1fr) auto !important;
  gap: 0.55rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.5rem 0.66rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatConversationList > button.active {
  background: #f4f8ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .chatAvatar,
.opsConsoleShell .chatMessageAvatar {
  width: 1.9rem !important;
  height: 1.9rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .chatTimeline {
  padding: 0.66rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatMessage {
  grid-template-columns: 1.9rem minmax(0, 1fr) !important;
  gap: 0.52rem !important;
  margin-bottom: 0.56rem !important;
}

.opsConsoleShell .chatBubble,
.opsConsoleShell .chatReply,
.opsConsoleShell .chatComposerInput,
.opsConsoleShell .gifPicker,
.opsConsoleShell .chatAttachmentChip {
  border-color: var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatBubble {
  max-width: 46rem !important;
  padding: 0.5rem 0.58rem !important;
}

.opsConsoleShell .chatBubble p {
  margin-bottom: 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  line-height: 1.38 !important;
}

.opsConsoleShell .chatMessageActions,
.opsConsoleShell .chatReactions {
  gap: 0.28rem !important;
  margin-top: 0.42rem !important;
}

.opsConsoleShell .chatComposer {
  border-top: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.48rem 0.58rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatComposerInput textarea {
  min-height: 2.45rem !important;
  border-radius: 0.42rem 0.42rem 0 0 !important;
  padding: 0.52rem 0.58rem 0.28rem !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.opsConsoleShell .chatMemberPicker button,
.opsConsoleShell .chatMessageActions button,
.opsConsoleShell .chatReactions button,
.opsConsoleShell .chatComposerContext button,
.opsConsoleShell .selectedGifPreview button,
.opsConsoleShell .selectedAttachmentPreview button,
.opsConsoleShell .chatComposerActions button:not(:last-child),
.opsConsoleShell .chatPrimaryAction,
.opsConsoleShell .chatNewCard > button,
.opsConsoleShell .chatComposerActions button:last-child,
.opsConsoleShell .gifSearchRow button {
  min-height: 1.9rem !important;
  border-radius: 0.38rem !important;
  padding: 0 0.55rem !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatAttachmentList,
.opsConsoleShell .selectedAttachmentPreview {
  gap: 0.34rem !important;
}

.opsConsoleShell .chatAttachmentChip {
  max-width: min(100%, 15rem) !important;
  padding: 0.34rem 0.45rem !important;
}

.opsConsoleShell .chatAttachmentChip strong {
  font-size: 0.72rem !important;
}

.opsConsoleShell .chatAttachmentChip small {
  font-size: 0.66rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatShell {
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .chatConversationRail,
  .opsConsoleShell .chatMain {
    min-height: 0 !important;
    border: 0 !important;
  }

  .opsConsoleShell .chatConversationRail.mobileActive {
    display: flex !important;
  }

  .opsConsoleShell .chatMain.mobileActive {
    display: grid !important;
  }

  .opsConsoleShell .chatConversationRail:not(.mobileActive),
  .opsConsoleShell .chatMain:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .chatRailHeader,
  .opsConsoleShell .chatHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  .opsConsoleShell .chatComposer {
    position: sticky !important;
    bottom: calc(4.55rem + env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
    margin: 0 0.48rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.48rem !important;
  }
}

/* Chat action-icon fit: keep the surface client-like without text-heavy chrome. */
.opsConsoleShell .chatActionIcon {
  width: 0.95rem !important;
  height: 0.95rem !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.opsConsoleShell .chatPrimaryAction,
.opsConsoleShell .chatSearchClear,
.opsConsoleShell .chatBackButton,
.opsConsoleShell .chatHeaderActions a,
.opsConsoleShell .chatHeaderActions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
}

.opsConsoleShell .chatSearchRow {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.opsConsoleShell .chatSearchClear {
  width: 2rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
}

.opsConsoleShell .chatHeaderActions span,
.opsConsoleShell .chatPrimaryAction span {
  line-height: 1 !important;
}

@media (max-width: 430px) {
  .opsConsoleShell .chatHeaderActions a span,
  .opsConsoleShell .chatHeaderActions button span,
  .opsConsoleShell .chatPrimaryAction span {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions a,
  .opsConsoleShell .chatHeaderActions button,
  .opsConsoleShell .chatBackButton,
  .opsConsoleShell .chatPrimaryAction {
    width: 2.1rem !important;
    min-width: 2.1rem !important;
    padding-inline: 0 !important;
  }
}

/* Chat workbench density pass: messages read as an ops log, not decorative chat cards. */
.opsConsoleShell .chatConversationList > button > span,
.opsConsoleShell .chatRailTitle,
.opsConsoleShell .chatHeader > div,
.opsConsoleShell .chatMessageMeta,
.opsConsoleShell .chatBubble,
.opsConsoleShell .chatReply,
.opsConsoleShell .chatComposerInput {
  min-width: 0 !important;
}

.opsConsoleShell .chatConversationList > button strong,
.opsConsoleShell .chatConversationList > button small,
.opsConsoleShell .chatRailTitle strong,
.opsConsoleShell .chatRailTitle small,
.opsConsoleShell .chatHeader h2,
.opsConsoleShell .chatMessageMeta strong,
.opsConsoleShell .chatMessageMeta span,
.opsConsoleShell .chatMessageMeta em,
.opsConsoleShell .chatComposerActions span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatMessage {
  align-items: flex-start !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  margin-bottom: 0 !important;
  padding: 0.48rem 0.12rem !important;
}

.opsConsoleShell .chatBubble {
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0.04rem 0 0.28rem !important;
}

.opsConsoleShell .chatBubble p {
  max-width: 52rem !important;
}

.opsConsoleShell .chatReplies {
  border-left: 2px solid var(--ops-border, #dbe1ea) !important;
  margin-top: 0.38rem !important;
  padding-left: 0.55rem !important;
}

.opsConsoleShell .chatMessageActions,
.opsConsoleShell .chatReactions {
  opacity: 0.92 !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatMessage {
    padding: 0.55rem 0 !important;
  }

  .opsConsoleShell .chatConversationList > button strong,
  .opsConsoleShell .chatConversationList > button small {
    white-space: normal !important;
  }
}

/* Chat uncluttered parity: keep operational context, remove redundant visible status chrome. */
.opsConsoleShell .chatTriageCounts {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatComposerActions {
  grid-template-columns: auto auto !important;
  justify-content: end !important;
}

.opsConsoleShell .chatComposerActions span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatFilterTabs,
.opsConsoleShell .chatSearchRow,
.opsConsoleShell .chatComposerActions {
  align-items: center !important;
}

.opsConsoleShell .chatMessageActions button,
.opsConsoleShell .chatReactions button {
  min-width: 1.85rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatComposerActions {
    grid-template-columns: auto auto !important;
  }
}

/* Chat context drawer parity: selected chats carry customer, job, member, and activity context like Mail. */
.opsConsoleShell .chatDetailWorkbench {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(13.6rem, 15.6rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.opsConsoleShell .chatContextPanel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-left: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .chatContextPanelHeader {
  display: grid !important;
  align-content: center !important;
  min-height: 3rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.52rem 0.62rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatContextPanelHeader .eyebrow {
  display: none !important;
}

.opsConsoleShell .chatContextPanelHeader strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.84rem !important;
  font-weight: 760 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextPanelBody {
  display: grid !important;
  align-content: start !important;
  gap: 0.48rem !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 0.58rem !important;
  -webkit-overflow-scrolling: touch;
}

.opsConsoleShell .chatContextSummary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding-bottom: 0.52rem !important;
}

.opsConsoleShell .chatContextSummary span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
}

.opsConsoleShell .chatContextSummary strong,
.opsConsoleShell .chatContextSummary small,
.opsConsoleShell .chatContextSummary em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextSummary strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.82rem !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
}

.opsConsoleShell .chatContextSummary small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
}

.opsConsoleShell .chatContextSummary em {
  justify-self: end !important;
  max-width: 5.2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  padding: 0.22rem 0.42rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

.opsConsoleShell .chatContextFacts {
  gap: 0 !important;
  margin: 0 !important;
}

.opsConsoleShell .chatContextFactsCompact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.3rem !important;
}

.opsConsoleShell .chatContextFacts div {
  gap: 0.12rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0.34rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .chatContextFacts div:first-child {
  padding-top: 0.34rem !important;
}

.opsConsoleShell .chatContextFacts dt {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.6rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .chatContextFacts dd {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.74rem !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextActions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(4.7rem, 1fr)) !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .chatContextActions a,
.opsConsoleShell .chatContextActions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34rem !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0 0.58rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

.opsConsoleShell .chatContextActions button:disabled {
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.opsConsoleShell .chatMobileDeleteAction {
  color: #8a1c1c !important;
  border-color: rgba(138, 28, 28, 0.22) !important;
}

.opsConsoleShell .chatContextMemberSection {
  display: grid !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .chatContextSectionHeader {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
  border-top: 1px solid var(--ops-border, #dbe1ea) !important;
  padding-top: 0.48rem !important;
}

.opsConsoleShell .chatContextSectionHeader strong,
.opsConsoleShell .chatContextSectionHeader small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextSectionHeader strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .chatContextSectionHeader small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .chatMemberManager {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.36rem !important;
  padding: 0 !important;
}

.opsConsoleShell .chatMemberManager select,
.opsConsoleShell .chatMemberManager button,
.opsConsoleShell .chatContextMemberRow button {
  min-height: 1.9rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #fff !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .chatMemberManager select {
  min-width: 0 !important;
  padding: 0 0.45rem !important;
}

.opsConsoleShell .chatMemberManager button,
.opsConsoleShell .chatContextMemberRow button {
  padding: 0 0.5rem !important;
}

.opsConsoleShell .chatMemberManager button:disabled,
.opsConsoleShell .chatContextMemberRow button:disabled {
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.opsConsoleShell .chatContextMembers {
  display: grid !important;
  gap: 0.28rem !important;
}

.opsConsoleShell .chatContextMembers span {
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0.32rem 0.42rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextMemberRow {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.28rem !important;
  white-space: normal !important;
}

.opsConsoleShell .chatContextMemberRow b,
.opsConsoleShell .chatContextMemberRow small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .chatContextMemberRow small {
  color: #64748b !important;
  font-size: 0.66rem !important;
  text-transform: capitalize !important;
}

.opsConsoleShell .chatContextMemberRow button {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  min-height: 1.55rem !important;
  padding-inline: 0.42rem !important;
}

.opsConsoleShell .chatContextEmpty {
  margin: 0.62rem !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
}

/* Chat mobile context parity: linked chats keep customer/job context without the desktop drawer. */
.opsConsoleShell .chatMobileContextStrip {
  display: none !important;
}

.opsConsoleShell .chatMobileMemberPanel {
  display: none !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .chatHeader {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .opsConsoleShell .chatHeader > div:not(.chatHeaderActions):not(.chatMobileContextStrip) {
    min-width: 0 !important;
  }

  .opsConsoleShell .chatHeaderActions {
    grid-column: 3 !important;
    justify-content: end !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction {
    width: 2rem !important;
    min-width: 2rem !important;
    padding-inline: 0 !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.5rem !important;
    align-items: center !important;
    width: 100% !important;
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
    padding-top: 0.48rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip > span {
    display: grid !important;
    min-width: 0 !important;
    gap: 0.08rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip strong,
  .opsConsoleShell .chatMobileContextStrip small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatMobileContextStrip strong {
    color: var(--ops-text, #111827) !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
  }

  .opsConsoleShell .chatMobileContextStrip small {
    color: var(--ops-muted, #667085) !important;
    font-size: 0.68rem !important;
    font-weight: 720 !important;
  }

  .opsConsoleShell .chatMobileContextStrip a,
  .opsConsoleShell .chatMobileContextStrip button {
    min-height: 1.9rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.55rem !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
  }

  .opsConsoleShell .chatMobileMemberPanel.mobileOnly {
    display: grid !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
    padding-top: 0.42rem !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 1.9rem !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary::-webkit-details-marker {
    display: none !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary::after {
    content: "Manage" !important;
    justify-self: end !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.38rem !important;
    padding: 0.32rem 0.55rem !important;
    color: var(--ops-text, #111827) !important;
    background: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
  }

  .opsConsoleShell .chatMobileMemberPanel[open] summary::after {
    content: "Close" !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary span,
  .opsConsoleShell .chatMobileMemberPanel summary strong,
  .opsConsoleShell .chatMobileMemberPanel summary small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary span {
    display: grid !important;
    gap: 0.08rem !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary strong {
    color: var(--ops-text, #111827) !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary small {
    color: var(--ops-muted, #667085) !important;
    font-size: 0.66rem !important;
    font-weight: 720 !important;
  }

  .opsConsoleShell .chatMobileMemberBody {
    display: grid !important;
    gap: 0.42rem !important;
    max-height: min(38dvh, 18rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-top: 0.42rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatMobileMemberActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem !important;
  }

  .opsConsoleShell .chatMobileMemberActions a,
  .opsConsoleShell .chatMobileMemberActions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.34rem !important;
    min-height: 1.9rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.38rem !important;
    padding: 0 0.55rem !important;
    background: #ffffff !important;
    color: var(--ops-text, #111827) !important;
    font-size: 0.72rem !important;
    font-weight: 760 !important;
    text-decoration: none !important;
  }

  .opsConsoleShell .chatMobileMemberActions button:disabled {
    color: #94a3b8 !important;
    cursor: not-allowed !important;
  }

  .opsConsoleShell .chatMobileMemberBody .chatMemberManager {
    padding: 0 !important;
  }

  .opsConsoleShell .chatDetailWorkbench {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .chatContextPanel {
    display: none !important;
  }
}

/* Customer file console lock: Service stays dense, flat, and scroll-safe. */
.opsConsoleShell .serviceShell {
  grid-template-columns: minmax(16.8rem, 19.5rem) minmax(20rem, 0.9fr) minmax(21rem, 1fr) !important;
  gap: 0 !important;
  border-left: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceCustomerPane,
.opsConsoleShell .serviceProfilePane,
.opsConsoleShell .serviceRecordsPane {
  border-width: 0 1px 0 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceRecordsPane {
  border-right: 0 !important;
}

.opsConsoleShell .servicePaneHeader,
.opsConsoleShell .serviceColumnHeader {
  min-height: 3.2rem !important;
  padding: 0.58rem 0.72rem !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceBackButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .serviceActionIcon {
  width: 0.95rem !important;
  height: 0.95rem !important;
  flex: 0 0 auto !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.opsConsoleShell .servicePaneHeader h2,
.opsConsoleShell .serviceColumnHeader h2,
.opsConsoleShell .serviceHeroCard h3,
.opsConsoleShell .serviceRecordCard h3 {
  margin: 0 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .servicePaneHeader .eyebrow,
.opsConsoleShell .serviceColumnHeader .eyebrow,
.opsConsoleShell .serviceColumnHeader p,
.opsConsoleShell .serviceHeroCard p,
.opsConsoleShell .serviceInfoCard small,
.opsConsoleShell .serviceCustomerStats,
.opsConsoleShell .serviceRecordKicker {
  display: none !important;
}

.opsConsoleShell .serviceSearchBar,
.opsConsoleShell .serviceTriageBar,
.opsConsoleShell .serviceCustomerList,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody {
  padding: 0.58rem 0.72rem !important;
}

.opsConsoleShell .serviceSearchBar {
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .serviceTriageBar {
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceCustomerList,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody {
  gap: 0.48rem !important;
}

.opsConsoleShell .serviceCustomerCard {
  min-height: 3.42rem !important;
  margin: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  padding: 0.48rem 0.54rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceCustomerCard.active {
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .serviceReadinessPill,
.opsConsoleShell .servicePillRow span,
.opsConsoleShell .serviceRecordChips span,
.opsConsoleShell .serviceAmountBadge {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  padding: 0.16rem 0.38rem !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  color: var(--ops-muted, #667085) !important;
}

.opsConsoleShell .serviceHeroCard {
  display: grid !important;
  grid-template-columns: 2.1rem minmax(0, 1fr) !important;
  gap: 0.52rem !important;
  align-items: center !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
}

/* Customer profile status strip: the header owns the name; body keeps status only. */
.opsConsoleShell .serviceHeroCard {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 0.34rem 0 0.42rem !important;
}

.opsConsoleShell .serviceHeroCard .serviceHeroAvatar,
.opsConsoleShell .serviceHeroCard h3 {
  display: none !important;
}

.opsConsoleShell .serviceHeroCard .servicePillRow {
  margin-top: 0 !important;
}

.opsConsoleShell .serviceHeroAvatar {
  width: 2.1rem !important;
  height: 2.1rem !important;
  border-radius: 999px !important;
  background: #eef2f7 !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: inset 0 0 0 1px var(--ops-border, #dbe1ea) !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .servicePillRow {
  gap: 0.28rem !important;
  margin-top: 0.28rem !important;
}

.opsConsoleShell .serviceActionGrid {
  grid-template-columns: repeat(auto-fit, minmax(5.7rem, 1fr)) !important;
  gap: 0.36rem !important;
}

.opsConsoleShell .serviceActionGrid button,
.opsConsoleShell .serviceActionGrid a {
  min-height: 2.08rem !important;
  border-radius: 0.38rem !important;
  padding: 0.32rem 0.4rem !important;
}

.opsConsoleShell .serviceMetricGrid,
.opsConsoleShell .serviceMiniCountGrid {
  gap: 0.36rem !important;
}

.opsConsoleShell .serviceMetricGrid div,
.opsConsoleShell .serviceMiniCountGrid span,
.opsConsoleShell .serviceDetailList div {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #ffffff !important;
  padding: 0.42rem !important;
}

.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceContactActionCard,
.opsConsoleShell .serviceInfoCard,
.opsConsoleShell .serviceRecordCardGroup,
.opsConsoleShell .serviceRecordCard,
.opsConsoleShell .serviceTimelineEvent > div,
.opsConsoleShell .serviceMediaCard,
.opsConsoleShell .serviceFileList article {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceHandoffCard,
.opsConsoleShell .serviceContactActionCard,
.opsConsoleShell .serviceInfoCard,
.opsConsoleShell .serviceRecordCardGroup,
.opsConsoleShell .serviceRecordCard {
  padding: 0.58rem !important;
}

.opsConsoleShell .serviceRecordCardList {
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceRecordCardTop {
  margin-bottom: 0.42rem !important;
}

.opsConsoleShell .serviceDetailList,
.opsConsoleShell .serviceDetailList.compact {
  gap: 0.36rem !important;
  margin-top: 0.45rem !important;
}

.opsConsoleShell .serviceDetailList.compact {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important;
}

.opsConsoleShell .serviceDetailList dt {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.opsConsoleShell .serviceDetailsDisclosure {
  margin-top: 0.48rem !important;
  padding-top: 0.42rem !important;
}

.opsConsoleShell .serviceRecordInspectorGrid {
  gap: 0.38rem !important;
  margin-top: 0.4rem !important;
}

.opsConsoleShell .serviceRecordInspectorGrid section {
  min-width: 0 !important;
}

.opsConsoleShell .serviceRecordInspector h4 {
  margin: 0 0 0.3rem !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceTimeline {
  gap: 0.46rem !important;
}

.opsConsoleShell .serviceTimelineDot {
  width: 0.48rem !important;
  height: 0.48rem !important;
  box-shadow: none !important;
  background: var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .serviceTimelineEvent {
  grid-template-columns: 0.7rem minmax(0, 1fr) !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceEventTags span,
.opsConsoleShell .serviceCommunicationLinkActions a {
  border-radius: 0.34rem !important;
  padding: 0.16rem 0.36rem !important;
}

.opsConsoleShell .serviceMediaGrid {
  grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)) !important;
  gap: 0.46rem !important;
}

.opsConsoleShell .serviceMediaCard button {
  height: 6.8rem !important;
}

.opsConsoleShell .serviceMediaCard div,
.opsConsoleShell .serviceFileList article {
  padding: 0.48rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceShell {
    display: block !important;
    border-left: 0 !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane {
    border: 0 !important;
  }

  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    padding-bottom: calc(7.8rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceActionGrid,
  .opsConsoleShell .serviceMetricGrid,
  .opsConsoleShell .serviceOverviewGrid,
  .opsConsoleShell .serviceMiniCountGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceMediaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceColumnHeader .serviceBackButton {
    width: 2.1rem !important;
    min-width: 2.1rem !important;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
    border-radius: 0.42rem !important;
    padding: 0 !important;
  }
}

/* Final scroll ownership clamp: this must stay after all surface-specific Ops Console passes. */
@media (min-width: 921px) {
  .opsConsoleShell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    min-height: 0 !important;
  }

  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: calc(100dvh - var(--ops-header-height) - 0.7rem) !important;
  }

  .opsConsoleShell .chatShell {
    display: grid !important;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) !important;
  }

  .opsConsoleShell .chatConversationRail,
  .opsConsoleShell .chatDetailWorkbench,
  .opsConsoleShell .chatMain,
  .opsConsoleShell .chatContextPanel {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .opsConsoleShell .chatConversationRail {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatMain {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  }

  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminPermissionLayout,
  .opsConsoleShell .adminPermissionSections {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .phoneDetail,
  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .mailContextPanel,
  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .chatContextPanelBody,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .fieldJobsCard,
  .opsConsoleShell .fieldFocusCard,
  .opsConsoleShell .fieldScheduleRail,
  .opsConsoleShell .fieldPayCard,
  .opsConsoleShell .adminPermissionNav,
  .opsConsoleShell .adminPermissionSections {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatConversationList {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 920px) {
  html,
  body {
    overflow-x: hidden !important;
    overscroll-behavior-y: none !important;
  }

  .opsConsoleShell {
    --ops-mobile-viewport-height: 100dvh;
    --ops-mobile-workspace-height: calc(var(--ops-mobile-viewport-height) - var(--ops-header-height) - 4.9rem - env(safe-area-inset-bottom));
    height: var(--ops-mobile-viewport-height) !important;
    min-height: var(--ops-mobile-viewport-height) !important;
    padding: env(safe-area-inset-top) 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  @supports (height: 100svh) {
    .opsConsoleShell {
      --ops-mobile-viewport-height: 100svh;
    }
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .sidebar.mobileActive,
  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive,
  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive,
  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .detailContentFrame,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .phoneComposer,
  .opsConsoleShell .fieldMainGrid {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Mobile workspace scroll contract: each non-mail surface owns its viewport above the app dock. */
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .detailContentFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat mobile scroll contract: Chat owns its list and timeline above the app dock. */
  .opsConsoleShell .chatConversationRail.mobileActive,
  .opsConsoleShell .chatMain.mobileActive {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatConversationRail.mobileActive {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .chatMain.mobileActive {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatComposer {
    position: relative !important;
    bottom: auto !important;
    z-index: 1 !important;
    margin: 0 !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    padding-bottom: calc(0.62rem + env(safe-area-inset-bottom)) !important;
  }

  /* Mobile scroll reliability: active panes must have one bounded scroll owner. */
  .opsConsoleShell .sidebar.mobileActive {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive,
  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
}

/* Final scroll rescue: every active app surface keeps one obvious scroll owner. */
@media (min-width: 921px) {
  .opsConsoleShell .chatDetailWorkbench,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane,
  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceCustomerPane {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .chatContextPanelBody,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminPermissionLayout {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminPermissionLayout {
    max-height: 100% !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatConversationRail.mobileActive,
  .opsConsoleShell .chatDetailWorkbench.mobileActive,
  .opsConsoleShell .chatMain.mobileActive,
  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .chatContextPanelBody,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminPermissionLayout {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Final surface-convergence lock: active workspaces scroll inside the app, not the page. */
@media (min-width: 921px) {
  .opsConsoleShell .adminAppShell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    flex: 1 1 auto !important;
    min-height: 12rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminPermissionNav,
  .opsConsoleShell .adminPermissionSections,
  .opsConsoleShell .permissionMatrix {
    min-height: 0 !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminPermissionSections,
  .opsConsoleShell .permissionMatrix {
    overflow: auto !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane,
  .opsConsoleShell .chatConversationRail,
  .opsConsoleShell .chatDetailWorkbench,
  .opsConsoleShell .chatMain {
    height: 100% !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .adminAppShell {
    height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatConversationRail.mobileActive,
  .opsConsoleShell .chatDetailWorkbench.mobileActive,
  .opsConsoleShell .chatMain.mobileActive,
  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    height: 100% !important;
    max-height: 100% !important;
  }

  .opsConsoleShell .chatDetailWorkbench.mobileActive {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .chatMain.mobileActive {
    flex: 1 1 auto !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminAppShell {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile active surface guard: hidden workspaces must not override the selected tab. */
.opsConsoleShell .phoneAppShell.phoneAppShellHidden,
.opsConsoleShell .phoneAppShell[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .dailyOpsHeader {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen {
    position: fixed !important;
    top: var(--ops-header-height) !important;
    right: auto !important;
    bottom: calc(4.9rem + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    z-index: 80 !important;
    width: min(20rem, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - var(--ops-header-height) - 4.9rem - env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 0.85rem 0.85rem 0 !important;
    box-shadow: 0 1rem 2.4rem rgba(15, 23, 42, 0.2) !important;
    transform: none !important;
  }

  .opsConsoleShell .mobileSidebarScrim {
    position: fixed !important;
    top: var(--ops-header-height) !important;
    right: 0 !important;
    bottom: calc(4.9rem + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    z-index: 70 !important;
    background: rgba(15, 23, 42, 0.28) !important;
  }

  .opsConsoleShell .fieldAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.48rem !important;
    padding: 0.48rem 0.48rem calc(5.6rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 0 !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    padding: 0 0 0.42rem !important;
  }

  .opsConsoleShell .fieldHero p,
  .opsConsoleShell .fieldHeroActions .fieldOfflineCatalogStatus:not(.fieldActionOutboxStatus) {
    display: none !important;
  }

  .opsConsoleShell .fieldHero h2 {
    font-size: 1rem !important;
  }

  .opsConsoleShell .fieldHeroActions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldActionOutboxStatus {
    min-width: 2.45rem !important;
    min-height: 2.05rem !important;
    padding: 0 0.48rem !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldMetricGrid {
    display: flex !important;
    gap: 0.36rem !important;
    margin: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .fieldMetricGrid::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldMetricGrid article {
    flex: 0 0 7.4rem !important;
    min-height: 3rem !important;
    padding: 0.42rem 0.48rem !important;
  }

  .opsConsoleShell .fieldMetricGrid article small {
    display: none !important;
  }

  .opsConsoleShell .fieldMainGrid {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0.48rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldCard {
    flex: 0 0 auto !important;
    padding: 0.48rem !important;
  }

  .opsConsoleShell .fieldJobsCard {
    max-height: 38svh !important;
  }

  .opsConsoleShell .fieldFocusCard {
    min-height: 16rem !important;
  }

  .opsConsoleShell .fieldCardHeader {
    min-height: 2.35rem !important;
    margin: -0.48rem -0.48rem 0.44rem !important;
    padding: 0.44rem 0.48rem !important;
  }

  .opsConsoleShell .fieldModeSwitch,
  .opsConsoleShell .fieldRangeSwitch {
    margin: 0 !important;
  }
}

/* Field technician day card finish: jobs should read like scheduled work, not empty KPI tiles. */
.opsConsoleShell .fieldMetricGrid {
  display: flex !important;
  gap: 0.4rem !important;
  margin: 0 0 0.46rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .fieldMetricGrid::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .fieldMetricGrid article {
  flex: 0 0 min(10.5rem, 24vw) !important;
  min-height: 3.25rem !important;
  padding: 0.44rem 0.52rem !important;
}

.opsConsoleShell .fieldMetricGrid article small {
  display: none !important;
}

.opsConsoleShell .fieldJobButton {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.18rem 0.5rem !important;
  min-height: 5.15rem !important;
  padding: 0.62rem 0.68rem !important;
}

.opsConsoleShell .fieldJobButton > span {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .fieldJobButton > small {
  min-width: 0 !important;
}

.opsConsoleShell .fieldJobButton p {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
  line-height: 1.28 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldMetricGrid article {
    flex-basis: 7.4rem !important;
  }

  .opsConsoleShell .fieldJobButton {
    min-height: 5.6rem !important;
  }
}

/* Field rescue pass: make the live technician surface feel like a job screen, not a dashboard. */
.opsConsoleShell .fieldAppShell {
  min-width: 0 !important;
}

.opsConsoleShell .fieldHeroActions {
  min-width: 0 !important;
}

.opsConsoleShell .fieldHeroActions > button,
.opsConsoleShell .fieldTechContactSettings > summary,
.opsConsoleShell .fieldOfflineCatalogStatus {
  border-radius: 0.45rem !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
}

.opsConsoleShell .fieldMetricGrid {
  align-items: stretch !important;
  max-width: 100% !important;
}

.opsConsoleShell .fieldMetricGrid article {
  flex: 0 0 9.2rem !important;
  min-height: 2.85rem !important;
  border-radius: 0.45rem !important;
  box-shadow: none !important;
}

.opsConsoleShell .fieldMetricGrid span {
  font-size: 0.68rem !important;
}

.opsConsoleShell .fieldMetricGrid strong {
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

.opsConsoleShell .fieldMainGrid {
  align-items: start !important;
}

.opsConsoleShell .fieldJobsCard {
  min-width: 16rem !important;
}

.opsConsoleShell .fieldFocusCard {
  min-width: 0 !important;
}

.opsConsoleShell .fieldCard {
  border-radius: 0.38rem !important;
  box-shadow: none !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .fieldMainGrid {
    display: grid !important;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr) !important;
    gap: 0.6rem !important;
  }

  .opsConsoleShell .fieldScheduleRail {
    grid-column: 2 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.5rem 0.75rem calc(5.8rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHero {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldHero > div:first-child {
    display: none !important;
  }

  .opsConsoleShell .fieldHeroActions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldActionOutboxStatus {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.28rem !important;
    justify-content: center !important;
    padding: 0.28rem 0.38rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .fieldTechContactSettings {
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary span,
  .opsConsoleShell .fieldTechContactSettings > summary em,
  .opsConsoleShell .fieldActionOutboxStatus small {
    display: none !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary strong,
  .opsConsoleShell .fieldActionOutboxStatus b {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldModeSwitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
    padding: 0.3rem !important;
  }

  .opsConsoleShell .fieldModeSwitch button {
    min-width: 0 !important;
    min-height: 2.25rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .fieldRangeSwitch {
    display: flex !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 0 0 0.18rem !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .fieldRangeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldRangeSwitch button {
    flex: 0 0 auto !important;
    min-height: 2.12rem !important;
    min-width: 5.6rem !important;
    padding: 0 0.55rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.76rem !important;
  }

  .opsConsoleShell .fieldMetricGrid {
    display: none !important;
  }

  .opsConsoleShell .fieldMainGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldCard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.56rem !important;
  }

  .opsConsoleShell .fieldJobsCard {
    max-height: none !important;
  }

  .opsConsoleShell .fieldFocusCard {
    min-height: 0 !important;
  }

  .opsConsoleShell .fieldCardHeader {
    min-height: 0 !important;
    margin: -0.56rem -0.56rem 0.5rem !important;
    padding: 0.5rem 0.56rem !important;
  }

  .opsConsoleShell .fieldCardHeader h3 {
    font-size: 0.98rem !important;
  }

  .opsConsoleShell .fieldCardHeader p {
    display: none !important;
  }

  .opsConsoleShell .fieldEmpty {
    min-height: 2.5rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldPacketStatus {
    gap: 0.36rem !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldPacketStatus span {
    min-height: 2.7rem !important;
    border-radius: 0.42rem !important;
  }

  .opsConsoleShell .fieldScheduleRail {
    display: none !important;
  }
}

/* Field schedule board: real appointment/job read path before smart dispatch. */
.opsConsoleShell .fieldScheduleBoard {
  display: grid !important;
  gap: 0.55rem !important;
}

.opsConsoleShell .fieldScheduleSummary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .fieldScheduleSummary span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0.42rem 0.5rem !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleSummary b {
  color: var(--ops-text, #111827) !important;
  font-size: 0.98rem !important;
  line-height: 1 !important;
}

.opsConsoleShell .fieldScheduleSelectedFacts {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 0.55rem !important;
  background: #eff6ff !important;
  padding: 0.48rem !important;
}

.opsConsoleShell .fieldScheduleSelectedFacts.hasWarning {
  border-color: rgba(217, 119, 6, 0.32) !important;
  background: #fff7ed !important;
}

.opsConsoleShell .fieldScheduleSelectedFacts span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.06rem !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .fieldScheduleSelectedFacts b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision,
.opsConsoleShell .fieldScheduleFieldHandoff,
.opsConsoleShell .fieldScheduleEditPath {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision span,
.opsConsoleShell .fieldScheduleFieldHandoff span,
.opsConsoleShell .fieldScheduleEditPath span {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(20, 184, 166, 0.22) !important;
  border-left-width: 0.24rem !important;
  border-radius: 0.48rem !important;
  border-left-color: #14b8a6 !important;
  background: #f0fdfa !important;
  padding: 0.48rem 0.56rem !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision span.needsAction,
.opsConsoleShell .fieldScheduleFieldHandoff span.needsAction,
.opsConsoleShell .fieldScheduleEditPath span.needsAction {
  border-color: rgba(217, 119, 6, 0.28) !important;
  border-left-color: #d97706 !important;
  background: #fffbeb !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision b,
.opsConsoleShell .fieldScheduleDispatchDecision strong,
.opsConsoleShell .fieldScheduleDispatchDecision small,
.opsConsoleShell .fieldScheduleFieldHandoff b,
.opsConsoleShell .fieldScheduleFieldHandoff strong,
.opsConsoleShell .fieldScheduleFieldHandoff small,
.opsConsoleShell .fieldScheduleEditPath b,
.opsConsoleShell .fieldScheduleEditPath strong,
.opsConsoleShell .fieldScheduleEditPath small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision b,
.opsConsoleShell .fieldScheduleFieldHandoff b,
.opsConsoleShell .fieldScheduleEditPath b {
  color: #0f766e !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision strong,
.opsConsoleShell .fieldScheduleFieldHandoff strong,
.opsConsoleShell .fieldScheduleEditPath strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .fieldScheduleDispatchDecision small,
.opsConsoleShell .fieldScheduleFieldHandoff small,
.opsConsoleShell .fieldScheduleEditPath small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleNextMove {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  border-left: 0.24rem solid #2563eb !important;
  border-radius: 0.55rem !important;
  background: #eff6ff !important;
  padding: 0.58rem 0.68rem !important;
}

.opsConsoleShell .fieldScheduleNextMove div {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleNextMove span {
  color: #1d4ed8 !important;
  font-size: 0.64rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.065em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleNextMove strong,
.opsConsoleShell .fieldScheduleNextMove small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.opsConsoleShell .fieldScheduleNextMove strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.88rem !important;
}

.opsConsoleShell .fieldScheduleNextMove small {
  color: #475569 !important;
  font-size: 0.72rem !important;
  line-height: 1.28 !important;
}

.opsConsoleShell .fieldScheduleBookingTarget {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
  border: 1px solid rgba(20, 184, 166, 0.34) !important;
  border-radius: 0.65rem !important;
  background: #f0fdfa !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.62rem 0.72rem !important;
}

.opsConsoleShell .fieldScheduleBookingTarget.missing {
  border-color: rgba(217, 119, 6, 0.34) !important;
  background: #fffbeb !important;
}

.opsConsoleShell .fieldScheduleBookingTarget div {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: min(20rem, 100%) !important;
}

.opsConsoleShell .fieldScheduleBookingTarget span {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleBookingTarget strong {
  font-size: 0.96rem !important;
  font-weight: 950 !important;
}

.opsConsoleShell .fieldScheduleBookingTarget small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleActionPlan {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleActionPlan button {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  min-height: 4.15rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 0.24rem !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.46rem 0.56rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleActionPlan button.ready {
  border-left-color: #16a34a !important;
}

.opsConsoleShell .fieldScheduleActionPlan button.needsAction {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .fieldScheduleActionPlan button:not(:disabled):hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleActionPlan button:disabled {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

.opsConsoleShell .fieldScheduleActionPlan span,
.opsConsoleShell .fieldScheduleActionPlan small {
  overflow: hidden !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleActionPlan strong {
  overflow: hidden !important;
  font-size: 0.88rem !important;
  font-weight: 860 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleLoadStrip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleLoadCard {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  min-height: 4rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 0.24rem !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.46rem 0.56rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleLoadCard.open,
.opsConsoleShell .fieldScheduleLoadCard.steady {
  border-left-color: #16a34a !important;
}

.opsConsoleShell .fieldScheduleLoadCard.busy {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .fieldScheduleLoadCard.heavy {
  border-left-color: #dc2626 !important;
}

.opsConsoleShell .fieldScheduleLoadCard.gpsFresh {
  border-left-color: #0891b2 !important;
  background: #ecfeff !important;
}

.opsConsoleShell .fieldScheduleLoadCard.gpsStale {
  border-left-color: #9333ea !important;
}

.opsConsoleShell .fieldScheduleGpsStrip a {
  text-decoration: none !important;
}

.opsConsoleShell .fieldScheduleLoadCard.active {
  border-color: #2563eb !important;
  border-left-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleLoadCard span,
.opsConsoleShell .fieldScheduleLoadCard strong,
.opsConsoleShell .fieldScheduleLoadCard small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleLoadCard span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleLoadCard strong {
  font-size: 0.94rem !important;
  font-weight: 880 !important;
}

.opsConsoleShell .fieldScheduleLoadCard small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}


.opsConsoleShell .fieldScheduleLaneBoard {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleLaneCard {
  display: grid !important;
  gap: 0.16rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.5rem 0.58rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleLaneCard.busy {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

.opsConsoleShell .fieldScheduleLaneCard.heavy {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}

.opsConsoleShell .fieldScheduleLaneCard.active,
.opsConsoleShell .fieldScheduleLaneCard:not(:disabled):hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleLaneCard span,
.opsConsoleShell .fieldScheduleLaneCard strong,
.opsConsoleShell .fieldScheduleLaneCard small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleLaneCard span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleLaneCard strong {
  font-size: 0.92rem !important;
  font-weight: 880 !important;
}

.opsConsoleShell .fieldScheduleLaneCard small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .fieldScheduleZoneFilter {
  display: flex !important;
  gap: 0.36rem !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .fieldScheduleTechnicianFilter {
  padding-bottom: 0.04rem !important;
}

.opsConsoleShell .fieldScheduleZoneFilter::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .fieldScheduleZoneFilter button {
  flex: 0 0 auto !important;
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0 0.62rem !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .fieldScheduleZoneFilter button.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.opsConsoleShell .fieldScheduleWeekShell {
  display: grid !important;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr) !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
  align-items: start !important;
}

.opsConsoleShell .fieldScheduleWeekRail {
  display: grid !important;
  gap: 0.48rem !important;
  min-width: 0 !important;
  align-content: start !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard {
  display: grid !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.52rem !important;
  background: #ffffff !important;
  padding: 0.68rem 0.74rem !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard.active {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard span,
.opsConsoleShell .fieldScheduleWeekRailCard strong,
.opsConsoleShell .fieldScheduleWeekRailCard small {
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard span {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 840 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.9rem !important;
  font-weight: 860 !important;
}

.opsConsoleShell .fieldScheduleWeekRailCard small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.73rem !important;
  line-height: 1.35 !important;
}

.opsConsoleShell .fieldScheduleWeekMain {
  display: grid !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleWeekBoard {
  display: grid !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.62rem !important;
  background: #f8fafc !important;
  padding: 0.5rem !important;
}

.opsConsoleShell .fieldScheduleWeekHeader,
.opsConsoleShell .fieldScheduleWeekAllDayRow,
.opsConsoleShell .fieldScheduleWeekGrid {
  display: grid !important;
  gap: 0.38rem !important;
  min-width: max-content !important;
}

.opsConsoleShell .fieldScheduleWeekAxisHeader,
.opsConsoleShell .fieldScheduleWeekAllDayLabel {
  display: grid !important;
  align-content: start !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  padding: 0.42rem 0.28rem !important;
}

.opsConsoleShell .fieldScheduleWeekAxisHeader span,
.opsConsoleShell .fieldScheduleWeekAllDayLabel span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldScheduleWeekAxisHeader strong,
.opsConsoleShell .fieldScheduleWeekAllDayLabel small {
  color: var(--ops-text, #111827) !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  min-height: 4rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.46rem !important;
  background: #ffffff !important;
  padding: 0.56rem 0.62rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader.isToday {
  box-shadow: inset 0 0 0 0.08rem rgba(15, 118, 110, 0.22) !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader span,
.opsConsoleShell .fieldScheduleWeekDayHeader strong,
.opsConsoleShell .fieldScheduleWeekDayHeader small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader span {
  color: #0f766e !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.84rem !important;
  font-weight: 860 !important;
}

.opsConsoleShell .fieldScheduleWeekDayHeader small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleWeekAllDayCell {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 0.26rem !important;
  min-height: 3.2rem !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  padding: 0.42rem !important;
}

.opsConsoleShell .fieldScheduleWeekAllDayCell.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleWeekAllDayCell small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleHoldPill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.5rem !important;
  border-radius: 999px !important;
  background: #e2e8f0 !important;
  color: #334155 !important;
  padding: 0 0.48rem !important;
  font-size: 0.66rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleWeekGrid {
  align-items: start !important;
}

.opsConsoleShell .fieldScheduleTimeAxis {
  position: relative !important;
  min-height: 54rem !important;
  padding-top: 0.1rem !important;
}

.opsConsoleShell .fieldScheduleTimeAxis span {
  position: absolute !important;
  left: 0 !important;
  right: 0.5rem !important;
  transform: translateY(-50%) !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-align: right !important;
}

.opsConsoleShell .fieldScheduleDayColumn {
  position: relative !important;
  min-height: 54rem !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 0.52rem !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.opsConsoleShell .fieldScheduleDayColumn.active {
  border-color: #2563eb !important;
  box-shadow: inset 0 0 0 0.08rem rgba(37, 99, 235, 0.12) !important;
}

.opsConsoleShell .fieldScheduleDayColumnGrid {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.opsConsoleShell .fieldScheduleDayColumnGrid span {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.opsConsoleShell .fieldScheduleSlotButton {
  position: absolute !important;
  left: 0.42rem !important;
  right: 0.42rem !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 1.9rem !important;
  border: 1px dashed rgba(148, 163, 184, 0.34) !important;
  border-radius: 0.42rem !important;
  background: rgba(248, 250, 252, 0.72) !important;
  color: var(--ops-muted, #667085) !important;
  padding: 0 0.48rem !important;
  transform: translateY(-50%) !important;
}

.opsConsoleShell .fieldScheduleSlotButton:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.opsConsoleShell .fieldScheduleSlotButton span {
  font-size: 0.92rem !important;
  font-weight: 860 !important;
}

.opsConsoleShell .fieldScheduleSlotButton small {
  font-size: 0.64rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .fieldScheduleEventBlock {
  position: absolute !important;
  left: 0.46rem !important;
  right: 0.46rem !important;
  z-index: 2 !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.52rem !important;
  background: linear-gradient(180deg, #dbeafe, #bfdbfe) !important;
  box-shadow: 0 0.18rem 0.6rem rgba(37, 99, 235, 0.14) !important;
  overflow: hidden !important;
}

.opsConsoleShell .fieldScheduleEventBlock.active {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 0.12rem rgba(37, 99, 235, 0.18) !important;
}

.opsConsoleShell .fieldScheduleEventBlock.bookingTarget {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 0.12rem rgba(20, 184, 166, 0.18) !important;
}

.opsConsoleShell .fieldScheduleEventBlock.hasWarning {
  border-left: 0.24rem solid #d97706 !important;
  background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
}

.opsConsoleShell .fieldScheduleEventBody {
  display: grid !important;
  gap: 0.08rem !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 4.4rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.46rem 0.52rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleEventBody time,
.opsConsoleShell .fieldScheduleEventBody strong,
.opsConsoleShell .fieldScheduleEventBody span,
.opsConsoleShell .fieldScheduleEventBody small,
.opsConsoleShell .fieldScheduleEventBody em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleEventBody time {
  color: #1d4ed8 !important;
  font-size: 0.66rem !important;
  font-weight: 840 !important;
}

.opsConsoleShell .fieldScheduleEventBody strong {
  font-size: 0.78rem !important;
  font-weight: 860 !important;
}

.opsConsoleShell .fieldScheduleEventBody span,
.opsConsoleShell .fieldScheduleEventBody small,
.opsConsoleShell .fieldScheduleEventBody em {
  color: #334155 !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 740 !important;
}

.opsConsoleShell .fieldScheduleBookingWorkspace {
  margin-top: 0.08rem !important;
}

.opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 0.52rem !important;
}

.opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard > div:first-child,
.opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard > label:nth-of-type(6),
.opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard > .serviceBookingPlan {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard button[type="submit"] {
  min-height: 2.35rem !important;
  background: #0f8a3b !important;
  color: #ffffff !important;
}

.opsConsoleShell .fieldScheduleCustomerSearch {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.opsConsoleShell .fieldScheduleCustomerSearch button {
  min-height: 2.15rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.4rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.58rem !important;
  font-size: 0.7rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleCustomerSearch button:disabled {
  opacity: 0.6 !important;
}

.opsConsoleShell .fieldScheduleCustomerResults {
  display: grid !important;
  gap: 0.34rem !important;
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .fieldScheduleCustomerResults button {
  display: grid !important;
  gap: 0.08rem !important;
  justify-items: start !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.46rem !important;
  background: #ffffff !important;
  padding: 0.46rem 0.52rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleCustomerResults button.active,
.opsConsoleShell .fieldScheduleCustomerResults button:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleCustomerResults strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.76rem !important;
  font-weight: 840 !important;
}

.opsConsoleShell .fieldScheduleCustomerResults span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 740 !important;
}

.opsConsoleShell .fieldScheduleBoardList {
  display: grid !important;
  gap: 0.48rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleDayGroup {
  display: grid !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  padding: 0.48rem !important;
}

.opsConsoleShell .fieldScheduleDayGroup > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleDayGroup > header strong,
.opsConsoleShell .fieldScheduleDayGroup > header span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleDayGroup > header strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
}

.opsConsoleShell .fieldScheduleDayGroup > header span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

.opsConsoleShell .fieldScheduleRows {
  display: grid !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .fieldScheduleJobCard {
  display: grid !important;
  grid-template-columns: 5.4rem minmax(0, 1.1fr) minmax(7rem, 0.9fr) auto !important;
  gap: 0.16rem 0.55rem !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 3rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.42rem 0.52rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleJobCard.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleJobCard.bookingTarget {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 0.16rem rgba(20, 184, 166, 0.16) !important;
}

.opsConsoleShell .fieldScheduleJobCard.hasWarning {
  border-left: 0.24rem solid #d97706 !important;
  background: #fffbeb !important;
}

.opsConsoleShell .fieldScheduleRows time,
.opsConsoleShell .fieldScheduleRows strong,
.opsConsoleShell .fieldScheduleRows span,
.opsConsoleShell .fieldScheduleRows small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleRows time {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .fieldScheduleRows strong {
  font-size: 0.82rem !important;
  font-weight: 860 !important;
}

.opsConsoleShell .fieldScheduleRows span,
.opsConsoleShell .fieldScheduleRows small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .fieldScheduleRows small {
  grid-column: 2 / -1 !important;
}

.opsConsoleShell .fieldScheduleRowActions {
  grid-column: 4 !important;
  grid-row: 1 / span 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0.24rem !important;
  min-width: 10rem !important;
}

.opsConsoleShell .fieldScheduleRowActions button {
  min-height: 1.9rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.24rem 0.52rem !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleRowActions button:not(:disabled):hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell .fieldScheduleRowActions button.primaryDispatchAction {
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
}

.opsConsoleShell .fieldScheduleRowActions button.primaryDispatchAction:not(:disabled):hover {
  border-color: #1d4ed8 !important;
  background: #1d4ed8 !important;
}

.opsConsoleShell .fieldScheduleRowActions button:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

/* Field smart dispatch slice: schedule pressure should be visible without a separate planner. */
.opsConsoleShell .fieldScheduleSmartPanel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleSmartCard {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  min-height: 4.2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 0.24rem !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  padding: 0.46rem 0.56rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldScheduleSmartCard.open,
.opsConsoleShell .fieldScheduleSmartCard.steady {
  border-left-color: #16a34a !important;
}

.opsConsoleShell .fieldScheduleSmartCard.busy {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .fieldScheduleSmartCard.heavy {
  border-left-color: #dc2626 !important;
}

.opsConsoleShell button.fieldScheduleSmartCard:not(:disabled):hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

.opsConsoleShell button.fieldScheduleSmartCard:disabled {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

.opsConsoleShell .fieldScheduleSmartCard span,
.opsConsoleShell .fieldScheduleSmartCard strong,
.opsConsoleShell .fieldScheduleSmartCard small,
.opsConsoleShell .fieldScheduleRowSignals,
.opsConsoleShell .fieldScheduleRowProof span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldScheduleSmartCard span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldScheduleSmartCard strong {
  font-size: 0.94rem !important;
  font-weight: 880 !important;
}

.opsConsoleShell .fieldScheduleSmartCard small,
.opsConsoleShell .fieldScheduleRowSignals {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
}

/* Calendar-first dispatch shell: keep planning context beside the board, not stacked above it. */
.opsConsoleShell .fieldScheduleStudio {
  display: grid !important;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr) !important;
  gap: 0.72rem !important;
  min-width: 0 !important;
  align-items: start !important;
}

.opsConsoleShell .fieldScheduleSidebar,
.opsConsoleShell .fieldScheduleCanvas {
  display: grid !important;
  gap: 0.72rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleSidebar {
  align-content: start !important;
}

.opsConsoleShell .fieldScheduleSidebarGroup {
  display: grid !important;
  gap: 0.56rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.78rem !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  padding: 0.72rem !important;
  box-shadow: 0 0.3rem 1rem rgba(15, 23, 42, 0.05) !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleSummary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleSummary span {
  min-height: 4rem !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleSelectedFacts,
.opsConsoleShell .fieldScheduleSidebar .fieldScheduleDispatchDecision,
.opsConsoleShell .fieldScheduleSidebar .fieldScheduleFieldHandoff,
.opsConsoleShell .fieldScheduleSidebar .fieldScheduleEditPath {
  grid-template-columns: 1fr !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleActionPlan,
.opsConsoleShell .fieldScheduleSidebar .fieldScheduleSmartPanel {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleWeekRail {
  grid-template-columns: 1fr !important;
}

.opsConsoleShell .fieldScheduleSidebar .fieldScheduleLoadStrip,
.opsConsoleShell .fieldScheduleSidebar .fieldScheduleLaneBoard {
  grid-template-columns: 1fr !important;
}

.opsConsoleShell .fieldScheduleCanvas {
  align-content: start !important;
}

.opsConsoleShell .fieldScheduleCanvas .fieldScheduleWeekShell {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.opsConsoleShell .fieldScheduleCanvas .fieldScheduleWeekMain {
  gap: 0.72rem !important;
}

.opsConsoleShell .fieldScheduleCanvas .fieldScheduleWeekBoard {
  background: #ffffff !important;
  border-radius: 0.78rem !important;
  box-shadow: 0 0.4rem 1.2rem rgba(15, 23, 42, 0.06) !important;
  padding: 0.62rem !important;
}

.opsConsoleShell .fieldScheduleCanvas .fieldDispatchEmptyBoard {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-radius: 0.78rem !important;
  background: linear-gradient(180deg, #f8fbff, #ffffff) !important;
}

.opsConsoleShell .fieldScheduleCanvas .fieldDispatchEmptyActions {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.42rem !important;
  overflow-x: auto !important;
  margin: 0 0.72rem !important;
  padding: 0.08rem 0 0.16rem !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch button {
  flex: 0 0 auto !important;
  min-width: 5.5rem !important;
  min-height: 2.2rem !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 0.58rem !important;
  background: #ffffff !important;
  color: #334155 !important;
  padding: 0 0.76rem !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch button.active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.opsConsoleShell .fieldScheduleRowSignals {
  grid-column: 2 / -1 !important;
}

.opsConsoleShell .fieldScheduleRowProof {
  grid-column: 2 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

.opsConsoleShell .fieldScheduleRowProof span {
  display: inline-flex !important;
  gap: 0.25rem !important;
  align-items: center !important;
  max-width: 100% !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 999px !important;
  padding: 0.18rem 0.42rem !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.66rem !important;
  font-weight: 760 !important;
  background: rgba(248, 250, 252, 0.9) !important;
}

.opsConsoleShell .fieldScheduleRowProof b {
  color: #334155 !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldScheduleStudio {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldScheduleSidebar {
    order: 2 !important;
  }

  .opsConsoleShell .fieldScheduleCanvas {
    order: 1 !important;
  }

  .opsConsoleShell .fieldScheduleSidebarGroup {
    padding: 0.56rem !important;
  }

  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleSummary,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleActionPlan,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleSmartPanel,
  .opsConsoleShell .fieldScheduleCanvas .fieldDispatchEmptyBoard {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch {
    margin: 0 0.5rem !important;
  }

  .opsConsoleShell .fieldScheduleSummary,
  .opsConsoleShell .fieldScheduleSelectedFacts,
  .opsConsoleShell .fieldScheduleDispatchDecision,
  .opsConsoleShell .fieldScheduleFieldHandoff,
  .opsConsoleShell .fieldScheduleEditPath {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldScheduleNextMove {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .fieldScheduleSmartPanel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldScheduleActionPlan {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldScheduleLoadStrip {
    display: flex !important;
    overflow-x: auto !important;
    padding-bottom: 0.08rem !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .fieldScheduleLoadStrip::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleLoadCard {
    flex: 0 0 10.2rem !important;
    min-height: 3.65rem !important;
  }

  .opsConsoleShell .fieldScheduleJobCard {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 4.4rem !important;
  }

  .opsConsoleShell .fieldScheduleRows time {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .opsConsoleShell .fieldScheduleRows strong,
  .opsConsoleShell .fieldScheduleRows span,
  .opsConsoleShell .fieldScheduleRows small {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .fieldScheduleRowActions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }
}

/* Mail mobile density rescue: native-sized list rows and one obvious scroll owner. */
@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive {
    display: flex !important;
    flex-direction: column !important;
    height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageToolbar,
  .opsConsoleShell .messageColumn.mobileActive .messageSubtoolbar,
  .opsConsoleShell .messageColumn.mobileActive .folderRail,
  .opsConsoleShell .messageColumn.mobileActive .contextRibbon,
  .opsConsoleShell .messageColumn.mobileActive .messageSectionLabel,
  .opsConsoleShell .messageColumn.mobileActive .messageListFooter {
    display: none !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .searchBar:not(.mobileSearchOpen) {
    display: none !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageWorkspace,
  .opsConsoleShell .messageColumn.mobileActive .messageResultsPanel {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
    background: #ffffff !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageSection {
    display: block !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageRowShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageBulkSelect {
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    min-height: 4.35rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageButton {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 4.35rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0.48rem 0.72rem !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageButton.active {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageAvatar,
  .opsConsoleShell .messageColumn.mobileActive .threadMetaRow,
  .opsConsoleShell .messageColumn.mobileActive .messageFlagMarker {
    display: none !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageBody,
  .opsConsoleShell .messageColumn.mobileActive .messageTopRow,
  .opsConsoleShell .messageColumn.mobileActive .messageSubjectRow,
  .opsConsoleShell .messageColumn.mobileActive .messageMetaRow {
    min-width: 0 !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageTopRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.55rem !important;
    align-items: baseline !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageTopRow strong,
  .opsConsoleShell .messageColumn.mobileActive .messageTopRow span,
  .opsConsoleShell .messageColumn.mobileActive .messageSubjectRow > span:first-child,
  .opsConsoleShell .messageColumn.mobileActive .messageMeta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageTopRow strong {
    color: var(--ops-text, #111827) !important;
    font-size: 0.94rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageTopRow span {
    color: var(--ops-muted, #667085) !important;
    font-size: 0.74rem !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageSubjectRow {
    display: flex !important;
    gap: 0.38rem !important;
    align-items: center !important;
    margin-top: 0.12rem !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageSubjectRow > span:first-child {
    color: var(--ops-text, #111827) !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageMetaRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.35rem !important;
    margin-top: 0.12rem !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageMeta {
    display: -webkit-box !important;
    color: var(--ops-muted, #667085) !important;
    font-size: 0.76rem !important;
    font-weight: 620 !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageRowAction {
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: 999px !important;
    padding: 0 0.34rem !important;
    font-size: 0.68rem !important;
  }
}

/* Customers/Admin mobile convergence: compact app panes, not legacy dashboard pages. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .adminAppShell {
    height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
  }

  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .servicePaneHeader,
  .opsConsoleShell .serviceColumnHeader {
    flex: 0 0 auto !important;
    min-height: 2.85rem !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    padding: 0.48rem 0.62rem !important;
  }

  .opsConsoleShell .servicePaneHeader .eyebrow,
  .opsConsoleShell .serviceColumnHeader .eyebrow,
  .opsConsoleShell .serviceColumnHeader p,
  .opsConsoleShell .serviceTriageBar,
  .opsConsoleShell .serviceCustomerStats,
  .opsConsoleShell .serviceCustomerCard em,
  .opsConsoleShell .serviceHeroCard,
  .opsConsoleShell .serviceRecordKicker,
  .opsConsoleShell .serviceRecordCard p {
    display: none !important;
  }

  .opsConsoleShell .servicePaneHeader h2,
  .opsConsoleShell .serviceColumnHeader h2 {
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
  }

  .opsConsoleShell .serviceProfilePane > .serviceError.mobileOnly,
  .opsConsoleShell .serviceProfilePane > .noticeBanner.mobileOnly,
  .opsConsoleShell .serviceRecordsPane > .serviceError.mobileOnly,
  .opsConsoleShell .serviceRecordsPane > .noticeBanner.mobileOnly {
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    margin: 0 !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    padding: 0.48rem 0.62rem !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  .opsConsoleShell .serviceSearchBar {
    flex: 0 0 auto !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.36rem !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    padding: 0.48rem 0.62rem !important;
  }

  .opsConsoleShell .serviceSearchBar input,
  .opsConsoleShell .serviceSearchBar button {
    min-height: 2.12rem !important;
    border-radius: 0.38rem !important;
    font-size: 0.78rem !important;
  }

  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
  }

  .opsConsoleShell .serviceCustomerCard {
    display: grid !important;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto !important;
    min-height: 3.85rem !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    padding: 0.48rem 0.62rem !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .serviceCustomerCard.active {
    background: #eef4ff !important;
    box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
  }

  .opsConsoleShell .serviceAvatar {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: 0.68rem !important;
  }

  .opsConsoleShell .serviceCustomerCopy strong,
  .opsConsoleShell .serviceCustomerCopy small,
  .opsConsoleShell .serviceReadinessPill {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceCustomerCopy strong {
    font-size: 0.88rem !important;
    line-height: 1.16 !important;
  }

  .opsConsoleShell .serviceCustomerCopy small {
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .serviceReadinessPill {
    max-width: 5.2rem !important;
    border-radius: 0.34rem !important;
    padding: 0.14rem 0.34rem !important;
    font-size: 0.64rem !important;
  }

  .opsConsoleShell .serviceActionGrid,
  .opsConsoleShell .serviceMetricGrid,
  .opsConsoleShell .serviceOverviewGrid,
  .opsConsoleShell .serviceMiniCountGrid,
  .opsConsoleShell .serviceDetailList,
  .opsConsoleShell .serviceRecordInspectorGrid,
  .opsConsoleShell .serviceMediaGrid {
    grid-template-columns: 1fr !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .serviceActionGrid button,
  .opsConsoleShell .serviceActionGrid a,
  .opsConsoleShell .serviceRecordCard,
  .opsConsoleShell .serviceInfoCard,
  .opsConsoleShell .serviceHandoffCard,
  .opsConsoleShell .serviceContactActionCard,
  .opsConsoleShell .serviceTimelineEvent > div,
  .opsConsoleShell .serviceMediaCard {
    border-radius: 0.42rem !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    padding: 0.55rem 0.62rem calc(3.9rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceMobileNav.mobileOnly {
    position: sticky !important;
    right: auto !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    margin: 0 !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0.42rem 0.62rem calc(0.42rem + env(safe-area-inset-bottom)) !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .serviceMobileNav button {
    min-width: 0 !important;
    min-height: 2rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.42rem !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .adminAppShell {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.48rem 0.55rem calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminStatusBar,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    flex: 0 0 auto !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .adminHeader {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.4rem !important;
    padding: 0.52rem !important;
  }

  .opsConsoleShell .adminHeader .eyebrow,
  .opsConsoleShell .adminRuleCard small,
  .opsConsoleShell .adminPolicyList small,
  .opsConsoleShell .permissionAbility small,
  .opsConsoleShell .permissionScope,
  .opsConsoleShell .adminReportSide {
    display: none !important;
  }

  .opsConsoleShell .adminHeader h2 {
    font-size: 1rem !important;
  }

  .opsConsoleShell .adminHeaderStats,
  .opsConsoleShell .adminReportStats,
  .opsConsoleShell .adminRoleOverview,
  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminTriageCounts {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.32rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .adminHeaderStats::-webkit-scrollbar,
  .opsConsoleShell .adminReportStats::-webkit-scrollbar,
  .opsConsoleShell .adminRoleOverview::-webkit-scrollbar,
  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar,
  .opsConsoleShell .adminTriageCounts::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminHeaderStats span,
  .opsConsoleShell .adminReportStats span,
  .opsConsoleShell .adminRoleOverview div,
  .opsConsoleShell .adminTriageCounts span {
    flex: 0 0 6.4rem !important;
    min-width: 0 !important;
    min-height: 2.6rem !important;
    border-radius: 0.38rem !important;
    padding: 0.36rem 0.42rem !important;
  }

  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportHeader,
  .opsConsoleShell .adminRuleHeader,
  .opsConsoleShell .adminControlBand {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    padding: 0.52rem !important;
  }

  .opsConsoleShell .adminPermissionSearch {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .adminPermissionSearch input,
  .opsConsoleShell .adminPermissionSearch button,
  .opsConsoleShell .adminQuickFilters button,
  .opsConsoleShell .adminStatusBar button,
  .opsConsoleShell .adminReportHeaderActions button,
  .opsConsoleShell .adminReportHeaderActions a,
  .opsConsoleShell .adminReportDateControl {
    min-height: 2rem !important;
    border-radius: 0.38rem !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .adminReportGrid,
  .opsConsoleShell .adminRuleGrid,
  .opsConsoleShell .adminPolicyList,
  .opsConsoleShell .adminRuleFacts,
  .opsConsoleShell .adminPermissionLayout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.45rem !important;
  }

  .opsConsoleShell .adminReportTableHeader,
  .opsConsoleShell .permissionMatrixHeader {
    display: none !important;
  }

  .opsConsoleShell .adminReportTable [role="row"],
  .opsConsoleShell .permissionMatrixRow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    gap: 0.38rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .adminPermissionNav {
    position: static !important;
    display: flex !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .adminPermissionNav::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminPermissionNav a {
    flex: 0 0 8.2rem !important;
    min-height: 2.5rem !important;
    border-radius: 0.38rem !important;
    padding: 0.38rem 0.46rem !important;
  }

  .opsConsoleShell .adminPermissionSections,
  .opsConsoleShell .permissionMatrix {
    overflow: visible !important;
  }

  .opsConsoleShell .permissionStateControl {
    display: grid !important;
    grid-template-columns: minmax(5.4rem, 0.7fr) minmax(0, 1fr) !important;
    gap: 0.34rem !important;
    min-width: 0 !important;
  }
}

/* Visual QA rescue pass: stop legacy mobile chrome from fighting the Ops Console shell. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.62rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldMetricGrid {
    flex: 0 0 auto !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(7rem, 9.2rem)) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldMetricGrid article {
    height: auto !important;
    min-height: 3.25rem !important;
    max-height: 4.6rem !important;
    padding: 0.48rem 0.58rem !important;
  }

  .opsConsoleShell .fieldMetricGrid article small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldMainGrid {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    align-content: start !important;
    min-height: 0 !important;
  }

  .opsConsoleShell .fieldScheduleRail {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .mobileAppDock {
    z-index: 110 !important;
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    top: auto !important;
    right: 0.7rem !important;
    bottom: calc(5.28rem + env(safe-area-inset-bottom)) !important;
    left: 0.7rem !important;
    z-index: 105 !important;
    grid-template-columns: 1.85rem minmax(0, 1fr) auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 3.35rem !important;
    max-height: 5.25rem !important;
    gap: 0.48rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.72rem !important;
    background: #ffffff !important;
    color: var(--ops-text, #111827) !important;
    padding: 0.48rem 0.52rem !important;
    box-shadow: 0 -0.45rem 1.15rem rgba(16, 24, 40, 0.12) !important;
  }

  .opsConsoleShell .phoneGlobalCallIcon {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }

  .opsConsoleShell .phoneGlobalCallCopy {
    min-width: 0 !important;
  }

  .opsConsoleShell .phoneGlobalCallCopy span,
  .opsConsoleShell .phoneGlobalCallCopy small {
    display: none !important;
  }

  .opsConsoleShell .phoneGlobalCallCopy strong {
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .phoneGlobalCallActions {
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
    padding-right: 2.15rem !important;
  }

  .opsConsoleShell .phoneGlobalCallActions .answerButton,
  .opsConsoleShell .phoneGlobalCallActions .hangupButton,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .secondaryAction:nth-of-type(2) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 4.1rem !important;
    min-height: 2rem !important;
    padding: 0 0.55rem !important;
    border-radius: 0.46rem !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .phoneGlobalCallActions .secondaryAction:not(.phoneGlobalCloseButton) {
    display: none !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .secondaryAction:nth-of-type(2) {
    display: inline-flex !important;
  }

  .opsConsoleShell .phoneGlobalCallActions .phoneGlobalCloseButton {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    transform: translateY(-50%) !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen {
    top: var(--ops-header-height) !important;
    bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
    width: min(18.2rem, 84vw) !important;
    max-height: calc(100svh - var(--ops-header-height) - 5.25rem - env(safe-area-inset-bottom)) !important;
    border-radius: 0 0.7rem 0.7rem 0 !important;
    background: #f8fafc !important;
    padding: 0.72rem !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarComposeBlock {
    display: block !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarComposeButton {
    display: flex !important;
    width: 100% !important;
    min-height: 2.45rem !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    border-radius: 0.5rem !important;
    padding: 0 0.75rem !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarComposeButton span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarComposeChevron,
  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarTitleRow .sidebarIconButton,
  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarAddButton {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarTitleRow {
    min-height: 2rem !important;
    margin-top: 0.28rem !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .mailboxButton,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderRow,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagRow {
    min-height: 2.25rem !important;
    border-radius: 0.42rem !important;
    padding: 0.34rem 0.42rem !important;
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarSectionHeader {
    margin-top: 0.62rem !important;
  }

  .opsConsoleShell .fieldAppShell {
    padding: 0.52rem 0.62rem calc(7.1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHeroActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.36rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.04rem !important;
  }

  .opsConsoleShell .fieldHeroActions .fieldOfflineCatalogStatus:not(.fieldActionOutboxStatus) {
    display: none !important;
  }

  .opsConsoleShell .fieldHeroActions .fieldActionOutboxStatus {
    display: none !important;
  }

  .opsConsoleShell .fieldTechContactSettings {
    flex: 0 0 5.8rem !important;
    min-width: 5.8rem !important;
    max-width: 5.8rem !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldActionOutboxStatus {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 4.5rem !important;
    max-width: 7rem !important;
    min-height: 2.25rem !important;
    border-radius: 0.48rem !important;
    padding: 0.24rem 0.48rem !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary span {
    display: grid !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary em,
  .opsConsoleShell .fieldTechContactSettings > summary small,
  .opsConsoleShell .fieldActionOutboxStatus small {
    display: none !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary b,
  .opsConsoleShell .fieldActionOutboxStatus b,
  .opsConsoleShell .fieldHeroActions > button {
    overflow: hidden !important;
    font-size: 0.74rem !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldModeSwitch {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.26rem !important;
    overflow: hidden !important;
    border-radius: 0.5rem !important;
    padding: 0.22rem !important;
  }

  .opsConsoleShell .fieldModeSwitch button {
    min-width: 0 !important;
    min-height: 2.05rem !important;
    padding: 0 0.24rem !important;
    border-radius: 0.38rem !important;
    font-size: 0.66rem !important;
  }

  .opsConsoleShell .fieldRangeSwitch button {
    min-width: 4.95rem !important;
    min-height: 2rem !important;
  }

  .opsConsoleShell .fieldMainGrid {
    padding-bottom: 1.2rem !important;
  }

  .opsConsoleShell .fieldCard {
    border-radius: 0.48rem !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .fieldCardHeader {
    margin: -0.5rem -0.5rem 0.42rem !important;
    padding: 0.48rem 0.5rem !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Visual audit 2026-06-08: keep mobile field day mode job-first and native-app safe. */
@media (max-width: 760px) {
  .opsConsoleShell .fieldHero p,
  .opsConsoleShell .surfaceSubtitle {
    display: none !important;
  }

  .opsConsoleShell .fieldMainGrid {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }

  .opsConsoleShell .fieldJobsCard.activePanel {
    order: 2 !important;
    margin-bottom: 0.52rem !important;
  }

  .opsConsoleShell .fieldJobsCard .fieldEmpty {
    display: grid !important;
    min-height: 5.8rem !important;
    margin: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: 0.58rem !important;
    background: #f8fbff !important;
    color: #536273 !important;
    font-weight: 700 !important;
  }

  .opsConsoleShell .fieldFocusCard.empty,
  .opsConsoleShell .fieldScheduleRail {
    display: none !important;
  }

  .opsConsoleShell .fieldFocusCard.hasJob {
    order: 1 !important;
    display: block !important;
    margin-bottom: 0.52rem !important;
  }

  .opsConsoleShell .fieldMetricGrid {
    display: none !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock {
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldPrimaryActionDock a {
    min-height: 2.75rem !important;
    border-radius: 0.52rem !important;
  }

  .opsConsoleShell .fieldCardHeader p {
    display: none !important;
  }
}

/* Visual audit 2026-06-08: Calls defaults to callback/SMS work, not an idle SIP control board. */
.opsConsoleShell .phoneConsole.idle {
  gap: 0.46rem !important;
  margin: 0.58rem 0.72rem 0 !important;
  padding: 0.54rem 0.62rem !important;
}

.opsConsoleShell .phoneConsole.idle .phoneStatusStrip {
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.opsConsoleShell .phoneConsole.idle .phoneReadinessStrip,
.opsConsoleShell .phoneConsole.idle .phonePrimaryControls,
.opsConsoleShell .phoneConsole.idle .phoneUtilityControls {
  display: none !important;
}

.opsConsoleShell .phoneConsole.idle .phoneRingControls {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .phoneConsole.idle .phoneRingControls label {
  min-height: 2rem !important;
  border-radius: 0.42rem !important;
  padding: 0.32rem 0.46rem !important;
}

.opsConsoleShell .phoneConsole.idle .phoneRingControls label small,
.opsConsoleShell .phoneConsole.idle .phoneRingControls button:last-child {
  display: none !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneConsole.idle {
    margin: 0.44rem 0.55rem 0 !important;
  }

  .opsConsoleShell .phoneConsole.idle .phoneRingControls {
    grid-template-columns: 1fr !important;
  }
}

/* Visual audit 2026-06-08: mobile Field no-job and Mail drawer must feel native, not like legacy panes. */
.mobileSurfaceMenuLayer {
  display: none;
}

@media (max-width: 920px) {
  .opsConsoleShell .mobileSurfaceMenuLayer.mobileOnly {
    display: block !important;
    position: fixed !important;
    inset: var(--ops-header-height) 0 calc(4.9rem + env(safe-area-inset-bottom)) 0 !important;
    z-index: 88 !important;
  }

  .opsConsoleShell .mobileSurfaceMenuScrim {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.28) !important;
    padding: 0 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    width: min(20rem, calc(100vw - 1.1rem)) !important;
    max-width: calc(100vw - 1.1rem) !important;
    flex-direction: column !important;
    gap: 0.34rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    border-left: 0 !important;
    border-radius: 0 0.75rem 0.75rem 0 !important;
    background: #ffffff !important;
    box-shadow: 0 1.2rem 2.4rem rgba(15, 23, 42, 0.2) !important;
    padding: 0.62rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .mobileSurfaceMenu header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.46rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
    padding-bottom: 0.46rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header > span {
    display: grid !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    place-items: center !important;
    border-radius: 0.42rem !important;
    background: #172033 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 0.9rem !important;
    font-weight: 880 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header button {
    min-height: 2rem !important;
    border-radius: 0.42rem !important;
    padding: 0 0.58rem !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button:not(.mobileSurfaceMenuScrim) {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.48rem !important;
    width: 100% !important;
    min-height: 3.1rem !important;
    justify-content: start !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 0.5rem !important;
    background: #f8fafc !important;
    color: #172033 !important;
    padding: 0.46rem 0.54rem !important;
    text-align: left !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button.active {
    border-color: rgba(37, 99, 235, 0.46) !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button span {
    display: grid !important;
    gap: 0.08rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button strong,
  .opsConsoleShell .mobileSurfaceMenu > button small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button strong {
    font-size: 0.86rem !important;
    font-weight: 880 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button small {
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 760 !important;
  }
}

.opsConsoleShell .fieldTodayEmptyCard {
  display: grid !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-height: 8.2rem !important;
  align-content: center !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  border-radius: 0.62rem !important;
  background: #ffffff !important;
  padding: 0.82rem !important;
  color: #172033 !important;
}

.opsConsoleShell .fieldTodayEmptyKicker {
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldTodayEmptyCard strong {
  font-size: 1.06rem !important;
  line-height: 1.18 !important;
}

.opsConsoleShell .fieldTodayEmptyCard p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
}

.opsConsoleShell .fieldTodayEmptyActions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .fieldTodayEmptyActions button {
  min-width: 0 !important;
  min-height: 2.28rem !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 0.46rem !important;
  background: #f8fafc !important;
  color: #1d4ed8 !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
}

@media (max-width: 760px) {
  .opsConsoleShell .sidebar.mobileDrawerOpen {
    overflow-x: hidden !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen {
    overscroll-behavior: contain !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .mailboxList,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderList,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagList {
    max-height: 10.4rem !important;
    gap: 0.08rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .mailboxList::-webkit-scrollbar,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderList::-webkit-scrollbar,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagList::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .sidebarCount,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderRowMeta,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagRow small {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .mailboxButton,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderRow,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagRow {
    min-height: 2rem !important;
    padding: 0.26rem 0.38rem !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen .mailboxButtonTop strong,
  .opsConsoleShell .sidebar.mobileDrawerOpen .folderRowLabel,
  .opsConsoleShell .sidebar.mobileDrawerOpen .tagRow span:not(.tagDot) {
    font-size: 0.88rem !important;
    line-height: 1.08 !important;
  }

  .opsConsoleShell .mobileReferenceTitle span,
  .opsConsoleShell .mobileAppTitle.mobileOnly span {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldHeroActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(4.3rem, auto)) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldTechContactSettings {
    min-width: 0 !important;
    max-width: none !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldRangeSwitch {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldJobsCard .fieldCardHeader {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldJobList {
    display: block !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldTodayEmptyCard {
    min-height: 10.4rem !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldTodayEmptyActions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Visual audit 2026-06-08: Admin and Customer records must not clip critical controls. */
.opsConsoleShell .adminRoleOverview div {
  min-height: 3.25rem !important;
  overflow: hidden !important;
}

.opsConsoleShell .adminRoleOverview strong,
.opsConsoleShell .adminRoleOverview span,
.opsConsoleShell .adminRoleOverview em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceRecordTabs {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.opsConsoleShell .serviceRecordTabs::-webkit-scrollbar {
  display: none !important;
}

.opsConsoleShell .serviceRecordTabs button {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

/* Field job screen slice: selected jobs should read like the technician app, not a KPI dashboard. */
.opsConsoleShell .fieldJobOverviewCard {
  display: grid !important;
  gap: 0.52rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  padding: 0.66rem !important;
}

.opsConsoleShell .fieldJobOverviewTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldJobOverviewTop span,
.opsConsoleShell .fieldJobOverviewTop strong,
.opsConsoleShell .fieldJobOverviewTop small,
.opsConsoleShell .fieldJobOverviewFacts dd,
.opsConsoleShell .fieldJobOverviewCard p {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .fieldJobOverviewTop strong {
  display: block !important;
  color: #111827 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldJobOverviewTop small {
  display: block !important;
  margin-top: 0.12rem !important;
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 740 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldJobOverviewTop em {
  align-self: start !important;
  border-radius: 0.28rem !important;
  background: #334155 !important;
  color: #ffffff !important;
  padding: 0.18rem 0.42rem !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldJobOverviewCard p {
  display: -webkit-box !important;
  margin: 0 !important;
  color: #334155 !important;
  font-size: 0.83rem !important;
  font-weight: 720 !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.opsConsoleShell .fieldJobOverviewFacts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  margin: 0 !important;
}

.opsConsoleShell .fieldJobOverviewFacts div {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(203, 213, 225, 0.82) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  padding: 0.42rem 0.48rem !important;
}

.opsConsoleShell .fieldJobOverviewFacts dt {
  color: #64748b !important;
  font-size: 0.66rem !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .fieldJobOverviewFacts dd {
  margin: 0 !important;
  color: #172033 !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldJobOverviewTags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.32rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldJobOverviewTags span {
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #e0f2fe !important;
  color: #075985 !important;
  padding: 0.2rem 0.46rem !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .opsConsoleShell .fieldJobOverviewCard {
    gap: 0.46rem !important;
    border-radius: 0.58rem !important;
    padding: 0.7rem !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts div {
    grid-template-columns: 4.4rem minmax(0, 1fr) !important;
    align-items: baseline !important;
  }

  .opsConsoleShell .fieldJobOverviewTop strong {
    white-space: normal !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceRecordTabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordTabs button {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.46rem !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    overflow-x: hidden !important;
  }

  .opsConsoleShell .adminPermissionSections {
    overflow-x: hidden !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell {
    padding: 0.42rem 0.5rem calc(6.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminStatusBar,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .adminStatusBar {
    display: none !important;
  }

  .opsConsoleShell .adminHeaderStats,
  .opsConsoleShell .adminReportStats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminHeaderStats span,
  .opsConsoleShell .adminReportStats span {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.35rem !important;
  }

  .opsConsoleShell .adminQuickFilters {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .opsConsoleShell .adminTriageCounts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminTriageCounts span {
    flex: initial !important;
    min-width: 0 !important;
    min-height: 2.25rem !important;
  }

  .opsConsoleShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    flex: initial !important;
    min-height: 3.2rem !important;
  }

  .opsConsoleShell .adminReportStats span:nth-child(n + 4) {
    display: none !important;
  }

  .opsConsoleShell .adminReportTable {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminReportTable [role="row"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .adminReportTable [role="cell"],
  .opsConsoleShell .adminReportTable strong,
  .opsConsoleShell .adminReportTable small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .permissionMatrixRow {
    overflow: hidden !important;
  }

  .opsConsoleShell .permissionStateControl {
    grid-template-columns: minmax(4.8rem, 0.55fr) minmax(0, 1fr) !important;
  }
}

/* Visual QA 2026-06-08: Admin mobile must never widen the whole app viewport. */
@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .adminSurface,
  .opsConsoleShell .adminPermissionLayout,
  .opsConsoleShell .adminReportPanel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminPermissionNav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar,
  .opsConsoleShell .adminPermissionNav::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters button,
  .opsConsoleShell .adminPermissionNav a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }
}

/* Visual QA 2026-06-08: Field mobile should read like a technician Today screen, not a nested dashboard. */
.opsConsoleShell .permissionRoleShort {
  display: none !important;
}

/* Visual QA 2026-06-08: Admin must be a scan-first settings console, especially on mobile. */
@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell {
    gap: 0.38rem !important;
    padding: 0.36rem 0.44rem calc(5.8rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    border-radius: 0 !important;
    padding: 0.44rem !important;
  }

  .opsConsoleShell .adminHeader {
    min-height: 0 !important;
  }

  .opsConsoleShell .adminHeaderStats,
  .opsConsoleShell .adminReportStats,
  .opsConsoleShell .adminTriageCounts {
    gap: 0.26rem !important;
  }

  .opsConsoleShell .adminHeaderStats span,
  .opsConsoleShell .adminReportStats span,
  .opsConsoleShell .adminTriageCounts span {
    min-height: 2rem !important;
    padding: 0.24rem 0.34rem !important;
    font-size: 0.66rem !important;
  }

  .opsConsoleShell .adminRoleOverview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    min-height: 2.25rem !important;
    padding: 0.28rem 0.34rem !important;
  }

  .opsConsoleShell .adminRoleOverview div span:nth-of-type(n + 2),
  .opsConsoleShell .adminRoleOverview div em {
    display: none !important;
  }

  .opsConsoleShell .adminTriageBar {
    gap: 0.32rem !important;
  }

  .opsConsoleShell .adminQuickFilters {
    gap: 0.24rem !important;
  }

  .opsConsoleShell .adminQuickFilters button,
  .opsConsoleShell .adminPermissionSearch input,
  .opsConsoleShell .adminPermissionSearch button {
    min-height: 1.86rem !important;
    padding: 0 0.44rem !important;
    font-size: 0.7rem !important;
  }

  .opsConsoleShell .adminReportPanel {
    max-height: 8.4rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .adminControlBand {
    max-height: 8.2rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .adminPolicyList {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .adminPolicyList span,
  .opsConsoleShell .adminRuleCard {
    min-height: 2.35rem !important;
    padding: 0.36rem !important;
  }

  .opsConsoleShell .adminRulePanel {
    max-height: 18rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .adminRuleFacts {
    gap: 0.32rem !important;
  }

  .opsConsoleShell .adminRuleFacts span {
    min-width: 0 !important;
    padding: 0.32rem !important;
  }

  .opsConsoleShell .adminRuleFacts select,
  .opsConsoleShell .adminRuleCard select {
    min-height: 1.92rem !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .adminRuleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .adminRuleCard {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.28rem !important;
  }

  .opsConsoleShell .adminRuleCard > span {
    justify-self: start !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    gap: 0.36rem !important;
  }

  .opsConsoleShell .adminPermissionNav {
    height: 2.24rem !important;
  }

  .opsConsoleShell .adminPermissionNav a {
    flex-basis: 7.1rem !important;
    min-height: 2.12rem !important;
    padding: 0.26rem 0.38rem !important;
  }

  .opsConsoleShell .adminPermissionSection {
    padding: 0.42rem !important;
  }

  .opsConsoleShell .adminPermissionSectionHeader {
    min-height: 2rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .permissionMatrix {
    display: grid !important;
    gap: 0.36rem !important;
  }

  .opsConsoleShell .permissionMatrixRow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
    padding: 0.42rem !important;
  }

  .opsConsoleShell .permissionAbility,
  .opsConsoleShell .permissionEnforcement {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .permissionAbility strong {
    font-size: 0.82rem !important;
    line-height: 1.14 !important;
  }

  .opsConsoleShell .permissionStateControl {
    grid-template-columns: 2.35rem minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.26rem !important;
  }

  .opsConsoleShell .permissionStateSummary {
    min-height: 1.86rem !important;
    padding: 0.18rem 0.24rem !important;
  }

  .opsConsoleShell .permissionRoleFull,
  .opsConsoleShell .permissionStateSummary em {
    display: none !important;
  }

  .opsConsoleShell .permissionRoleShort {
    display: inline !important;
  }

  .opsConsoleShell .permissionRoleLabel {
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .permissionStateControl select {
    width: 100% !important;
    min-height: 1.86rem !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .permissionEnforcement {
    justify-self: start !important;
    min-height: 1.6rem !important;
    padding: 0.18rem 0.34rem !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .permissionRoleFull {
    display: inline !important;
  }
}

@media (max-width: 760px) {
  .opsConsoleShell .fieldAppShell {
    gap: 0.46rem !important;
    padding: 0.46rem 0.52rem calc(6.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHeroActions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .fieldTechContactSettings {
    min-width: 0 !important;
    max-width: none !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldTechContactSettings > summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 2.1rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.28rem !important;
    font-size: 0.64rem !important;
    line-height: 1.05 !important;
  }

  .opsConsoleShell .fieldModeSwitch {
    gap: 0.16rem !important;
    border-radius: 0.42rem !important;
    padding: 0.16rem !important;
  }

  .opsConsoleShell .fieldModeSwitch button {
    min-height: 1.9rem !important;
    border-radius: 0.3rem !important;
    font-size: 0.6rem !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldJobsCard.activePanel {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldJobList {
    display: grid !important;
    gap: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.noJobs .fieldTodayEmptyCard {
    min-height: 7.1rem !important;
    align-content: start !important;
    border-radius: 0.46rem !important;
    box-shadow: none !important;
    padding: 0.78rem !important;
  }

  .opsConsoleShell .fieldTodayEmptyCard strong {
    font-size: 1.05rem !important;
    line-height: 1.14 !important;
  }

  .opsConsoleShell .fieldTodayEmptyCard p {
    margin: 0 !important;
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .fieldTodayEmptyActions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }

  .opsConsoleShell .fieldTodayEmptyActions button {
    min-height: 2.2rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.28rem !important;
    font-size: 0.68rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu {
    width: min(18.5rem, calc(100vw - 1rem)) !important;
    gap: 0.26rem !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header {
    gap: 0.36rem !important;
    padding-bottom: 0.36rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header > span {
    width: 1.8rem !important;
    height: 1.8rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button:not(.mobileSurfaceMenuScrim) {
    grid-template-columns: 1.7rem minmax(0, 1fr) !important;
    gap: 0.36rem !important;
    min-height: 2.7rem !important;
    border-radius: 0.42rem !important;
    padding: 0.38rem 0.44rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button small {
    font-size: 0.66rem !important;
  }
}

/* Visual QA 2026-06-08: Field mobile controls should scroll like native toolbars, not compress into tiny labels. */
@media (max-width: 760px) {
  .opsConsoleShell .fieldHeroActions,
  .opsConsoleShell .fieldModeSwitch,
  .opsConsoleShell .fieldRangeSwitch {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    margin-right: -0.52rem !important;
    margin-left: -0.52rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldHeroActions::-webkit-scrollbar,
  .opsConsoleShell .fieldModeSwitch::-webkit-scrollbar,
  .opsConsoleShell .fieldRangeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldHeroActions {
    gap: 0.36rem !important;
    padding: 0 0.52rem 0.08rem !important;
  }

  .opsConsoleShell .fieldModeSwitch {
    gap: 0.34rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 0.52rem 0.08rem !important;
  }

  .opsConsoleShell .fieldRangeSwitch {
    gap: 0.32rem !important;
    padding: 0 0.52rem 0.06rem !important;
  }

  .opsConsoleShell .fieldTechContactSettings,
  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldHeroActions > span,
  .opsConsoleShell .fieldModeSwitch button,
  .opsConsoleShell .fieldRangeSwitch button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .opsConsoleShell .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldHeroActions > span {
    min-height: 2.45rem !important;
    padding: 0 0.66rem !important;
    font-size: 0.76rem !important;
  }

  .opsConsoleShell .fieldModeSwitch button,
  .opsConsoleShell .fieldRangeSwitch button {
    min-height: 2.44rem !important;
    padding: 0 0.78rem !important;
    font-size: 0.78rem !important;
  }
}

/* Visual QA 2026-06-08: mobile menus are modal overlays; only true ringing calls may interrupt them. */
@media (max-width: 920px) {
  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuLayer.mobileOnly {
    inset: var(--ops-header-height) 0 0 0 !important;
    z-index: 180 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenu {
    bottom: 0 !important;
    max-height: calc(100svh - var(--ops-header-height)) !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .mobileSidebarScrim {
    bottom: 0 !important;
    z-index: 180 !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen {
    bottom: 0 !important;
    z-index: 190 !important;
    max-height: calc(100svh - var(--ops-header-height)) !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen .mailboxList,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen .folderList,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen .tagList,
  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenu {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneGlobalCallTray {
    z-index: 104 !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing {
    z-index: 240 !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .phoneGlobalCallTray:not(.ringing),
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .phoneGlobalCallTray:not(.ringing) {
    display: none !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen .mailboxDrawerCloseButton {
    display: grid !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    place-items: center !important;
    border: 1px solid rgba(203, 213, 225, 0.86) !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    color: #111827 !important;
  }
}

/* Mobile interruption budget: missed callbacks stay reachable without covering the work surface. */
@media (max-width: 920px) {
  .opsConsoleShell .phoneGlobalCallTray.callback {
    right: 0.62rem !important;
    bottom: calc(4.92rem + env(safe-area-inset-bottom)) !important;
    left: 0.62rem !important;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto !important;
    min-height: 2.72rem !important;
    max-height: 2.92rem !important;
    gap: 0.38rem !important;
    padding: 0.34rem 0.42rem !important;
    border-radius: 0.62rem !important;
    box-shadow: 0 -0.25rem 0.82rem rgba(16, 24, 40, 0.1) !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallIcon {
    width: 1.55rem !important;
    height: 1.55rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallCopy strong {
    max-width: 100% !important;
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions {
    gap: 0.22rem !important;
    padding-right: 1.75rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .answerButton,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .secondaryAction:nth-of-type(2) {
    min-width: 3.35rem !important;
    min-height: 1.86rem !important;
    padding: 0 0.42rem !important;
    font-size: 0.68rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .phoneGlobalCloseButton {
    width: 1.64rem !important;
    min-width: 1.64rem !important;
    height: 1.64rem !important;
    min-height: 1.64rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing {
    min-height: 4.8rem !important;
    max-height: 7rem !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly,
  .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .answerButton,
  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .hangupButton,
  .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .answerButton,
  .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .hangupButton {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 2.45rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.58rem !important;
    font-size: 0.86rem !important;
  }
}

/* Visual QA 2026-06-08: Field and Chat must behave like native mobile app screens. */
@media (max-width: 920px) {
  .opsConsoleShell .chatShell,
  .opsConsoleShell .fieldAppShell {
    height: var(--ops-mobile-workspace-height) !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatShell {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .chatConversationRail:not(.mobileActive),
  .opsConsoleShell .chatDetailWorkbench:not(.mobileActive),
  .opsConsoleShell .chatMain:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .chatConversationRail.mobileActive,
  .opsConsoleShell .chatDetailWorkbench.mobileActive,
  .opsConsoleShell .chatMain.mobileActive {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatRailHeader,
  .opsConsoleShell .chatTriageBar,
  .opsConsoleShell .chatHeader,
  .opsConsoleShell .chatComposer {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .chatHeader {
    display: grid !important;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto !important;
    gap: 0.38rem !important;
    align-items: center !important;
    min-height: 3rem !important;
    padding: 0.44rem 0.52rem !important;
  }

  .opsConsoleShell .chatHeader h2 {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 1rem !important;
    line-height: 1.14 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatHeaderMeta,
  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction,
  .opsConsoleShell .chatHeaderActions .chatRefreshAction span {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions {
    display: grid !important;
    grid-template-columns: 2.15rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction {
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly,
  .opsConsoleShell .chatMobileMemberPanel.mobileOnly {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly {
    display: flex !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 0.34rem 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly > span {
    flex: 1 0 8.5rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly a,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly button {
    flex: 0 0 auto !important;
    min-height: 2.05rem !important;
    padding: 0 0.52rem !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatComposer {
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
    padding: 0.44rem 0.52rem calc(0.44rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .chatComposerInput {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.4rem !important;
    align-items: end !important;
  }

  .opsConsoleShell .chatComposer textarea {
    min-height: 2.55rem !important;
    max-height: 6.4rem !important;
    resize: none !important;
  }

  .opsConsoleShell .chatMessageActions,
  .opsConsoleShell .chatReactions {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .chatMessageActions::-webkit-scrollbar,
  .opsConsoleShell .chatReactions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.46rem !important;
    padding: 0.5rem 0.62rem calc(5.4rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldHero,
  .opsConsoleShell .fieldModeSwitch,
  .opsConsoleShell .fieldRangeSwitch {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .fieldHero {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldHero > div:first-child,
  .opsConsoleShell .fieldMetricGrid,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"] .fieldRangeSwitch {
    display: none !important;
  }

  .opsConsoleShell .fieldHeroActions,
  .opsConsoleShell .fieldModeSwitch {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    margin-right: -0.62rem !important;
    margin-left: -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0.62rem 0.08rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldHeroActions::-webkit-scrollbar,
  .opsConsoleShell .fieldModeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldHeroActions > span,
  .opsConsoleShell .fieldTechContactSettings,
  .opsConsoleShell .fieldModeSwitch button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .opsConsoleShell .fieldHeroActions > button,
  .opsConsoleShell .fieldHeroActions > span,
  .opsConsoleShell .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldModeSwitch button {
    min-height: 2.36rem !important;
    border-radius: 0.44rem !important;
    padding: 0 0.68rem !important;
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }

  .opsConsoleShell .fieldMainGrid {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldFocusCard.hasJob {
    order: 1 !important;
  }

  .opsConsoleShell .fieldJobsCard.activePanel {
    order: 2 !important;
  }

  .opsConsoleShell .fieldScheduleRail,
  .opsConsoleShell .fieldFocusFacts,
  .opsConsoleShell .fieldPacketList {
    display: none !important;
  }

  .opsConsoleShell .fieldCard,
  .opsConsoleShell .fieldJobOverviewCard,
  .opsConsoleShell .fieldCloseoutSummary,
  .opsConsoleShell .fieldCompletionChecklist {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldFocusBody {
    display: grid !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts,
  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldSecondaryActionRail,
  .opsConsoleShell .fieldPacketGrid,
  .opsConsoleShell .fieldCompletionChecklist,
  .opsConsoleShell .fieldWorkLaneSwitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldWorkLaneSwitch button {
    min-width: 0 !important;
    min-height: 2.5rem !important;
    border-radius: 0.42rem !important;
    padding: 0.32rem 0.42rem !important;
  }

  .opsConsoleShell .fieldWorkLaneSwitch {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    background: #ffffff !important;
    padding: 0.36rem 0 !important;
  }
}

/* Visual QA 2026-06-08: Phone mobile is a callback/SMS screen, not a stacked dialer/status page. */
.opsConsoleShell .phoneMobileBackButton {
  display: none !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .phoneAppShell[data-mobile-phone-pane="threads"] .phoneDetail,
  .opsConsoleShell .phoneAppShell[data-mobile-phone-pane="detail"] .phoneRail {
    display: none !important;
  }

  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .phoneRail {
    padding: 0.5rem 0.62rem calc(5.45rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phoneDetail {
    padding: 0.5rem 0.62rem calc(5.45rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phonePanelHeader,
  .opsConsoleShell .phoneToolbar {
    flex: 0 0 auto !important;
    min-height: 2.85rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .opsConsoleShell .phonePanelHeader h2,
  .opsConsoleShell .phoneToolbar h3 {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  .opsConsoleShell .phoneRailStats,
  .opsConsoleShell .phoneSegment,
  .opsConsoleShell .phoneToolbarActions,
  .opsConsoleShell .phoneCallbackActions {
    flex: 0 0 auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneRailStats::-webkit-scrollbar,
  .opsConsoleShell .phoneSegment::-webkit-scrollbar,
  .opsConsoleShell .phoneToolbarActions::-webkit-scrollbar,
  .opsConsoleShell .phoneCallbackActions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .phoneRailStats {
    display: flex !important;
    gap: 0.36rem !important;
  }

  .opsConsoleShell .phoneRailStats span {
    flex: 0 0 auto !important;
    min-width: 5rem !important;
    min-height: 2.65rem !important;
    border-radius: 0.5rem !important;
  }

  .opsConsoleShell .phoneSegment {
    display: flex !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .phoneSegment button,
  .opsConsoleShell .phoneToolbarActions button,
  .opsConsoleShell .phoneCallbackActions button {
    flex: 0 0 auto !important;
    min-height: 2.28rem !important;
    border-radius: 0.44rem !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneThread {
    min-height: 3.45rem !important;
    border-radius: 0.48rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    flex: 0 0 auto !important;
    margin: 0.46rem 0 !important;
    padding: 0.52rem !important;
    border-radius: 0.52rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .phoneCallbackQueue {
    max-height: 12rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneMobileBackButton.mobileOnly {
    display: inline-flex !important;
  }

  .opsConsoleShell .phoneAppShell[data-mobile-phone-pane="threads"] .phoneMobileBackButton {
    display: none !important;
  }

  .opsConsoleShell .phoneComposer {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    margin: 0.5rem 0 0 !important;
    border-radius: 0.52rem !important;
  }
}

/* Visual QA 2026-06-08: mobile surfaces must feel native and never get stuck behind hidden phone/status panes. */
@media (max-width: 920px) {
  .opsConsoleShell {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .phoneAppShell.phoneAppShellHidden,
  .opsConsoleShell .phoneAppShell[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: var(--ops-mobile-workspace-height) !important;
    max-height: var(--ops-mobile-workspace-height) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceRecordsPanel,
  .opsConsoleShell .serviceDetailPane,
  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminAppShell {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .mobileSurfaceMenu {
    width: min(15.5rem, calc(100vw - 0.75rem)) !important;
    max-width: calc(100vw - 0.75rem) !important;
    gap: 0.22rem !important;
    padding: 0.44rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header {
    min-height: 2.35rem !important;
    gap: 0.3rem !important;
    padding-bottom: 0.34rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header > span {
    width: 1.72rem !important;
    height: 1.72rem !important;
    border-radius: 0.38rem !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header button {
    min-height: 1.9rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.7rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button:not(.mobileSurfaceMenuScrim) {
    grid-template-columns: 1.55rem minmax(0, 1fr) !important;
    min-height: 2.34rem !important;
    gap: 0.3rem !important;
    border-radius: 0.38rem !important;
    padding: 0.28rem 0.38rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button strong {
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button small {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminPermissionNav,
  .opsConsoleShell .fieldHeroActions,
  .opsConsoleShell .fieldModeSwitch,
  .opsConsoleShell .fieldRangeSwitch,
  .opsConsoleShell .phoneRailStats,
  .opsConsoleShell .phoneSegment,
  .opsConsoleShell .phoneToolbarActions,
  .opsConsoleShell .phoneCallbackActions,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly,
  .opsConsoleShell .serviceMobileNav.mobileOnly {
    max-width: 100% !important;
    contain: inline-size !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar,
  .opsConsoleShell .adminPermissionNav::-webkit-scrollbar,
  .opsConsoleShell .fieldHeroActions::-webkit-scrollbar,
  .opsConsoleShell .fieldModeSwitch::-webkit-scrollbar,
  .opsConsoleShell .fieldRangeSwitch::-webkit-scrollbar,
  .opsConsoleShell .phoneRailStats::-webkit-scrollbar,
  .opsConsoleShell .phoneSegment::-webkit-scrollbar,
  .opsConsoleShell .phoneToolbarActions::-webkit-scrollbar,
  .opsConsoleShell .phoneCallbackActions::-webkit-scrollbar,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly::-webkit-scrollbar,
  .opsConsoleShell .serviceMobileNav.mobileOnly::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminPermissionNav a {
    flex: 0 0 6.4rem !important;
    min-width: 0 !important;
    max-width: 6.4rem !important;
  }

  .opsConsoleShell .adminPermissionNav a strong,
  .opsConsoleShell .adminPermissionNav a span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Visual QA 2026-06-08: Admin mobile panels must stay border-box inside the native viewport. */
@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .adminAppShell > *,
  .opsConsoleShell .adminSurface,
  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    align-self: stretch !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminPermissionNav {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Visual QA 2026-06-08: mobile tap targets and scroll owners must win after all legacy shell locks. */
@media (max-width: 920px) {
  .opsConsoleShell .mobileTopIconButton {
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  .opsConsoleShell .mobileTopIconButton .mailIcon,
  .opsConsoleShell .mobileAppDock .mailIcon,
  .opsConsoleShell .mobileSurfaceMenu .mailIcon {
    pointer-events: none !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .mobileSidebarScrim,
  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuScrim {
    touch-action: manipulation !important;
  }

  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .phoneAppShell {
    min-height: 0 !important;
    touch-action: pan-y !important;
  }

  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldScheduleHeaderActions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.42rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleHeaderActions > span {
    min-width: 2rem !important;
    text-align: center !important;
  }

  .opsConsoleShell .fieldScheduleHeaderActions > button {
    min-width: 3.4rem !important;
    min-height: 2rem !important;
    border-radius: 0.42rem !important;
    padding: 0 0.55rem !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
  }
}

/* Visual audit 2026-06-08: mobile surfaces stay work-first; callbacks stop pinning the app under phone chrome. */
@media (max-width: 920px) {
  .opsConsoleShell .phoneGlobalCallTray.callback {
    display: none !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing {
    display: grid !important;
  }

  .opsConsoleShell .mobileSurfaceMenu {
    width: min(17.5rem, calc(100vw - 1.35rem)) !important;
    max-width: calc(100vw - 1.35rem) !important;
    gap: 0.26rem !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header {
    padding-bottom: 0.36rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header > span {
    display: none !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button:not(.mobileSurfaceMenuScrim) {
    min-height: 2.6rem !important;
    grid-template-columns: 1.65rem minmax(0, 1fr) !important;
    gap: 0.38rem !important;
    padding: 0.34rem 0.42rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu > button small {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleLoadStrip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleLoadCard {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.2rem !important;
    padding: 0.44rem !important;
  }

  .opsConsoleShell .fieldScheduleLoadCard small {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminPermissionNav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminQuickFilters button,
  .opsConsoleShell .adminPermissionNav a {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .adminQuickFilters button {
    padding: 0 0.36rem !important;
  }

  .opsConsoleShell .adminPermissionNav a strong,
  .opsConsoleShell .adminPermissionNav a span {
    white-space: normal !important;
  }

  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phoneDetail {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    max-height: 16rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Mobile UX repair 2026-06-08: keep phone/native surfaces work-first after older visual QA layers. */
@media (max-width: 920px) {
  .opsConsoleShell {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .desktopWindowBar {
    flex: 0 0 var(--ops-header-height) !important;
  }

  .opsConsoleShell .mobileAppDock {
    z-index: 170 !important;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.hasMobilePreview .messageList {
    padding-bottom: calc(6.2rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .mobileReaderPreview {
    position: fixed !important;
    right: 0.62rem !important;
    bottom: calc(4.62rem + env(safe-area-inset-bottom)) !important;
    left: 0.62rem !important;
    z-index: 155 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.42rem !important;
    max-height: 4.75rem !important;
    margin: 0 !important;
    padding: 0.5rem 0.56rem !important;
    overflow: hidden !important;
    border-radius: 0.62rem !important;
    box-shadow: 0 -0.65rem 1.65rem rgba(15, 23, 42, 0.12) !important;
  }

  .opsConsoleShell .mobileReaderPreviewGrip,
  .opsConsoleShell .mobileReaderPreviewMeta,
  .opsConsoleShell .mobileReaderPreview p {
    display: none !important;
  }

  .opsConsoleShell .mobileReaderPreviewHeader {
    min-width: 0 !important;
  }

  .opsConsoleShell .mobileReaderPreviewHeader button {
    min-height: 2.2rem !important;
    font-size: 0.84rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  .opsConsoleShell .mobileReaderPreviewHeader time {
    display: none !important;
  }

  .opsConsoleShell .mobileReaderPreviewActions {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.12rem !important;
    margin: 0 !important;
  }

  .opsConsoleShell .mobileReaderPreviewActions button {
    width: 2.05rem !important;
    min-width: 2.05rem !important;
    min-height: 2.2rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .mobileReaderPreviewActions button span {
    display: none !important;
  }

  .opsConsoleShell .sidebar.mobileDrawerOpen {
    top: var(--ops-header-height) !important;
    bottom: calc(4.45rem + env(safe-area-inset-bottom)) !important;
    z-index: 190 !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .mobileSidebarScrim {
    top: var(--ops-header-height) !important;
    bottom: calc(4.45rem + env(safe-area-inset-bottom)) !important;
    z-index: 180 !important;
  }

  .opsConsoleShell .fieldAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    padding: 0.5rem 0.62rem calc(0.72rem + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldMainGrid {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobsCard.activePanel {
    display: none !important;
  }

  .opsConsoleShell .fieldFocusCard.hasJob {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldFocusCard.hasJob > .fieldCardHeader {
    display: none !important;
  }

  .opsConsoleShell .fieldJobOverviewCard,
  .opsConsoleShell .fieldCustomerContactEditor,
  .opsConsoleShell .fieldCloseoutSummary,
  .opsConsoleShell .fieldCompletionChecklist,
  .opsConsoleShell .fieldMaskedCallPolicy,
  .opsConsoleShell .fieldPacketStatus {
    border-radius: 0.48rem !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts div {
    grid-template-columns: 4.7rem minmax(0, 1fr) !important;
  }

  .opsConsoleShell .fieldJobOverviewFacts dd {
    white-space: normal !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldSecondaryActionRail,
  .opsConsoleShell .fieldPacketGrid,
  .opsConsoleShell .fieldCompletionChecklist,
  .opsConsoleShell .fieldWorkLaneSwitch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldSecondaryActionRail a {
    min-height: 2.7rem !important;
    padding: 0.34rem 0.42rem !important;
  }
}

/* Mobile closeout repair 2026-06-08: Field selling should feel like a native job flow, not a dense admin grid. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldSalesComposer {
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldHeroActions {
    position: relative !important;
    z-index: 14 !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .fieldSalesSummary {
    display: none !important;
  }

  .opsConsoleShell .fieldOfflineReadiness {
    display: grid !important;
    gap: 0.36rem !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldOfflineReadinessItems {
    display: none !important;
  }

  .opsConsoleShell .fieldOfflineReadinessActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldOfflineReadinessActions button,
  .opsConsoleShell .fieldCloseoutReadiness > button,
  .opsConsoleShell .fieldSalesForms button,
  .opsConsoleShell .fieldTemplateStarter button,
  .opsConsoleShell .fieldCustomEstimateOptionComposer button,
  .opsConsoleShell .fieldCustomEstimateLineComposer button,
  .opsConsoleShell .fieldEstimateSignatureUpload button {
    min-width: 0 !important;
    min-height: 2.36rem !important;
    border-radius: 0.42rem !important;
    padding: 0.32rem 0.46rem !important;
    font-size: 0.76rem !important;
    line-height: 1.12 !important;
  }

  .opsConsoleShell .fieldCloseoutReadiness {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.34rem !important;
    margin-right: -0.62rem !important;
    margin-left: -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0.62rem 0.08rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldCloseoutReadiness::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldCloseoutReadiness > button {
    flex: 0 0 6.6rem !important;
    min-height: 3.05rem !important;
    gap: 0.08rem !important;
    text-align: left !important;
  }

  .opsConsoleShell .fieldCloseoutReadiness > button.secondaryAction {
    flex-basis: 7.5rem !important;
  }

  .opsConsoleShell .fieldSalesForms,
  .opsConsoleShell .fieldTemplateStarter,
  .opsConsoleShell .fieldCustomEstimateOptionComposer,
  .opsConsoleShell .fieldCustomEstimateLineComposer,
  .opsConsoleShell .fieldEstimateSignatureUpload {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.38rem !important;
    border-radius: 0.48rem !important;
    padding: 0.46rem !important;
  }

  .opsConsoleShell .fieldSalesForms label,
  .opsConsoleShell .fieldTemplateStarter label,
  .opsConsoleShell .fieldCustomEstimateOptionComposer label,
  .opsConsoleShell .fieldCustomEstimateLineComposer label,
  .opsConsoleShell .fieldEstimateSignatureUpload label {
    gap: 0.14rem !important;
  }

  .opsConsoleShell .fieldSalesForms label > span,
  .opsConsoleShell .fieldTemplateStarter label > span,
  .opsConsoleShell .fieldCustomEstimateOptionComposer label > span,
  .opsConsoleShell .fieldCustomEstimateLineComposer label > span,
  .opsConsoleShell .fieldEstimateSignatureUpload label > span {
    font-size: 0.66rem !important;
    font-weight: 820 !important;
  }

  .opsConsoleShell .fieldSalesForms input,
  .opsConsoleShell .fieldSalesForms select,
  .opsConsoleShell .fieldTemplateStarter select,
  .opsConsoleShell .fieldCustomEstimateOptionComposer input,
  .opsConsoleShell .fieldCustomEstimateOptionComposer select,
  .opsConsoleShell .fieldCustomEstimateLineComposer input,
  .opsConsoleShell .fieldCustomEstimateLineComposer select,
  .opsConsoleShell .fieldEstimateSignatureUpload input,
  .opsConsoleShell .fieldEstimateCloseoutPlan select {
    min-height: 2.2rem !important;
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .fieldPackagePreview,
  .opsConsoleShell .fieldTemplateStarter small,
  .opsConsoleShell .fieldEstimateSignatureUpload > small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldEstimateCloseoutPlan {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldEstimateCloseoutPlan .fieldInlineSwitch {
    grid-column: 1 / -1 !important;
    min-height: 2.25rem !important;
    border: 1px solid var(--ops-border, #dbe1ea) !important;
    border-radius: 0.42rem !important;
    padding: 0 0.5rem !important;
  }

  .opsConsoleShell .fieldEstimateSignatureUpload .fieldEstimateCloseoutOutcome {
    white-space: normal !important;
  }

  .opsConsoleShell .fieldSignaturePad {
    min-height: 6.2rem !important;
  }

  .opsConsoleShell .fieldSignatureCanvas {
    width: 100% !important;
    height: 6.2rem !important;
    touch-action: none !important;
  }

  .opsConsoleShell .fieldSignaturePadActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }

  .opsConsoleShell .fieldEstimateActionList {
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldEstimateActionCard,
  .opsConsoleShell .fieldEstimateOptionRow,
  .opsConsoleShell .fieldInvoiceActionRow,
  .opsConsoleShell .fieldPaymentActionRow {
    border-radius: 0.48rem !important;
    padding: 0.48rem !important;
  }

  .opsConsoleShell .fieldEstimateHeaderRow,
  .opsConsoleShell .fieldEstimateOptionRow,
  .opsConsoleShell .fieldInvoiceActionRow,
  .opsConsoleShell .fieldPaymentActionRow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons,
  .opsConsoleShell .fieldEstimateOptionActions,
  .opsConsoleShell .fieldInvoiceActionButtons,
  .opsConsoleShell .fieldPaymentActionButtons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldEstimateActionButtons button,
  .opsConsoleShell .fieldEstimateOptionActions button,
  .opsConsoleShell .fieldInvoiceActionButtons button,
  .opsConsoleShell .fieldPaymentActionButtons button {
    width: 100% !important;
    min-height: 2.2rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldEstimateLineItems {
    max-height: 7.2rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 0.12rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldEstimateLineItems::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldEstimateLineItems > span {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .fieldEstimateLineItems > span small {
    grid-column: 1 / -1 !important;
  }
}

/* Visual QA 2026-06-08: technician mobile starts with the job and primary actions, not contact-admin forms. */
.opsConsoleShell .fieldCustomerContactPanel {
  display: grid !important;
  border: 1px solid rgba(203, 213, 225, 0.86) !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  color: #172033 !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-height: 2.62rem !important;
  padding: 0.48rem 0.62rem !important;
  cursor: pointer !important;
  list-style: none !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary::-webkit-details-marker {
  display: none !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary b,
.opsConsoleShell .fieldCustomerContactPanel > summary small,
.opsConsoleShell .fieldCustomerContactPanel > summary em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary b {
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 880 !important;
}

.opsConsoleShell .fieldCustomerContactPanel > summary small,
.opsConsoleShell .fieldCustomerContactPanel > summary em {
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-style: normal !important;
  font-weight: 820 !important;
}

.opsConsoleShell .fieldCustomerContactPanel[open] > summary {
  border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
}

.opsConsoleShell .fieldCustomerContactPanel .fieldCustomerContactEditor {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.54rem !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldJobOverviewCard {
    order: 1 !important;
  }

  .opsConsoleShell .fieldCustomerContactPanel {
    order: 2 !important;
  }

  .opsConsoleShell .fieldPrimaryActionDock {
    order: 3 !important;
  }

  .opsConsoleShell .fieldSecondaryActionRail {
    order: 4 !important;
  }

  .opsConsoleShell .fieldCloseoutSummary {
    order: 5 !important;
  }

  .opsConsoleShell .fieldCompletionChecklist {
    order: 6 !important;
  }

  .opsConsoleShell .fieldWorkLaneSwitch {
    order: 7 !important;
  }

  .opsConsoleShell .fieldWorkLanePanel {
    order: 8 !important;
  }

  .opsConsoleShell .fieldPacketGrid,
  .opsConsoleShell .fieldPacketList,
  .opsConsoleShell .fieldPacketStatus,
  .opsConsoleShell .fieldMaskedCallPolicy {
    display: none !important;
  }

  .opsConsoleShell .fieldCustomerContactPanel:not([open]) .fieldCustomerContactEditor {
    display: none !important;
  }
}

/* Visual QA 2026-06-08: mobile shell has one scroll owner, compact menus, and no hidden phone overlay. */
@media (max-width: 920px) {
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell {
    isolation: isolate !important;
  }

  .opsConsoleShell .phoneAppShell.phoneAppShellHidden,
  .opsConsoleShell .phoneAppShell[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.callback {
    display: none !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing {
    display: grid !important;
    right: 0.62rem !important;
    bottom: calc(4.72rem + env(safe-area-inset-bottom)) !important;
    left: 0.62rem !important;
    z-index: 260 !important;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .phoneAppShell:not(.phoneAppShellHidden) {
    min-height: 0 !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail,
  .opsConsoleShell .chatConversationList,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuLayer.mobileOnly,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .mobileSidebarScrim,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen {
    top: var(--ops-header-height) !important;
    bottom: calc(4.45rem + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuLayer.mobileOnly {
    z-index: 200 !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenu {
    width: min(16.5rem, calc(100vw - 0.9rem)) !important;
    max-width: calc(100vw - 0.9rem) !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen {
    z-index: 210 !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .phoneGlobalCallTray.ringing,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .phoneGlobalCallTray.ringing {
    display: grid !important;
    z-index: 260 !important;
  }
}

/* Visual audit 2026-06-08: mobile Field opens on the job, not the support/sync rail. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldModeSwitch {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldMainGrid {
    order: 2 !important;
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldHero {
    order: 3 !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0.12rem 0 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldHero > div:first-child,
  .opsConsoleShell .fieldAppShell.hasJobs .fieldMetricGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"] .fieldRangeSwitch {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldHeroActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.32rem !important;
    margin: 0 -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.14rem 0.62rem 0.2rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldHeroActions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldTechContactSettings,
  .opsConsoleShell .fieldAppShell.hasJobs .fieldHeroActions > button {
    flex: 0 0 auto !important;
    min-width: 4.35rem !important;
    max-width: 7.25rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldHeroActions > span {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs .fieldTechContactSettings > summary,
  .opsConsoleShell .fieldAppShell.hasJobs .fieldHeroActions > button {
    min-height: 1.92rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

/* Visual audit 2026-06-08: mobile Phone opens on callback/customer work, not device diagnostics. */
@media (max-width: 920px) {
  .opsConsoleShell .phoneDetail {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .phoneToolbar {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.42rem !important;
    min-height: 2.45rem !important;
    padding: 0.04rem 0 0.2rem !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
  }

  .opsConsoleShell .phoneToolbar > div:first-child {
    min-width: 0 !important;
  }

  .opsConsoleShell .phoneToolbar > div:first-child > span,
  .opsConsoleShell .phoneReadState,
  .opsConsoleShell .phoneMarketingChip {
    display: none !important;
  }

  .opsConsoleShell .phoneToolbar h3 {
    overflow: hidden !important;
    font-size: 0.96rem !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .phoneToolbarActions {
    display: flex !important;
    justify-content: end !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .phoneToolbarActions button:not(.phoneMobileBackButton) {
    display: none !important;
  }

  .opsConsoleShell .phoneMobileBackButton.mobileOnly {
    display: inline-flex !important;
    min-height: 2rem !important;
    padding: 0 0.62rem !important;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    order: 2 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .phoneConsole {
    order: 6 !important;
  }

  .opsConsoleShell .phoneConsole.ringing,
  .opsConsoleShell .phoneConsole.active {
    order: 2 !important;
  }

  .opsConsoleShell .phoneDetail:has(.phoneConsole.ringing) .phoneInboundWorkbench,
  .opsConsoleShell .phoneDetail:has(.phoneConsole.active) .phoneInboundWorkbench {
    order: 3 !important;
  }

  .opsConsoleShell .phoneTimeline {
    order: 4 !important;
  }

  .opsConsoleShell .phoneCallInbox {
    order: 5 !important;
  }

  .opsConsoleShell .phoneComposer {
    order: 7 !important;
  }

  .opsConsoleShell .phoneConsole.prepared {
    order: 3 !important;
  }

  .opsConsoleShell .phoneConsole.prepared .phoneReadinessStrip,
  .opsConsoleShell .phoneConsole.prepared .phoneRingControls,
  .opsConsoleShell .phoneConsole.prepared .phonePrimaryControls,
  .opsConsoleShell .phoneConsole.prepared .phoneUtilityControls {
    display: none !important;
  }
}

/* Visual audit 2026-06-08: mobile Chat opens on the conversation, not an expanded member admin panel. */
@media (max-width: 920px) {
  .opsConsoleShell .chatMobileMemberPanel:not([open]) .chatMobileMemberBody {
    display: none !important;
  }

  .opsConsoleShell .chatMobileMemberPanel.mobileOnly {
    padding-top: 0.28rem !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary {
    min-height: 1.72rem !important;
  }
}

/* Visual repair 2026-06-08: readable SMS/chat panes, usable mobile phone list, and visible app menu controls. */
.opsConsoleShell .inboxShell.nativeMailShell,
.opsConsoleShell .messageColumn,
.opsConsoleShell .detailColumn,
.opsConsoleShell .messageWorkspace,
.opsConsoleShell .messageResultsPanel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.opsConsoleShell .messageColumn,
.opsConsoleShell .detailColumn,
.opsConsoleShell .messageResultsPanel {
  display: flex !important;
  flex-direction: column !important;
}

.opsConsoleShell .messageWorkspace,
.opsConsoleShell .detailContentFrame,
.opsConsoleShell .messageResultsPanel,
.opsConsoleShell .messageList,
.opsConsoleShell .messageDetail {
  flex: 1 1 auto !important;
}

.opsConsoleShell .detailContentFrame {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.opsConsoleShell .messageList,
.opsConsoleShell .messageDetail {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.opsConsoleShell .phoneBubble,
.opsConsoleShell .phoneBubble p,
.opsConsoleShell .phoneBubble strong {
  color: #111827 !important;
}

.opsConsoleShell .phoneBubble.outbound,
.opsConsoleShell .phoneBubble.outbound p,
.opsConsoleShell .phoneBubble.outbound strong {
  color: #ffffff !important;
}

.opsConsoleShell .phoneTimeline {
  flex: 1 1 14rem !important;
  min-height: 12rem !important;
  padding: 0.72rem !important;
}

.opsConsoleShell .phoneComposer,
.opsConsoleShell .chatComposer {
  flex: 0 0 auto !important;
  min-height: max-content !important;
  overflow: visible !important;
}

.opsConsoleShell .chatComposerInput {
  min-height: max-content !important;
  overflow: visible !important;
}

.opsConsoleShell .chatComposerActions {
  min-height: 2rem !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .inboxShell.nativeMailShell {
    height: calc(100dvh - var(--ops-header-height)) !important;
    max-height: calc(100dvh - var(--ops-header-height)) !important;
  }

  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    height: 100% !important;
  }

  .opsConsoleShell .phoneAppShell:not(.phoneAppShellHidden) {
    grid-template-columns: minmax(18rem, 20.5rem) minmax(0, 1fr) !important;
  }

  .opsConsoleShell .phoneDetail {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    flex: 0 0 10rem !important;
    min-height: 9rem !important;
    max-height: 15.5rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneCallInbox {
    flex: 0 0 auto !important;
    max-height: 7.5rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneComposer textarea {
    min-height: 4.25rem !important;
  }

  .opsConsoleShell .chatMain {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .chatComposer {
    min-height: 6.4rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .inboxShell.nativeMailShell {
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    display: block !important;
  }

  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive {
    display: flex !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .detailColumn.mobileActive .detailToolbar {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .detailColumn.mobileActive .detailContentFrame,
  .opsConsoleShell .detailColumn.mobileActive .messageDetail {
    height: auto !important;
    max-height: none !important;
  }

  .opsConsoleShell .messageColumn:not(.mobileActive),
  .opsConsoleShell .detailColumn:not(.mobileActive) {
    display: none !important;
  }

  .opsConsoleShell .messageWorkspace {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .messageColumn.hasMobilePreview .messageList {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phoneAppShell[data-mobile-phone-pane="threads"] .phoneRail {
    display: flex !important;
  }

  .opsConsoleShell .phoneAppShell[data-mobile-phone-pane="detail"] .phoneDetail {
    display: flex !important;
  }

  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    flex: 0 0 auto !important;
    max-height: none !important;
  }

  .opsConsoleShell .phoneTimeline {
    flex: 1 0 13rem !important;
    min-height: 13rem !important;
    max-height: none !important;
  }

  .opsConsoleShell .phoneComposer {
    margin: 0.5rem 0 0 !important;
  }

  .opsConsoleShell .phoneComposer textarea {
    min-height: 4.1rem !important;
  }

  .opsConsoleShell .mobileSurfaceMenu header button {
    border: 1px solid rgba(203, 213, 225, 0.95) !important;
    background: #f8fafc !important;
    color: #172033 !important;
  }

  .opsConsoleShell .chatShell {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .chatMain.mobileActive {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatTimeline {
    flex: 1 1 auto !important;
    min-height: 12rem !important;
  }

  .opsConsoleShell .chatComposer {
    position: static !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }
}

/* Field schedule desktop finish: Calendar is a full dispatch board, not the Day-mode job rail. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldMainGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleLoadStrip {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoardList {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important;
    align-items: start !important;
  }
}

/* Phone SMS readability finish: existing customer texts must be readable and occupy the work area. */
.opsConsoleShell .phoneBubble.outbound {
  border-color: #2354d1 !important;
  background: #2354d1 !important;
}

.opsConsoleShell .phoneBubble.outbound,
.opsConsoleShell .phoneBubble.outbound p,
.opsConsoleShell .phoneBubble.outbound strong,
.opsConsoleShell .phoneBubble.outbound span,
.opsConsoleShell .phoneBubble.outbound small {
  color: #ffffff !important;
}

.opsConsoleShell .phoneBubble.inbound,
.opsConsoleShell .phoneBubble.inbound p,
.opsConsoleShell .phoneBubble.inbound strong,
.opsConsoleShell .phoneBubble.inbound span,
.opsConsoleShell .phoneBubble.inbound small,
.opsConsoleShell .phoneBubble.system,
.opsConsoleShell .phoneBubble.system p,
.opsConsoleShell .phoneBubble.system strong,
.opsConsoleShell .phoneBubble.system span,
.opsConsoleShell .phoneBubble.system small {
  color: #111827 !important;
}

.opsConsoleShell .phoneThreadText,
.opsConsoleShell .phoneThreadText strong,
.opsConsoleShell .phoneThreadText small {
  min-width: 0 !important;
}

.opsConsoleShell .phoneThreadText strong,
.opsConsoleShell .phoneThreadText small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneInboundWorkbench,
.opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneCallInbox {
  display: none !important;
}

.opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneTimeline {
  flex: 1 1 auto !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .phoneRail,
  .opsConsoleShell .phoneDetail {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .phoneDetail {
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneThreadList {
    flex: 1 1 auto !important;
    min-height: 8rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .phoneInboundWorkbench {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: 10.5rem !important;
  }

  .opsConsoleShell .phoneTimeline {
    flex: 1 1 10rem !important;
    min-height: 7.5rem !important;
  }

  .opsConsoleShell .phoneCallInbox {
    flex: 0 0 auto !important;
    max-height: 4rem !important;
  }

  .opsConsoleShell .phoneComposer {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  .opsConsoleShell .phoneComposer textarea {
    min-height: 3.35rem !important;
  }
}

/* Field mobile technician finish: the selected job is the screen, with native-style action strips. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
    gap: 0.42rem !important;
    padding: 0.5rem 0.62rem 0.72rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldHero {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    padding: 0.72rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewBody {
    gap: 0.5rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    margin: 0 -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.1rem 0.62rem 0.18rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness > button {
    flex: 0 0 auto !important;
    min-width: 5.7rem !important;
    max-width: 7.8rem !important;
    min-height: 2.52rem !important;
    padding: 0.36rem 0.48rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist button {
    min-height: 2.35rem !important;
    padding: 0.34rem 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    gap: 0.48rem !important;
    padding: 0.62rem !important;
  }
}

/* Chat desktop finish: customer/job context is a right drawer, not a second stacked page. */
@media (min-width: 921px) {
  .opsConsoleShell .chatDetailWorkbench {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 18.5rem) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatMain {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatHeader {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.54rem !important;
    min-height: 3.25rem !important;
    padding: 0.48rem 0.66rem !important;
  }

  .opsConsoleShell .chatHeader > div:first-of-type {
    min-width: 0 !important;
  }

  .opsConsoleShell .chatHeader h2,
  .opsConsoleShell .chatHeaderMeta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatHeaderActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: min(100%, 28rem) !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .chatHeaderActions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .chatTimeline {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatComposer {
    grid-row: 4 !important;
    min-height: 0 !important;
    max-height: 8.5rem !important;
    overflow: visible !important;
    padding: 0.52rem 0.66rem !important;
  }

  .opsConsoleShell .chatComposerInput {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .chatComposerInput textarea {
    min-height: 2.55rem !important;
    max-height: 4.8rem !important;
  }

  .opsConsoleShell .chatContextPanel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatContextPanelBody {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Customer comms/job workspace: customer messages stay in Customer Files, separate from internal Team Chat. */
.opsConsoleShell .serviceCommsJobWorkspace {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: max-content !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.opsConsoleShell .serviceBookingWorkspace {
  display: grid !important;
  grid-template-columns: minmax(18rem, 0.74fr) minmax(0, 1.26fr) !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
  align-items: start !important;
}

.opsConsoleShell .serviceBookingWorkspaceHeader {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.6rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.52rem !important;
  background: linear-gradient(135deg, #eff6ff, #f8fafc) !important;
  padding: 0.72rem 0.82rem !important;
}

.opsConsoleShell .serviceBookingWorkspaceHeader > div:first-child {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceBookingWorkspaceHeader strong,
.opsConsoleShell .serviceBookingWorkspaceHeader small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceBookingSourcePanel {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: 0.48rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.52rem !important;
  background: #ffffff !important;
  padding: 0.58rem !important;
}

.opsConsoleShell .serviceBookingSourceLead {
  display: grid !important;
  gap: 0.12rem !important;
  padding: 0.12rem 0.04rem 0.2rem !important;
}

.opsConsoleShell .serviceBookingSourceLead span {
  color: #0f766e !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.opsConsoleShell .serviceBookingSourceLead strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.9rem !important;
  font-weight: 820 !important;
}

.opsConsoleShell .serviceBookingSourceLead p {
  margin: 0 !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

.opsConsoleShell .serviceBookingSourceFacts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.38rem !important;
}

.opsConsoleShell .serviceBookingSourceFacts span {
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  border-radius: 0.46rem !important;
  background: #f8fafc !important;
  padding: 0.42rem 0.46rem !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.72rem !important;
}

.opsConsoleShell .serviceBookingSourceFacts b {
  display: block !important;
  color: #1d4ed8 !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceBookingSourceCounts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.34rem !important;
}

.opsConsoleShell .serviceBookingSourceCounts button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.36rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.42rem !important;
}

.opsConsoleShell .serviceBookingSourceCounts button.active {
  border-color: #0b63ce !important;
  background: #eff6ff !important;
}

.opsConsoleShell .serviceBookingSourceCounts b,
.opsConsoleShell .serviceBookingSourceCounts span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.68rem !important;
}

.opsConsoleShell .serviceBookingSourceCounts span {
  color: var(--ops-muted, #667085) !important;
  font-weight: 800 !important;
}

.opsConsoleShell .serviceBookingSourceThread {
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  min-height: 14rem !important;
  max-height: 26rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.42rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceBookingForms {
  display: grid !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
  align-content: start !important;
}

.opsConsoleShell .serviceCommsJobHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.54rem 0.62rem !important;
}

.opsConsoleShell .serviceCommsJobHeader > div {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceCommsJobHeader strong,
.opsConsoleShell .serviceCommsJobHeader small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsJobHeader strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
}

.opsConsoleShell .serviceCommsJobHeader small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  line-height: 1.16 !important;
}

.opsConsoleShell .serviceCommsJobGrid {
  display: grid !important;
  grid-template-columns: minmax(5.5rem, 0.36fr) minmax(0, 1fr) minmax(11.5rem, 0.62fr) !important;
  min-width: 0 !important;
  min-height: 13rem !important;
}

.opsConsoleShell .serviceProfileContent.serviceIntent-default {
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  align-items: stretch !important;
}

.opsConsoleShell .serviceProfileContent.serviceIntent-default > * {
  flex: 0 0 auto !important;
}

.opsConsoleShell .serviceCommsSourceRail,
.opsConsoleShell .serviceCommsThread,
.opsConsoleShell .serviceCommsJobRail {
  min-width: 0 !important;
  min-height: 0 !important;
}

.opsConsoleShell .serviceCommsSourceRail,
.opsConsoleShell .serviceCommsJobRail {
  display: grid !important;
  align-content: start !important;
  gap: 0.36rem !important;
  padding: 0.48rem !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceCommsSourceRail {
  border-right: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .serviceCommsJobRail {
  border-left: 1px solid var(--ops-border, #dbe1ea) !important;
}

.opsConsoleShell .serviceCommsSourceRail button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.3rem !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.34rem !important;
  padding: 0 0.42rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceCommsSourceRail button.active {
  border-color: #0b63ce !important;
  background: #eff6ff !important;
}

.opsConsoleShell .serviceCommsSourceRail b,
.opsConsoleShell .serviceCommsSourceRail span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsSourceRail b {
  font-size: 0.68rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .serviceCommsSourceRail span {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

.opsConsoleShell .serviceCommsThread {
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  max-height: 20rem !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.opsConsoleShell .serviceCommsThreadRow {
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
  padding: 0.52rem 0.62rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceCommsThreadRow header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.36rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceCommsThreadRow header span {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  padding: 0.13rem 0.36rem !important;
  background: #f8fafc !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

.opsConsoleShell .serviceCommsThreadRow strong,
.opsConsoleShell .serviceCommsThreadRow small,
.opsConsoleShell .serviceCommsThreadRow p {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .serviceCommsThreadRow strong,
.opsConsoleShell .serviceCommsThreadRow small {
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsThreadRow strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.74rem !important;
  font-weight: 780 !important;
}

.opsConsoleShell .serviceCommsThreadRow small,
.opsConsoleShell .serviceCommsThreadRow p {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 630 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .serviceCommsThreadRow p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
}

.opsConsoleShell .serviceCommsThreadMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.22rem !important;
}

.opsConsoleShell .serviceCommsThreadMeta a,
.opsConsoleShell .serviceCommsThreadMeta span {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 999px !important;
  padding: 0.14rem 0.38rem !important;
  background: #ffffff !important;
  color: var(--ops-accent, #0b63ce) !important;
  font-size: 0.62rem !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

.opsConsoleShell .serviceCommsJobCard,
.opsConsoleShell .serviceCommsJobStatus div {
  display: grid !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.36rem !important;
  padding: 0.46rem !important;
  background: #ffffff !important;
}

.opsConsoleShell .serviceCommsJobCard span,
.opsConsoleShell .serviceCommsJobStatus dt {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceCommsJobCard strong,
.opsConsoleShell .serviceCommsJobCard small,
.opsConsoleShell .serviceCommsJobStatus dd {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.opsConsoleShell .serviceCommsJobCard strong,
.opsConsoleShell .serviceCommsJobStatus dd {
  color: var(--ops-text, #111827) !important;
  font-size: 0.74rem !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsJobCard small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.65rem !important;
  font-weight: 640 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsJobCard button,
.opsConsoleShell .serviceCommsJobActions button,
.opsConsoleShell .serviceCommsJobActions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.34rem !important;
  padding: 0 0.5rem !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCommsJobActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.3rem !important;
}

.opsConsoleShell .serviceCommsJobActions button:disabled {
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.opsConsoleShell .serviceCommsJobStatus {
  display: grid !important;
  gap: 0.3rem !important;
  margin: 0 !important;
}

.opsConsoleShell .serviceCommsJobStatus dd {
  margin: 0 !important;
}

@media (max-width: 1180px) {
  .opsConsoleShell .serviceCommsJobGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceCommsSourceRail {
    display: flex !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ops-border, #dbe1ea) !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .serviceCommsSourceRail button {
    min-width: 5.8rem !important;
  }

  .opsConsoleShell .serviceCommsJobRail {
    border-left: 0 !important;
    border-top: 1px solid var(--ops-border, #dbe1ea) !important;
  }
}

@media (max-width: 640px) {
  .opsConsoleShell .serviceCommsSourceRail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
  }

  .opsConsoleShell .serviceCommsSourceRail button {
    min-width: 0 !important;
  }

  .opsConsoleShell .serviceCommsJobHeader,
  .opsConsoleShell .serviceCommsThreadRow header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceCommsJobActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Admin console finish: settings stay bounded and scan-first instead of collapsing or becoming one huge sheet. */
@media (min-width: 921px) {
  .opsConsoleShell .adminAppShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.52rem !important;
    height: calc(100dvh - var(--ops-header-height) - 0.7rem) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0.62rem 0.72rem !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminStatusBar,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminRoleOverview,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  .opsConsoleShell .adminHeader {
    min-height: 3.05rem !important;
  }

  .opsConsoleShell .adminTriageBar {
    min-height: 3rem !important;
  }

  .opsConsoleShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    height: auto !important;
    min-height: 3.25rem !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    min-height: 3.1rem !important;
  }

  .opsConsoleShell .adminReportPanel {
    max-height: 17rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminControlBand {
    max-height: 9rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminRulePanel {
    height: auto !important;
    min-height: 13rem !important;
    max-height: 18rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminRuleGrid {
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    display: grid !important;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) !important;
    height: 34rem !important;
    min-height: 28rem !important;
    max-height: 42rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminPermissionNav,
  .opsConsoleShell .adminPermissionSections,
  .opsConsoleShell .permissionMatrix {
    min-height: 0 !important;
  }

  .opsConsoleShell .adminPermissionSections {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }
}

/* Customer file mobile finish: profile actions are a native command strip, not a stacked dashboard. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceProfilePane.mobileActive {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0.46rem 0.62rem calc(6.5rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    margin: 0 -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.1rem 0.62rem 0.18rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid button,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid a {
    flex: 0 0 auto !important;
    width: 5.85rem !important;
    min-width: 5.85rem !important;
    max-width: 7.8rem !important;
    min-height: 2.55rem !important;
    padding: 0.34rem 0.48rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid strong,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid span {
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceMetricGrid,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceOverviewGrid,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceMiniCountGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceHandoffList {
    max-height: 8.5rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell {
    gap: 0.34rem !important;
    padding: 0.38rem 0.5rem calc(5.45rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminHeader,
  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminRoleOverview,
  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .adminHeader {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 3.15rem !important;
    max-height: 4.1rem !important;
    overflow: hidden !important;
    padding: 0.38rem 0.44rem !important;
  }

  .opsConsoleShell .adminHeaderStats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .adminTriageBar {
    display: grid !important;
    gap: 0.3rem !important;
    max-height: 8.2rem !important;
    overflow-y: auto !important;
    padding: 0.38rem 0.44rem !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminTriageCounts,
  .opsConsoleShell .adminRoleOverview,
  .opsConsoleShell .adminPermissionNav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain !important;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar,
  .opsConsoleShell .adminTriageCounts::-webkit-scrollbar,
  .opsConsoleShell .adminRoleOverview::-webkit-scrollbar,
  .opsConsoleShell .adminPermissionNav::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminTriageCounts span,
  .opsConsoleShell .adminRoleOverview div {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .adminTriageCounts span {
    width: 6.2rem !important;
  }

  .opsConsoleShell .adminRoleOverview {
    height: 3rem !important;
    min-height: 3rem !important;
    max-height: 3rem !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    width: 6.4rem !important;
    min-height: 2.7rem !important;
  }

  .opsConsoleShell .adminReportPanel {
    max-height: 6.8rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminControlBand {
    max-height: 5.9rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminRulePanel {
    max-height: 12.5rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .adminRuleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .adminRuleCard {
    min-height: 2.55rem !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    display: flex !important;
    flex-direction: column !important;
    height: 32rem !important;
    min-height: 32rem !important;
    max-height: 32rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminPermissionNav {
    flex: 0 0 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    max-height: 2.35rem !important;
  }

  .opsConsoleShell .adminPermissionSections {
    display: block !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminPermissionSections .permissionMatrix {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* Mail mobile reader finish: tapping a message opens a real reader screen with one scroll owner. */
@media (max-width: 920px) {
  .opsConsoleShell .detailColumn.mobileActive .detailToolbar {
    position: static !important;
    top: auto !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  .opsConsoleShell .detailColumn.mobileActive .detailContentFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .detailColumn.mobileActive .messageDetail {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Field mobile job finish: selected technician work is bounded like a native job screen. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
    padding: 0.42rem 0.56rem 0.56rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldHero {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    gap: 0.36rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    margin: 0 -0.58rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0.58rem 0.04rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts div {
    flex: 0 0 8.8rem !important;
    min-height: 2.35rem !important;
    padding: 0.36rem 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 -0.56rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.08rem 0.56rem 0.16rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist button {
    flex: 0 0 auto !important;
    width: 7.2rem !important;
    min-height: 2.35rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: min(18.5rem, calc(var(--ops-mobile-workspace-height, 40rem) - 21rem)) !important;
    min-height: 12.5rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneStack {
    gap: 0.42rem !important;
  }
}

/* Chat mobile action finish: context actions fit the screen instead of sliding off-canvas. */
@media (max-width: 920px) {
  .opsConsoleShell .chatHeaderActions {
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 2.5rem !important;
    max-width: 2.75rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction {
    display: none !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0.34rem 0 !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly > span {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly a,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 0 0.2rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly a span,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Desktop Mail scroll finish: the inbox list is the scroll owner, not a clipped page-height sheet. */
@media (min-width: 921px) {
  .opsConsoleShell .messageColumn,
  .opsConsoleShell .messageWorkspace,
  .opsConsoleShell .messageResultsPanel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageResultsPanel {
    flex: 1 1 auto !important;
  }

  .opsConsoleShell .messageList {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile action grid finish: Field and Customers keep core commands in the viewport. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts dt,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts dd {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness > button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness b,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist b,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid button,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid strong,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Field selected-job no-clip finish: primary job actions stay visible without sideways strips. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.58rem !important;
    padding: 0.34rem 0.46rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 5 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 6 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    order: 7 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    order: 8 !important;
  }
}

/* Admin mobile summary finish: permission controls stay readable without sideways scrolling. */
@media (max-width: 920px) {
  .opsConsoleShell .adminTriageCounts,
  .opsConsoleShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  .opsConsoleShell .adminRoleOverview {
    max-height: none !important;
  }

  .opsConsoleShell .adminTriageCounts span,
  .opsConsoleShell .adminRoleOverview div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 2.55rem !important;
  }

  .opsConsoleShell .adminTriageCounts span {
    display: grid !important;
    align-content: center !important;
    gap: 0.06rem !important;
    padding: 0.34rem 0.38rem !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    padding: 0.34rem 0.38rem !important;
  }

  .opsConsoleShell .adminTriageCounts span,
  .opsConsoleShell .adminTriageCounts b,
  .opsConsoleShell .adminRoleOverview strong,
  .opsConsoleShell .adminRoleOverview span,
  .opsConsoleShell .adminRoleOverview em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Desktop Mail reply finish: inline compose stays visible below the scrollable reader. */
@media (min-width: 921px) {
  .opsConsoleShell .detailColumn .detailContentFrame {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .detailColumn .messageDetail {
    flex: 1 1 auto !important;
    min-height: 13.5rem !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .detailColumn .replyDock {
    display: block !important;
    flex: 0 0 auto !important;
    min-height: 15.25rem !important;
    height: auto !important;
    max-height: 17rem !important;
    margin: 0.72rem 0 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .detailColumn .replyComposerInline {
    width: 100% !important;
    min-height: 10.5rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(5.8rem, 1fr) auto !important;
    align-items: stretch !important;
  }

  .opsConsoleShell .detailColumn .replyInlineTextarea {
    width: 100% !important;
    min-height: 5.8rem !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .detailColumn .replyDockTools {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Customer file contrast finish: active rows stay readable after generic active button rules. */
.opsConsoleShell .serviceCustomerCard.active,
.opsConsoleShell .serviceCustomerCard.active .serviceCustomerCopy,
.opsConsoleShell .serviceCustomerCard.active .serviceCustomerCopy strong,
.opsConsoleShell .serviceCustomerCard.active .serviceCustomerCopy small,
.opsConsoleShell .serviceCustomerCard.active .serviceCustomerCopy em,
.opsConsoleShell .serviceCustomerCard.active .serviceCustomerStats b {
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .serviceCustomerCard.active {
  border-color: var(--ops-border, #dbe1ea) !important;
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--ops-accent, #0b63ce) !important;
}

.opsConsoleShell .serviceCustomerCard.active .serviceCustomerStats b,
.opsConsoleShell .serviceCustomerCard.active .serviceReadinessPill {
  border-color: var(--ops-border, #dbe1ea) !important;
  background: #ffffff !important;
  color: var(--ops-text, #111827) !important;
}

.opsConsoleShell .serviceRecordTabs button.active,
.opsConsoleShell .serviceRecordTabs button.active span {
  border-color: #2354d1 !important;
  background: #2354d1 !important;
  color: #ffffff !important;
}

/* Authenticated Mail/SMS guard: keep live data states scrollable and readable. */
.opsConsoleShell .messageColumn,
.opsConsoleShell .detailColumn,
.opsConsoleShell .messageWorkspace,
.opsConsoleShell .messageResultsPanel,
.opsConsoleShell .detailContentFrame,
.opsConsoleShell .phoneRail,
.opsConsoleShell .phoneDetail {
  min-height: 0 !important;
}

.opsConsoleShell .messageColumn,
.opsConsoleShell .detailColumn,
.opsConsoleShell .messageWorkspace,
.opsConsoleShell .messageResultsPanel,
.opsConsoleShell .detailContentFrame {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.opsConsoleShell .messageList,
.opsConsoleShell .messageDetail,
.opsConsoleShell .phoneThreadList,
.opsConsoleShell .phoneTimeline {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.opsConsoleShell .messageList,
.opsConsoleShell .messageDetail {
  flex: 1 1 auto !important;
}

.opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneTimeline {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 12rem !important;
  max-height: none !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneTimeline {
    min-height: 20rem !important;
  }
}

.opsConsoleShell .phoneBubble {
  max-width: min(42rem, 78%) !important;
  overflow-wrap: anywhere !important;
}

.opsConsoleShell .phoneBubble,
.opsConsoleShell .phoneBubble *,
.opsConsoleShell .phoneBubble a {
  text-shadow: none !important;
}

.opsConsoleShell .phoneBubble.inbound,
.opsConsoleShell .phoneBubble.system {
  border-color: #dbe1ea !important;
  background: #ffffff !important;
}

.opsConsoleShell .phoneBubble.inbound,
.opsConsoleShell .phoneBubble.inbound *,
.opsConsoleShell .phoneBubble.system,
.opsConsoleShell .phoneBubble.system * {
  color: #111827 !important;
}

.opsConsoleShell .phoneBubble.outbound {
  border-color: #2354d1 !important;
  background: #2354d1 !important;
}

.opsConsoleShell .phoneBubble.outbound,
.opsConsoleShell .phoneBubble.outbound * {
  color: #ffffff !important;
}

.opsConsoleShell .phoneBubble.outbound a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .detailColumn.mobileActive,
  .opsConsoleShell .messageColumn.mobileActive .messageWorkspace,
  .opsConsoleShell .messageColumn.mobileActive .messageResultsPanel,
  .opsConsoleShell .detailColumn.mobileActive .detailContentFrame {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageList,
  .opsConsoleShell .detailColumn.mobileActive .messageDetail {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneTimeline {
    min-height: 0 !important;
  }

  .opsConsoleShell .phoneBubble {
    max-width: 100% !important;
  }
}

/* Phone proof summary: live call failures should be visible before opening diagnostics. */
.opsConsoleShell .phoneProofSummaryStrip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.46rem;
  align-items: stretch;
  border: 1px solid #dbe1ea;
  border-left: 3px solid #64748b;
  border-radius: 0.48rem;
  background: #f8fafc;
  padding: 0.52rem;
}

.opsConsoleShell .phoneProofSummaryStrip.ready {
  border-left-color: #16a34a;
  background: #f0fdf4;
}

.opsConsoleShell .phoneProofSummaryStrip.needs_call_event {
  border-left-color: #0b63ce;
  background: #eff6ff;
}

.opsConsoleShell .phoneProofSummaryStrip.blocked {
  border-left-color: #dc2626;
  background: #fef2f2;
}

.opsConsoleShell .phoneProofSummaryStrip > div {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.opsConsoleShell .phoneProofSummaryStrip span,
.opsConsoleShell .phoneGlobalProofLine {
  color: #64748b !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.opsConsoleShell .phoneProofSummaryStrip strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opsConsoleShell .phoneProofSummaryStrip small,
.opsConsoleShell .phoneGlobalProofLine {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opsConsoleShell .phoneGlobalProofLine {
  display: block !important;
  max-width: 100% !important;
}

.opsConsoleShell .phoneGlobalProofLine.ready {
  color: #166534 !important;
}

.opsConsoleShell .phoneGlobalProofLine.needs_call_event,
.opsConsoleShell .phoneGlobalProofLine.action.pending,
.opsConsoleShell .phoneGlobalProofLine.action.local_released {
  color: #1d4ed8 !important;
}

.opsConsoleShell .phoneGlobalProofLine.blocked,
.opsConsoleShell .phoneGlobalProofLine.action.timeout,
.opsConsoleShell .phoneGlobalProofLine.action.failed {
  color: #b91c1c !important;
}

.opsConsoleShell .phoneGlobalProofLine.action.confirmed {
  color: #166534 !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneProofSummaryStrip {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneLiveProofCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneLiveProofSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opsConsoleShell .phoneProofSummaryStrip button {
    width: 100%;
  }

  .phoneLiveProofCard button {
    width: 100%;
  }

  /* Mobile SMS reader finish: proof/debug stays out of the customer text thread. */
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneProofSummaryStrip {
    display: none !important;
  }

  /* Mobile native input guard: iOS Safari/webviews zoom inputs under 16px and do not reliably zoom back out. */
  .opsConsoleShell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .opsConsoleShell textarea,
  .opsConsoleShell select,
  .opsConsoleShell [contenteditable="true"],
  .opsConsoleShell .chatComposerInput textarea,
  .opsConsoleShell .phoneComposer textarea,
  .opsConsoleShell .phoneComposer input,
  .opsConsoleShell .callNoteComposer select,
  .opsConsoleShell .callNoteComposer textarea,
  .opsConsoleShell .fieldSalesForms select,
  .opsConsoleShell .fieldTemplateStarter select,
  .opsConsoleShell .fieldEstimateCloseoutPlan select {
    font-size: 16px !important;
    line-height: 1.32 !important;
  }
}

/* Mail mobile scroll finish: list view owns one native scroll area above the dock. */
@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageToolbar,
  .opsConsoleShell .messageColumn.mobileActive .searchBar.mobileSearchOpen,
  .opsConsoleShell .messageColumn.mobileActive .messageSubtoolbar,
  .opsConsoleShell .messageColumn.mobileActive .bulkActionBar,
  .opsConsoleShell .messageColumn.mobileActive .folderRail.mobileOnly {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageWorkspace,
  .opsConsoleShell .messageColumn.mobileActive .messageResultsPanel {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    margin-bottom: calc(5.1rem + env(safe-area-inset-bottom)) !important;
    padding-bottom: 0.65rem !important;
    scroll-padding-bottom: calc(5.1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageListFooter {
    flex: 0 0 auto !important;
  }
}

/* Field mobile scroll finish: selected technician jobs get one native work-area scroll owner. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldModeSwitch {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(6.4rem + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    min-height: 0 !important;
  }
}

/* Chat mobile header finish: messages should own the screen, not stacked context chrome. */
@media (max-width: 920px) {
  .opsConsoleShell .chatHeader {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.28rem 0.36rem !important;
    min-height: 0 !important;
    padding: 0.34rem 0.5rem 0.3rem !important;
  }

  .opsConsoleShell .chatBackButton.mobileOnly {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .chatHeader > div:not(.chatHeaderActions):not(.chatMobileContextStrip) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .chatHeader h2 {
    overflow: hidden !important;
    font-size: 0.94rem !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatHeaderMeta {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction {
    width: 2rem !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction span {
    display: none !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.28rem !important;
    min-height: 2.08rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid rgba(203, 213, 225, 0.84) !important;
    border-radius: 0.46rem !important;
    background: #f8fafc !important;
    padding: 0.28rem 0.32rem !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly > span {
    flex: 1 1 8rem !important;
    display: grid !important;
    min-width: 7.2rem !important;
    max-width: none !important;
    align-content: center !important;
    gap: 0.02rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly strong,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly small {
    min-width: 0 !important;
    overflow: hidden !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly strong {
    font-size: 0.76rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly small {
    font-size: 0.66rem !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly a,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 3.28rem !important;
    max-width: 4.4rem !important;
    min-height: 1.74rem !important;
    border-radius: 0.34rem !important;
    padding: 0 0.34rem !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .chatMobileContextStrip.mobileOnly a span,
  .opsConsoleShell .chatMobileContextStrip.mobileOnly button span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .chatMobileMemberPanel.mobileOnly {
    grid-column: 1 / -1 !important;
    padding-top: 0 !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary {
    min-height: 1.44rem !important;
    padding: 0.12rem 0.28rem !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary strong,
  .opsConsoleShell .chatMobileMemberPanel summary small {
    line-height: 1.05 !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary strong {
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .chatMobileMemberPanel summary small {
    font-size: 0.62rem !important;
  }

  .opsConsoleShell .chatTimeline {
    min-height: 0 !important;
  }
}

/* Field no-job finish: empty days should be one actionable Today card, not three empty panels. */
.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldMetricGrid,
.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldFocusCard.empty,
.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldScheduleRail {
  display: none !important;
}

.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldMainGrid {
  display: grid !important;
  grid-template-columns: minmax(0, min(42rem, 100%)) !important;
  align-content: start !important;
  justify-content: start !important;
  overflow-y: auto !important;
}

.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldJobsCard.activePanel {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldTodayEmptyCard {
  min-height: 9rem !important;
}

.opsConsoleShell .fieldAppShell.noJobs[data-active-field-tab="day"] .fieldTodayEmptyActions {
  grid-template-columns: repeat(4, minmax(5.2rem, 1fr)) !important;
}

/* Chat message action calm finish: desktop chat reads like a timeline until a row is active. */
@media (min-width: 921px) {
  .opsConsoleShell .chatMessageActions,
  .opsConsoleShell .chatReactions {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-0.1rem) !important;
  }

  .opsConsoleShell .chatMessage:hover .chatMessageActions,
  .opsConsoleShell .chatMessage:focus-within .chatMessageActions,
  .opsConsoleShell .chatMessage:hover .chatReactions,
  .opsConsoleShell .chatMessage:focus-within .chatReactions {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* Final native keyboard guard: keep all editable app controls at the iOS-safe
   focus size after every surface-specific mobile override. */
@media (max-width: 920px) {
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html textarea,
  html select,
  html [contenteditable="true"],
  .opsConsoleShell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .opsConsoleShell textarea,
  .opsConsoleShell select,
  .opsConsoleShell [contenteditable="true"],
  html[data-display-mode="standalone"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-display-mode="standalone"] textarea,
  html[data-display-mode="standalone"] select,
  html[data-display-mode="standalone"] [contenteditable="true"],
  html[data-display-mode="native-webview"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html[data-display-mode="native-webview"] textarea,
  html[data-display-mode="native-webview"] select,
  html[data-display-mode="native-webview"] [contenteditable="true"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-size-adjust: 100% !important;
    touch-action: manipulation !important;
  }
}

/* Chat mobile native density finish: the selected conversation should feel like
   a native message screen, with context reachable but not eating the viewport. */
@media (max-width: 920px) {
  .opsConsoleShell .chatMain.mobileActive {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatHeader {
    grid-row: 1 !important;
    position: relative !important;
    gap: 0.22rem 0.3rem !important;
    padding: 0.24rem 0.5rem 0.28rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatNotice,
  .opsConsoleShell .chatMain.mobileActive .chatError {
    grid-row: 2 !important;
    margin: 0.28rem 0.5rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatHeader h2 {
    font-size: 0.9rem !important;
    line-height: 1.04 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatBackButton.mobileOnly,
  .opsConsoleShell .chatMain.mobileActive .chatHeaderActions .chatRefreshAction {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileContextStrip.mobileOnly {
    min-height: 1.82rem !important;
    border-radius: 0.38rem !important;
    padding: 0.14rem 0.18rem !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileContextStrip.mobileOnly > span {
    flex-basis: 6.5rem !important;
    min-width: 6.2rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileContextStrip.mobileOnly a,
  .opsConsoleShell .chatMain.mobileActive .chatMobileContextStrip.mobileOnly button {
    min-width: 2.92rem !important;
    max-width: 3.45rem !important;
    min-height: 2.25rem !important;
    padding: 0.18rem 0.32rem !important;
    font-size: 0.62rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileMemberPanel.mobileOnly:not([open]) {
    position: absolute !important;
    top: 0.24rem !important;
    right: 2.72rem !important;
    z-index: 2 !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileMemberPanel.mobileOnly:not([open]) summary {
    display: grid !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    height: 1.9rem !important;
    min-height: 1.9rem !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    color: transparent !important;
    padding: 0 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileMemberPanel.mobileOnly:not([open]) summary::-webkit-details-marker {
    display: none !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileMemberPanel.mobileOnly:not([open]) summary span {
    display: none !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMobileMemberPanel.mobileOnly:not([open]) summary::after {
    content: "..." !important;
    color: #475569 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatTimeline {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0.38rem 0.52rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMessage {
    grid-template-columns: 1.78rem minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    padding: 0.42rem 0 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMessageAvatar {
    width: 1.78rem !important;
    height: 1.78rem !important;
    font-size: 0.66rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatBubble p,
  .opsConsoleShell .chatMain.mobileActive .chatReply p {
    font-size: 0.92rem !important;
    line-height: 1.34 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMessageMeta {
    gap: 0.25rem !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMessageActions,
  .opsConsoleShell .chatMain.mobileActive .chatReactions {
    gap: 0.24rem !important;
    padding-bottom: 0.1rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatMessageActions button,
  .opsConsoleShell .chatMain.mobileActive .chatReactions button {
    min-height: 2.25rem !important;
    padding: 0.34rem 0.48rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.8rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatReplies {
    margin-top: 0.35rem !important;
    padding-left: 0.6rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatComposer {
    grid-row: 4 !important;
    padding: 0.36rem 0.5rem calc(0.36rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatComposerInput {
    gap: 0.36rem !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatComposerInput textarea {
    min-height: 2.45rem !important;
    padding: 0.42rem 0.5rem !important;
    font-size: 16px !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatComposerActions button {
    min-height: 2.25rem !important;
    padding: 0.34rem 0.58rem !important;
  }
}

/* Field mobile fact-card finish: first-screen job facts must be readable, not
   clipped into abbreviated fragments. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0.12rem !important;
    min-height: 2.28rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.32rem 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts dt {
    min-width: 0 !important;
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts dd {
    min-width: 0 !important;
    overflow: visible !important;
    color: #111827 !important;
    font-size: 0.78rem !important;
    line-height: 1.14 !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Customers mobile command-strip finish: the customer file should open to
   customer context and recent activity, not a tall dashboard of action cards. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent {
    gap: 0.42rem !important;
    padding: 0.42rem 0.62rem calc(3.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    width: 100% !important;
    min-height: 2.55rem !important;
    max-height: 2.75rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 0.08rem !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid button,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid a {
    flex: 0 0 4.95rem !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    min-width: 4.95rem !important;
    max-width: 4.95rem !important;
    min-height: 2.42rem !important;
    height: 2.42rem !important;
    border-radius: 0.42rem !important;
    padding: 0.24rem 0.32rem !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid strong,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid span {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid strong {
    font-size: 0.74rem !important;
    line-height: 1.02 !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid span {
    font-size: 0.6rem !important;
    line-height: 1.02 !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceHandoffCard {
    flex: 0 0 auto !important;
    padding: 0.42rem !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceHandoffCard > strong {
    display: none !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceHandoffList {
    max-height: 8rem !important;
  }
}

/* Field mobile Calendar finish: dispatch should open on scheduled work, not
   stacked planning cards and clipped filter buttons. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] {
    gap: 0.34rem !important;
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    padding: 0.34rem 0.5rem 0.5rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch {
    flex: 0 0 auto !important;
    min-height: 2.3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0.08rem 0.08rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldMainGrid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 0.36rem !important;
    min-height: 0 !important;
    padding: 0.5rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel > .fieldCardHeader {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    gap: 0.38rem !important;
    min-height: 7.1rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel > .fieldCardHeader > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel > .fieldCardHeader > div:first-child {
    order: 1 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel > .fieldCardHeader > .fieldScheduleViewSwitch {
    order: 2 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel > .fieldCardHeader h3 {
    font-size: 1.1rem !important;
    line-height: 1.05 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions {
    display: inline-flex !important;
    order: 3 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.32rem !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions > span {
    min-width: 2.2rem !important;
    height: 1.65rem !important;
    padding: 0 0.48rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions > button {
    flex: 0 0 auto !important;
    min-height: 1.95rem !important;
    min-width: 4.1rem !important;
    padding: 0.28rem 0.52rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSummary,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartPanel {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSummary span,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartCard {
    min-height: 2.38rem !important;
    border-radius: 0.42rem !important;
    padding: 0.3rem 0.34rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSummary b,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartCard strong {
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSummary span,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartCard span,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartCard small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSmartCard small {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleLoadStrip {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleZoneFilter {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 0.08rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleZoneFilter::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleZoneFilter button {
    flex: 0 0 auto !important;
    min-width: 4.65rem !important;
    max-width: 8.5rem !important;
    min-height: 2.08rem !important;
    overflow: hidden !important;
    padding: 0.28rem 0.5rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleTechnicianFilter {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleTechnicianFilter button {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch {
    margin-inline: 0 !important;
    overflow-x: auto !important;
    padding-inline: 0.5rem !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekShell {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekMain {
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekBoard {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekHeader,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekAllDayRow,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekGrid {
    min-width: max-content !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleTimeAxis,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleDayColumn {
    min-height: 42rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekDayHeader {
    min-height: 3.5rem !important;
    padding: 0.42rem 0.48rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSlotButton {
    left: 0.32rem !important;
    right: 0.32rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleEventBlock {
    left: 0.32rem !important;
    right: 0.32rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBookingWorkspace .serviceAppointmentActionCard {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekRailCard {
    min-height: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoardList {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(5.6rem + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"],
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleDayGroup {
    gap: 0.32rem !important;
    margin: 0 0 0.42rem !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: 0.42rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleJobCard {
    min-width: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleJobCard {
    align-items: stretch !important;
    gap: 0.32rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 4rem !important;
    padding: 0.42rem 0.48rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows time,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows strong,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows span,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows small,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowSignals,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowProof,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowActions {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows time,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows strong,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows span,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRows small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowProof,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowProof span {
    display: grid !important;
    gap: 0.06rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowProof b {
    display: block !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRowActions button {
    min-width: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldHeroActions {
    margin-inline: 0 !important;
    padding-inline: 0.5rem !important;
  }
}

/* Admin mobile workbench finish: settings should open as compact controls,
   not a stacked summary page before the actual permissions. */
@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell {
    gap: 0.34rem !important;
    padding: 0.42rem 0.5rem 0 !important;
  }

  .opsConsoleShell .adminHeader {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 0.36rem !important;
    padding: 0 !important;
  }

  .opsConsoleShell .adminHeader .eyebrow {
    display: none !important;
  }

  .opsConsoleShell .adminHeader h2 {
    font-size: 1.1rem !important;
    line-height: 1.05 !important;
  }

  .opsConsoleShell .adminHeaderStats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminHeaderStats span {
    min-height: 2.12rem !important;
    padding: 0.26rem 0.34rem !important;
  }

  .opsConsoleShell .adminHeaderStats strong {
    font-size: 0.92rem !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .adminStatusBar {
    display: none !important;
  }

  .opsConsoleShell .adminTriageBar {
    display: grid !important;
    gap: 0.3rem !important;
    padding: 0.36rem !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .adminPermissionSearch {
    min-height: 2.34rem !important;
  }

  .opsConsoleShell .adminPermissionSearch > span {
    display: none !important;
  }

  .opsConsoleShell .adminProviderSettingsGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.62rem !important;
  }

  .opsConsoleShell .adminProviderSettingsCard {
    padding: 0.72rem !important;
  }

  .opsConsoleShell .adminProviderSettingsCardHeader {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .adminProviderSettingsCardHeader em {
    justify-self: flex-start !important;
  }

  .opsConsoleShell .adminProviderSecretRow {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .adminProviderSecretRow input,
  .opsConsoleShell .adminProviderSecretRow button {
    width: 100% !important;
  }

  .opsConsoleShell .adminPermissionSearch input {
    font-size: 16px !important;
    line-height: 1.25 !important;
    min-height: 2.34rem !important;
    padding: 0.34rem 0.52rem !important;
  }

  .opsConsoleShell .adminQuickFilters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.28rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 0.06rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 3.1rem !important;
    max-width: 8rem !important;
    min-height: 1.92rem !important;
    padding: 0.24rem 0.5rem !important;
  }

  .opsConsoleShell .adminTriageCounts {
    display: none !important;
  }

  .opsConsoleShell .adminRoleOverview {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 0.06rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminRoleOverview::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminRoleOverview div {
    flex: 0 0 7.1rem !important;
    min-height: 2.72rem !important;
    padding: 0.32rem 0.42rem !important;
  }

  .opsConsoleShell .adminRoleOverview div span:nth-of-type(n + 2),
  .opsConsoleShell .adminRoleOverview div em {
    display: none !important;
  }

  .opsConsoleShell .adminReportPanel,
  .opsConsoleShell .adminControlBand,
  .opsConsoleShell .adminRulePanel,
  .opsConsoleShell .adminPermissionLayout {
    flex: 0 0 auto !important;
    padding: 0.52rem !important;
  }

  .opsConsoleShell .adminReportHeader,
  .opsConsoleShell .adminControlBand > div:first-child,
  .opsConsoleShell .adminRulePanel > div:first-child {
    gap: 0.34rem !important;
  }

  .opsConsoleShell .adminReportPanel h3,
  .opsConsoleShell .adminControlBand h3,
  .opsConsoleShell .adminRulePanel h3 {
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }
}

/* Current UX repair contract: mobile/native should behave like one app surface,
   not a stack of trapped dashboards. Keep this at the end of the cascade. */
@media (max-width: 920px) {
  .opsConsoleShell :is(input, textarea, select),
  .opsConsoleShell .inboxShell :is(input, textarea, select),
  .opsConsoleShell .chatShell :is(input, textarea, select),
  .opsConsoleShell .serviceShell :is(input, textarea, select),
  .opsConsoleShell .fieldAppShell :is(input, textarea, select),
  .opsConsoleShell .adminAppShell :is(input, textarea, select),
  .opsConsoleShell .phoneAppShell :is(input, textarea, select) {
    font-size: 16px !important;
    line-height: 1.24 !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] :where(.inboxShell, .chatShell, .serviceShell, .fieldAppShell, .adminAppShell, .phoneAppShell) {
    pointer-events: none !important;
    filter: saturate(0.82) brightness(0.94) !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] :where(.messageColumn, .detailColumn, .contextRibbon, .chatShell, .serviceShell, .fieldAppShell, .adminAppShell, .phoneAppShell, .mobileAppDock) {
    pointer-events: none !important;
  }

  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuLayer,
  .opsConsoleShell[data-mobile-surface-menu-open="true"] .mobileSurfaceMenuLayer * {
    pointer-events: auto !important;
    filter: none !important;
  }

  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .mobileSidebarScrim,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen,
  .opsConsoleShell[data-mobile-mailbox-menu-open="true"] .sidebar.mobileDrawerOpen * {
    pointer-events: auto !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneToolbar {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneToolbarActions,
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneProofSummaryStrip,
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneInboundWorkbench,
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneCallInbox {
    display: none !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneTimeline {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 0.7rem !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneComposer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    border-top: 1px solid #dbe1ea !important;
    padding: 0.46rem 0.58rem calc(0.52rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSmsContext {
    display: none !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneComposer textarea {
    min-height: 2.5rem !important;
    max-height: 5.2rem !important;
    font-size: 16px !important;
  }

  .opsConsoleShell .phoneBubble,
  .opsConsoleShell .phoneBubble *,
  .opsConsoleShell .phoneBubble a {
    text-shadow: none !important;
  }

  .opsConsoleShell .phoneBubble.inbound,
  .opsConsoleShell .phoneBubble.system {
    background: #ffffff !important;
  }

  .opsConsoleShell .phoneBubble.inbound,
  .opsConsoleShell .phoneBubble.inbound *,
  .opsConsoleShell .phoneBubble.system,
  .opsConsoleShell .phoneBubble.system * {
    color: #111827 !important;
  }

  .opsConsoleShell .phoneBubble.outbound,
  .opsConsoleShell .phoneBubble.outbound * {
    color: #ffffff !important;
  }

  .opsConsoleShell .chatShell,
  .opsConsoleShell .chatDetailWorkbench.mobileActive,
  .opsConsoleShell .chatMain.mobileActive {
    min-height: 0 !important;
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .chatMain.mobileActive {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatHeader {
    min-height: 0 !important;
  }

  .opsConsoleShell .chatMain.mobileActive .chatTimeline {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .chatMain.mobileActive .chatComposer {
    position: static !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.34rem !important;
    height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - 4.45rem - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    padding: 0.34rem 0.52rem 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldModeSwitch {
    flex: 0 0 auto !important;
    margin: 0 -0.52rem !important;
    padding: 0 0.52rem 0.08rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    order: 1 !important;
    padding: 0.56rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusFacts,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCustomerContactPanel:not([open]),
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketList,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketStatus,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMaskedCallPolicy {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 -0.56rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.06rem 0.56rem 0.12rem !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist::-webkit-scrollbar,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock {
    order: 3 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail {
    order: 4 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    order: 5 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    order: 6 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 7 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background: #ffffff !important;
    border-top: 1px solid #dbe1ea !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 8 !important;
    min-height: 15rem !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    flex: 0 0 7.05rem !important;
    width: 7.05rem !important;
    min-width: 7.05rem !important;
    max-width: 7.05rem !important;
    min-height: 2.86rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail span,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist b,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist small,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Phone mobile customer workflow finish: selected SMS/callback threads expose
   Book, Membership, Sync, and Customer handoffs without opening hidden panes. */
@media (max-width: 920px) {
  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.34rem !important;
    margin: 0 -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.08rem 0.62rem 0.2rem !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly button {
    flex: 0 0 5.85rem !important;
    width: 5.85rem !important;
    min-width: 5.85rem !important;
    min-height: 2.24rem !important;
    border-radius: 0.44rem !important;
    white-space: nowrap !important;
  }
}

/* Field selected-job overflow lock: the technician job screen must never widen
   the app page; action strips scroll inside their own rows. */
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"],
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCustomerContactPanel,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitLifecycleRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketGrid,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobDetailsComposer,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchComposer,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketList,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
  width: 100% !important;
  overflow-x: hidden !important;
}

.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobDetailsComposer,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchComposer {
  width: 100% !important;
  overflow-x: hidden !important;
}

.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
  max-width: 100% !important;
  overscroll-behavior-x: contain !important;
}

.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitLifecycleRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPacketGrid,
.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewFacts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25rem), 1fr)) !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] :is(button, a, input, select, textarea, label, small, span, strong, b, dd, dt, p) {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail {
    grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow-x: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchComposer,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchComposer label,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchComposer button {
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldAppointmentDispatchInstructions {
    grid-column: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPartnerReferralComposer {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Mail mobile customer workflow finish: selected emails expose Book, Membership,
   Sync, and Customer File without hiding behind More. */
@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    margin-bottom: calc(8rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(8rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .mobileReaderPreview {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.32rem !important;
    max-height: 7.8rem !important;
    padding: 0.46rem 0.52rem 0.5rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .mobileReaderPreview.actionSheetOpen {
    max-height: min(72dvh, 31rem) !important;
    overflow: visible !important;
  }

  .opsConsoleShell .mobileReaderCustomerActions,
  .opsConsoleShell .mobileReaderPreviewActions {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.18rem !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .mobileReaderCustomerActions button,
  .opsConsoleShell .mobileReaderPreviewActions button {
    display: inline-grid !important;
    flex: 1 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.05rem !important;
    place-items: center !important;
    gap: 0.04rem !important;
    padding: 0.1rem 0.12rem !important;
    border-radius: 0.42rem !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .mobileReaderCustomerActions button span,
  .opsConsoleShell .mobileReaderPreviewActions button span {
    display: inline !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .mobileReaderCustomerActions svg,
  .opsConsoleShell .mobileReaderPreviewActions svg {
    width: 0.88rem !important;
    height: 0.88rem !important;
  }
}

/* Customer money + action dashboard finish: keep daily work action-first. */
.opsConsoleShell .serviceCustomerCloseoutRail {
  display: grid !important;
  grid-template-columns: minmax(12rem, 1.05fr) repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
  margin-bottom: 0.55rem !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 0.65rem !important;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96)) !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
}

.opsConsoleShell .serviceCustomerCloseoutRailHeader,
.opsConsoleShell .serviceCustomerCloseoutRail button {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 0.48rem 0.54rem !important;
  text-align: left !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail button {
  cursor: pointer !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail button.ready {
  border-left: 3px solid #059669 !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail button.warning {
  border-left: 3px solid #d97706 !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail button.danger {
  border-left: 3px solid #dc2626 !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail button.needsAction {
  border-left: 3px solid #64748b !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail span,
.opsConsoleShell .serviceCustomerCloseoutRail b {
  color: #1d4ed8 !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail strong,
.opsConsoleShell .serviceCustomerCloseoutRail small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.78rem !important;
  font-weight: 880 !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail small {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 680 !important;
}

.opsConsoleShell .serviceCustomerCloseoutRail em {
  justify-self: start !important;
  border-radius: 999px !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  padding: 0.16rem 0.44rem !important;
  font-size: 0.62rem !important;
  font-style: normal !important;
  font-weight: 860 !important;
}

.opsConsoleShell .serviceCustomerCloseoutProofStrip {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceCustomerCloseoutProofStrip span {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-left: 0.22rem solid #2563eb !important;
  border-radius: 0.5rem !important;
  background: rgba(255, 255, 255, 0.94) !important;
  padding: 0.48rem 0.54rem !important;
}

.opsConsoleShell .serviceCustomerCloseoutProofStrip span.ready {
  border-left-color: #059669 !important;
  background: #f0fdf4 !important;
}

.opsConsoleShell .serviceCustomerCloseoutProofStrip span.warning {
  border-left-color: #d97706 !important;
  background: #fffbeb !important;
}

.opsConsoleShell .serviceCustomerCloseoutProofStrip span.needsAction {
  border-left-color: #64748b !important;
  background: #f8fafc !important;
}

.opsConsoleShell .serviceCustomerMoneyDashboard {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.opsConsoleShell .serviceCustomerMoneyCard {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 3px !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.opsConsoleShell .serviceCustomerMoneyCard.ready {
  border-left-color: #059669 !important;
}

.opsConsoleShell .serviceCustomerMoneyCard.warning {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .serviceCustomerMoneyCard.danger {
  border-left-color: #dc2626 !important;
}

.opsConsoleShell .serviceCustomerMoneyCard.needsAction {
  border-left-color: #64748b !important;
}

.opsConsoleShell .serviceCustomerMoneyOpen,
.opsConsoleShell .serviceCustomerMoneyActions button {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceCustomerMoneyOpen {
  display: grid !important;
  gap: 0.12rem !important;
  justify-items: start !important;
  padding: 0.5rem 0.58rem 0.28rem !important;
  text-align: left !important;
}

.opsConsoleShell .serviceCustomerMoneyOpen b,
.opsConsoleShell .fieldMoneyActionCard b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceCustomerMoneyOpen span,
.opsConsoleShell .fieldMoneyActionCard strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.82rem !important;
  font-weight: 860 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCustomerMoneyOpen small,
.opsConsoleShell .fieldMoneyActionCard small {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 680 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCustomerMoneyActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.24rem !important;
  padding: 0 0.42rem 0.42rem !important;
}

.opsConsoleShell .serviceCustomerMoneyActions button,
.opsConsoleShell .fieldMoneyActionCard span {
  min-height: 1.9rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
  text-align: center !important;
}

.opsConsoleShell .serviceCustomerMoneyActions button:only-child {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .serviceRecordCard {
  display: flex !important;
  flex-direction: column !important;
}

.opsConsoleShell .serviceRecordCardTop {
  order: 1 !important;
}

.opsConsoleShell .serviceRecordActions {
  order: 2 !important;
  margin: 0.24rem 0 0.36rem !important;
}

.opsConsoleShell .serviceRecordCard > .serviceDetailList {
  order: 3 !important;
}

.opsConsoleShell .serviceNestedRecords {
  order: 4 !important;
}

.opsConsoleShell .serviceRecordInspector {
  order: 5 !important;
}

.opsConsoleShell .fieldMoneyActionRail {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
}

.opsConsoleShell .fieldMoneyActionCard {
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 3px !important;
  border-radius: 0.48rem !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.opsConsoleShell .fieldMoneyActionCard.ready {
  border-left-color: #059669 !important;
}

.opsConsoleShell .fieldMoneyActionCard.warning {
  border-left-color: #d97706 !important;
}

.opsConsoleShell .fieldMoneyActionCard.danger {
  border-left-color: #dc2626 !important;
}

.opsConsoleShell .fieldMoneyActionCard.needsAction {
  border-left-color: #64748b !important;
}

.opsConsoleShell .fieldMoneyActionCard button {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
  justify-items: start !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0.5rem 0.56rem !important;
  text-align: left !important;
}

.opsConsoleShell .fieldMoneyActionCard span {
  display: inline-grid !important;
  align-items: center !important;
  justify-self: stretch !important;
  margin-top: 0.2rem !important;
}

.opsConsoleShell .serviceUnifiedSyncStatus small,
.opsConsoleShell .serviceBookingPlan li,
.opsConsoleShell .fieldUnifiedSyncStatus small,
.opsConsoleShell .fieldMembershipPackagePlan li {
  line-height: 1.25 !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard {
    order: -4 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateActionCard {
    order: -4 !important;
  }

  .opsConsoleShell .serviceIntent-membership .serviceMembershipActionCard {
    order: -4 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-estimate .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-membership .serviceCustomerMoneyDashboard {
    order: -5 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell,
  .opsConsoleShell * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent {
    overflow-x: hidden !important;
  }

  .opsConsoleShell .serviceCustomerMoneyDashboard {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .serviceCustomerCloseoutRail {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .serviceCustomerCloseoutProofStrip {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .serviceCustomerCloseoutRail strong,
  .opsConsoleShell .serviceCustomerCloseoutRail small {
    white-space: normal !important;
  }

  .opsConsoleShell .serviceCustomerMoneyCard {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
  }

  .opsConsoleShell .serviceCustomerMoneyActions {
    width: 5.7rem !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    padding: 0.38rem !important;
  }

  .opsConsoleShell .serviceCustomerMoneyOpen span,
  .opsConsoleShell .serviceCustomerMoneyOpen small {
    white-space: normal !important;
  }

  .opsConsoleShell .serviceRecordIndex {
    position: sticky !important;
    top: 3.2rem !important;
    z-index: 4 !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
    border-radius: 0.48rem !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 var(--ops-border, #dbe1ea) !important;
  }

  .opsConsoleShell .serviceRecordIndex > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    max-height: 9.5rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
  }

  .opsConsoleShell .serviceRecordIndex button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.3rem !important;
    padding: 0.26rem 0.34rem !important;
  }

  .opsConsoleShell .serviceRecordTabs {
    display: none !important;
  }

  .opsConsoleShell .serviceRecordsBody {
    padding-top: 0.42rem !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .serviceRecordActions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
  }

  .opsConsoleShell .serviceRecordActionButton {
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard,
  .opsConsoleShell .serviceIntent-estimate .serviceEstimateActionCard,
  .opsConsoleShell .serviceIntent-membership .serviceMembershipActionCard {
    order: -4 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-estimate .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-membership .serviceCustomerMoneyDashboard {
    order: -5 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceCustomerCloseoutRail,
  .opsConsoleShell .serviceIntent-estimate .serviceCustomerCloseoutRail,
  .opsConsoleShell .serviceIntent-membership .serviceCustomerCloseoutRail {
    order: -6 !important;
  }

  .opsConsoleShell .serviceUnifiedSyncStatus {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .serviceUnifiedSyncStatus small {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitProgressSummary,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitLifecycleRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    order: 5 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitProgressSummary {
    grid-template-columns: 1fr !important;
    order: 6 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitLifecycleRail {
    order: 7 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    order: 8 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    order: 9 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 10 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 11 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail a,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitProgressSummary,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitNextAction,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitStep,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .opsConsoleShell .fieldSalesForms,
  .opsConsoleShell .fieldEstimatePackageStarter,
  .opsConsoleShell .fieldTemplateStarter,
  .opsConsoleShell .fieldCustomEstimateOptionComposer,
  .opsConsoleShell .fieldCustomEstimateLineComposer,
  .opsConsoleShell .fieldEstimateSignatureUpload,
  .opsConsoleShell .fieldEstimateCloseoutPlan {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldSalesForms label,
  .opsConsoleShell .fieldCustomEstimateOptionComposer label,
  .opsConsoleShell .fieldCustomEstimateLineComposer label,
  .opsConsoleShell .fieldSalesForms input,
  .opsConsoleShell .fieldCustomEstimateOptionComposer input,
  .opsConsoleShell .fieldCustomEstimateOptionComposer select,
  .opsConsoleShell .fieldCustomEstimateLineComposer input,
  .opsConsoleShell .fieldCustomEstimateLineComposer select,
  .opsConsoleShell .fieldSalesForms select,
  .opsConsoleShell .fieldSalesForms button,
  .opsConsoleShell .fieldCustomEstimateLineComposer button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Customer money + action dashboard QA guards: no hidden sideways controls. */
.opsConsoleShell .fieldEstimateSignatureUpload,
.opsConsoleShell .fieldEstimateCloseoutPlan,
.opsConsoleShell .fieldSignaturePad,
.opsConsoleShell .fieldSignatureCanvas,
.opsConsoleShell .fieldSignaturePadActions,
.opsConsoleShell .adminTriageBar,
.opsConsoleShell .adminQuickFilters,
.opsConsoleShell .adminTriageCounts,
.opsConsoleShell .adminRoleOverview,
.opsConsoleShell .adminRoleOverview > div {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.opsConsoleShell .fieldSignatureCanvas {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

.opsConsoleShell .fieldSignaturePad {
  overflow: hidden !important;
}

.opsConsoleShell .fieldSignaturePadActions button,
.opsConsoleShell .fieldEstimateCloseoutPlan label,
.opsConsoleShell .fieldEstimateCloseoutPlan select,
.opsConsoleShell .fieldEstimateCloseoutPlan .fieldInlineSwitch {
  min-width: 0 !important;
  max-width: 100% !important;
}

.opsConsoleShell .adminQuickFilters,
.opsConsoleShell .adminTriageCounts {
  display: flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.opsConsoleShell .adminQuickFilters button,
.opsConsoleShell .adminTriageCounts span {
  flex: 1 1 5.6rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceRecordTabs {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.34rem !important;
    max-width: 100% !important;
    min-height: 3rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .opsConsoleShell .serviceRecordTabs::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .serviceRecordTabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldEstimateSignatureUpload,
  .opsConsoleShell .fieldEstimateCloseoutPlan,
  .opsConsoleShell .fieldSignaturePad,
  .opsConsoleShell .fieldSignaturePadActions {
    width: 100% !important;
    max-width: calc(100vw - 2rem) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldEstimateCloseoutPlan {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .fieldSignaturePadActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .adminTriageBar,
  .opsConsoleShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminTriageCounts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .adminQuickFilters button,
  .opsConsoleShell .adminTriageCounts span,
  .opsConsoleShell .adminRoleOverview > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Standalone /ux-fixture panels use the same action-first layout without the app shell wrapper. */
.serviceCustomerMoneyDashboard {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.serviceCustomerMoneyCard,
.fieldMoneyActionCard {
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-left-width: 3px !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.serviceCustomerMoneyCard {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

.serviceCustomerMoneyCard.ready,
.fieldMoneyActionCard.ready {
  border-left-color: #059669 !important;
}

.serviceCustomerMoneyCard.warning,
.fieldMoneyActionCard.warning {
  border-left-color: #d97706 !important;
}

.serviceCustomerMoneyCard.danger,
.fieldMoneyActionCard.danger {
  border-left-color: #dc2626 !important;
}

.serviceCustomerMoneyCard.needsAction,
.fieldMoneyActionCard.needsAction {
  border-left-color: #64748b !important;
}

.serviceCustomerMoneyOpen,
.serviceCustomerMoneyActions button,
.fieldMoneyActionCard button {
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.serviceCustomerMoneyOpen,
.fieldMoneyActionCard button {
  display: grid !important;
  width: 100% !important;
  gap: 0.1rem !important;
  justify-items: start !important;
  padding: 0.5rem 0.58rem 0.28rem !important;
  text-align: left !important;
}

.serviceCustomerMoneyOpen b,
.fieldMoneyActionCard b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
  font-weight: 860 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.serviceCustomerMoneyOpen span,
.fieldMoneyActionCard strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.82rem !important;
  font-weight: 860 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.serviceCustomerMoneyOpen small,
.fieldMoneyActionCard small {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.68rem !important;
  font-weight: 680 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.serviceCustomerMoneyEvidence,
.fieldMoneyActionEvidence {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.18rem !important;
  margin-top: 0.18rem !important;
  max-width: 100% !important;
}

.serviceCustomerMoneyEvidence em,
.fieldMoneyActionEvidence em {
  display: inline-flex !important;
  max-width: 100% !important;
  min-height: 1.05rem !important;
  align-items: center !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: #0f4f7a !important;
  font-size: 0.58rem !important;
  font-style: normal !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  padding: 0.08rem 0.34rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.serviceCustomerMoneyActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.24rem !important;
  padding: 0 0.42rem 0.42rem !important;
}

.serviceCustomerMoneyActions button,
.fieldMoneyActionCard span {
  min-height: 1.9rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.38rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
  text-align: center !important;
}

.serviceCustomerMoneyActions button:only-child {
  grid-column: 1 / -1 !important;
}

.fieldMoneyActionRail {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
}

.fieldVisitLifecycleRail {
  display: grid !important;
  grid-template-columns: minmax(9rem, 1.25fr) repeat(5, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  max-width: 100% !important;
}

.fieldVisitReadinessStrip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.fieldVisitDayPlan {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.fieldVisitCloseoutPath {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
}

.fieldVisitDayPlan span,
.fieldVisitReadinessStrip span,
.fieldVisitCloseoutPath span {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.72rem !important;
  padding: 0.46rem 0.54rem !important;
  background: #ffffff !important;
}

.fieldVisitDayPlan span.ready,
.fieldVisitReadinessStrip span.ready,
.fieldVisitCloseoutPath span.ready {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

.fieldVisitDayPlan span.pending,
.fieldVisitReadinessStrip span.pending,
.fieldVisitCloseoutPath span.pending {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

.fieldVisitDayPlan span.needs_action,
.fieldVisitReadinessStrip span.needs_action,
.fieldVisitCloseoutPath span.needs_action {
  border-color: #fecaca !important;
  background: #fff7ed !important;
}

.fieldVisitDayPlan b,
.fieldVisitDayPlan strong,
.fieldVisitDayPlan small,
.fieldVisitReadinessStrip b,
.fieldVisitReadinessStrip strong,
.fieldVisitReadinessStrip small,
.fieldVisitCloseoutPath b,
.fieldVisitCloseoutPath strong,
.fieldVisitCloseoutPath small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fieldVisitDayPlan b,
.fieldVisitDayPlan small,
.fieldVisitReadinessStrip b,
.fieldVisitReadinessStrip small,
.fieldVisitCloseoutPath b,
.fieldVisitCloseoutPath small {
  color: var(--ops-muted, #64748b) !important;
  font-size: 0.66rem !important;
  font-weight: 760 !important;
}

.fieldVisitDayPlan strong,
.fieldVisitReadinessStrip strong,
.fieldVisitCloseoutPath strong {
  color: var(--ops-text, #111827) !important;
  font-size: 0.78rem !important;
  font-weight: 880 !important;
}

.fieldVisitProgressSummary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.52rem !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.72rem !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  padding: 0.52rem 0.62rem !important;
}

.fieldVisitProgressSummary span {
  display: grid !important;
  gap: 0.06rem !important;
  min-width: 0 !important;
}

.fieldVisitProgressSummary b,
.fieldVisitProgressSummary small,
.fieldVisitProgressSummary em {
  overflow: hidden !important;
  color: var(--ops-muted, #64748b) !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fieldVisitProgressSummary strong {
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fieldVisitNextAction,
.fieldVisitStep {
  min-width: 0 !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.72rem !important;
  background: #ffffff !important;
  padding: 0.52rem 0.56rem !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

button.fieldVisitStep {
  cursor: pointer !important;
  text-align: left !important;
}

button.fieldVisitStep:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

button.fieldVisitStep:disabled {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

.fieldVisitNextAction {
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  border-color: #bfdbfe !important;
}

.fieldVisitNextAction button {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

.fieldVisitNextAction button:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 3px !important;
}

.fieldVisitNextAction button:disabled {
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

.fieldVisitNextAction span,
.fieldVisitNextAction small,
.fieldVisitStep small {
  display: block !important;
  color: var(--ops-muted, #64748b) !important;
  font-size: 0.66rem !important;
  line-height: 1.2 !important;
}

.fieldVisitNextAction b,
.fieldVisitStep b {
  display: block !important;
  overflow: hidden !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.76rem !important;
  font-weight: 860 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fieldVisitStep.ready {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

.fieldVisitStep.pending {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

.fieldVisitStep.needs_action,
.fieldVisitNextAction.needs_action {
  border-color: #fecaca !important;
  background: #fff7ed !important;
}

.fieldMoneyActionCard button {
  padding: 0.5rem 0.56rem !important;
}

.fieldMoneyActionCard span {
  display: inline-grid !important;
  align-items: center !important;
  justify-self: stretch !important;
  margin-top: 0.2rem !important;
}

@media (min-width: 921px) {
  .serviceRecordTabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)) !important;
    gap: 0.34rem !important;
    overflow: visible !important;
  }

  .serviceRecordTabs button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 920px) {
  .serviceCustomerMoneyDashboard {
    grid-template-columns: 1fr !important;
  }

  .serviceCustomerMoneyCard {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
  }

  .serviceCustomerMoneyActions {
    width: 5.7rem !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    padding: 0.38rem !important;
  }

  .serviceCustomerMoneyOpen span,
  .serviceCustomerMoneyOpen small,
  .fieldMoneyActionCard strong,
  .fieldMoneyActionCard small {
    white-space: normal !important;
  }

  .serviceRecordTabs {
    display: none !important;
  }

  .serviceRecordActions,
  .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitDayPlan,
  .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitReadinessStrip,
  .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitCloseoutPath,
  .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldVisitLifecycleRail,
  .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.28rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .serviceRecordActionButton,
  .fieldVisitNextAction,
  .fieldVisitStep,
  .fieldMoneyActionCard,
  .fieldMoneyActionCard button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .fieldAppShell .fieldEstimateSignatureUpload,
  .fieldAppShell .fieldCustomEstimateOptionComposer,
  .fieldAppShell .fieldCustomEstimateLineComposer,
  .fieldAppShell .fieldEstimateCloseoutPlan,
  .fieldAppShell .fieldSignaturePad,
  .fieldAppShell .fieldSignaturePadActions {
    width: 100% !important;
    max-width: calc(100vw - 3.25rem) !important;
    overflow-x: hidden !important;
  }

  .fieldAppShell .fieldEstimateCloseoutPlan {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fieldAppShell .fieldEstimateSignatureUpload,
  .fieldAppShell .fieldCustomEstimateOptionComposer,
  .fieldAppShell .fieldCustomEstimateLineComposer {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fieldAppShell .fieldEstimateCloseoutPlan label,
  .fieldAppShell .fieldEstimateCloseoutPlan select,
  .fieldAppShell .fieldEstimateCloseoutPlan .fieldInlineSwitch,
  .fieldAppShell .fieldCustomEstimateOptionComposer > *,
  .fieldAppShell .fieldCustomEstimateOptionComposer input,
  .fieldAppShell .fieldCustomEstimateOptionComposer select,
  .fieldAppShell .fieldCustomEstimateLineComposer > *,
  .fieldAppShell .fieldCustomEstimateLineComposer input,
  .fieldAppShell .fieldCustomEstimateLineComposer select,
  .fieldAppShell .fieldEstimateSignatureUpload > *,
  .fieldAppShell .fieldEstimateSignatureUpload input,
  .fieldAppShell .fieldEstimateSignatureUpload small {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }

  .fieldAppShell .fieldSignaturePadActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .adminAppShell .adminTriageBar,
  .adminAppShell .adminRoleOverview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  .adminAppShell .adminQuickFilters,
  .adminAppShell .adminTriageCounts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .adminAppShell .adminQuickFilters button,
  .adminAppShell .adminTriageCounts span,
  .adminAppShell .adminRoleOverview > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .phoneGlobalCallActions,
  .phoneToolbarActions,
  .phoneMobileCustomerActions,
  .phoneCallbackActions,
  .chatHeaderActions,
  .chatMobileMemberActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .phoneMobileCustomerActions.mobileOnly,
  .chatMobileContextStrip.mobileOnly,
  .phoneAppShell .phoneDetail .phoneMobileCustomerActions.mobileOnly,
  .chatMain.mobileActive .chatHeader .chatMobileContextStrip.mobileOnly {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-inline: 0.5rem !important;
  }

  .phoneGlobalCallActions button,
  .phoneToolbarActions button,
  .phoneMobileCustomerActions button,
  .phoneCallbackActions button,
  .chatHeaderActions button,
  .chatMobileMemberActions button,
  .chatMobileContextStrip button,
  .phoneAppShell .phoneDetail .phoneMobileCustomerActions.mobileOnly button,
  .chatMain.mobileActive .chatHeader .chatMobileContextStrip.mobileOnly button,
  .chatHeaderActions a,
  .chatMobileMemberActions a,
  .chatMobileContextStrip a,
  .chatMain.mobileActive .chatHeader .chatMobileContextStrip.mobileOnly a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Desktop audit 2026-06-19: keep daily work surfaces first and move proof/status
   chrome into compact, non-blocking affordances. */
@media (min-width: 921px) {
  .opsConsoleShell .chatBackButton.mobileOnly,
  .opsConsoleShell .serviceBackButton.mobileOnly {
    display: none !important;
  }
}

.fieldDiagnosticsDisclosure {
  margin: 0.45rem 1.15rem 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.fieldDiagnosticsDisclosure summary {
  display: flex;
  min-height: 2.2rem;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.42rem 0.62rem;
  color: #0f172a;
  list-style: none;
}

.fieldDiagnosticsDisclosure summary::-webkit-details-marker {
  display: none;
}

.fieldDiagnosticsDisclosure summary span {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.fieldDiagnosticsDisclosure summary b,
.fieldDiagnosticsDisclosure summary small,
.fieldDiagnosticsDisclosure summary em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldDiagnosticsDisclosure summary b {
  font-size: 0.72rem;
  font-weight: 900;
}

.fieldDiagnosticsDisclosure summary small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 740;
}

.fieldDiagnosticsDisclosure summary em {
  flex: 0 0 auto;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0.2rem 0.48rem;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
}

.fieldDiagnosticsDisclosure .fieldNativeReadinessStrip {
  padding: 0 0.62rem 0.62rem;
}

/* Native mobile field repair: no selected job should open to a job picker,
   not a disabled closeout checklist with raw sync internals. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.38rem !important;
    padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHero {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHero > div:first-child,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldMetricGrid,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldRangeSwitch,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldFocusCard.empty,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldScheduleRail {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHeroActions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.34rem !important;
    margin: 0 -0.62rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0.62rem 0.08rem !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHeroActions::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHeroActions .fieldOfflineCatalogStatus,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldTechContactSettings {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldHeroActions > button,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldModeSwitch button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 2.2rem !important;
    padding: 0 0.7rem !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldDiagnosticsDisclosure {
    margin: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldDiagnosticsDisclosure:not([open]) .fieldNativeReadinessStrip {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldSelectJobCard {
    min-height: 8.2rem !important;
    align-content: start !important;
    padding: 0.76rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldTodayEmptyActions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldTodayEmptyActions button {
    min-width: 0 !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobList {
    min-height: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldMainGrid {
    display: block !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel .fieldCardHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.2rem 0 0.28rem !important;
    border-bottom: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel .fieldCardHeader > div {
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel .fieldCardHeader p,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobsCard.activePanel .fieldCardHeader > span {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="day"][data-field-has-selected-job="false"] .fieldJobList {
    max-height: min(18rem, 42dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell .fieldDiagnosticsDisclosure {
    flex: 0 0 auto !important;
    margin: 0.28rem 0.72rem 0 !important;
  }

  .opsConsoleShell .fieldDiagnosticsDisclosure:not([open]) .fieldNativeReadinessStrip {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldDiagnosticsDisclosure {
    order: 3 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch {
    order: 1 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch {
    order: 2 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldMainGrid {
    order: 4 !important;
  }

  .phoneGlobalCallTray.callback.phoneUrgentTaskDrawer,
  .opsConsoleShell .phoneGlobalCallTray.callback.phoneUrgentTaskDrawer {
    top: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    left: auto !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    width: min(360px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    inline-size: min(360px, calc(100vw - 32px)) !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100vw - 32px) !important;
    min-height: 0 !important;
    gap: 8px !important;
    border-radius: 10px !important;
    padding: 8px !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
    z-index: 62 !important;
  }

  .phoneGlobalCallTray.callback .phoneGlobalCallCopy small,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallCopy small {
    max-width: 100% !important;
  }

  .phoneGlobalCallTray.callback .phoneGlobalCallIcon,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallIcon {
    width: 26px !important;
    height: 26px !important;
  }

  .phoneGlobalCallTray.callback .phoneGlobalCallActions,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .phoneGlobalCallTray.callback .phoneGlobalCallActions .answerButton,
  .phoneGlobalCallTray.callback .phoneUrgentTaskMore summary,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneGlobalCallActions .answerButton,
  .opsConsoleShell .phoneGlobalCallTray.callback .phoneUrgentTaskMore summary {
    min-height: 32px !important;
    border-radius: 7px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .phoneGlobalCallTray.callback .phoneUrgentTaskMore div,
  .opsConsoleShell .phoneUrgentTaskMore div {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
  }

  .opsConsoleShell .adminFirstReleasePanel {
    order: 80 !important;
    max-height: 10rem !important;
  }

  .opsConsoleShell .adminFirstReleasePanel .adminReportGrid,
  .opsConsoleShell .adminFirstReleasePanel .adminProofRunOrder {
    display: none !important;
  }

  .opsConsoleShell .chatHeaderActions {
    max-width: min(100%, 24rem) !important;
  }

  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction,
  .opsConsoleShell .chatHeaderActions .chatRefreshAction {
    min-width: 2.2rem !important;
    padding-inline: 0.44rem !important;
  }

  .opsConsoleShell .chatHeaderActions .chatDesktopContextAction span,
  .opsConsoleShell .chatHeaderActions .chatRefreshAction span {
    max-width: 4.15rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceActionGrid {
    grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)) !important;
    align-items: stretch !important;
  }

  .opsConsoleShell .serviceActionGrid button,
  .opsConsoleShell .serviceActionGrid a {
    min-width: 0 !important;
    min-height: 3.25rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceActionGrid strong,
  .opsConsoleShell .serviceActionGrid span,
  .opsConsoleShell .serviceMetricGrid strong,
  .opsConsoleShell .serviceMetricGrid span,
  .opsConsoleShell .serviceRecordCard h3,
  .opsConsoleShell .serviceRecordCard p {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .serviceActionGrid span,
  .opsConsoleShell .serviceRecordCard p {
    display: -webkit-box !important;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* Critical workflow focus: first viewport supports answer, text, book,
   estimate, and collect before secondary audit/proof chrome. */
.opsConsoleShell :is(
  .serviceIntent-payment .serviceCustomerCloseoutRail,
  .serviceIntent-payment .serviceCustomerMoneyDashboard,
  .serviceIntent-book .serviceAppointmentActionCard,
  .serviceIntent-estimate .serviceEstimateActionCard
) {
  order: -20 !important;
}

.opsConsoleShell :is(.serviceIntent-payment, .serviceIntent-book, .serviceIntent-estimate) {
  align-content: start !important;
}

.opsConsoleShell .serviceIntent-payment .serviceCustomerMoneyDashboard {
  margin-bottom: 0.52rem !important;
}

.opsConsoleShell :is(
  .serviceIntent-payment .serviceHeroCard,
  .serviceIntent-payment .serviceWorkflowCard,
  .serviceIntent-payment .serviceHandoffCard:not(.serviceWorkflowHandoffCard),
  .serviceIntent-payment .serviceActionGrid,
  .serviceIntent-book .serviceCustomerCloseoutRail,
  .serviceIntent-book .serviceCustomerMoneyDashboard,
  .serviceIntent-book .serviceWorkflowCard,
  .serviceIntent-book .serviceHandoffCard:not(.serviceWorkflowHandoffCard)
) {
  order: 40 !important;
}

.opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.48rem !important;
}

.opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > div:first-child::after {
  content: "Book now";
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  padding: 0.2rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 860;
}

.opsConsoleShell :is(
  .serviceIntent-book .serviceAppointmentActionCard button[type="submit"],
  .serviceIntent-payment .serviceCustomerMoneyActions button,
  .serviceIntent-payment .serviceCustomerCloseoutRail button
) {
  min-height: 2.35rem !important;
}

.opsConsoleShell .serviceIntent-payment .serviceCustomerCloseoutRailHeader {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

.opsConsoleShell .serviceProfileContent .serviceCustomerCloseoutRail {
  display: none !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceIntent-payment .serviceCustomerCloseoutRail {
    grid-template-columns: minmax(14rem, 1.05fr) repeat(4, minmax(8rem, 1fr)) !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0.52rem !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceBookingWorkspace {
    order: -35 !important;
  }

  .opsConsoleShell .serviceIntent-book :is(
    .serviceBookingWorkspaceHeader,
    .serviceAppointmentActionCard > div:first-child,
    .serviceScheduleFit,
    .serviceBookingPlan,
    .serviceUnifiedSyncStatus
  ) {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label {
    min-width: 0 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(1),
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(2),
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(3),
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(4) {
    order: 1 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(5) {
    order: 1 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(7),
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(8) {
    order: 2 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard button[type="submit"] {
    order: 2 !important;
    grid-column: span 2 !important;
    justify-self: stretch !important;
    background: #0f8a3b !important;
    color: #ffffff !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceScheduleFit {
    order: 3 !important;
    max-height: 13.5rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentConflictReview {
    order: -1 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label:nth-of-type(6) {
    order: 4 !important;
    grid-column: span 2 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceBookingPlan {
    order: 4 !important;
    grid-column: span 2 !important;
    max-height: 7rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceUnifiedSyncStatus {
    order: 5 !important;
  }

  /* Desktop north-star closeout order: Field keeps collect, closeout, and completion in the useful viewport. */
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] :is(
    .fieldDiagnosticsDisclosure,
    .fieldMetricGrid,
    .fieldVisitChecklist,
    .fieldScheduleRail,
    .fieldFocusFacts,
    .fieldCustomerContactPanel,
    .fieldPacketBookingEvidence,
    .fieldVisitProgressSummary,
    .fieldVisitDayPlan,
    .fieldVisitReadinessStrip,
    .fieldVisitCloseoutPath,
    .fieldVisitLifecycleRail,
    .fieldSecondaryActionRail,
    .fieldPartnerReferralComposer,
    .fieldPacketGrid,
    .fieldPacketList,
    .fieldMaskedCallPolicy,
    .fieldPacketStatus
  ) {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid {
    grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1.58fr) !important;
    gap: 0.72rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobsCard {
    max-height: calc(100vh - 10.5rem) !important;
    overflow: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.58rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    order: 1 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock {
    order: 5 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 6 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 7 !important;
    max-height: calc(100vh - 31rem) !important;
    min-height: 10rem !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Desktop north-star sell lane: selected Sell means the Estimate Builder is the work. */
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 2 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 3 !important;
    max-height: calc(100vh - 22rem) !important;
    min-height: 15rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    order: 4 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    order: 5 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCompletionChecklist {
    order: 6 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldPrimaryActionDock {
    order: 7 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionPanel {
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    min-height: 0 !important;
    margin: 0.36rem 0.52rem 0 !important;
    overflow: visible !important;
    padding: 0.52rem !important;
    border: 1px solid #dbe1ea !important;
    border-radius: 0.62rem !important;
    background: #f8fafc !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionPanel div:first-child {
    min-width: 0 !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionPanel small,
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionButtons button:nth-child(n + 4),
  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneMobileCustomerActions.mobileOnly {
    display: none !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionButtons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.36rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionButtons button {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 2.42rem !important;
    padding: 0.48rem 0.5rem !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  .opsConsoleShell .phoneDetail[data-selected-phone-channel="sms"] .phoneSelectedActionButtons .phoneSelectedBookPrimary {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent:is(.serviceIntent-book, .serviceIntent-estimate, .serviceIntent-membership, .serviceIntent-payment) {
    display: flex !important;
    flex-direction: column !important;
    align-content: stretch !important;
    align-items: stretch !important;
    padding-bottom: calc(8.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent:is(.serviceIntent-book, .serviceIntent-estimate, .serviceIntent-membership, .serviceIntent-payment) > * {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceProfileContent.serviceIntent-default .serviceCustomerCloseoutRail {
    display: none !important;
  }

  .opsConsoleShell .serviceIntent-book :is(
    .serviceHeroCard,
    .serviceCallBookingRail,
    .serviceCustomerCloseoutRail,
    .serviceCustomerMoneyDashboard,
    .serviceActionGrid,
    .serviceWorkflowCard,
    .serviceHandoffCard:not(.serviceWorkflowHandoffCard)
  ),
  .opsConsoleShell .serviceIntent-estimate :is(
    .serviceHeroCard,
    .serviceCallBookingRail,
    .serviceActionGrid,
    .serviceWorkflowCard,
    .serviceHandoffCard:not(.serviceWorkflowHandoffCard)
  ),
  .opsConsoleShell .serviceIntent-payment :is(
    .serviceHeroCard,
    .serviceCallBookingRail,
    .serviceActionGrid,
    .serviceWorkflowCard,
    .serviceHandoffCard:not(.serviceWorkflowHandoffCard),
    .serviceEstimateActionCard,
    .serviceCustomerCloseoutProofStrip
  ),
  .opsConsoleShell .serviceShell[data-initial-action="book"][data-has-initial-customer-profile="true"] :is(
    .inboundBookingOverlay,
    .noticeBanner
  ) {
    display: none !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard {
    order: -40 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.48rem !important;
    padding: 0.66rem !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > div:first-child {
    order: 0 !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > label {
    order: 1 !important;
  }

  .opsConsoleShell .serviceBookingWorkspace {
    order: -90 !important;
    grid-template-columns: 1fr !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .serviceBookingWorkspaceHeader {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .opsConsoleShell .serviceBookingSourceFacts,
  .opsConsoleShell .serviceBookingSourceCounts {
    grid-template-columns: 1fr 1fr !important;
  }

  .opsConsoleShell .serviceBookingSourceThread {
    max-height: 12rem !important;
  }

  .opsConsoleShell .serviceBookingForms {
    gap: 0.48rem !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard label {
    display: grid !important;
    grid-template-columns: minmax(5rem, 0.38fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.44rem !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard textarea {
    min-height: 4rem !important;
  }

  .opsConsoleShell .serviceIntent-book :is(
    .serviceScheduleFitCalendar,
    .serviceScheduleCalendar,
    .serviceScheduleDayBoard,
    .serviceScheduleFitTimeline,
    .serviceUnifiedSyncStatus small,
    .serviceBookingPlan li
  ),
  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard > .serviceInlineSwitch {
    display: none !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentActionCard button[type="submit"] {
    order: 4 !important;
    position: static !important;
    width: 100% !important;
    min-height: 2.9rem !important;
    margin-top: 0.1rem !important;
    background: #0f8a3b !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceScheduleFit {
    order: 3 !important;
    max-height: 12.5rem !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentConflictReview {
    order: -1 !important;
    gap: 0.34rem !important;
    padding: 0.46rem !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentConflictReview ul {
    display: none !important;
  }

  .opsConsoleShell .serviceIntent-book .serviceAppointmentConflictReview .serviceInlineSwitch {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 2.35rem !important;
  }

  .opsConsoleShell .serviceIntent-book :is(.serviceBookingPlan, .serviceUnifiedSyncStatus, .serviceInlineSwitch) {
    order: 5 !important;
  }

  .opsConsoleShell .serviceIntent-payment :is(.serviceCustomerCloseoutRail, .serviceCustomerMoneyDashboard) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.38rem !important;
    margin: 0 !important;
  }

  .opsConsoleShell .serviceIntent-payment .serviceCustomerCloseoutRail {
    overflow: visible !important;
  }

  .opsConsoleShell .serviceIntent-payment .serviceCustomerMoneyCard {
    min-height: 4.1rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] :is(
    .fieldPacketBookingEvidence,
    .fieldDiagnosticsDisclosure,
    .fieldMetricGrid,
    .fieldVisitChecklist,
    .fieldVisitProgressSummary,
    .fieldVisitDayPlan,
    .fieldVisitReadinessStrip,
    .fieldVisitCloseoutPath,
    .fieldVisitLifecycleRail,
    .fieldPartnerReferralComposer,
    .fieldSecondaryActionRail,
    .fieldCloseoutSummary,
    .fieldCompletionChecklist,
    .fieldModeSwitch
  ),
  .opsConsoleShell :is(
    .fieldEstimateRecommendedStart,
    .fieldCloseoutProofStrip,
    .fieldEstimateReviewHandoff,
    .fieldUnifiedSyncStatus,
    .fieldNativeCloseoutProof,
    .fieldMembershipBoundary,
    .fieldOfflineReadiness
  ) {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    order: 1 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    order: 3 !important;
    width: 100% !important;
    min-height: 19rem !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] :is(
    .fieldMoneyActionRail,
    .fieldPrimaryActionDock
  ) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    order: 4 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock {
    order: 5 !important;
  }

  .opsConsoleShell .fieldSalesComposer {
    gap: 0.46rem !important;
  }

  .opsConsoleShell :is(.fieldEstimateBuilderHandoff, .fieldCloseoutActionRail, .fieldSellCoachingStrip) {
    display: grid !important;
    gap: 0.36rem !important;
  }
}

/* Mobile notification finish: keep unread counts anchored to a visible icon. */
/* Desktop north-star workbenches: keep Phone/Text/Estimate/Collect action-first. */
.opsConsoleShell .phoneSelectedMoreActions {
  position: relative !important;
  min-width: 0 !important;
}

.opsConsoleShell .phoneSelectedMoreActions summary {
  display: inline-grid !important;
  min-height: 2.15rem !important;
  align-items: center !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.46rem !important;
  background: #f8fafc !important;
  color: var(--ops-text, #111827) !important;
  padding: 0 0.7rem !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
  cursor: pointer !important;
  list-style: none !important;
}

.opsConsoleShell .phoneSelectedMoreActions summary::-webkit-details-marker {
  display: none !important;
}

.opsConsoleShell .phoneSelectedMoreActions div {
  position: absolute !important;
  z-index: 12 !important;
  top: calc(100% + 0.35rem) !important;
  right: 0 !important;
  display: grid !important;
  width: min(15rem, 70vw) !important;
  gap: 0.3rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.56rem !important;
  background: #ffffff !important;
  padding: 0.42rem !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
}

.opsConsoleShell .phoneSelectedMoreActions:not([open]) div {
  display: none !important;
}

.opsConsoleShell .phoneSmsEmptyActionPanel {
  border-left: 4px solid #2563eb !important;
}

.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneProofSummaryStrip,
.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneInboundWorkbench,
.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneConsole,
.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneMobileCustomerActions {
  display: none !important;
}

.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneToolbar {
  border-bottom-color: rgba(37, 99, 235, 0.16) !important;
  background: #f8fbff !important;
}

.opsConsoleShell .phoneDetail[data-phone-intent="text"] .phoneSelectedActionPanel {
  margin-top: 0.55rem !important;
}

.opsConsoleShell .serviceCollectWorkbench,
.opsConsoleShell .serviceEstimateWorkbench {
  display: grid !important;
  gap: 0.56rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 0.65rem !important;
  background: #ffffff !important;
  padding: 0.62rem !important;
  overflow: visible !important;
  overflow-x: clip !important;
}

.opsConsoleShell .serviceTitanJobActionStrip {
  display: grid !important;
  grid-template-columns: minmax(14rem, 0.34fr) minmax(0, 1fr) !important;
  gap: 0.58rem !important;
  align-items: stretch !important;
  order: -55 !important;
  min-width: 0 !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  border-radius: 0.68rem !important;
  background: #f8fffb !important;
  padding: 0.62rem !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
}

.opsConsoleShell .serviceTitanJobActionStrip > div:first-child {
  display: grid !important;
  align-content: center !important;
  gap: 0.14rem !important;
  min-width: 0 !important;
  border-right: 1px solid rgba(15, 118, 110, 0.16) !important;
  padding-right: 0.58rem !important;
}

.opsConsoleShell .serviceTitanJobActionStrip > div:first-child strong {
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceTitanJobActionStrip > div:first-child small {
  color: #64748b !important;
  font-size: 0.72rem !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
}

.opsConsoleShell .serviceTitanJobActionStrip > div[role="list"] {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceTitanJobActionStrip button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 3.25rem !important;
  align-content: center !important;
  gap: 0.12rem !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 0.5rem !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.44rem 0.5rem !important;
  text-align: left !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceTitanJobActionStrip button b,
.opsConsoleShell .serviceTitanJobActionStrip button small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceTitanJobActionStrip button b {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceTitanJobActionStrip button small {
  color: #64748b !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
}

.opsConsoleShell .serviceMvpWorkflowGuide {
  display: grid !important;
  gap: 0.5rem !important;
  order: -54 !important;
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 0.68rem !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  padding: 0.62rem !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
}

.opsConsoleShell .serviceMvpWorkflowHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowHeader > div {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowHeader strong,
.opsConsoleShell .serviceMvpWorkflowHeader small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceMvpWorkflowHeader strong {
  color: #0f172a !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceMvpWorkflowHeader small {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr) !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowEvidence {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(22, 163, 74, 0.18) !important;
  border-radius: 0.62rem !important;
  background: linear-gradient(135deg, #f7fef9 0%, #ffffff 100%) !important;
  padding: 0.46rem !important;
}

.opsConsoleShell .serviceMvpWorkflowHandoff {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty span,
.opsConsoleShell .serviceMvpWorkflowProperty button,
.opsConsoleShell .serviceMvpWorkflowEvidence span,
.opsConsoleShell .serviceMvpWorkflowEvidence label,
.opsConsoleShell .serviceMvpWorkflowEvidence button,
.opsConsoleShell .serviceMvpWorkflowHandoff a,
.opsConsoleShell .serviceMvpWorkflowHandoff button {
  display: grid !important;
  gap: 0.1rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  border-radius: 0.55rem !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.48rem !important;
  text-align: left !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty button {
  cursor: pointer !important;
}

.opsConsoleShell .serviceMvpWorkflowEvidence button,
.opsConsoleShell .serviceMvpWorkflowHandoff a,
.opsConsoleShell .serviceMvpWorkflowHandoff button {
  cursor: pointer !important;
  text-decoration: none !important;
}

.opsConsoleShell .serviceMvpCheckoutApproval {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  cursor: pointer !important;
}

.opsConsoleShell .serviceMvpCheckoutApproval input {
  margin: 0.18rem 0 0 !important;
}

.opsConsoleShell .serviceMvpCheckoutApproval span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowEvidence button:disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty b,
.opsConsoleShell .serviceMvpWorkflowProperty strong,
.opsConsoleShell .serviceMvpWorkflowProperty small,
.opsConsoleShell .serviceMvpWorkflowEvidence b,
.opsConsoleShell .serviceMvpWorkflowEvidence strong,
.opsConsoleShell .serviceMvpWorkflowEvidence small,
.opsConsoleShell .serviceMvpWorkflowHandoff b,
.opsConsoleShell .serviceMvpWorkflowHandoff strong,
.opsConsoleShell .serviceMvpWorkflowHandoff small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty b,
.opsConsoleShell .serviceMvpWorkflowEvidence b,
.opsConsoleShell .serviceMvpCheckoutApproval b,
.opsConsoleShell .serviceMvpWorkflowHandoff b {
  color: #2563eb !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty strong,
.opsConsoleShell .serviceMvpWorkflowEvidence strong,
.opsConsoleShell .serviceMvpCheckoutApproval strong,
.opsConsoleShell .serviceMvpWorkflowHandoff strong {
  font-size: 0.73rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceMvpWorkflowProperty small,
.opsConsoleShell .serviceMvpWorkflowEvidence small,
.opsConsoleShell .serviceMvpCheckoutApproval small,
.opsConsoleShell .serviceMvpWorkflowHandoff small {
  color: #64748b !important;
  font-size: 0.64rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  border-radius: 0.55rem !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0.48rem !important;
  text-align: left !important;
  box-shadow: none !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button.ready {
  border-color: rgba(22, 163, 74, 0.32) !important;
  background: #f7fef9 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button.warning,
.opsConsoleShell .serviceMvpWorkflowSteps button.current {
  border-color: rgba(245, 158, 11, 0.42) !important;
  background: #fffaf0 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button.needsAction {
  border-color: rgba(37, 99, 235, 0.32) !important;
  background: #f8fbff !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button b {
  display: grid !important;
  width: 1.35rem !important;
  height: 1.35rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #eaf2ff !important;
  color: #1d4ed8 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button.ready b {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button span {
  display: grid !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button strong,
.opsConsoleShell .serviceMvpWorkflowSteps button small,
.opsConsoleShell .serviceMvpWorkflowSteps button em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button strong {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceMvpWorkflowSteps button small,
.opsConsoleShell .serviceMvpWorkflowSteps button em {
  color: #64748b !important;
  font-size: 0.64rem !important;
  font-weight: 720 !important;
}

.opsConsoleShell .serviceMvpWorkflowGuide p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 0.68rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

/* ServiceTitan reference pass: desktop Customer Files behave like a dense job
   record console with persistent context, tabs, tables, and right-side actions. */
@media (min-width: 1040px) {
  .opsConsoleShell .serviceShell {
    grid-template-columns: minmax(17.5rem, 20rem) minmax(30rem, 1.1fr) minmax(24rem, 0.9fr) !important;
    gap: 0 !important;
    min-height: calc(100vh - 5.25rem) !important;
    border: 1px solid #d7dce4 !important;
    border-radius: 0.28rem !important;
    background: #ffffff !important;
    padding: 0 !important;
    color: #1f2937 !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane {
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane {
    border-right: 1px solid #d7dce4 !important;
  }

  .opsConsoleShell .servicePaneHeader,
  .opsConsoleShell .serviceColumnHeader {
    min-height: 3.9rem !important;
    border-bottom: 1px solid #d7dce4 !important;
    background: #f7f8fa !important;
    padding: 0.72rem 0.85rem !important;
  }

  .opsConsoleShell .servicePaneHeader h2,
  .opsConsoleShell .serviceColumnHeader h2 {
    margin: 0.08rem 0 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

  .opsConsoleShell .serviceColumnHeader p,
  .opsConsoleShell .servicePaneHeader p {
    color: #6b7280 !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .serviceSearchBar,
  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordPanel,
  .opsConsoleShell .serviceRecordsPane > :not(.serviceColumnHeader) {
    scrollbar-color: #aab3c0 #f2f4f7 !important;
  }

  .opsConsoleShell .serviceCustomerCard,
  .opsConsoleShell .serviceHeroCard,
  .opsConsoleShell .serviceInfoCard,
  .opsConsoleShell .serviceContactActionCard,
  .opsConsoleShell .serviceRecordCard,
  .opsConsoleShell .serviceInboundOpsPanel,
  .opsConsoleShell .serviceCommsJobWorkspace,
  .opsConsoleShell .serviceMvpWorkflowGuide,
  .opsConsoleShell .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceCustomerCloseoutRail,
  .opsConsoleShell .serviceCollectWorkbench,
  .opsConsoleShell .serviceEstimateWorkbench {
    border-radius: 0.3rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .serviceRecordTabs {
    gap: 0 !important;
    border: 1px solid #d7dce4 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: #f7f8fa !important;
    padding: 0 !important;
  }

  .opsConsoleShell .serviceRecordTabs button {
    min-height: 2.28rem !important;
    border: 0 !important;
    border-right: 1px solid #d7dce4 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #374151 !important;
    padding: 0.42rem 0.62rem !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
  }

  .opsConsoleShell .serviceRecordTabs button.active {
    background: #ffffff !important;
    color: #0369a1 !important;
    box-shadow: inset 0 -3px 0 #0ea5e9 !important;
  }
}

.opsConsoleShell .serviceTitanRecordHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 0.27fr) !important;
  grid-template-areas:
    "main actions"
    "facts actions" !important;
  gap: 0.58rem !important;
  order: -70 !important;
  min-width: 0 !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 0.34rem !important;
  background: #ffffff !important;
  padding: 0.62rem !important;
}

.opsConsoleShell .serviceTitanRecordMain {
  grid-area: main !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(13rem, 0.95fr) !important;
  gap: 0.6rem !important;
  min-width: 0 !important;
}

.opsConsoleShell .serviceTitanRecordMain h3 {
  margin: 0.08rem 0 !important;
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 860 !important;
  line-height: 1.2 !important;
}

.opsConsoleShell .serviceTitanRecordMain p {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 0.74rem !important;
  line-height: 1.28 !important;
}

.opsConsoleShell .serviceTitanRecordIdentity,
.opsConsoleShell .serviceTitanRecordFacts {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.32rem !important;
}

.opsConsoleShell .serviceTitanRecordIdentity {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.opsConsoleShell .serviceTitanRecordIdentity span,
.opsConsoleShell .serviceTitanRecordFacts span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.08rem !important;
  overflow: hidden !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 0.24rem !important;
  background: #f8fafc !important;
  padding: 0.34rem 0.42rem !important;
  color: #1f2937 !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceTitanRecordIdentity b,
.opsConsoleShell .serviceTitanRecordFacts b {
  color: #6b7280 !important;
  font-size: 0.57rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceTitanRecordFacts {
  grid-area: facts !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.opsConsoleShell .serviceTitanRecordFacts span.ready {
  border-color: #b7e4c7 !important;
  background: #f1fbf4 !important;
}

.opsConsoleShell .serviceTitanRecordFacts span.warning {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

.opsConsoleShell .serviceTitanRecordFacts span.danger {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
}

.opsConsoleShell .serviceTitanRecordFacts span.needsAction {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}

.opsConsoleShell .serviceTitanActionRail {
  grid-area: actions !important;
  display: grid !important;
  min-width: 0 !important;
  align-content: start !important;
  gap: 0.34rem !important;
  border-left: 1px solid #d7dce4 !important;
  padding-left: 0.58rem !important;
}

.opsConsoleShell .serviceTitanActionRail button {
  min-width: 0 !important;
  min-height: 2.15rem !important;
  border: 1px solid #b8c2d1 !important;
  border-radius: 0.24rem !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  padding: 0.4rem 0.52rem !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.opsConsoleShell .serviceTitanActionRail button:first-child,
.opsConsoleShell .serviceTitanActionRail button:nth-child(4) {
  border-color: #0ea5e9 !important;
  background: #eaf7ff !important;
  color: #075985 !important;
}

.opsConsoleShell .serviceProfilePane,
.opsConsoleShell .serviceRecordsPane,
.opsConsoleShell .serviceShell,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceContactActionCard {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

.opsConsoleShell .serviceCollectHeader,
.opsConsoleShell .serviceEstimateControlGrid,
.opsConsoleShell .serviceEstimateActionRow,
.opsConsoleShell .serviceCollectActionRow,
.opsConsoleShell .serviceEstimateOptionCards,
.opsConsoleShell .serviceCollectStatusStrip {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.42rem !important;
}

.opsConsoleShell .serviceCollectHeader {
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.36fr) !important;
  align-items: stretch !important;
}

.opsConsoleShell .serviceCollectHeader > div,
.opsConsoleShell .serviceEstimateOptionCards span,
.opsConsoleShell .serviceCollectStatusStrip span {
  display: grid !important;
  min-width: 0 !important;
  gap: 0.12rem !important;
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.5rem !important;
  background: #f8fafc !important;
  padding: 0.5rem 0.56rem !important;
}

.opsConsoleShell .serviceCollectAmount {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

.opsConsoleShell .serviceCollectHeader span,
.opsConsoleShell .serviceEstimateOptionCards b,
.opsConsoleShell .serviceCollectStatusStrip b {
  color: var(--ops-muted, #667085) !important;
  font-size: 0.62rem !important;
  font-weight: 880 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.opsConsoleShell .serviceCollectHeader strong,
.opsConsoleShell .serviceEstimateOptionCards strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-text, #111827) !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCollectHeader small,
.opsConsoleShell .serviceEstimateOptionCards small {
  display: block !important;
  max-width: 100% !important;
  color: var(--ops-muted, #667085) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.opsConsoleShell .serviceCollectActionRow,
.opsConsoleShell .serviceEstimateActionRow {
  grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr)) !important;
}

.opsConsoleShell .serviceEstimateActionRow {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.opsConsoleShell .serviceVerbalApprovalPanel {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) !important;
  gap: 0.5rem !important;
  align-items: end !important;
  border: 1px solid rgba(15, 118, 110, 0.2) !important;
  border-radius: 0.58rem !important;
  background: linear-gradient(135deg, #ecfdf5, #f8fafc) !important;
  padding: 0.62rem !important;
}

.opsConsoleShell .serviceVerbalApprovalPanel > div:first-child,
.opsConsoleShell .serviceVerbalApprovalNote,
.opsConsoleShell .serviceVerbalApprovalPanel .serviceInlineSwitch,
.opsConsoleShell .serviceVerbalApprovalPanel .serviceRecordActions {
  grid-column: 1 / -1 !important;
}

.opsConsoleShell .serviceVerbalApprovalPanel strong {
  color: #064e3b !important;
  font-weight: 900 !important;
}

.opsConsoleShell .serviceVerbalApprovalPanel p,
.opsConsoleShell .serviceVerbalApprovalPanel small {
  color: #475569 !important;
  margin: 0.08rem 0 0 !important;
}

.opsConsoleShell .serviceCollectActionRow button,
.opsConsoleShell .serviceCollectActionRow a,
.opsConsoleShell .serviceEstimateActionRow button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 2.45rem !important;
  border-radius: 0.46rem !important;
  font-size: 0.74rem !important;
  font-weight: 840 !important;
  text-decoration: none !important;
  white-space: normal !important;
}

.opsConsoleShell .serviceCollectPrimary,
.opsConsoleShell .serviceEstimatePrimaryAction {
  background: #0f8a3b !important;
  color: #ffffff !important;
}

.opsConsoleShell .serviceEstimateControlGrid {
  grid-template-columns: minmax(12rem, 0.45fr) minmax(0, 1fr) !important;
}

.opsConsoleShell .serviceEstimateOptionCards,
.opsConsoleShell .serviceCollectStatusStrip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.opsConsoleShell .serviceEstimateDiagnostics {
  border: 1px solid var(--ops-border, #dbe1ea) !important;
  border-radius: 0.56rem !important;
  background: #f8fafc !important;
  padding: 0.52rem !important;
}

.opsConsoleShell .serviceEstimateDiagnostics summary {
  cursor: pointer !important;
  color: var(--ops-text, #111827) !important;
  font-weight: 850 !important;
}

@media (min-width: 921px) {
  .opsConsoleShell[data-active-surface="service"] .phoneGlobalCallTray.callback.phoneUrgentTaskDrawer {
    top: 5.25rem !important;
    right: 1rem !important;
    bottom: auto !important;
    width: min(320px, calc(100vw - 2rem)) !important;
  }

  .opsConsoleShell .serviceIntent-payment .serviceCollectWorkbench {
    order: -60 !important;
  }

  .opsConsoleShell .serviceIntent-payment .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-payment .serviceCustomerCloseoutRail {
    order: 20 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateWorkbench {
    order: -2 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateActionCard {
    order: -50 !important;
  }

  /* Desktop estimate north-star order: proposal work immediately hands off to invoice and collect. */
  .opsConsoleShell .serviceIntent-estimate .serviceEstimateActionCard > div:first-child {
    order: 1 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateWorkbench {
    order: 2 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateCloseoutHandoff {
    order: 3 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateNextStep {
    grid-column: 1 / -1 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateBuilderPath {
    order: 4 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateDecisionPath {
    order: 5 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceEstimateDiagnostics {
    order: 6 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceUnifiedSyncStatus {
    order: 7 !important;
  }

  .opsConsoleShell .serviceIntent-estimate .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceIntent-estimate .serviceCustomerCloseoutRail {
    order: 20 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .mobileHeaderActions .mobileTopIconButton {
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }

  .opsConsoleShell .mobileHeaderActions .mobileTopIconButton .mailIcon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .opsConsoleShell .mobileHeaderActions .mobileTopIconButton em {
    top: 0.08rem !important;
    right: 0.08rem !important;
    border: 1px solid #ffffff !important;
    line-height: 1rem !important;
  }
}

/* Desktop admin north-star order: business setup and permissions come before
   release proof or provider mirror diagnostics. */
@media (min-width: 921px) {
  .opsConsoleShell .adminSetupMap {
    order: 1 !important;
  }

  .opsConsoleShell .adminTriageBar {
    order: 2 !important;
  }

  .opsConsoleShell .adminRoleOverview {
    order: 3 !important;
  }

  .opsConsoleShell .adminControlBand {
    order: 4 !important;
  }

  .opsConsoleShell .adminRulePanel {
    order: 5 !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    order: 6 !important;
  }

  .opsConsoleShell .adminFirstReleasePanel {
    order: 80 !important;
  }

  .opsConsoleShell .adminDiagnosticsPanel {
    order: 90 !important;
  }
}

/* Desktop office mail workspace: keep the first viewport focused on the inbox. */
@media (min-width: 921px) {
  .opsConsoleShell .inboxShell.nativeMailShell {
    grid-template-rows: 2.75rem minmax(0, 1fr) !important;
  }

  .opsConsoleShell .mailCommandBar {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
  }

  .opsConsoleShell .sidebar {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  .opsConsoleShell .messageColumn,
  .opsConsoleShell .detailColumn {
    grid-row: 2 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldHero {
    padding: 0.72rem 0.9rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldDiagnosticsDisclosure {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch {
    margin-top: 0 !important;
  }
}

/* Safari desktop UX rework: office surfaces open on the next action, not history/debug noise. */
.opsConsoleShell .phoneQueueClassification {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  padding: 0.08rem 0.42rem !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.opsConsoleShell .phoneQueueClassification.needs_reply {
  border-color: rgba(15, 118, 110, 0.28) !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

.opsConsoleShell .phoneQueueClassification.customer_inbound {
  border-color: rgba(2, 132, 199, 0.24) !important;
  background: #f0f9ff !important;
  color: #0369a1 !important;
}

.opsConsoleShell .phoneQueueClassification.outbound_campaign,
.opsConsoleShell .phoneQueueClassification.system_auth_code,
.opsConsoleShell .phoneQueueClassification.delivery_status,
.opsConsoleShell .phoneQueueClassification.opt_in_out {
  border-color: rgba(100, 116, 139, 0.24) !important;
  background: #f8fafc !important;
  color: #64748b !important;
}

.opsConsoleShell .serviceShell[data-has-selected-customer-profile="true"] .serviceInboundOpsPanel {
  order: 20 !important;
  max-height: 4.6rem !important;
  overflow: hidden !important;
}

.opsConsoleShell .serviceShell[data-has-selected-customer-profile="true"] .serviceInboundOpsPanel :is(
  .serviceInboundOpsFilters,
  .serviceInboundOpsList
) {
  display: none !important;
}

.opsConsoleShell .serviceShell[data-has-selected-customer-profile="true"] .serviceInboundOpsHeader {
  margin: 0 !important;
}

.opsConsoleShell .serviceIntent-estimate .serviceEstimateActionRow {
  grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)) !important;
}

.opsConsoleShell .serviceIntent-payment .serviceCollectWorkbench,
.opsConsoleShell .serviceIntent-estimate .serviceEstimateActionCard {
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

.opsConsoleShell .serviceRecordCard.money .serviceRecordInspector,
.opsConsoleShell .serviceRecordCard.money .serviceNestedRecords {
  margin-top: 0.36rem !important;
}

.opsConsoleShell .serviceRecordCard.money .serviceRecordInspector summary,
.opsConsoleShell .serviceRecordCard.money .serviceNestedRecords summary {
  color: #475569 !important;
  font-size: 0.72rem !important;
}

/* Desktop audit fix: keep payment, estimate, and Dispatch support controls compact. */
@media (min-width: 921px) {
  .opsConsoleShell .mailCommandBar {
    order: -10 !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"][data-has-selected-customer-profile="true"],
  .opsConsoleShell .serviceShell[data-initial-action="estimate"][data-has-selected-customer-profile="true"] {
    grid-template-columns: minmax(16rem, 18rem) minmax(34rem, 1fr) minmax(12rem, 0.34fr) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane {
    background: #f8fafc !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane .serviceColumnHeader p,
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane .serviceColumnHeader p,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane .serviceRecordTabs {
    display: none !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordCard.money .serviceDetailList.compact,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordCard.money .serviceNestedRecords,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordCard.money .serviceRecordInspector {
    display: none !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordCard.money {
    padding: 0.5rem !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordCard.money .serviceRecordCardTop,
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceOverviewGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceOverviewGrid .serviceInfoCard.serviceWideCard,
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceOverviewGrid .serviceMiniCountGrid {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldHeroActions :is(
    .fieldOfflineCatalogStatus,
    .fieldActionOutboxStatus
  ) {
    display: none !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .adminFirstReleasePanel {
    order: 1 !important;
    max-height: none !important;
  }

  .opsConsoleShell .adminFirstReleasePanel .adminReportGrid,
  .opsConsoleShell .adminFirstReleasePanel .adminProofRunOrder {
    display: grid !important;
  }

  .opsConsoleShell .adminSetupMap {
    order: 2 !important;
  }

  .opsConsoleShell .adminTriageBar {
    order: 3 !important;
  }

  .opsConsoleShell .adminRoleOverview {
    order: 4 !important;
  }

  .opsConsoleShell .adminControlBand {
    order: 5 !important;
  }

  .opsConsoleShell .adminRulePanel {
    order: 6 !important;
  }

  .opsConsoleShell .adminPermissionLayout {
    order: 7 !important;
  }

  .opsConsoleShell .adminDiagnosticsPanel {
    order: 90 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] :is(
    .fieldDiagnosticsDisclosure,
    .fieldModeSwitch,
    .fieldOfflineReadiness,
    .fieldNativeCloseoutProof,
    .fieldActionOutboxStatus,
    .fieldTechContactSettings
  ) {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldHeroActions {
    justify-content: flex-end !important;
  }
}

/* Schedule reference realignment: keep desktop closer to the ServiceTitan calendar shell. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel {
    gap: 0.72rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions {
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions > span {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions > button {
    min-height: 2.15rem !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleHeaderActions > .secondaryButton {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleStudio {
    grid-template-columns: minmax(12.75rem, 13.75rem) minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    align-items: start !important;
  }

  .opsConsoleShell .fieldScheduleSidebar,
  .opsConsoleShell .fieldScheduleCanvas,
  .opsConsoleShell .fieldScheduleCanvasShell,
  .opsConsoleShell .fieldScheduleContextPanel {
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleSidebar {
    gap: 0.55rem !important;
  }

  .opsConsoleShell .fieldScheduleSidebarGroup {
    gap: 0.5rem !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 0.55rem !important;
    background: #fbfcfd !important;
    padding: 0.58rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleSummary,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleActionPlan,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleSmartPanel,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleLoadStrip,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleLaneBoard,
  .opsConsoleShell .fieldScheduleSidebar .fieldScheduleZoneFilter {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleFilterHeader {
    display: grid !important;
    gap: 0.08rem !important;
  }

  .opsConsoleShell .fieldScheduleFilterHeader span {
    color: #64748b !important;
    font-size: 0.63rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .opsConsoleShell .fieldScheduleFilterHeader strong {
    color: #111827 !important;
    font-size: 0.9rem !important;
    font-weight: 860 !important;
  }

  .opsConsoleShell .fieldScheduleFilterHeader small {
    color: #64748b !important;
    font-size: 0.7rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonth {
    display: grid !important;
    gap: 0.26rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    padding: 0.42rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthHeader {
    display: grid !important;
    gap: 0.02rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthHeader strong {
    color: #111827 !important;
    font-size: 0.78rem !important;
    font-weight: 840 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthHeader small {
    color: #64748b !important;
    font-size: 0.65rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthWeekdays,
  .opsConsoleShell .fieldScheduleMiniMonthGrid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.14rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthWeekdays span {
    color: #94a3b8 !important;
    font-size: 0.6rem !important;
    font-weight: 760 !important;
    text-align: center !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 0.04rem !important;
    min-height: 2.15rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.32rem !important;
    background: transparent !important;
    color: #334155 !important;
    padding: 0.18rem 0.08rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell span {
    font-size: 0.68rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #94a3b8 !important;
    font-size: 0.54rem !important;
    font-weight: 740 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.outsideMonth {
    color: #64748b !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.inSelectedWeek {
    background: #f8fafc !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.active {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.isToday {
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.25) !important;
  }

  .opsConsoleShell .fieldScheduleFilterField {
    display: grid !important;
    gap: 0.2rem !important;
  }

  .opsConsoleShell .fieldScheduleFilterField > span {
    color: #475569 !important;
    font-size: 0.68rem !important;
    font-weight: 760 !important;
  }

  .opsConsoleShell .fieldScheduleFilterField select,
  .opsConsoleShell .fieldScheduleFilterField input {
    min-height: 2.1rem !important;
    border: 1px solid #dbe1ea !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 0.62rem !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldScheduleSidebarActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldScheduleSidebarActions button {
    width: 100% !important;
    min-height: 2.15rem !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldScheduleSummary span,
  .opsConsoleShell .fieldScheduleActionPlan button,
  .opsConsoleShell .fieldScheduleSmartCard,
  .opsConsoleShell .fieldScheduleLoadCard,
  .opsConsoleShell .fieldScheduleLaneCard {
    min-height: auto !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleSummary span {
    padding: 0.38rem 0.46rem !important;
  }

  .opsConsoleShell .fieldScheduleActionPlan button,
  .opsConsoleShell .fieldScheduleSmartCard,
  .opsConsoleShell .fieldScheduleLoadCard,
  .opsConsoleShell .fieldScheduleLaneCard {
    padding: 0.42rem 0.5rem !important;
  }

  .opsConsoleShell .fieldScheduleZoneFilter {
    gap: 0.28rem !important;
  }

  .opsConsoleShell .fieldScheduleZoneFilter button {
    min-height: 1.92rem !important;
    border-radius: 0.38rem !important;
    padding: 0 0.52rem !important;
    font-size: 0.68rem !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(19.5rem, 21.5rem) !important;
    gap: 0.75rem !important;
    align-items: start !important;
  }

  .opsConsoleShell .fieldScheduleWeekMain {
    gap: 0.6rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekBoard {
    border-radius: 0.55rem !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
  }

  .opsConsoleShell .fieldScheduleNextMove {
    border: 1px solid #e5e7eb !important;
    border-left-width: 1px !important;
    border-radius: 0.42rem !important;
    background: #ffffff !important;
    padding: 0.44rem 0.5rem !important;
  }

  .opsConsoleShell .fieldScheduleNextMove span {
    color: #64748b !important;
    letter-spacing: 0.03em !important;
  }

  .opsConsoleShell .fieldScheduleWeekHeader,
  .opsConsoleShell .fieldScheduleWeekAllDayRow,
  .opsConsoleShell .fieldScheduleWeekGrid {
    gap: 0.24rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekAxisHeader,
  .opsConsoleShell .fieldScheduleWeekAllDayLabel {
    padding: 0.35rem 0.18rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekDayHeader {
    min-height: 3.25rem !important;
    border-radius: 0.32rem !important;
    background: #fafbfc !important;
    padding: 0.42rem 0.48rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekAllDayCell {
    min-height: 2.6rem !important;
    border-radius: 0.32rem !important;
    padding: 0.34rem !important;
  }

  .opsConsoleShell .fieldScheduleHoldPill {
    min-height: 1.35rem !important;
    border-radius: 999px !important;
  }

  .opsConsoleShell .fieldScheduleTimeAxis,
  .opsConsoleShell .fieldScheduleDayColumn {
    min-height: 47rem !important;
  }

  .opsConsoleShell .fieldScheduleDayColumn {
    border-radius: 0.32rem !important;
  }

  .opsConsoleShell .fieldScheduleSlotButton {
    left: 0.28rem !important;
    right: 0.28rem !important;
    min-height: 1.65rem !important;
    border-radius: 0.28rem !important;
    background: rgba(255, 255, 255, 0.96) !important;
    opacity: 0 !important;
  }

  .opsConsoleShell .fieldScheduleDayColumn:hover .fieldScheduleSlotButton,
  .opsConsoleShell .fieldScheduleSlotButton:focus-visible {
    opacity: 1 !important;
  }

  .opsConsoleShell .fieldScheduleEventBlock {
    left: 0.28rem !important;
    right: 0.28rem !important;
    border-radius: 0.28rem !important;
    border-color: #57aae7 !important;
    background: #78bff5 !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleEventBlock.active {
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.35) !important;
  }

  .opsConsoleShell .fieldScheduleEventBlock.bookingTarget {
    border-color: #22a391 !important;
  }

  .opsConsoleShell .fieldScheduleEventBlock.hasWarning {
    border-left: 0.18rem solid #c98b08 !important;
    background: #f6d88a !important;
  }

  .opsConsoleShell .fieldScheduleEventBody {
    min-height: 3.7rem !important;
    padding: 0.34rem 0.38rem !important;
  }

  .opsConsoleShell .fieldScheduleEventBody time,
  .opsConsoleShell .fieldScheduleEventBody strong,
  .opsConsoleShell .fieldScheduleEventBody span,
  .opsConsoleShell .fieldScheduleEventBody small,
  .opsConsoleShell .fieldScheduleEventBody em {
    font-size: 0.64rem !important;
  }

  .opsConsoleShell .fieldScheduleEventBody strong {
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldScheduleContextPanel {
    position: sticky !important;
    top: 0.55rem !important;
  }

  .opsConsoleShell .fieldScheduleContextCard,
  .opsConsoleShell .fieldScheduleBookingWorkspace {
    border: 1px solid #dbe1ea !important;
    border-radius: 0.55rem !important;
    background: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldScheduleContextTabs {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleContextTabs button {
    min-height: 1.9rem !important;
    border-radius: 0.34rem !important;
    background: transparent !important;
    color: #64748b !important;
    padding: 0 0.56rem !important;
    font-size: 0.7rem !important;
    font-weight: 780 !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleContextTabs button.active {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #dbe1ea !important;
  }

  .opsConsoleShell .fieldScheduleContextBody {
    display: grid !important;
    gap: 0.42rem !important;
    padding: 0.68rem !important;
  }

  .opsConsoleShell .fieldScheduleContextHeader {
    display: grid !important;
    gap: 0.08rem !important;
  }

  .opsConsoleShell .fieldScheduleContextHeader span {
    color: #64748b !important;
    font-size: 0.64rem !important;
    font-weight: 820 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .opsConsoleShell .fieldScheduleContextHeader strong {
    color: #111827 !important;
    font-size: 0.92rem !important;
    font-weight: 860 !important;
  }

  .opsConsoleShell .fieldScheduleContextHeader small {
    color: #64748b !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  .opsConsoleShell .fieldScheduleContextEmpty {
    display: grid !important;
    gap: 0.18rem !important;
    border: 1px dashed #dbe1ea !important;
    border-radius: 0.42rem !important;
    background: #fafafa !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .fieldScheduleContextEmpty strong {
    color: #111827 !important;
    font-size: 0.84rem !important;
  }

  .opsConsoleShell .fieldScheduleContextEmpty p {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
  }

  .opsConsoleShell .fieldScheduleSelectedFacts,
  .opsConsoleShell .fieldScheduleDispatchDecision,
  .opsConsoleShell .fieldScheduleFieldHandoff,
  .opsConsoleShell .fieldScheduleEditPath {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldScheduleSelectedFacts {
    padding: 0.4rem !important;
  }

  .opsConsoleShell .fieldScheduleDispatchDecision,
  .opsConsoleShell .fieldScheduleFieldHandoff,
  .opsConsoleShell .fieldScheduleEditPath {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleContextActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
  }

  .opsConsoleShell .fieldScheduleContextActions button {
    width: 100% !important;
    min-height: 2.15rem !important;
    justify-content: flex-start !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace {
    margin-top: 0 !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingWorkspaceHeader {
    display: grid !important;
    gap: 0.45rem !important;
    align-items: start !important;
    padding: 0.72rem !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingWorkspaceHeader .eyebrow {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceInlineActions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceInlineActions button {
    min-height: 2.05rem !important;
    border-radius: 0.42rem !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingSourcePanel {
    display: grid !important;
    gap: 0.4rem !important;
    padding: 0.72rem !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingForms {
    padding: 0.72rem !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingSourceCounts,
  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceBookingSourceThread {
    display: none !important;
  }

  .opsConsoleShell .fieldScheduleBookingWorkspace .serviceAppointmentActionCard {
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldScheduleCanvasShell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.62rem !important;
  }

  .opsConsoleShell .fieldScheduleContextPanel {
    position: static !important;
  }

  .opsConsoleShell .fieldScheduleContextActions,
  .opsConsoleShell .fieldScheduleSidebarActions {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldScheduleActionPlan,
  .opsConsoleShell .fieldScheduleSmartPanel {
    grid-template-columns: 1fr !important;
  }

  .opsConsoleShell .fieldScheduleSelectedFacts,
  .opsConsoleShell .fieldScheduleDispatchDecision,
  .opsConsoleShell .fieldScheduleFieldHandoff,
  .opsConsoleShell .fieldScheduleEditPath {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop office shell north-star overrides */
@media (min-width: 1080px) {
  .desktopOfficeShell {
    min-height: 100vh;
    background:
      linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
  }

  .desktopOfficeTopbar {
    display: block;
  }

  .desktopOfficeShell .desktopWindowBar,
  .desktopOfficeShell .desktopOfficeTopbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 4.5rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid #d7dee7;
    background: rgba(248, 250, 252, 0.95);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }

  .desktopOfficeShell .windowLeftChrome {
    min-width: 16rem;
  }

  .desktopOfficeShell .windowTitle {
    align-items: center;
    gap: 1rem;
  }

  .desktopOfficeShell .activeSurfaceSummary {
    min-width: 13rem;
  }

  .desktopOfficeShell .desktopOfficeNav {
    display: none;
  }

  .desktopOfficeShell .systemBannerStack {
    position: fixed;
    top: auto !important;
    left: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    z-index: 48;
    width: min(24rem, calc(100vw - 2rem));
    gap: 0.55rem;
  }

  .desktopOfficeShell .systemBannerStack > * {
    border-radius: 0.9rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  }

  .desktopOfficeShell .operationsPulseStrip {
    padding: 0.85rem 0.7rem 1rem;
    border-right: 1px solid #0f1a26;
    border-bottom: 0;
    background: linear-gradient(180deg, #12202d 0%, #0b1622 100%);
  }

  .desktopOfficeShell .operationsPulseItem {
    min-height: 3.9rem;
    padding: 0.7rem 0.55rem;
    border: 0;
    border-radius: 0.85rem;
    background: transparent;
    color: rgba(226, 232, 240, 0.84);
  }

  .desktopOfficeShell .operationsPulseItem:hover {
    background: rgba(148, 163, 184, 0.12);
  }

  .desktopOfficeShell .operationsPulseItem.active {
    background: rgba(59, 130, 246, 0.18);
    color: #f8fafc;
  }

  .desktopOfficeShell .operationsPulseItem svg {
    color: #93c5fd;
  }

  .desktopOfficeShell .operationsPulseItem span {
    align-items: flex-start;
  }

  .desktopOfficeShell .operationsPulseItem b {
    color: inherit;
    font-size: 0.76rem;
    font-weight: 780;
    letter-spacing: 0.01em;
  }

  .desktopOfficeShell .operationsPulseItem strong,
  .desktopOfficeShell .operationsPulseItem small {
    color: rgba(226, 232, 240, 0.62);
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .desktopOfficeShell .operationsRailProfile {
    margin-top: auto;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.36);
    color: #e2e8f0;
  }

  .desktopOfficeShell .operationsRailProfile span {
    background: rgba(37, 99, 235, 0.18);
    color: #dbeafe;
  }

  .desktopOfficeShell .operationsRailProfile strong,
  .desktopOfficeShell .operationsRailProfile small {
    color: inherit;
  }

  .desktopOfficeShell .desktopOfficeNav .operationsSurfaceButton,
  .desktopOfficeShell .operationsWorkbenchNav.desktopOfficeNav .operationsSurfaceButton {
    min-height: 3.1rem;
    padding: 0.6rem 0.82rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    background: transparent;
    box-shadow: none;
  }

  .desktopOfficeShell .desktopOfficeNav .operationsSurfaceButton:hover,
  .desktopOfficeShell .operationsWorkbenchNav.desktopOfficeNav .operationsSurfaceButton:hover {
    border-color: #d7dee7;
    background: rgba(255, 255, 255, 0.82);
  }

  .desktopOfficeShell .desktopOfficeNav .operationsSurfaceButton.active,
  .desktopOfficeShell .operationsWorkbenchNav.desktopOfficeNav .operationsSurfaceButton.active {
    border-color: #1f2937;
    background: #111827;
    color: #f8fafc;
  }

  .desktopOfficeShell .desktopOfficeNav .operationsSurfaceButton.active .operationsSurfaceCopy small,
  .desktopOfficeShell .operationsWorkbenchNav.desktopOfficeNav .operationsSurfaceButton.active .operationsSurfaceCopy small {
    color: rgba(248, 250, 252, 0.72);
  }

  .desktopOfficeShell .operationsPulseStrip {
    gap: 0.55rem;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls,
  .desktopOfficeShell .fieldAppShell[data-office-schedule-mode="true"],
  .desktopOfficeShell .serviceShell[data-office-workspace="customers"],
  .desktopOfficeShell .serviceShell[data-office-workspace="estimates"],
  .desktopOfficeShell .serviceShell[data-office-workspace="payments"],
  .desktopOfficeShell .chatShell,
  .desktopOfficeShell .adminAppShell {
    margin: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls {
    grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 0;
    padding: 0 1rem 1rem;
    overflow: hidden;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceCustomerPane,
  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceProfilePane,
  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceRecordsPane {
    min-width: 0;
    border: 1px solid #dbe3ec;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow: hidden;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceCustomerPane {
    border-right: 0;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceProfilePane {
    border-right: 0;
  }

  .desktopOfficeShell .serviceShell.serviceShellCalls .serviceRecordsPane {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .desktopOfficeShell .serviceShellCalls .servicePaneHeader {
    min-height: auto;
    padding: 1rem 1rem 0.8rem;
    border-bottom: 1px solid #e6ebf2;
    background: #ffffff;
  }

  .desktopOfficeShell .serviceShellCalls .servicePaneHeader .eyebrow {
    color: #6b7280;
    letter-spacing: 0.08em;
  }

  .desktopOfficeShell .serviceShellCalls .servicePaneHeader h2 {
    font-size: 1.25rem;
  }

  .desktopOfficeShell .serviceShellCalls .serviceColumnHeader {
    display: none;
  }

  .desktopOfficeShell .serviceOfficeIntakePanel {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.9rem 1rem 1rem;
    border-bottom: 1px solid #e6ebf2;
    background: #f8fafc;
  }

  .desktopOfficeShell .serviceOfficeIntakeList {
    display: grid;
    gap: 0.6rem;
    min-width: 0;
  }

  .desktopOfficeShell .serviceOfficeIntakeCard {
    position: relative;
    display: grid;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0.9rem 0.95rem;
    border: 1px solid #d9e2ec;
    border-radius: 0.9rem;
    background: #ffffff;
    text-align: left;
    box-shadow: none;
    z-index: 0;
  }

  .desktopOfficeShell .serviceOfficeIntakeCard:hover {
    border-color: #94a3b8;
    background: #fcfdff;
  }

  .desktopOfficeShell .serviceOfficeIntakeCard strong {
    color: #0f172a;
    font-size: 0.96rem;
  }

  .desktopOfficeShell .serviceOfficeIntakeCard p,
  .desktopOfficeShell .serviceOfficeIntakeCard small {
    margin: 0;
    color: #64748b;
    overflow-wrap: anywhere;
  }

  .desktopOfficeShell .serviceOfficeIntakePanel .serviceInlineActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .desktopOfficeShell .serviceOfficeIntakePanel .serviceInlineActions .secondaryButton {
    justify-content: center;
    min-height: 2.35rem;
    border-radius: 0.7rem;
    box-shadow: none;
  }

  .desktopOfficeShell .serviceShellCalls .serviceInboundOpsPanel {
    margin: 0;
    border: 0;
    border-top: 1px solid #e6ebf2;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
  }

  .desktopOfficeShell .serviceShellCalls .serviceProfileContent {
    display: block;
    padding: 0;
  }

  .desktopOfficeShell .serviceShellCalls .serviceProfileContent > :not(.serviceBookingWorkspace) {
    display: none !important;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingWorkspace {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingWorkspaceHeader,
  .desktopOfficeShell .serviceShellCalls .serviceBookingSourcePanel,
  .desktopOfficeShell .serviceShellCalls .serviceBookingForms {
    background: #ffffff;
    box-shadow: none;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingWorkspaceHeader {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid #e6ebf2;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingSourcePanel {
    border-right: 0;
    border-bottom: 1px solid #e6ebf2;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingSourceLead span {
    color: #6b7280;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingSourceFacts,
  .desktopOfficeShell .serviceShellCalls .serviceBookingSourceThread {
    border-color: #e2e8f0;
    background: #f8fafc;
  }

  .desktopOfficeShell .serviceShellCalls .serviceBookingForms {
    padding: 1rem;
  }

  .desktopOfficeShell .serviceShellCalls .serviceRecordsPane {
    overflow: hidden;
  }

  .desktopOfficeShell .serviceShellCalls .serviceRecordIndex {
    padding: 1rem;
    border-bottom: 1px solid #e6ebf2;
    background: #f8fafc;
  }

  .desktopOfficeShell .serviceShellCalls .serviceRecordIndex > div {
    display: none;
  }

  .desktopOfficeShell .serviceShellCalls .serviceRecordTabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)) !important;
    gap: 0.42rem !important;
    overflow: visible !important;
    padding-inline: 1rem;
    border-bottom: 1px solid #e6ebf2;
  }

  .desktopOfficeShell .serviceShellCalls .serviceRecordTabs button {
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center;
  }

  .desktopOfficeShell .serviceShellCalls .serviceOverviewGrid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceRecordIndex > div,
  .desktopOfficeShell .serviceShell[data-office-workspace="estimates"] .serviceRecordIndex > div,
  .desktopOfficeShell .serviceShell[data-office-workspace="payments"] .serviceRecordIndex > div {
    display: none;
  }

  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceHeroCard,
  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceCustomerCloseoutRail,
  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceCustomerMoneyDashboard,
  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceActionGrid {
    display: none;
  }

  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceProfileContent {
    gap: 0.85rem;
  }

  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceTitanRecordHeader,
  .desktopOfficeShell .serviceShell[data-office-workspace="customers"] .serviceCommsJobWorkspace {
    margin: 0;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] {
    padding: 0 1rem 1rem;
    background: transparent;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldHero {
    margin: 0;
    padding: 1rem 0 0.9rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldDiagnosticsDisclosure,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldMetricGrid {
    display: none;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldModeSwitch,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldRangeSwitch {
    justify-content: flex-start;
    margin-bottom: 0.75rem;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldHero .eyebrow {
    color: #6b7280;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleStudio,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleCanvasShell {
    gap: 0.9rem !important;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleSidebar,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleCanvas,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleContextCard,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleBookingWorkspace {
    border-color: #dbe3ec !important;
    border-radius: 1rem !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleBookingWorkspace .serviceBookingWorkspaceHeader,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleBookingWorkspace .serviceBookingSourcePanel,
  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleBookingWorkspace .serviceBookingForms {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .desktopOfficeShell .opsConsoleShell .fieldAppShell[data-office-schedule-mode="true"] .fieldScheduleBookingWorkspace .serviceBookingSourceFacts {
    background: #f8fafc !important;
  }
}

/* Dispatch route/map final guard: keep route view after older calendar rules. */
.opsConsoleShell .fieldScheduleViewSwitch {
  display: inline-flex !important;
}

.opsConsoleShell .fieldScheduleRouteShell,
.opsConsoleShell .fieldScheduleRoutePlans,
.opsConsoleShell .fieldScheduleRouteStops {
  display: grid !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleRouteMapCanvas {
  position: relative !important;
  min-height: 18rem !important;
}

.opsConsoleShell .fieldScheduleRouteStop {
  max-width: 100% !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldScheduleRouteMapCanvas {
    min-height: 14rem !important;
  }
}

/* Customer Files mobile guard: dense ServiceTitan-style desktop cards must not collapse into clipped columns. */
@media (max-width: 640px) {
  .opsConsoleShell .serviceTitanRecordHeader {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "main"
      "facts"
      "actions" !important;
    gap: 0.48rem !important;
    margin: 0.62rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .serviceTitanRecordMain {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.46rem !important;
  }

  .opsConsoleShell .serviceTitanRecordIdentity {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceTitanRecordFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceTitanRecordIdentity span,
  .opsConsoleShell .serviceTitanRecordFacts span {
    min-height: 3.25rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceTitanRecordIdentity b,
  .opsConsoleShell .serviceTitanRecordFacts b {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceTitanActionRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-left: 0 !important;
    border-top: 1px solid #d7dce4 !important;
    padding-top: 0.52rem !important;
    padding-left: 0 !important;
  }

  .opsConsoleShell .serviceTitanActionRail button {
    min-height: 2.8rem !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceTitanJobActionStrip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.48rem !important;
    margin: 0.62rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .serviceTitanJobActionStrip > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 118, 110, 0.16) !important;
    padding-right: 0 !important;
    padding-bottom: 0.48rem !important;
  }

  .opsConsoleShell .serviceTitanJobActionStrip > div:first-child strong {
    white-space: normal !important;
  }

  .opsConsoleShell .serviceTitanJobActionStrip > div[role="list"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceTitanJobActionStrip button {
    min-height: 3rem !important;
    text-align: center !important;
  }

  .opsConsoleShell .serviceMvpWorkflowGuide {
    margin: 0.62rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .serviceMvpWorkflowHeader {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .serviceMvpWorkflowHeader strong,
  .opsConsoleShell .serviceMvpWorkflowHeader small {
    white-space: normal !important;
  }

  .opsConsoleShell .serviceMvpWorkflowSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .serviceMvpWorkflowProperty,
  .opsConsoleShell .serviceMvpWorkflowEvidence {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceMvpWorkflowProperty strong,
  .opsConsoleShell .serviceMvpWorkflowProperty small,
  .opsConsoleShell .serviceMvpWorkflowEvidence strong,
  .opsConsoleShell .serviceMvpWorkflowEvidence small {
    white-space: normal !important;
  }

  .opsConsoleShell .serviceMvpWorkflowSteps button {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceMvpWorkflowSteps button em {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
  }
}

/* Mobile stabilization 2026-06-26: keep the MVP usable on phones while local-cache data loads. */
@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-header-height: calc(3.35rem + env(safe-area-inset-top)) !important;
    --ops-dock-height: calc(4.2rem + env(safe-area-inset-bottom)) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding-bottom: var(--ops-dock-height) !important;
  }

  .opsConsoleShell .desktopWindowBar {
    min-height: var(--ops-header-height) !important;
    grid-template-rows: 2.35rem !important;
    align-items: center !important;
    padding: calc(0.48rem + env(safe-area-inset-top)) 0.72rem 0.42rem !important;
  }

  .opsConsoleShell .dailyOpsHeader.mobileOnly {
    display: none !important;
  }

  .opsConsoleShell .mobileReferenceTitle strong {
    font-size: 1rem !important;
  }

  .opsConsoleShell .mobileReferenceTitle span {
    display: none !important;
  }

  .opsConsoleShell .mobileTopIconButton {
    border: 1px solid #dbe1ea !important;
    background: #ffffff !important;
    color: #0f172a !important;
  }

  .opsConsoleShell .mobileTopIconButton .mailIcon {
    display: block !important;
    width: 1.12rem !important;
    height: 1.12rem !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .opsConsoleShell .mobileTopIconButton[aria-label="Open app menu"] .mailIcon,
  .opsConsoleShell .mobileTopIconButton[aria-label="Open mailbox menu"] .mailIcon,
  .opsConsoleShell .mobileTopIconButton[aria-label="Open notifications"] .mailIcon,
  .opsConsoleShell .mobileTopIconButton[aria-label*="unread notifications"] .mailIcon,
  .opsConsoleShell .mobileTopIconButton[aria-label*="Search"] .mailIcon,
  .opsConsoleShell .mobileTopIconButton[aria-label*="search"] .mailIcon {
    display: none !important;
  }

  .opsConsoleShell .mobileTopIconButton[aria-label="Open app menu"]::before,
  .opsConsoleShell .mobileTopIconButton[aria-label="Open mailbox menu"]::before {
    content: "Menu" !important;
  }

  .opsConsoleShell .mobileTopIconButton[aria-label="Open notifications"]::before,
  .opsConsoleShell .mobileTopIconButton[aria-label*="unread notifications"]::before {
    content: "Alerts" !important;
  }

  .opsConsoleShell .mobileTopIconButton[aria-label*="Search"]::before,
  .opsConsoleShell .mobileTopIconButton[aria-label*="search"]::before {
    content: "Search" !important;
  }

  .opsConsoleShell .mobileTopIconButton::before {
    color: #0f172a !important;
    font-size: 0.54rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .opsConsoleShell .inboxShell.nativeMailShell,
  .opsConsoleShell .chatShell,
  .opsConsoleShell .serviceShell,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell {
    height: calc(100dvh - var(--ops-header-height) - var(--ops-dock-height)) !important;
    max-height: calc(100dvh - var(--ops-header-height) - var(--ops-dock-height)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .mobileAppDock {
    min-height: var(--ops-dock-height) !important;
    max-height: var(--ops-dock-height) !important;
    padding: 0.32rem 0.5rem calc(0.34rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .mobileAppDock button,
  .opsConsoleShell .mobileAppDock button.active {
    min-height: 3.15rem !important;
    border-radius: 0.68rem !important;
  }

  .opsConsoleShell .mobileAppDock span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 0.64rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .fieldMainGrid,
  .opsConsoleShell .phoneThreadList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .chatTimeline {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceMobileNav.mobileOnly {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 40 !important;
    min-height: 3.25rem !important;
    padding: 0.34rem 0.55rem calc(0.34rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceMobileNav.mobileOnly button {
    min-height: 2.35rem !important;
    font-size: 0.76rem !important;
  }

  .opsConsoleShell .serviceTitanRecordHeader,
  .opsConsoleShell .serviceBookingWorkspace,
  .opsConsoleShell .serviceEstimateWorkspace,
  .opsConsoleShell .serviceCustomerMoneyDashboard,
  .opsConsoleShell .serviceCommsJobWorkspace,
  .opsConsoleShell .serviceRecordCard,
  .opsConsoleShell .serviceInfoCard {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .serviceEstimateBuilderHeader,
  .opsConsoleShell .serviceEstimateBuilderActions,
  .opsConsoleShell .serviceRecordActions,
  .opsConsoleShell .serviceInlineActions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceEstimateBuilderActions button,
  .opsConsoleShell .serviceInlineActions button,
  .opsConsoleShell .serviceRecordActions button,
  .opsConsoleShell .serviceRecordActions a {
    min-width: 0 !important;
    white-space: normal !important;
  }

  .opsConsoleShell .adminHeader {
    padding-top: 0.35rem !important;
  }

  .opsConsoleShell .adminTriageBar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .adminTriageBar button {
    min-height: 4.2rem !important;
    padding: 0.55rem !important;
  }

  .opsConsoleShell .adminPermissionSearch {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #ffffff !important;
    padding-top: 0.35rem !important;
  }

  .opsConsoleShell .fieldScheduleStudio {
    margin-top: 0.72rem !important;
  }

  .opsConsoleShell .fieldScheduleCanvas,
  .opsConsoleShell .fieldScheduleWeekBoard {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldScheduleWeekMain {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda.mobileOnly {
    display: grid !important;
    gap: 0.52rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 1rem !important;
    border: 1px solid #dbe1ea !important;
    border-radius: 0.82rem !important;
    background: #ffffff !important;
    padding: 0.62rem !important;
    box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.06) !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.7rem !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda header > div {
    display: grid !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda header span {
    color: #64748b !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda header strong {
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda header button {
    flex: 0 0 auto !important;
    min-height: 2.1rem !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    padding: 0 0.75rem !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] {
    display: grid !important;
    gap: 0.42rem !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button {
    display: grid !important;
    grid-template-columns: 4.7rem minmax(0, 1fr) !important;
    gap: 0.12rem 0.56rem !important;
    min-width: 0 !important;
    border: 1px solid #dbeafe !important;
    border-left: 0.28rem solid #2563eb !important;
    border-radius: 0.62rem !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    padding: 0.52rem 0.58rem !important;
    text-align: left !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button.active {
    border-color: #1d4ed8 !important;
    background: #eff6ff !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button.hasWarning {
    border-left-color: #d97706 !important;
    background: #fffbeb !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button span {
    grid-row: span 3 !important;
    align-self: center !important;
    color: #0f766e !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button strong,
  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button small,
  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button strong {
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button small,
  .opsConsoleShell .fieldScheduleMobileAgenda > div[role="list"] button em,
  .opsConsoleShell .fieldScheduleMobileAgenda p {
    color: #64748b !important;
    font-size: 0.72rem !important;
    font-style: normal !important;
    font-weight: 760 !important;
  }

  .opsConsoleShell .fieldScheduleWeekHeader,
  .opsConsoleShell .fieldScheduleWeekAllDayRow,
  .opsConsoleShell .fieldScheduleWeekGrid {
    min-width: 44rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekBoard {
    position: relative !important;
    border-radius: 0.7rem !important;
  }

  .opsConsoleShell .fieldScheduleWeekBoard::after {
    content: "Swipe week" !important;
    position: sticky !important;
    right: 0.55rem !important;
    bottom: 0.55rem !important;
    z-index: 20 !important;
    float: right !important;
    display: inline-flex !important;
    width: max-content !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #334155 !important;
    padding: 0.22rem 0.48rem !important;
    font-size: 0.66rem !important;
    font-weight: 850 !important;
    box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.12) !important;
  }

  .opsConsoleShell .fieldScheduleStudio,
  .opsConsoleShell .fieldScheduleCanvasShell,
  .opsConsoleShell .fieldScheduleContextPanel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleRouteMapCanvas {
    min-height: 13.5rem !important;
  }
}

/* Browser UX QA 2026-06-26: shared overflow guards for the surfaces exercised in
   the full desktop/mobile Playwright sweep. Keep this after older shell locks. */
.opsConsoleShell .serviceShell,
.opsConsoleShell .serviceCustomerPane,
.opsConsoleShell .serviceProfilePane,
.opsConsoleShell .serviceRecordsPane,
.opsConsoleShell .serviceProfileContent,
.opsConsoleShell .serviceRecordsBody,
.opsConsoleShell .fieldAppShell,
.opsConsoleShell .fieldScheduleStudio,
.opsConsoleShell .fieldScheduleCanvas,
.opsConsoleShell .fieldScheduleCanvasShell,
.opsConsoleShell .fieldScheduleContextPanel,
.opsConsoleShell .fieldScheduleWeekMain,
.opsConsoleShell .phoneAppShell,
.opsConsoleShell .phoneRail,
.opsConsoleShell .phoneDetail {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceRecordTabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(6.65rem, 1fr)) !important;
    gap: 0.28rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0.32rem !important;
  }

  .opsConsoleShell .serviceRecordTabs button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .serviceRecordIndex > div {
    grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr)) !important;
  }

  .opsConsoleShell .serviceRecordIndex button,
  .opsConsoleShell .serviceRecordIndex b,
  .opsConsoleShell .serviceRecordIndex span,
  .opsConsoleShell .serviceRecordIndex em {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .phoneToolbar,
  .opsConsoleShell .phoneToolbarActions {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .phoneMobileBackButton.mobileOnly {
    min-width: 3.65rem !important;
    max-width: 4.75rem !important;
    min-height: 2.2rem !important;
    justify-content: center !important;
    padding: 0 0.6rem !important;
    white-space: nowrap !important;
  }
}

.opsConsoleShell .fieldScheduleWeekBoard {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.opsConsoleShell .fieldScheduleWeekHeader,
.opsConsoleShell .fieldScheduleWeekAllDayRow,
.opsConsoleShell .fieldScheduleWeekGrid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.opsConsoleShell .fieldScheduleWeekAxisHeader,
.opsConsoleShell .fieldScheduleWeekAllDayLabel,
.opsConsoleShell .fieldScheduleWeekDayHeader,
.opsConsoleShell .fieldScheduleWeekAllDayCell,
.opsConsoleShell .fieldScheduleDayColumn,
.opsConsoleShell .fieldScheduleEventBlock,
.opsConsoleShell .fieldScheduleRouteMapCanvas {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekMain,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekBoard,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekHeader,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekAllDayRow,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekGrid {
    display: none !important;
  }

  .opsConsoleShell .phoneToolbarActions .phoneTroubleshootMenu {
    display: none !important;
  }
}

.opsConsoleShell .adminReportPanel {
  max-width: calc(100% - 1.44rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.opsConsoleShell .adminReportGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem) !important;
}

.opsConsoleShell .adminReportSide,
.opsConsoleShell .adminReportSideBlock,
.opsConsoleShell .adminReportSideBlock span,
.opsConsoleShell .adminCutoverBlockerLadder,
.opsConsoleShell .adminCutoverBlockerLadder span {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.opsConsoleShell .adminReportSideBlock > strong,
.opsConsoleShell .adminReportSideBlock em,
.opsConsoleShell .adminReportSideBlock small,
.opsConsoleShell .adminReportSideBlock b,
.opsConsoleShell .adminCutoverBlockerLadder > strong,
.opsConsoleShell .adminCutoverBlockerLadder > small,
.opsConsoleShell .adminCutoverBlockerLadder b,
.opsConsoleShell .adminCutoverBlockerLadder small {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 920px) {
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-inline: 0 !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid button,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Dispatch booking repair 2026-06-27: an open booking form is a real split
   workspace, not a clipped 3-column service form squeezed into a narrow rail. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] {
    grid-template-columns: minmax(42rem, 1fr) minmax(27rem, 32rem) !important;
    gap: 0.85rem !important;
    align-items: start !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleContextPanel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100dvh - var(--ops-header-height, 4.5rem) - 5.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingWorkspaceHeader,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingSourcePanel,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingForms {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace .serviceAppointmentActionCard {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace .serviceAppointmentActionCard > *,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace label,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace input,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace select,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace textarea,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleCustomerSearch {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingSourceFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 921px) and (max-width: 1500px) {
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleContextPanel {
    position: fixed !important;
    top: calc(var(--ops-header-height, 4.5rem) + 3.8rem) !important;
    right: 1rem !important;
    bottom: 1rem !important;
    z-index: 120 !important;
    width: min(28rem, calc(100vw - 2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 4.5rem) - 4.8rem) !important;
    overflow: visible !important;
    filter: drop-shadow(0 1rem 2rem rgba(15, 23, 42, 0.18)) !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace {
    max-height: calc(100dvh - var(--ops-header-height, 4.5rem) - 4.8rem) !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldScheduleMiniMonth {
    display: grid !important;
    gap: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #dbe1ea !important;
    border-radius: 0.78rem !important;
    background: #ffffff !important;
    padding: 0.62rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.34rem !important;
    width: calc(100% - 1.1rem) !important;
    max-width: calc(100% - 1.1rem) !important;
    margin-inline: 0.55rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 0.35rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthHeader {
    display: grid !important;
    gap: 0.04rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthHeader strong,
  .opsConsoleShell .fieldScheduleMiniMonthHeader small {
    white-space: normal !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthWeekdays,
  .opsConsoleShell .fieldScheduleMiniMonthGrid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0.16rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthWeekdays span {
    color: #64748b !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 0.04rem !important;
    min-width: 0 !important;
    min-height: 2.55rem !important;
    border: 1px solid transparent !important;
    border-radius: 0.52rem !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    padding: 0.18rem 0.08rem !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell span,
  .opsConsoleShell .fieldScheduleMiniMonthCell small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell span {
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell small {
    color: #64748b !important;
    font-size: 0.55rem !important;
    font-weight: 760 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.outsideMonth {
    color: #64748b !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.inSelectedWeek {
    background: #eef6ff !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.active {
    border-color: #2563eb !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell.isToday {
    border-color: #14b8a6 !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] {
    position: static !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleContextPanel {
    position: fixed !important;
    inset: calc(var(--ops-header-height, 3.35rem) + 0.5rem) 0.55rem calc(var(--ops-dock-height, 4.2rem) + 0.55rem) !important;
    z-index: 140 !important;
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    filter: drop-shadow(0 1rem 2rem rgba(15, 23, 42, 0.24)) !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingWorkspaceHeader,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingSourcePanel,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingForms {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingWorkspaceHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingSourcePanel {
    padding: 0.62rem !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .serviceBookingSourceFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace .serviceAppointmentActionCard {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace .serviceAppointmentActionCard > *,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace label,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace input,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace select,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleBookingWorkspace textarea,
  .opsConsoleShell .fieldScheduleCanvasShell[data-schedule-booking-open="true"] .fieldScheduleCustomerSearch {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Mobile inbox repair 2026-06-27: local-cache/outbox notices should explain
   state without covering rows, and top actions need text fallbacks if icons miss. */
@media (max-width: 920px) {
  .opsConsoleShell[data-active-surface="email"] .systemBannerStack {
    position: static !important;
    display: grid !important;
    gap: 0.38rem !important;
    margin: 0.5rem 0.75rem 0.58rem !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  .opsConsoleShell[data-active-surface="email"] :is(.offlineBanner, .noticeBanner, .errorBanner) {
    border: 1px solid #dbe1ea !important;
    border-radius: 0.85rem !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #0f172a !important;
    font-size: 0.74rem !important;
    line-height: 1.24 !important;
    padding: 0.48rem 0.58rem !important;
  }

  .opsConsoleShell[data-active-surface="email"] :is(.offlineBanner, .noticeBanner, .errorBanner) strong,
  .opsConsoleShell[data-active-surface="email"] :is(.offlineBanner, .noticeBanner, .errorBanner) span {
    display: inline !important;
    white-space: normal !important;
  }

  .opsConsoleShell[data-active-surface="email"] .mobileTopIconButton[aria-label^="Compose"] .mailIcon {
    display: none !important;
  }

  .opsConsoleShell[data-active-surface="email"] .mobileTopIconButton[aria-label^="Compose"]::before {
    content: "New" !important;
  }
}

/* Full UX audit 2026-06-27: final mobile/desktop guardrails for the routes
   exercised in Chromium. Keep this last so old visual QA layers cannot re-open
   dock overlap or right-rail clipping regressions. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell {
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldMainGrid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSidebar {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleStudio,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvasShell,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvas,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleMobileAgenda {
    flex: 0 0 auto !important;
    margin-bottom: 0.65rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekBoard {
    max-height: min(52rem, calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem) - 6rem)) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldCloseoutReadiness {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .messageList,
  .opsConsoleShell .messageDetail {
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    margin-bottom: calc(5.25rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceShell[data-initial-action="estimate"],
  .opsConsoleShell .serviceShell[data-initial-action="payment"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"],
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"],
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"],
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] {
    grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr) minmax(22rem, 28rem) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane {
    min-width: 22rem !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex {
    display: grid !important;
    gap: 0.75rem !important;
    position: static !important;
    padding: 0.85rem !important;
  }

  .opsConsoleShell .serviceRecordIndex label,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex label {
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .serviceRecordIndex input,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordIndex button,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.12rem 0.32rem !important;
    min-width: 0 !important;
    min-height: 3.2rem !important;
    border-radius: 0.7rem !important;
    padding: 0.46rem 0.54rem !important;
  }

  .opsConsoleShell .serviceRecordIndex b,
  .opsConsoleShell .serviceRecordIndex span,
  .opsConsoleShell .serviceRecordIndex em,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex b,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex span,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex em {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .serviceRecordTabs,
  .desktopOfficeShell .opsConsoleShell .serviceRecordTabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)) !important;
    gap: 0.42rem !important;
    padding: 0.75rem 0.85rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordTabs button,
  .desktopOfficeShell .opsConsoleShell .serviceRecordTabs button {
    min-width: 0 !important;
    min-height: 2.65rem !important;
    border-radius: 0.7rem !important;
    justify-content: center !important;
    padding: 0.42rem 0.48rem !important;
    white-space: normal !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-action="estimate"],
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-record-tab="estimates"],
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-active-record-tab="estimates"] {
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) minmax(20rem, 24rem) !important;
  }

  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-record-tab="payments"],
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-active-record-tab="payments"],
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-record-tab="invoices"],
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-active-record-tab="invoices"] {
    grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr) minmax(24rem, 28rem) !important;
  }

  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-action="estimate"] .serviceRecordsPane,
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-initial-record-tab="estimates"] .serviceRecordsPane,
  .opsConsoleShell.serviceFixtureShell > .serviceShell[data-active-record-tab="estimates"] .serviceRecordsPane {
    min-width: 20rem !important;
  }
}

/* Goal completion audit 2026-06-27: keep the customer record shortcut card
   inside a phone viewport and wrap every record bucket instead of clipping the
   memberships/forms/payment tabs offscreen. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    grid-template-columns: 1fr !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(15.5rem, 42dvh) !important;
    height: min(15.5rem, 42dvh) !important;
    min-height: min(15.5rem, 42dvh) !important;
    min-width: 0 !important;
    margin: 0 0.62rem 0.75rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    z-index: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex label,
  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex input,
  .opsConsoleShell .serviceRecordIndex label,
  .opsConsoleShell .serviceRecordIndex input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex > div,
  .opsConsoleShell .serviceRecordIndex > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex button,
  .opsConsoleShell .serviceRecordIndex button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRoutePlans {
    padding-bottom: calc(6.6rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(6.6rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldHeroActions {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvas {
    min-height: 0 !important;
    height: calc(100dvh - 25.5rem - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 25.5rem - env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(6.6rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(6.6rem + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageResultsPanel {
    padding-bottom: calc(8.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    flex: 0 1 auto !important;
    max-height: calc(100dvh - 22rem - env(safe-area-inset-bottom)) !important;
    margin-bottom: calc(8.75rem + env(safe-area-inset-bottom)) !important;
    padding-bottom: 0.8rem !important;
    scroll-padding-bottom: calc(8.75rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Browser UX audit 2026-06-27: final shared hit-area and scroll fixes for
   internal operations screens. This block intentionally sits last so the
   audited mobile dock/header constraints win over legacy dense-shell passes. */
@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-mobile-dock-clearance: calc(5.35rem + env(safe-area-inset-bottom));
    --ops-mobile-action-clearance: calc(8.6rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .mobileAppDock {
    z-index: 80 !important;
    pointer-events: auto !important;
  }

  .opsConsoleShell .messageColumn.mobileActive,
  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive,
  .opsConsoleShell .phoneAppShell,
  .opsConsoleShell .fieldAppShell,
  .opsConsoleShell .adminAppShell,
  .opsConsoleShell .chatMain.mobileActive {
    padding-bottom: var(--ops-mobile-dock-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-dock-clearance) !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageResultsPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    flex: 1 1 auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 0.8rem !important;
    scroll-padding-bottom: 1rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .mobileReaderPreview {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    max-height: min(14.75rem, 38dvh) !important;
    margin: 0.58rem 0.62rem var(--ops-mobile-dock-clearance) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    box-shadow: 0 1.2rem 2.6rem rgba(15, 23, 42, 0.16) !important;
  }

  .opsConsoleShell .mobileReaderCustomerActions button,
  .opsConsoleShell .mobileReaderPreviewActions button,
  .opsConsoleShell .chatMessageActions button,
  .opsConsoleShell .chatReactions button,
  .opsConsoleShell .phoneDetail button,
  .opsConsoleShell .fieldAppShell button,
  .opsConsoleShell .fieldAppShell a,
  .opsConsoleShell .serviceShell button,
  .opsConsoleShell .serviceShell a {
    min-height: 2.75rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    display: block !important;
    height: 23.25rem !important;
    min-height: 23.25rem !important;
    max-height: none !important;
    margin: 0.5rem 0.62rem 0.75rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex > div,
  .opsConsoleShell .serviceRecordIndex > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin-top: 0.62rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex button,
  .opsConsoleShell .serviceRecordIndex button {
    min-height: 2.75rem !important;
    border-radius: 0.82rem !important;
    padding: 0.54rem 0.62rem !important;
  }

  .opsConsoleShell .serviceRecordsBody,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceCustomerList {
    padding-bottom: var(--ops-mobile-action-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .serviceMobileNav {
    bottom: var(--ops-mobile-dock-clearance) !important;
    z-index: 70 !important;
  }

  .opsConsoleShell .fieldAppShell {
    padding-top: 0.75rem !important;
    padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .fieldFocusBody {
    padding-top: 0.5rem !important;
    padding-bottom: var(--ops-mobile-action-clearance) !important;
    scroll-margin-top: calc(var(--ops-header-height) + 1rem) !important;
  }

  .opsConsoleShell .fieldEstimateOptionActions,
  .opsConsoleShell .fieldInvoiceActionRow,
  .opsConsoleShell .fieldPaymentActionRow,
  .opsConsoleShell .fieldPrimaryActionDock,
  .opsConsoleShell .fieldSecondaryActionRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] {
    padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvas {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell {
    display: grid !important;
    gap: 0.78rem !important;
    padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .fieldScheduleRouteMapCanvas {
    min-height: 3rem !important;
    max-height: 3rem !important;
  }

  .opsConsoleShell .fieldScheduleRoutePlans {
    gap: 0.68rem !important;
    padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .fieldScheduleViewSwitch button,
  .opsConsoleShell .fieldRangeSwitch button,
  .opsConsoleShell .fieldScheduleRouteMapHeader a,
  .opsConsoleShell .fieldScheduleRoutePlanActions a,
  .opsConsoleShell .fieldScheduleRouteStopActions a,
  .opsConsoleShell .fieldScheduleRouteStopActions button {
    min-height: 2.75rem !important;
  }

  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .adminPermissionSections {
    padding-bottom: var(--ops-mobile-action-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-action-clearance) !important;
  }

  .opsConsoleShell .fieldFocusBody {
    overflow: hidden !important;
  }

  .opsConsoleShell .chatComposer {
    bottom: var(--ops-mobile-dock-clearance) !important;
    z-index: 72 !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceRecordIndex {
    grid-template-columns: 1fr !important;
    align-content: start !important;
  }

  .opsConsoleShell .serviceRecordIndex > div {
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr)) !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .serviceRecordIndex button {
    min-height: 2.75rem !important;
    border-radius: 0.72rem !important;
    padding: 0.5rem 0.62rem !important;
  }

  .opsConsoleShell .serviceRecordIndex input,
  .opsConsoleShell .secondaryButton.compactButton,
  .opsConsoleShell .compactButton,
  .opsConsoleShell .fieldRangeSwitch button,
  .opsConsoleShell .fieldScheduleViewSwitch button,
  .opsConsoleShell .chatReactions button {
    min-height: 2.25rem !important;
  }

  .opsConsoleShell .inboundBookingOverlay[aria-modal="true"] ~ *,
  .opsConsoleShell .composeOverlay[aria-modal="true"] ~ * {
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Edit line item"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove line item"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Edit option"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Choose a customer approval signature"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove unsold option"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove unsold estimate"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldFocusBody {
    padding-bottom: 2.5rem !important;
    scroll-padding-bottom: 2.5rem !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] {
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - 0.7rem) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - 0.7rem) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldHero {
    flex: 0 0 auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMainGrid {
    flex: 1 1 auto !important;
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldJobListPanel,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldScheduleBoard,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    display: flex !important;
    flex-direction: column !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldFocusBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
    scroll-padding-top: 0.85rem !important;
    scroll-padding-bottom: 1.25rem !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldPacketLaunchHandoff,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSecondaryActionRail {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    margin-top: 0.9rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldBillingLaunchTarget {
    scroll-margin-top: 0.85rem !important;
    scroll-margin-bottom: 1.25rem !important;
  }
}

/* Full UX stabilization 2026-06-27: one last layout owner for the specific
   phone/desktop failures captured in the browser audit. Keep this block last
   until the large legacy CSS file can be split by surface. */
@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-mobile-dock-clearance: calc(5.35rem + env(safe-area-inset-bottom));
    --ops-mobile-service-nav-clearance: calc(10.85rem + env(safe-area-inset-bottom));
    --ops-mobile-field-clearance: calc(7.25rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .serviceShell {
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--ops-mobile-service-nav-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-service-nav-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceMobileNav {
    right: 0.58rem !important;
    bottom: var(--ops-mobile-dock-clearance) !important;
    left: 0.58rem !important;
    z-index: 70 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(13.5rem, 36dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex > div,
  .opsConsoleShell .serviceRecordIndex > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldAppShell {
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--ops-mobile-field-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-field-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleBoard.activePanel,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleStudio,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvasShell,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvas,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvasShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.78rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextPanel {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleWeekBoard {
    max-height: 23rem !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextCard {
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSelectedFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .opsConsoleShell .fieldScheduleRouteMapCanvas {
    min-height: 9rem !important;
    max-height: 12rem !important;
  }

  .opsConsoleShell .fieldScheduleRouteShell,
  .opsConsoleShell .fieldScheduleRoutePlans,
  .opsConsoleShell .fieldScheduleRouteStops {
    padding-bottom: var(--ops-mobile-field-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-field-clearance) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--ops-mobile-field-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-field-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldWorkLanePanel {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldPaymentActionRow,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldInvoiceActionRow {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.72rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldPaymentActionButtons,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldInvoiceActionButtons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldBillingLaunchTarget {
    scroll-margin-top: 1rem !important;
    scroll-margin-bottom: var(--ops-mobile-field-clearance) !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceShell[data-initial-action="estimate"],
  .opsConsoleShell .serviceShell[data-initial-action="payment"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"],
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"],
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"],
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] {
    grid-template-columns: minmax(14rem, 18rem) minmax(30rem, 1fr) minmax(18rem, 24rem) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceRecordsPane,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex {
    gap: 0.68rem !important;
    padding: 0.82rem !important;
  }

  .opsConsoleShell .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex > div {
    grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)) !important;
  }

  .opsConsoleShell .serviceRecordIndex button,
  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex button,
  .opsConsoleShell .serviceRecordTabs button,
  .desktopOfficeShell .opsConsoleShell .serviceRecordTabs button {
    min-width: 0 !important;
    white-space: normal !important;
  }
}

/* Deep UX follow-up 2026-06-27: give each mobile work surface exactly one
   scroll owner and reserve space for the fixed global dock plus service subnav. */
@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-mobile-bottom-dock-space: calc(var(--ops-dock-height, 4.2rem) + env(safe-area-inset-bottom));
    --ops-service-subnav-height: 4.35rem;
    --ops-service-mobile-scroll-clearance: calc(var(--ops-service-subnav-height) + 1.25rem);
    --ops-field-mobile-scroll-clearance: calc(var(--ops-dock-height, 4.2rem) + 2.75rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .serviceShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceCustomerPane,
  .opsConsoleShell .serviceProfilePane,
  .opsConsoleShell .serviceRecordsPane {
    display: none !important;
  }

  .opsConsoleShell .serviceCustomerPane.mobileActive,
  .opsConsoleShell .serviceProfilePane.mobileActive,
  .opsConsoleShell .serviceRecordsPane.mobileActive {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .serviceCustomerList,
  .opsConsoleShell .serviceProfileContent,
  .opsConsoleShell .serviceRecordsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--ops-service-mobile-scroll-clearance) !important;
    scroll-padding-bottom: var(--ops-service-mobile-scroll-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .serviceMobileNav.mobileOnly,
  .opsConsoleShell .serviceMobileNav {
    position: sticky !important;
    right: auto !important;
    bottom: 0 !important;
    left: auto !important;
    flex: 0 0 var(--ops-service-subnav-height) !important;
    width: calc(100% - 1rem) !important;
    min-height: var(--ops-service-subnav-height) !important;
    margin: 0.35rem 0.5rem 0 !important;
    padding: 0.42rem !important;
    z-index: 75 !important;
    box-sizing: border-box !important;
  }

  .opsConsoleShell .serviceShell[data-office-workspace="customers"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-office-workspace="estimates"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-office-workspace="payments"] > .serviceCustomerPane > .serviceInboundOpsPanel {
    display: none !important;
  }

  .opsConsoleShell .serviceMobileNav.mobileOnly button,
  .opsConsoleShell .serviceMobileNav button {
    min-height: 3.05rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    flex: 0 0 auto !important;
    max-height: min(12.25rem, 32dvh) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .serviceRecordTabs {
    flex: 0 0 auto !important;
    max-height: min(8rem, 22dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .serviceRecordTabs button {
    min-height: 2.85rem !important;
  }

  .opsConsoleShell .messageList,
  .opsConsoleShell .phoneTimeline,
  .opsConsoleShell .phoneCustomerMatch,
  .opsConsoleShell .chatTimeline,
  .opsConsoleShell .chatComposer {
    padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.4rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.4rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell {
    height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-top: 0.85rem !important;
    padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    scroll-padding-top: 1rem !important;
    scroll-padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleCanvas,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteShell,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRoutePlans,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteStops,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleMobileAgenda {
    padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    scroll-padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleRouteMapCanvas {
    min-height: 10.5rem !important;
    max-height: 13.5rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldMainGrid,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-top: 1.1rem !important;
    padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    scroll-padding-top: 1.15rem !important;
    scroll-padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"] .fieldSecondaryActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"] .fieldCloseoutReadiness,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"] .fieldWorkLanePanel {
    margin-bottom: 1rem !important;
    scroll-margin-bottom: var(--ops-field-mobile-scroll-clearance) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldPaymentActionRow,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"] .fieldInvoiceActionRow {
    margin-top: 0.7rem !important;
  }

  .opsConsoleShell .fieldBillingLaunchTarget,
  .opsConsoleShell .fieldEstimateOptionActions button,
  .opsConsoleShell .fieldInvoiceActionButtons button,
  .opsConsoleShell .fieldPaymentActionButtons button {
    scroll-margin-top: calc(var(--ops-header-height, 3.35rem) + 0.75rem) !important;
    scroll-margin-bottom: var(--ops-field-mobile-scroll-clearance) !important;
  }
}

@media (min-width: 921px) {
  .desktopOfficeShell .opsConsoleShell .serviceRecordsPane,
  .opsConsoleShell .serviceRecordsPane {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    align-content: start !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex > div,
  .opsConsoleShell .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceRecordTabs,
  .opsConsoleShell .serviceRecordTabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(8.25rem, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .desktopOfficeShell .opsConsoleShell .serviceRecordIndex button,
  .opsConsoleShell .serviceRecordIndex button,
  .desktopOfficeShell .opsConsoleShell .serviceRecordTabs button,
  .opsConsoleShell .serviceRecordTabs button {
    min-width: 0 !important;
    min-height: 3rem !important;
    padding: 0.52rem 0.64rem !important;
    white-space: normal !important;
  }
}

/* Deep UX follow-up pass 2: remove hidden mobile controls from the hit-test
   layer and keep comms detail panes above the global dock. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldModeSwitch,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldRangeSwitch,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldModeSwitch {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .messageColumn.mobileActive {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive .messageResultsPanel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    flex: 0 0 auto !important;
    max-height: min(24rem, calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem) - 13.5rem)) !important;
    overflow-y: auto !important;
    padding-bottom: 0.75rem !important;
    scroll-padding-bottom: 0.75rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneAppShell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .phoneDetail {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.5rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.5rem + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly,
  .opsConsoleShell .phoneCallbackActions {
    margin-bottom: calc(var(--ops-dock-height, 4.2rem) + 0.75rem + env(safe-area-inset-bottom)) !important;
    scroll-margin-bottom: calc(var(--ops-dock-height, 4.2rem) + 1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .serviceProfilePane.mobileActive .serviceActionGrid,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceWorkflowCard,
  .opsConsoleShell .serviceProfilePane.mobileActive .serviceHandoffCard {
    scroll-margin-bottom: var(--ops-service-mobile-scroll-clearance) !important;
  }
}

/* Browser audit residue 2026-06-27: the remaining failures were all first-
   viewport clipping from bottom chrome/column bounds, not data-flow defects. */
@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    max-height: min(21.75rem, calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem) - 16.75rem)) !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0.75rem !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .mobileReaderPreview {
    margin-top: 0.42rem !important;
  }

  .opsConsoleShell .phoneMobileBackButton.mobileOnly {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .phoneDetail:not([data-selected-phone-channel="sms"]) .phoneInboundWorkbench {
    display: none !important;
  }

  .opsConsoleShell .phoneDetail:not([data-selected-phone-channel="sms"]) .phoneMobileCustomerActions.mobileOnly {
    margin-bottom: 0.6rem !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateOptionActions {
    position: relative !important;
    z-index: 1 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin: 0.45rem 0 0.62rem !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    min-height: 2.45rem !important;
    padding: 0.38rem 0.42rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button small {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    flex: 1 1 auto !important;
    max-height: calc(100dvh - var(--ops-header-height, 3.35rem) - var(--ops-dock-height, 4.2rem) - 0.75rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    scroll-padding-bottom: var(--ops-field-mobile-scroll-clearance) !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"] .fieldMoneyActionRail,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"] .fieldPrimaryActionDock,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"] .fieldSecondaryActionRail {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Edit line item"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove line item"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Edit option"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Choose a customer approval signature"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove unsold option"],
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] button[aria-label^="Remove unsold estimate"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusCard.hasJob {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100dvh - 8.2rem);
    height: calc(100dvh - 8.2rem) !important;
    max-height: calc(100dvh - 8.2rem) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldFocusBody {
    height: 100% !important;
    max-height: none !important;
  }

  /*
  .opsConsoleShell .fieldPacketLaunchHandoff {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.35rem 0.55rem !important;
    align-items: center !important;
    min-height: 0 !important;
    border-radius: 0.72rem !important;
    padding: 0.62rem !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff span {
    grid-column: 1 / -1 !important;
    font-size: 0.65rem !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff strong {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 0.98rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff small {
    display: none !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff em {
    justify-self: end !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  .opsConsoleShell .fieldPacketLaunchHandoff button {
    grid-column: 1 / -1 !important;
    min-height: 2.35rem !important;
  }
  */

  .opsConsoleShell .fieldJobDetailsComposer {
    gap: 0.45rem !important;
    padding: 0.58rem !important;
  }

  .opsConsoleShell .fieldJobDetailsComposer textarea {
    min-height: 3.1rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"] .fieldJobNoteComposer {
    margin-top: 2.6rem !important;
  }

  .opsConsoleShell .chatShell details:not([open]) button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .chatHeaderActions .chatRefreshAction {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 720px) {
  .publicEstimatePage {
    min-height: 100dvh;
  }

  .publicEstimateHeader {
    gap: 0.55rem;
    padding: 0.72rem 1rem 0.85rem;
  }

  .publicEstimateHeader h1 {
    font-size: 1.25rem;
    line-height: 1.12;
  }

  .publicEstimateHeader p {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .publicEstimateTotal {
    padding: 0.7rem 0.8rem;
  }

  .publicEstimateTotal strong {
    font-size: 1.2rem;
  }

  .publicEstimateContext {
    gap: 0;
  }

  .publicEstimateContext div {
    padding: 0.62rem 1rem;
  }

  .publicPortalSummary {
    gap: 0.48rem;
    padding: 0.72rem 0.88rem;
  }

  .publicPortalSummary span {
    min-height: 0;
    padding: 0.62rem 0.72rem;
  }

  .publicPortalSummary b {
    font-size: 1.16rem;
  }

  .publicPortalRequest {
    gap: 0.62rem;
    padding: 0.72rem 0.88rem 0.88rem;
  }

  .publicPortalRequest > div {
    gap: 0.24rem;
  }

  .publicPortalRequest h2 {
    font-size: 1.08rem;
    line-height: 1.15;
  }

  .publicPortalRequest p {
    font-size: 0.86rem;
    line-height: 1.32;
  }

  .publicPortalRequest form {
    gap: 0.52rem;
    padding: 0.68rem;
  }

  .publicPortalRequest label {
    gap: 0.2rem;
  }

  .publicPortalRequest input,
  .publicPortalRequest select,
  .publicPortalRequest textarea {
    min-height: 2.35rem;
    padding: 0.5rem 0.62rem;
  }

  .publicPortalRequest textarea {
    height: 3.25rem;
    min-height: 3.25rem;
  }
}

/* Field sell-lane audit finalizer 2026-06-27: the reader/payment handoff must
   show estimate/invoice/payment actions without lower closeout rails colliding
   with the viewport or the mobile app dock. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] :is(
    .fieldCloseoutActionRail,
    .fieldCompletionChecklist,
    .fieldPrimaryActionDock,
    .fieldSecondaryActionRail
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCloseoutSummary {
    margin-top: 0.35rem !important;
    min-height: 0 !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] {
    padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] :is(
    .fieldCloseoutActionRail,
    .fieldCloseoutSummary,
    .fieldCompletionChecklist,
    .fieldPrimaryActionDock,
    .fieldSecondaryActionRail
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    min-height: 0 !important;
    max-height: 20rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 0.35rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff {
    max-height: 18.5rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    margin-top: 0.5rem !important;
    padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.35rem + env(safe-area-inset-bottom)) !important;
    scroll-margin-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.35rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell.serviceFixtureShell > .serviceShell,
  .desktopOfficeShell .opsConsoleShell .serviceShell {
    height: calc(100dvh - 7.25rem) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 7.25rem) !important;
    overflow: hidden !important;
  }

  .opsConsoleShell.serviceFixtureShell > .serviceShell > .serviceCustomerPane,
  .opsConsoleShell.serviceFixtureShell > .serviceShell > .serviceProfilePane,
  .opsConsoleShell.serviceFixtureShell > .serviceShell > .serviceRecordsPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell > .serviceCustomerPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell > .serviceProfilePane,
  .desktopOfficeShell .opsConsoleShell .serviceShell > .serviceRecordsPane {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .opsConsoleShell.serviceFixtureShell > .serviceShell > .serviceCustomerPane,
  .desktopOfficeShell .opsConsoleShell .serviceShell > .serviceCustomerPane {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 1rem !important;
    scroll-padding-bottom: 1rem !important;
  }

  .opsConsoleShell.serviceFixtureShell .serviceCustomerList,
  .desktopOfficeShell .opsConsoleShell .serviceCustomerList {
    flex: 0 0 auto !important;
    overflow: visible !important;
    padding-bottom: 1.25rem !important;
  }

  .opsConsoleShell.serviceFixtureShell .serviceProfileContent,
  .opsConsoleShell.serviceFixtureShell .serviceRecordsBody,
  .desktopOfficeShell .opsConsoleShell .serviceProfileContent,
  .desktopOfficeShell .opsConsoleShell .serviceRecordsBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 1.25rem !important;
    scroll-padding-bottom: 1.25rem !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell.serviceFixtureShell .servicePortalActions,
  .desktopOfficeShell .opsConsoleShell .servicePortalActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell.serviceFixtureShell > .serviceShell,
  .desktopOfficeShell .opsConsoleShell .serviceShell {
    height: calc(100dvh - 3.6rem) !important;
    max-height: calc(100dvh - 3.6rem) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] > .serviceCustomerPane > .serviceInboundOpsPanel,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] > .serviceCustomerPane > .serviceInboundOpsPanel {
    display: none !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceTitanJobActionStrip,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceTitanJobActionStrip {
    grid-template-columns: minmax(10rem, 0.23fr) minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    padding: 0.48rem !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip > div[role="list"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceTitanJobActionStrip > div[role="list"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceTitanJobActionStrip > div[role="list"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip button,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip button,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip button,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip button,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip button,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip button,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceTitanJobActionStrip button,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceTitanJobActionStrip button {
    min-height: 2.45rem !important;
    padding: 0.34rem 0.38rem !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip button small,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip button small,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip button small,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip button small,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip button small,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip button small,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceTitanJobActionStrip button small,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceTitanJobActionStrip button small {
    display: none !important;
  }
}

/* Final field sell handoff owner. Keep this block last: older audit passes
   intentionally reshuffle field closeout content, but the sell/payment handoff
   needs one predictable stack on both desktop and phone. */
@media (min-width: 921px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] :is(
    .fieldCloseoutActionRail,
    .fieldCloseoutSummary,
    .fieldCompletionChecklist,
    .fieldPrimaryActionDock,
    .fieldSecondaryActionRail,
    .fieldSellCoachingStrip,
    .fieldOfflineCloseoutVerdict,
    .fieldUnifiedSyncStatus
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: 16.25rem !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff {
    align-content: start !important;
    max-height: 14.8rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateRecommendedStart,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateReviewHandoff {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button {
    min-height: 4.25rem !important;
    align-content: start !important;
    justify-items: start !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button small {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    margin-top: 0.65rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] :is(
    .fieldCloseoutActionRail,
    .fieldCloseoutSummary,
    .fieldCompletionChecklist,
    .fieldPrimaryActionDock,
    .fieldSecondaryActionRail,
    .fieldSellCoachingStrip,
    .fieldOfflineCloseoutVerdict,
    .fieldUnifiedSyncStatus
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: 13.25rem !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 0.25rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff {
    align-content: start !important;
    grid-template-columns: 1fr !important;
    max-height: 12rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateRecommendedStart,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateReviewHandoff,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoffHeader,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button {
    min-height: 3.2rem !important;
    padding: 0.58rem 0.7rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button small {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldMoneyActionRail {
    margin-top: 0.55rem !important;
    padding-bottom: calc(var(--ops-dock-height, 4.2rem) + 1.5rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Goal UX finalizer 2026-06-27: keep the browser-audited MVP surfaces usable
   after the legacy shell overrides above. This block owns only layout/readability
   defects from the full Chromium pass, not workflow behavior. */
@media (max-width: 920px) {
  .opsConsoleShell {
    --ops-mobile-dock-clearance: calc(var(--ops-dock-height, 4.2rem) + env(safe-area-inset-bottom));
    --ops-mobile-service-nav-clearance: calc(var(--ops-dock-height, 4.2rem) + 4.9rem + env(safe-area-inset-bottom));
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextCard {
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextTabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    margin: 0 0 0.72rem !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextTabs button {
    min-height: 2.45rem !important;
    justify-content: center !important;
    padding: 0.44rem 0.5rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextBody {
    gap: 0.58rem !important;
    padding-top: 0.76rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextHeader {
    display: grid !important;
    gap: 0.18rem !important;
    margin-top: 0.12rem !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextHeader strong,
  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleContextHeader small {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell[data-active-field-tab="schedule"] .fieldScheduleSelectedFacts span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordTabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex {
    max-height: min(11.25rem, 30dvh) !important;
    padding-bottom: 0.55rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex input {
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordsBody,
  .opsConsoleShell .serviceRecordsBody {
    padding-bottom: var(--ops-mobile-service-nav-clearance) !important;
    scroll-padding-bottom: var(--ops-mobile-service-nav-clearance) !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceAllDetails,
  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordCardList {
    gap: 0.72rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordCard {
    overflow: visible !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordChips {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordChips span {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceAppointmentBookingEvidence {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.34rem !important;
    padding: 0.52rem !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceAppointmentBookingEvidence span {
    align-items: start !important;
    display: grid !important;
    grid-template-columns: minmax(4.8rem, auto) minmax(0, 1fr) !important;
    gap: 0.42rem !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceAppointmentBookingEvidence b {
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceDetailList.compact,
  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordInspectorGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .phoneDetail:not([data-selected-phone-channel="sms"]) .phoneMobileCustomerActions.mobileOnly,
  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
    max-height: none !important;
    margin: 0 0 0.85rem !important;
    overflow: visible !important;
    padding-bottom: 0.65rem !important;
  }

  .opsConsoleShell .phoneDetail:not([data-selected-phone-channel="sms"]) .phoneMobileCustomerActions.mobileOnly button,
  .opsConsoleShell .phoneMobileCustomerActions.mobileOnly button {
    min-height: 3.1rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .phoneDetail:not([data-selected-phone-channel="sms"]) .phoneCustomerMatch {
    margin-bottom: 0.85rem !important;
  }

  .opsConsoleShell .adminAppShell {
    padding-bottom: calc(var(--ops-mobile-dock-clearance) + 1.4rem) !important;
    scroll-padding-bottom: calc(var(--ops-mobile-dock-clearance) + 1.4rem) !important;
  }

  .opsConsoleShell .adminSetupMap {
    gap: 0.5rem !important;
  }

  .opsConsoleShell .adminSetupMap a {
    min-height: 3.35rem !important;
    padding: 0.46rem 0.58rem !important;
  }

  .opsConsoleShell .adminSetupMap a strong {
    font-size: 0.94rem !important;
    line-height: 1.08 !important;
  }

  .opsConsoleShell .adminSetupMap a small {
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
  }

  .opsConsoleShell .adminTriageBar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }

  .opsConsoleShell .adminPermissionSearch,
  .opsConsoleShell .adminQuickFilters,
  .opsConsoleShell .adminTriageCounts {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .opsConsoleShell .adminQuickFilters {
    align-items: stretch !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #ffffff) !important;
    border: 1px solid rgba(191, 204, 220, 0.82) !important;
    border-radius: 0.8rem !important;
    bottom: calc(var(--ops-mobile-dock-clearance) + 0.45rem) !important;
    box-shadow: 0 1.1rem 2.2rem rgba(15, 23, 42, 0.16) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.45rem !important;
    margin: 0.32rem 0 calc(var(--ops-mobile-dock-clearance) + 0.95rem) !important;
    max-height: 3.9rem !important;
    max-width: calc(100vw - 1rem) !important;
    min-height: 3.7rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.42rem !important;
    position: sticky !important;
    scrollbar-width: none !important;
    z-index: 80 !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .adminQuickFilters::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .adminQuickFilters button {
    flex: 0 0 auto !important;
    min-height: 2.75rem !important;
    min-width: 5.6rem !important;
    padding: 0.48rem 0.65rem !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceRecordsPane > .serviceRecordTabs,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceRecordsPane > .serviceRecordTabs,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceRecordsPane > .serviceRecordTabs,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceRecordsPane > .serviceRecordTabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceTitanJobActionStrip,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip {
    grid-template-columns: minmax(9rem, 0.18fr) minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceTitanJobActionStrip > div[role="list"],
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip > div[role="list"] {
    grid-template-columns: repeat(auto-fit, minmax(5.8rem, 1fr)) !important;
  }

  .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-active-record-tab="estimates"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-active-record-tab="invoices"] .serviceTitanJobActionStrip button b,
  .opsConsoleShell .serviceShell[data-active-record-tab="payments"] .serviceTitanJobActionStrip button b {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* Browser UX audit closure 2026-06-27: final mobile fixes for the broad
   Chromium pass. Keep these last so the older emergency overrides cannot
   reintroduce horizontal admin filters or field form overlays. */
@media (max-width: 920px) {
  .opsConsoleShell .adminQuickFilters {
    bottom: auto !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    margin: 0.32rem 0 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.34rem !important;
    position: relative !important;
    width: 100% !important;
  }

  .opsConsoleShell .adminQuickFilters button {
    flex: 1 1 auto !important;
    min-height: 2.15rem !important;
    min-width: 0 !important;
    padding: 0.36rem 0.34rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"]:not([data-active-field-lane="sell"]) .fieldMoneyActionRail {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"]:not([data-active-field-lane="sell"]) :is(
    .fieldPrimaryActionDock,
    .fieldSecondaryActionRail,
    .fieldCloseoutReadiness,
    .fieldCloseoutSummary,
    .fieldCompletionChecklist,
    .fieldSellCoachingStrip,
    .fieldOfflineCloseoutVerdict,
    .fieldUnifiedSyncStatus
  ) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    margin: 0.54rem 0 0.7rem !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLaneSwitch button {
    min-height: 2.7rem !important;
    padding: 0.48rem 0.5rem !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldWorkLanePanel {
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .opsConsoleShell .fieldWorkLaneStack,
  .opsConsoleShell .fieldJobDetailsComposer,
  .opsConsoleShell .fieldFormComposer,
  .opsConsoleShell .fieldFormResponseComposer,
  .opsConsoleShell .fieldMediaComposer,
  .opsConsoleShell .fieldMediaUploadComposer {
    min-width: 0 !important;
  }

  .opsConsoleShell .fieldJobDetailsComposer label,
  .opsConsoleShell .fieldFormComposer label,
  .opsConsoleShell .fieldFormResponseComposer label,
  .opsConsoleShell .fieldMediaComposer label,
  .opsConsoleShell .fieldMediaUploadComposer label {
    gap: 0.28rem !important;
  }

  .opsConsoleShell .fieldJobDetailsComposer input,
  .opsConsoleShell .fieldJobDetailsComposer select,
  .opsConsoleShell .fieldJobDetailsComposer textarea,
  .opsConsoleShell .fieldFormComposer input:not([type="checkbox"]),
  .opsConsoleShell .fieldFormComposer select,
  .opsConsoleShell .fieldFormComposer textarea,
  .opsConsoleShell .fieldFormResponseComposer input,
  .opsConsoleShell .fieldFormResponseComposer select,
  .opsConsoleShell .fieldFormResponseComposer textarea,
  .opsConsoleShell .fieldMediaComposer input,
  .opsConsoleShell .fieldMediaComposer select,
  .opsConsoleShell .fieldMediaComposer textarea,
  .opsConsoleShell .fieldMediaUploadComposer input,
  .opsConsoleShell .fieldMediaUploadComposer select,
  .opsConsoleShell .fieldMediaUploadComposer textarea {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.86) !important;
    border-radius: 0.72rem !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    min-height: 2.75rem !important;
    padding: 0.68rem 0.75rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldJobDetailsComposer textarea,
  .opsConsoleShell .fieldFormComposer textarea,
  .opsConsoleShell .fieldFormResponseComposer textarea,
  .opsConsoleShell .fieldMediaComposer textarea,
  .opsConsoleShell .fieldMediaUploadComposer textarea {
    min-height: 5.2rem !important;
  }

  .opsConsoleShell .fieldJobDetailsComposer button,
  .opsConsoleShell .fieldFormComposer button,
  .opsConsoleShell .fieldFormResponseComposer button,
  .opsConsoleShell .fieldMediaComposer button,
  .opsConsoleShell .fieldMediaUploadComposer button {
    min-height: 2.9rem !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell {
    min-height: 2.75rem !important;
    min-width: 2.35rem !important;
  }
}

/* Field mobile work-lane finish: direct job packets should open on technician
   commands first, with follow-up/admin edits available but not leading. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkLaneStack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkCommandPanel {
    order: -40 !important;
    gap: 0.5rem !important;
    padding: 0.64rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkCommandGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkNextActionButton,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkCommandGrid button {
    min-height: 2.75rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldJobNoteComposer:not(.fieldTeamChatComposer):not(.fieldCallNoteComposer) {
    order: -30 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldJobStatusComposer {
    order: -20 !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkAdvancedDetails {
    order: 30 !important;
    width: 100% !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkAdvancedDetails:not([open]) .fieldJobDetailsComposer {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkAdvancedDetails summary {
    min-height: 2.55rem !important;
    padding: 0.52rem 0.62rem !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="work"][data-field-has-selected-job="true"] .fieldWorkAdvancedDetails > .fieldJobDetailsComposer {
    margin: 0 0.52rem !important;
  }
}

/* Inbox mobile preview closure 2026-06-27: selected-message actions must not
   float over lower message rows. The message list and preview are separate
   flex regions above the global dock. */
@media (max-width: 920px) {
  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 10rem - var(--ops-dock-height, 4.2rem) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 10rem - var(--ops-dock-height, 4.2rem) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageWorkspace,
  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageResultsPanel {
    flex: 0 1 27rem !important;
    height: min(27rem, calc(100dvh - 25.75rem - env(safe-area-inset-bottom))) !important;
    max-height: min(27rem, calc(100dvh - 25.75rem - env(safe-area-inset-bottom))) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .messageList {
    flex: 1 1 auto !important;
    height: auto !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 0.65rem !important;
    scroll-padding-bottom: 0.65rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .opsConsoleShell .messageColumn.mobileActive.hasMobilePreview .mobileReaderPreview {
    flex: 0 0 auto !important;
    margin: 0.52rem 0.62rem 0.48rem !important;
    max-height: min(11.6rem, 28dvh) !important;
    position: relative !important;
    inset: auto !important;
    overflow-y: auto !important;
    z-index: 20 !important;
  }
}

/* Service desktop outbox closure 2026-06-27: pending customer actions should
   scroll with the customer pane, not disappear inside a clipped inner panel. */
@media (min-width: 921px) {
  .opsConsoleShell .serviceCustomerPane .serviceOutboxDetails {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .serviceCustomerPane .serviceOutboxDetails article {
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .serviceCustomerPane .serviceOutboxDetails button {
    justify-self: stretch !important;
    min-height: 2.15rem !important;
  }
}

/* Field sell mobile closure 2026-06-27: keep one actionable layer. The compact
   estimate-builder summary stays visible, while buried builder step buttons are
   removed from the mobile hit-test layer below the money cards. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff button,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateRecommendedStart,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateReviewHandoff,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCloseoutReadiness,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesForms,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldTemplateStarter,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCustomEstimateLineComposer,
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldCustomEstimateOptionComposer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldEstimateBuilderHandoff {
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesComposer > :not(.fieldEstimateBuilderHandoff) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesComposer > .fieldSalesListHasLaunchTarget {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesListHasLaunchTarget > :not(.fieldBillingLaunchTarget) {
    display: none !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesListHasLaunchTarget .fieldBillingLaunchTarget {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"] .fieldSalesListHasLaunchTarget .fieldBillingLaunchTarget small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"][data-field-has-billing-target="true"] .fieldWorkLanePanel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-active-field-lane="sell"][data-field-has-selected-job="true"][data-field-has-billing-target="true"] .fieldMoneyActionRail {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Service mobile record-index closure 2026-06-27: long record-tab grids must
   scroll inside their own card instead of overlaying Memberships/Forms content. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordIndex,
  .opsConsoleShell .serviceRecordIndex {
    max-height: min(11.5rem, 28dvh) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .opsConsoleShell .serviceRecordsPane.mobileActive .serviceRecordsBody,
  .opsConsoleShell .serviceRecordsBody {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Admin settings-control-center closure 2026-06-27: the admin landing view
   should be a usable settings map on phones, not a dense diagnostics strip. */
@media (max-width: 920px) {
  .opsConsoleShell .adminAppShell {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .opsConsoleShell .adminHeader {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
    padding: 0.72rem !important;
  }

  .opsConsoleShell .adminHeader p {
    display: block !important;
    max-width: none !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .opsConsoleShell .adminHeaderStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .opsConsoleShell .adminControlCenter {
    gap: 0.65rem !important;
    margin: 0.62rem 0 !important;
    max-width: 100% !important;
    padding: 0.66rem !important;
  }

  .opsConsoleShell .adminControlCenterIntro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }

  .opsConsoleShell .adminControlCenterIntro h3 {
    font-size: 1.08rem !important;
  }

  .opsConsoleShell .adminControlCenterIntro p {
    font-size: 0.82rem !important;
  }

  .opsConsoleShell .adminControlCenterIntro > a {
    width: 100% !important;
    min-height: 2.55rem !important;
  }

  .opsConsoleShell .adminHealthGrid,
  .opsConsoleShell .adminSettingsGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .adminHealthCard,
  .opsConsoleShell .adminSettingsCard {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.7rem !important;
  }

  .opsConsoleShell .adminSettingsCard strong {
    font-size: 1rem !important;
  }

  .opsConsoleShell .adminSettingsCard small,
  .opsConsoleShell .adminSettingsDetail,
  .opsConsoleShell .adminHealthCard small {
    font-size: 0.78rem !important;
  }

  .opsConsoleShell .adminPermissionSearch {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .opsConsoleShell .adminPermissionSearch > span {
    display: none !important;
  }

  .opsConsoleShell .adminAppShell > .adminHeader {
    display: none !important;
  }
}

@media (min-width: 921px) {
  .opsConsoleShell .adminAppShell > .adminStatusBar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
    margin: 0.58rem 0 0 !important;
    padding: 0 0.18rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .opsConsoleShell .adminAppShell > .adminStatusBar > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 2rem !important;
    border: 1px solid rgba(22, 163, 74, 0.22) !important;
    border-radius: 999px !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
    padding: 0 0.72rem !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
  }

  .opsConsoleShell .adminAppShell > .adminStatusBar button {
    min-height: 2rem !important;
    border-radius: 999px !important;
    padding: 0 0.86rem !important;
  }

  .opsConsoleShell .adminAppShell > .adminControlCenter {
    margin-top: 0.72rem !important;
  }
}

@media (max-width: 600px) {
  .opsConsoleShell .adminAppShell {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .adminWorkspaceNav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.48rem !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .opsConsoleShell .adminWorkspaceNavIntro {
    grid-column: 1 / -1 !important;
    padding: 0.62rem !important;
  }

  .opsConsoleShell .adminWorkspaceNav a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.28rem !important;
    min-height: 0 !important;
    padding: 0.62rem !important;
    scroll-snap-align: unset !important;
  }

  .opsConsoleShell .adminWorkspaceNav a small {
    display: none !important;
  }

  .opsConsoleShell .adminWorkspaceNav a b {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  .opsConsoleShell .adminWorkspaceNav a em {
    justify-self: flex-start !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.64rem !important;
  }

  .opsConsoleShell .adminWorkspaceCurrent {
    display: none !important;
  }

  .opsConsoleShell .adminHealthGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.48rem !important;
  }

  .opsConsoleShell .adminHealthCard {
    padding: 0.62rem !important;
  }

  .opsConsoleShell .adminHealthCard strong {
    font-size: 0.94rem !important;
  }

  .opsConsoleShell .adminHealthCard small {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .answerButton,
  .opsConsoleShell .phoneGlobalCallTray.ringing .phoneGlobalCallActions.ringingOnly .hangupButton {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 2.45rem !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.58rem !important;
    font-size: 0.86rem !important;
  }
}

/* Desktop Inbox notice finish: mail cache/outbox status must not cover message actions. */
.desktopOfficeShell.opsConsoleShell[data-active-surface="email"] .systemBannerStack {
  /* Desktop Inbox already has sync state in the top chrome. */
  display: none !important;
}

.desktopOfficeShell.opsConsoleShell[data-active-surface="email"] .systemBannerStack.noLiveOutboxHold {
  display: grid !important;
  position: fixed !important;
  right: 1rem !important;
  bottom: 1rem !important;
  left: auto !important;
  width: min(44rem, calc(100vw - 7rem)) !important;
  z-index: 88 !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.desktopOfficeShell.opsConsoleShell[data-active-surface="email"] .systemBannerStack > * {
  border: 1px solid #dbe1ea !important;
  border-radius: 0.85rem !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #0f172a !important;
}

.desktopOfficeShell.opsConsoleShell[data-active-surface="email"] .systemBannerStack.noLiveOutboxHold > * {
  width: 100% !important;
  pointer-events: auto !important;
}

/* Mobile booking intent finish: route-opened booking drawers must stay visible. */
@media (max-width: 920px) {
  .opsConsoleShell .serviceShell[data-initial-action="book"][data-has-initial-customer-profile="true"] .inboundBookingOverlay[aria-modal="true"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 220 !important;
  }
}

.opsConsoleShell .inboundBookingFooter > button.secondaryButton.compactButton {
  min-width: 5.75rem !important;
  min-height: 2.75rem !important;
}

/* Phone ringing focus: a live inbound call should read as answer/decline first,
   not as diagnostics, callback cleanup, and customer workflow buttons. */
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneSelectedActionPanel,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneMobileCustomerActions,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneCallbackFocus,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneInboundWorkbench,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneProofSummaryStrip,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneLiveProofCard,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneToolbarActions .phoneTroubleshootMenu,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneCallerMatchStrip button {
  display: none !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneConsole {
  order: 1 !important;
  margin-top: 0.62rem !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneStatusStrip {
  order: 1 !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneNextMoveStrip {
  order: 2 !important;
  border-color: rgba(22, 163, 74, 0.32) !important;
  background: #ecfdf3 !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .activeIncomingCalls {
  order: 3 !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneReadinessStrip,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneCallerMatchStrip {
  order: 4 !important;
}

.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .phoneNextMoveStrip .answerButton,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .incomingCallCard .answerButton,
.opsConsoleShell .phoneDetail[data-live-call-state="ringing"] .incomingCallCard .hangupButton {
  min-width: 7rem !important;
  min-height: 2.75rem !important;
  border-radius: 0.72rem !important;
  font-size: 0.95rem !important;
}

.phoneCallControlPending,
.opsConsoleShell .phoneCallControlPending {
  display: block;
  flex: 1 1 100%;
  margin-top: 0.28rem;
  color: #7c2d12;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Email triage cleanup: keep risky mailbox mutations behind More and let content wrap. */
.opsConsoleShell .mailReadinessBanner {
  border-color: rgba(180, 83, 9, 0.26) !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
}

.opsConsoleShell .detailToolbar .detailActions.exactToolbar {
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.opsConsoleShell .attachmentItems {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.opsConsoleShell .attachmentLink {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.opsConsoleShell .replyDockBody.replyComposerInline {
  grid-template-columns: minmax(0, 1fr) auto !important;
  text-align: left !important;
}

.opsConsoleShell .replyDockRow {
  display: grid !important;
  min-width: 0 !important;
}

.opsConsoleShell .replyDockRow span {
  color: #64748b !important;
  line-height: 1.35 !important;
}

.opsConsoleShell .replyInlineTextarea {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.35rem !important;
  border-radius: 0.7rem !important;
  background: #0f172a !important;
  color: #ffffff !important;
  padding: 0 0.85rem !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.opsConsoleShell .adminWorkspaceShell {
  overflow: visible !important;
}

.opsConsoleShell .adminWorkspaceMain,
.opsConsoleShell .adminWorkspaceMain > *,
.opsConsoleShell .adminReportPanel {
  min-width: 0 !important;
  max-width: 100% !important;
}

.opsConsoleShell .adminTableWrap,
.opsConsoleShell .adminMatrixWrap {
  overflow-x: auto !important;
}

.opsConsoleShell .workspacePanelLoading {
  display: grid;
  gap: 0.32rem;
  align-content: center;
  min-height: min(24rem, 58dvh);
  margin: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #edf7ff 100%);
  color: #0f172a;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}

.opsConsoleShell .workspacePanelLoading strong {
  font-size: 1rem;
  font-weight: 900;
}

.opsConsoleShell .workspacePanelLoading span {
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Production UX 2026-06-28: phone booking should open on work, not a tall progress wall. */
@media (max-width: 720px) {
  .opsConsoleShell .inboundBookingHeader {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 0.45rem !important;
    padding: 0.72rem 0.78rem !important;
  }

  .opsConsoleShell .inboundBookingHeader > div {
    width: auto !important;
  }

  .opsConsoleShell .inboundBookingHeader > a {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .opsConsoleShell .inboundBookingHeader > button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 2.2rem !important;
    padding-inline: 0.72rem !important;
  }

  .opsConsoleShell .inboundBookingHeader h3 {
    font-size: 1.08rem !important;
    line-height: 1.1 !important;
  }

  .opsConsoleShell .inboundBookingHeader p {
    display: -webkit-box !important;
    max-width: none !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opsConsoleShell .inboundBookingSteps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0.62rem 0.68rem 0.15rem !important;
  }

  .opsConsoleShell .inboundBookingSteps::-webkit-scrollbar {
    display: none !important;
  }

  .opsConsoleShell .inboundBookingSteps span {
    max-width: none !important;
    min-height: 2.08rem !important;
    padding: 0.3rem 0.52rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  .opsConsoleShell .inboundBookingSteps b {
    width: 1.2rem !important;
    height: 1.2rem !important;
    font-size: 0.66rem !important;
  }

  .opsConsoleShell .inboundBookingFooter {
    display: grid !important;
    grid-template-columns: minmax(5.75rem, 0.36fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 0.52rem !important;
    padding: 0.55rem 0.72rem calc(0.55rem + env(safe-area-inset-bottom)) !important;
  }

  .opsConsoleShell .inboundBookingFooter > button {
    width: 100% !important;
    min-height: 2.75rem !important;
    padding-inline: 0.72rem !important;
  }

  .opsConsoleShell .inboundBookingFooterAction {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  .opsConsoleShell .inboundBookingFooter .primaryAction {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
  }

  .opsConsoleShell :is(.inboundBookingFooterConflict, .inboundBookingFooterMismatch) {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }
}

/* Production UX 2026-06-28: Admin membership plans need readable card rows, not a squeezed table strip. */
.opsConsoleShell .adminMembershipPanel {
  max-height: none !important;
  overflow: visible !important;
}

.opsConsoleShell .adminWorkspaceMain > .adminReportPanel {
  max-height: none !important;
  overflow: visible !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto none !important;
}

.opsConsoleShell .adminProviderSettingsPanel {
  max-height: none !important;
  overflow: visible !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto none !important;
}

.opsConsoleShell .adminProviderSettingsPanel .adminProviderSettingsGrid,
.opsConsoleShell .adminProviderSettingsPanel .adminProviderSettingsCard,
.opsConsoleShell .adminProviderSettingsPanel .adminProviderSecretList,
.opsConsoleShell .adminProviderSettingsPanel .adminProviderSecretRow {
  max-height: none !important;
  overflow: visible !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportGrid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportSide {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.72rem !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTableHeader,
.opsConsoleShell .adminMembershipPanel .adminReportTable [role="row"] {
  grid-template-columns: minmax(13rem, 1fr) minmax(13rem, 0.9fr) minmax(15rem, 1.05fr) minmax(15rem, 1.05fr) !important;
  align-items: start !important;
  gap: 0.7rem !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable [role="row"] {
  padding: 0.75rem !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable [role="cell"] {
  display: grid !important;
  gap: 0.36rem !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable [role="cell"] > label:not(.serviceInlineSwitch) {
  display: grid !important;
  gap: 0.24rem !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable strong,
.opsConsoleShell .adminMembershipPanel .adminReportTable b,
.opsConsoleShell .adminMembershipPanel .adminReportTable small {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.opsConsoleShell .adminMembershipPanel .adminReportTable input,
.opsConsoleShell .adminMembershipPanel .adminReportTable select {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  .opsConsoleShell .adminMembershipPanel .adminReportTableHeader {
    display: none !important;
  }

  .opsConsoleShell .adminMembershipPanel .adminReportTable [role="row"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .opsConsoleShell .adminMembershipPanel .adminReportSide,
  .opsConsoleShell .adminMembershipPanel .adminReportTable [role="row"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Production UX 2026-06-28 pass 2: keep live estimate/payment workspaces and
   mobile compose usable inside the real production shell, not just fixtures. */
.composeCard .composeAttachmentField {
  align-items: start !important;
}

.composeAttachmentPicker {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
  min-width: 0;
}

.composeAttachmentButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  padding: 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.composeAttachmentState,
.composeAttachmentSelection {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composeAttachmentState {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

.composeAttachmentInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.composeAttachmentInput:focus-visible + .composeAttachmentButton,
.composeAttachmentPicker:focus-within .composeAttachmentButton {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

@media (min-width: 921px) {
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="estimates"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="payments"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="estimate"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="payment"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="estimates"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="invoices"],
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"],
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] {
    grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr) minmax(13.5rem, 16.5rem) !important;
  }

  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="estimates"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="payments"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="estimate"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="payment"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordIndex,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordIndex,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordIndex {
    overflow-x: hidden !important;
  }

  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="estimates"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-office-workspace="payments"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="estimate"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-action="payment"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordIndex > div,
  .opsConsoleShell.desktopOfficeShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="estimates"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-office-workspace="payments"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="estimate"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-action="payment"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="estimates"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="invoices"] .serviceRecordIndex > div,
  .desktopOfficeShell .opsConsoleShell .serviceShell[data-initial-record-tab="payments"] .serviceRecordIndex > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .fieldScheduleMiniMonthCell {
    min-width: 2rem !important;
    min-height: 2.35rem !important;
  }

  .opsConsoleShell .fieldScheduleSlotButton {
    min-height: 2rem !important;
  }
}

@media (max-width: 920px) {
  .opsConsoleShell[data-compose-modal-open="true"] :is(
    .inboxShell,
    .mobileAppDock,
    .mobileReferenceTopBar,
    .mobileHeaderActions,
    .systemBannerStack
  ) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .opsConsoleShell[data-compose-modal-open="true"] .composeOverlay {
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 240 !important;
  }

  .opsConsoleShell[data-compose-modal-open="true"] .composeCard {
    max-height: calc(100dvh - env(safe-area-inset-bottom)) !important;
  }

  .composeCard .composeAttachmentField {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.42rem !important;
  }

  .composeCard .composeAttachmentField > span:first-child {
    font-size: 0.78rem !important;
  }

  .composeAttachmentPicker {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.34rem !important;
  }

  .composeAttachmentButton {
    justify-self: start;
    min-height: 2.15rem;
    padding: 0 0.82rem;
  }
}

/* Production UX audit 2026-06-28: keep compact controls tappable/clickable.
   These controls were visually fine but rendered under the 32px hit-target floor
   on production desktop/mobile sweeps. */
.opsConsoleShell .serviceOutboxStatus button,
.opsConsoleShell .serviceInboundOpsFilters button,
.opsConsoleShell .serviceEstimateNextStep,
.opsConsoleShell .serviceRecordIndex button,
.opsConsoleShell .fieldHero button,
.opsConsoleShell .mobileSurfaceMenu header button {
  box-sizing: border-box !important;
  min-height: 2.125rem !important;
}

/* Mail desktop focus controls repair: keep Focused/All reachable after dense shell overrides. */
@media (min-width: 921px) {
  .opsConsoleShell .messageSubtoolbar {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 2.75rem !important;
    padding: 0.42rem 0.58rem !important;
    border-bottom: 1px solid var(--ops-border, #dbe3ef) !important;
    background: #ffffff !important;
  }

  .opsConsoleShell .filterChips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
  }

  .opsConsoleShell .filterChip {
    min-height: 2rem !important;
  }
}

/* Field mobile sell-lane header guard: money cards must not make the selected
   job header collapse behind the lane switch on direct reader/payment handoffs. */
@media (max-width: 920px) {
  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .opsConsoleShell .fieldAppShell.hasJobs[data-active-field-tab="day"][data-field-has-selected-job="true"] .fieldJobOverviewCard :is(p, .fieldJobOverviewFacts, .fieldJobOverviewTags) {
    display: none !important;
  }
}

/* Admin mobile phone-system publish guard: the settings rail must stack above
   the workspace so protected phone routing controls never collapse to a sliver. */
@media (max-width: 920px) {
  .opsConsoleShell .adminWorkspaceShell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.72rem !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminWorkspaceRail,
  .opsConsoleShell .adminWorkspaceMain,
  .opsConsoleShell .adminWorkspaceMain > .adminReportPanel,
  .opsConsoleShell .adminReportGrid,
  .opsConsoleShell .adminReportSideBlock,
  .opsConsoleShell .adminReportHeaderActions {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .adminWorkspaceMain {
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminWorkspaceMain > .adminReportPanel {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .opsConsoleShell .adminReportGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .adminReportSideBlock {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .opsConsoleShell .adminReportSideBlock :is(label, input, textarea, select, button, span, small),
  .opsConsoleShell .adminReportHeaderActions :is(button, a) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .opsConsoleShell .adminReportSideBlock :is(input, textarea, select, button) {
    width: 100% !important;
  }

  .opsConsoleShell .adminReportHeaderActions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }
}