/* Receptionist warm-white and navy workspace skin. Route behavior and control states stay in the owning UI files. */
.app-shell {
  --canvas: #f7f7f2;
  --white: #fffef7;
  --line: #dbe0e9;
  --line-strong: #cbd1dd;
  --ink: #172152;
  --navy: #172152;
  --navy-2: #344269;
  --muted: #53607b;
  --blue: #536584;
  --blue-dark: #405274;
  --blue-soft: #edf0f9;
  --green: #557966;
  --green-soft: #edf3ee;
  --amber: #866e46;
  --amber-soft: #f5f0e4;
  color: var(--ink);
  background: var(--canvas);
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The former left rail is now the persistent horizontal top navigation. */
.app-shell > .sidebar {
  position: sticky;
  transform: none !important;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(145px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: auto;
  min-height: 76px;
  padding: 10px clamp(18px, 3vw, 42px);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fffef7;
  box-shadow: 0 4px 18px #17215208;
  z-index: 30;
}

/* Navigation stays in the top bar at every width; there is no off-canvas drawer. */
.app-shell .sidebar-toggle,
.app-shell .sidebar-backdrop { display: none !important; }

.app-shell .sidebar > .brand {
  grid-column: 1;
  padding: 0;
  white-space: nowrap;
}

.app-shell .sidebar > .brand .rt-mark { width: 29px; height: 29px; }
.app-shell .sidebar > .brand .rt-wordmark { color: var(--ink); font-size: 16px; }

.app-shell .workspace-switcher {
  grid-column: 2;
  min-width: 0;
  padding: 7px 9px;
  border-color: var(--line);
  border-radius: 9px;
  background: #f1f4f9;
}

.app-shell .workspace-avatar {
  width: 29px;
  height: 29px;
  background: #e5eaf3;
  color: #53607b;
  border: 1px solid #dbe0e9;
}

.app-shell .workspace-copy small { color: #65718a; letter-spacing: .02em; }
.app-shell .workspace-copy strong { color: #172152; }

.app-shell .main-nav {
  grid-column: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.app-shell .main-nav .nav-caption { display: none; }

.app-shell .nav-link {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #53607b;
  font-size: 10px;
  white-space: nowrap;
}

.app-shell .nav-link svg { width: 15px; height: 15px; }
.app-shell .nav-coming-soon { color: #53607b; cursor: default; }
.app-shell .nav-coming-soon-label { margin-left: auto; font-size: 10px; white-space: nowrap; }
.app-shell .nav-link:hover { background: #f1f4f9; color: #172152; }
.app-shell .nav-link[aria-current="page"] { background: #edf0f9; color: #172152; border-color: #dbe0e9; }
.app-shell .nav-count { min-width: 17px; height: 17px; margin-left: 0; color: #53607b; background: #e5eaf3; font-size: 9px; }
.app-shell .nav-connection { margin-left: 0; width: 15px; height: 15px; border-color: #abb5d0; color: #53607b; font-size: 8px; }

.app-shell .sidebar-usage {
  grid-column: 4;
  width: 154px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.app-shell .sidebar-usage > div { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.app-shell .sidebar-usage > div strong { font-size: 9px; color: #344269; }
.app-shell .sidebar-usage > div a { font-size: 8px; color: #53607b; }
.app-shell .sidebar-usage progress { height: 4px; margin: 6px 0 3px; accent-color: #7485a5; }
.app-shell .sidebar-usage small { display: block; color: #65718a; font-size: 8px; }
.app-shell .sidebar-footer { display: none; }

.app-shell .workspace-main { min-height: calc(100vh - 76px); }
.app-shell .topbar {
  position: relative;
  min-height: 52px;
  padding-inline: clamp(18px, 3vw, 42px);
  border-bottom-color: #dbe0e9;
  background: #f7f7f2;
  backdrop-filter: none;
}
.app-shell .breadcrumb { color: #65718a; font-size: 11px; }
.app-shell .breadcrumb strong { color: #172152; }
.app-shell .connection-chip { border-color: #e3e6dc; background: #f1f4ed; color: #5c7162; }
.app-shell .connection-chip.is-connected { border-color: #dbe5d9; background: #eef3eb; color: #59745f; }
.app-shell .connection-chip.is-disconnected { border-color: #eadfc7; background: #f7f1e5; color: #806a45; }
.app-shell .account-menu summary { border-color: #dbe0e9; background: #fffef7; color: #53607b; }

.app-shell .page-container { background: var(--canvas); }
.app-shell .page-heading .eyebrow { color: #53607b; }
.app-shell .panel, .app-shell .metric { border-color: var(--line); background: #fffef7; box-shadow: 0 2px 8px #17215208; }
.app-shell .metric { border-radius: 12px; }
.app-shell .button-primary { background: #536584; border-color: #536584; color: #fffef7; }
.app-shell .button-primary:hover { background: #405274; border-color: #405274; }
.app-shell .button-primary:disabled { background: #e7e4dc; border-color: #e2ded5; color: #8e918c; }
.app-shell .button-secondary { border-color: #cbd1dd; background: #fffef7; color: #53607b; }
.app-shell .text-button, .app-shell .quiet-link { color: #536584; }
.app-shell .nav-count, .app-shell .contact-avatar { color: #53607b; }
.app-shell .connection-banner { border-color: #dbe0e9; background: #f1f4f9; }
.app-shell .connection-emblem { color: #536584; background: #fffef7; }
.app-shell .connection-banner.is-connected { background: #f5f7fa; border-color: #dbe0e9; }
.app-shell .portal-empty > span { color: #536584; border-color: #dbe0e9; background: #edf0f9; }
.app-shell .schedule-week button[aria-pressed="true"] { background: #6476a8; border-color: #6476a8; }

.app-shell .contact-avatar { border-color: #dbe0e9; background: #edf0f9; }
.app-shell .mail-item.selected { box-shadow: inset 3px 0 #7485a5; background: #edf0f9; }
.app-shell .voice-mark { border-color: #dce2ed; background: #edf0f9; }
.app-shell .voice-mark i { background: #7485a5; }
.app-shell .voice-stage { background: #f1f4f9; border-color: #dce2ed; }
.app-shell .voice-stage h3 { color: #172152; }
.app-shell .voice-stage > p { color: #53607b; }
.app-shell .voice-stage .button-primary { background: #6476a8; border-color: #6476a8; color: #fffef7; }
.app-shell :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { border-color: var(--line-strong); color: var(--ink); background-color: #fffef7; }
.app-shell :is(input, select, textarea):focus { border-color: #7485a5; box-shadow: 0 0 0 3px #7485a518; }
.app-shell :focus-visible { outline-color: #6476a8; }

@media (max-width: 1120px) {
  .app-shell > .sidebar { grid-template-columns: auto minmax(130px, 170px) minmax(0, 1fr); gap: 12px; }
  .app-shell .sidebar-usage { grid-column: 2 / 4; grid-row: 2; justify-self: end; width: min(220px, 100%); }
  .app-shell .main-nav { grid-column: 3; grid-row: 1; justify-content: flex-start; }
}

@media (max-width: 760px) {
  .app-shell > .sidebar { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 9px 14px 0; }
  .app-shell .sidebar > .brand { grid-column: 1; grid-row: 1; }
  .app-shell .workspace-switcher { grid-column: 2; grid-row: 1; width: min(180px, 48vw); }
  .app-shell .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; width: 100%; padding: 0 0 8px; }
  .app-shell .sidebar-usage { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; width: 100%; }
  .app-shell .nav-link { min-height: 36px; padding-inline: 9px; font-size: 10px; }
  .app-shell .workspace-main { min-height: calc(100vh - 110px); }
  .app-shell .topbar { min-height: 47px; padding-inline: 15px; }
  .app-shell .page-container { padding: 25px 17px 40px; }
}


@media (max-width: 420px) {
  .app-shell .sidebar > .brand .rt-wordmark { font-size: 14px; }
  .app-shell .sidebar > .brand .rt-mark { width: 25px; height: 25px; }
  .app-shell .workspace-switcher { gap: 6px; padding: 5px 6px; }
  .app-shell .workspace-avatar { width: 25px; height: 25px; }
  .app-shell .workspace-copy small { font-size: 8px; }
  .app-shell .workspace-copy strong { font-size: 10px; }
  .app-shell .workspace-region { display: none; }
  .app-shell .nav-link { gap: 5px; padding-inline: 7px; }
  .app-shell .nav-link svg { width: 14px; height: 14px; }
}

/* Soft voice surfaces need dark foregrounds, including idle controls. */
.app-shell .voice-stage .button-primary { background:#e9e8e3; border-color:#cbd1dd; color:#172152; }
.app-shell .voice-stage .text-button, .app-shell .voice-stage .quiet-link { color:#536584; }
.app-shell .voice-stage .voice-mark i { background:#7485a5; }

@media (max-width:760px) { .app-shell .sidebar-usage { padding:5px 10px; } .app-shell .sidebar-usage progress { margin:3px 0; } }

/* Customer workspace: persistent left navigation, independent of setup navigation. */
.app-shell { display:grid; grid-template-columns:246px minmax(0,1fr); }
.app-shell > .sidebar { position:sticky; top:0; display:flex; flex-direction:column; align-items:stretch; gap:16px; width:246px; height:100dvh; min-height:0; padding:24px 16px 18px; border-right:1px solid var(--line); border-bottom:0; overflow-y:auto; box-shadow:none; }
.app-shell .sidebar > .brand { padding:0 6px 12px; }
.app-shell .workspace-switcher { width:100%; }
.app-shell .main-nav { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:5px; width:100%; overflow:visible; padding:0; flex:1; }
.app-shell .nav-link { min-height:44px; padding:0 12px; font-size:12px; }
.app-shell .nav-link svg { width:18px; height:18px; }
.app-shell .nav-count, .app-shell .nav-connection { margin-left:auto; }
.app-shell .sidebar-usage { width:100%; margin-top:auto; padding:12px; }
.app-shell .workspace-main { min-width:0; width:100%; min-height:100dvh; }
@media(max-width:760px) {
 .app-shell { grid-template-columns:156px minmax(0,1fr); }
 .app-shell > .sidebar { width:156px; padding:18px 8px; }
 .app-shell .sidebar > .brand .rt-wordmark { font-size:11px; }
 .app-shell .sidebar > .brand .rt-mark { width:22px; height:22px; }
 .app-shell .sidebar > .brand { gap:5px; padding-inline:2px; }
 .app-shell .workspace-switcher { width:100%; max-width:none; }
 .app-shell .nav-link { font-size:10px; padding:0 7px; gap:6px; }
 .app-shell .nav-link svg { width:15px; height:15px; }
 .app-shell .workspace-avatar { display:none; }
 .app-shell .sidebar-usage { padding:7px; }
 .app-shell .main-nav { width:100%; padding:0; }
}

/* One customer interaction palette across page tabs, filters and selections. */
.app-shell { --blue:#536584; --blue-dark:#405274; --blue-soft:#edf0f9; accent-color:var(--blue); }
.app-shell :is(.settings-tabs,.settings-subtabs) button[aria-selected="true"],
.app-shell :is(.tabs,.filter-tabs,.integration-filters) :is(button.active,button[aria-selected="true"],button[aria-pressed="true"]),
.app-shell .style-options input:checked + span { background:var(--blue-soft); border-color:#abb5d0; color:#172152; box-shadow:none; }
.app-shell .hours-period-add { color:var(--blue); }
.app-shell :focus-visible { outline-color:#6476a8; }

/* Shared surface system for every signed-in customer page. */
.app-shell .workspace-main, .app-shell .page-container, .app-shell .page-view { background:var(--canvas); }
.app-shell :is(.conversations-shell,.conversation-list-pane,.call-detail,.history-row,.crm-list,.crm-detail,.crm-workspace,.mail-list,.mail-detail,.mail-workspace,.calls-workspace,.schedule-items,.workflow-card,.free-plan-summary,.subscription-usage-card,.subscription-summary-card,.rt-plan,.weekly-hours-editor,.weekly-hours-day) { background:var(--white); border-color:var(--line); }
.app-shell :is(.history-row,.crm-item,.mail-item):hover { background:#f1f4f9; }
.app-shell :is(.history-row,.crm-item,.mail-item).selected { background:var(--blue-soft); box-shadow:inset 3px 0 #7485a5; }
.app-shell #page-phone #phone-number-view { background:var(--white); border-color:var(--line); }
.app-shell #page-phone .button-primary { background:var(--blue); border-color:var(--blue); box-shadow:none; }
.app-shell #page-phone .forward-destination-card { background:#f1f4f9; border-color:var(--line); }
.app-shell #settings-panel-subscription .subscription-plan-grid .rt-plan { background:var(--white); }
.app-shell #settings-panel-subscription .subscription-plan-grid .rt-plan-current { background:var(--blue-soft); }
body.onboarding-locked .app-shell { max-width:100vw; overflow:hidden; }

@media(max-width:600px) {
 .app-shell { grid-template-columns:64px minmax(0,1fr); }
 .app-shell > .sidebar { width:64px; padding:18px 6px; gap:14px; }
 .app-shell .sidebar > .brand .rt-wordmark, .app-shell .workspace-switcher, .app-shell .sidebar-usage { display:none; }
 .app-shell .sidebar > .brand { justify-content:center; padding:0; }
 .app-shell .main-nav .nav-link { justify-content:center; min-height:44px; padding:0; font-size:0; gap:0; }
 .app-shell .main-nav .nav-link svg { width:20px; height:20px; }
 .app-shell .main-nav :is(.nav-count,.nav-connection) { display:none; }
 .app-shell .workspace-main { overflow-x:auto; }
}

.app-shell .segmented button[aria-pressed=true] { background:var(--blue-soft); color:var(--blue-dark); box-shadow:none; }
.app-shell .mail-column, .app-shell .contact-timeline button { background:var(--white); }
.app-shell .schedule-week button[aria-pressed=true] { background:var(--blue); border-color:var(--blue); box-shadow:none; }
.app-shell .route-receptionist { background:var(--blue); border-color:var(--blue); }

/* Free-minute summary: neutral white surface with comfortable spacing. */
.app-shell .sidebar-usage {
  box-sizing: border-box;
  min-height: 78px;
  padding: 13px 12px;
  border-color: #e2e6ed;
}
.app-shell .sidebar-usage > div strong { font-size: 10px; }
.app-shell .sidebar-usage > div a { font-size: 9px; }
.app-shell .sidebar-usage progress { height: 6px; margin: 8px 0 5px; accent-color: #7485a5; }
.app-shell .sidebar-usage small { font-size: 9px; line-height: 1.45; }
@media(max-width:760px) { .app-shell .sidebar-usage { padding: 11px 10px; } }

/* Cooler working area: neutral canvas and clean white content surfaces. */
.app-shell .workspace-main { --canvas:#f6f7f9; --white:#ffffff; background:var(--canvas); }
.app-shell .workspace-main .topbar { background:var(--canvas); }
.app-shell .workspace-main :is(.panel,.metric,.conversations-shell,.conversation-list-pane,.call-detail,.history-row,.mail-column,.mail-detail,.crm-detail,.crm-list) { background:var(--white); }
.app-shell > .sidebar { background:#fbfcfd; }

/* Customer forms and conversation typography use one shared treatment. */
.app-shell { font-family:Manrope,Arial,sans-serif; }
.app-shell .workspace-main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),textarea,select) {
 font-family:Manrope,Arial,sans-serif; font-size:13px; line-height:1.5; color:#172152;
 background-color:#ffffff !important; border-color:#cbd1dd; border-radius:8px;
}
.app-shell .workspace-main :is(input,textarea,select)::placeholder { color:#6b7890; opacity:1; }
.app-shell .workspace-main :is(input,textarea,select):focus { border-color:#7485a5; box-shadow:0 0 0 3px #7485a51c; }
.app-shell #page-calls :is(button,input,select,textarea) { font-family:Manrope,Arial,sans-serif; }
.app-shell #page-calls .eyebrow { letter-spacing:0; text-transform:none; font-family:Manrope,Arial,sans-serif; font-size:12px; }
.app-shell #page-calls .history-row strong { font-size:13px; font-weight:600; line-height:1.5; }
.app-shell #page-calls .history-row p, .app-shell #page-calls .history-row small { font-size:12px; line-height:1.5; }
.app-shell #page-calls .detail-header h2 { font-size:22px; font-weight:600; letter-spacing:-.5px; }
.app-shell #page-calls .detail-subtitle, .app-shell #page-calls .call-summary { font-size:12px; line-height:1.6; }
.app-shell #page-calls .message { font-family:Manrope,Arial,sans-serif; font-size:13px; line-height:1.7; color:#344269; }
.app-shell #page-calls .message strong { font-size:12px; font-weight:600; color:#172152; }
.app-shell #page-calls .transcript-heading h3 { font-size:13px; font-weight:600; color:#172152; }

/* Primary workspace actions are muted blue; yellow is reserved for setup Next. */
.app-shell .workspace-main :is(button.button-primary,a.button-primary,.rt-button:not(.rt-button-outline)) { background:#536584 !important; border-color:#536584 !important; color:#ffffff; box-shadow:none; }
.app-shell .workspace-main :is(button.button-secondary,a.button-secondary) { background:#ffffff !important; color:#405274; border-color:#cbd1dd; }
.app-shell .workspace-main button:disabled { background:#e9edf3 !important; border-color:#dbe0e9 !important; color:#69758b; }

.app-shell #paid-number-selection { margin-bottom:20px; }
.app-shell #page-phone .phone-mode-picker { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px; padding:0; border:0; }
.app-shell #page-phone .phone-mode-option { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 14px; border:1px solid #dbe0e9; border-radius:9px; background:#fff; color:#405274; cursor:pointer; font-size:13px; }
.app-shell #page-phone .phone-mode-option:has(input:checked) { border-color:#7485a5; background:#edf0f9; color:#172152; }
.app-shell #page-phone .phone-business-number-panel { margin-bottom:16px; padding:20px; }
.app-shell #page-phone .phone-business-number-panel form { display:grid; gap:9px; }
.app-shell #page-phone .phone-business-number-panel label { color:#344269; font-size:13px; font-weight:600; }
.app-shell #page-phone .phone-business-number-controls { display:flex; gap:10px; align-items:center; }
.app-shell #page-phone .phone-business-number-controls input { flex:1; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #dbe0e9; border-radius:8px; background:#fff; color:#172152; }
.app-shell #page-phone #workspace-forwarding-test-feedback { margin:0; color:#53607b; font-size:12px; line-height:1.5; }
.app-shell #page-phone #workspace-forwarding-test-feedback.is-error { color:#a55b47; }
.app-shell #page-phone #paid-number-plan-required { margin:16px 0; color:#53607b; font-size:13px; }
.app-shell #page-phone #paid-number-plan-required a { color:#405274; font-weight:600; }
@media(max-width:600px) { .app-shell #page-phone .phone-business-number-controls { align-items:stretch; flex-direction:column; } .app-shell #page-phone .phone-business-number-controls :is(input,button) { width:100%; } }
.paid-number-search { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin:20px 0; }
.paid-number-search label { display:block; margin-bottom:7px; font-size:12px; }
.paid-number-search :is(input,select) { min-height:44px; padding:9px 12px; }
#paid-number-results { display:flex; flex-wrap:wrap; gap:10px; }
#paid-number-assigned { padding-left:20px; line-height:2; }

.number-voice-label { display:inline-flex; align-items:center; gap:10px; margin-left:20px; font-size:12px; }
.number-voice-label select { min-height:40px; padding:7px 12px; }

.number-confirm-dialog { width:min(440px,calc(100vw - 32px)); padding:28px; border:1px solid #dbe0e9; border-radius:16px; background:#fff; color:#172152; font-family:Manrope,Arial,sans-serif; box-shadow:0 20px 65px #17215220; }
.number-confirm-dialog::backdrop { background:#17215255; }
.number-confirm-dialog h2 { font-size:21px; font-weight:600; margin:0 0 14px; }
.number-confirm-dialog p { color:#53607b; font-size:14px; line-height:1.6; }
.number-confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.number-confirm-actions button { min-height:42px; padding:0 19px; border:1px solid #cbd1dd; border-radius:8px; background:#fff; color:#405274; font:600 13px Manrope,Arial,sans-serif; cursor:pointer; }
.number-confirm-actions #number-confirm-submit { background:#536584; border-color:#536584; color:white; }
.number-confirm-dialog :focus-visible { outline:3px solid #7485a5; outline-offset:3px; }
.app-shell .connection-chip { text-decoration:none; }
.app-shell .connection-chip.is-disconnected { color:#855b19; background:#fff5df; border-color:#ebd5aa; }
.app-shell .connection-chip.is-disconnected .chip-dot { background:#bf8528; }
.phone-mode-option:has(input:disabled) { color:#89909d; opacity:.6; cursor:not-allowed; }
.phone-paid-mode { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.phone-paid-plan-reference { color:#53607b; font-size:12px; padding-inline:3px; }
.phone-paid-plan-reference a { color:#405274; text-underline-offset:3px; }

/* Phone forwarding follows the setup order in one quiet working panel. */
.app-shell #page-phone .phone-page-heading h1 { font-size:26px; }
.app-shell #page-phone .phone-mode-picker { align-items:flex-start; gap:12px; margin-bottom:20px; }
.app-shell #page-phone .phone-mode-option { min-height:40px; font-size:12px; }
.app-shell #page-phone .phone-forwarding-panel { max-width:820px; padding:24px; box-shadow:none; }
.app-shell #page-phone .phone-setup-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:end; }
.app-shell #page-phone .phone-business-field { display:grid; gap:8px; font-size:12px; color:#53607b; }
.app-shell #page-phone #workspace-business-number { width:100%; min-height:44px; padding:10px 12px; border:1px solid #dbe0e9; border-radius:8px; background:#fff; color:#172152; font:inherit; font-size:13px; box-sizing:border-box; }
.app-shell #page-phone .forwarding-line-type { padding:0; margin:0; border:0; min-width:0; }
.app-shell #page-phone .forwarding-line-type legend { padding:0; margin-bottom:8px; font-size:12px; color:#53607b; }
.app-shell #page-phone .forwarding-line-type>div { display:flex; align-items:center; gap:18px; min-height:44px; flex-wrap:wrap; }
.app-shell #page-phone .forwarding-line-type label { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#344269; }
.app-shell #page-phone .forwarding-line-type input { margin:0; accent-color:#536584; }
.app-shell #page-phone .forward-selectors { gap:24px; margin:20px 0 24px; }
.app-shell #page-phone .phone-forwarding-instructions { padding-top:20px; border-top:1px solid #e6e9ef; }
.app-shell #page-phone .phone-forwarding-instructions h2 { margin:0 0 14px; font-size:15px; font-weight:600; }
.app-shell #page-phone .forward-destination-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:#53607b; font-size:12px; }
.app-shell #page-phone .forward-destination-row strong { color:#172152; font-size:15px; font-weight:600; letter-spacing:0; }
.app-shell #page-phone #copy-forward-number { min-height:30px; padding:3px 9px; font-size:11px; }
.app-shell #page-phone #forward-dial-instructions { margin:16px 0 0; padding:0; gap:8px; border:0; border-radius:0; background:transparent; }
.app-shell #page-phone #forward-dial-instructions :is(#forward-code-help,#forward-carrier-fallback) { font-size:12px; line-height:1.65; color:#53607b; font-weight:400; }
.app-shell #page-phone #forward-dial-instructions #forward-code { font-size:18px; line-height:1.5; font-weight:600; color:#344269; letter-spacing:0; }
.app-shell #page-phone #forward-disable-instructions { margin:4px 0 0; font-size:12px; line-height:1.65; color:#53607b; }
.app-shell #page-phone #forward-disable-code { font-size:14px; line-height:1.5; font-weight:600; color:#344269; letter-spacing:0; }
.app-shell #page-phone .phone-verification-actions { display:flex; align-items:center; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid #e6e9ef; }
.app-shell #page-phone .phone-verification-actions button { flex-shrink:0; }
@media(max-width:640px) {
 .app-shell #page-phone .phone-forwarding-panel { padding:20px; }
 .app-shell #page-phone .phone-setup-fields,.app-shell #page-phone .forward-selectors { grid-template-columns:1fr; gap:16px; }
 .app-shell #page-phone .phone-verification-actions { align-items:flex-start; flex-direction:column; gap:10px; }
}

/* Local recovery stays beside the affected work, without modal interruptions. */
.workspace-recovery { padding: 1rem; margin-block: .75rem; border: 1px solid #dbe0e9; border-radius: .5rem; background: #fff; color: #172152; }
.workspace-recovery[hidden] { display: none; }
.workspace-recovery p { margin: 0 0 .65rem; }
.selected-calendar-item { outline: 2px solid #536584; outline-offset: 2px; }
#detail-outcomes > div + div { margin-top: 1rem; }

/* Daily workspace hierarchy: actions first, compact facts, quiet controls. */
.app-shell #page-overview .metrics-row { margin-block: 18px; gap: 12px; }
.app-shell #page-overview .metric { min-height: 0; padding: 16px; }
.app-shell #page-overview .metric strong { font-size: 25px; line-height: 1.25; }
.app-shell #page-overview .metric small { font-size: 11px; }
#setup-guide .panel-heading { align-items: center; flex-wrap: wrap; gap: 12px; }
.inbox-filters :is(select,input) { min-height: 40px; border: 1px solid #dbe0e9; border-radius: 6px; color: #172152; background: #fff; font: inherit; padding: 7px; }
#setup-guide-steps { display: grid; gap: 8px; }
.setup-guide-step { display: block; padding: 12px; border: 1px solid #dbe0e9; border-radius: 6px; text-decoration: none; color: #172152; }
.setup-guide-step[data-complete=true] { color: #236147; background: #f4f9f6; }
#setup-guide { margin-bottom: 18px; }
.inbox-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; border-bottom: 1px solid #dbe0e9; }
.inbox-filters label { display: grid; gap: 5px; font-size: 11px; color: #53607b; }
.inbox-filters :is(select,input) { width: 100%; min-width: 0; font-size: 11px; }
.app-shell #page-calls .list-toolbar { padding:16px; grid-template-columns:minmax(0,1fr) auto; }
.app-shell #page-calls .filter-select { max-width:none; font-size:12px; }
.app-shell #page-calls .search-box input { font-size:12px; }
.app-shell #page-calls .history-list { max-height:calc(100vh - 330px); overflow:auto; }
.app-shell #page-calls .history-row { padding:12px; }
.app-shell #page-calls .detail-close { display:none; }
.app-shell #page-calls .call-filters { border-bottom:1px solid var(--line); }
.app-shell #page-calls .call-filters summary { padding:10px 16px; color:#53607b; font-size:12px; cursor:pointer; }
.app-shell #page-calls .inbox-filters { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); border-bottom:0; }
@media(max-width:600px) {
 .app-shell #page-calls .detail-close { display:grid; }
 .app-shell #page-calls .list-toolbar { grid-template-columns:1fr; }
 .app-shell #page-calls .detail-actions { flex-wrap:wrap; }
}
.history-row.is-unreviewed .history-title { font-weight: 800; }
.calendar-open { text-align: left; color: #172152; font-weight: 650; padding: 4px 0; min-height: 44px; }
.followup-details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 12px; padding-top: 12px; border-top: 1px solid #dbe0e9; }
.followup-details label { display: grid; gap: 6px; font-size: 12px; color: #53607b; }
.followup-details :is(textarea,input) { border: 1px solid #dbe0e9; border-radius: 6px; background: #fff; font: inherit; color: #172152; padding: 10px; width: 100%; min-width: 0; }
.followup-details textarea { min-height: 80px; }
.followup-details button { justify-self: start; }
.summary-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; padding: 16px; border: 1px solid #dbe0e9; border-radius: 6px; background: #f6f7f9; }
.app-shell .sidebar-usage-heading span, .app-shell #sidebar-usage-copy, .app-shell #sidebar-usage-total { color: #172152; opacity: 1; visibility: visible; font-size: 11px; }
.app-shell #sidebar-usage-copy { font-weight: 750; font-size: 13px; }
.app-shell :is(button,a,input,select,textarea):focus-visible { outline: 2px solid #536584; outline-offset: 3px; }
@media(max-width: 760px) {
 .followup-details { grid-template-columns: minmax(0,1fr); }
 .app-shell #page-overview .metric { padding: 12px; }
 .calendar-item-detail .detail-actions { flex-wrap: wrap; }
}

.app-shell .main-nav .nav-caption-spaced { display: block; font-size: 10px; color: #53607b; margin: 16px 12px 6px; }

.app-shell #setup-guide { padding: 22px; }

#digest-history > div { padding-top: 12px; border-top: 1px solid #e6e9ef; margin-top: 12px; }
#digest-history .text-button { display: block; padding: 5px 0; }

/* Calls and email use the Calendar page hierarchy: one surface, one list, details on selection. */
.app-shell #page-email .email-list-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 16px; width:100%; padding:16px 20px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.app-shell #page-email .email-list-item:hover,.app-shell #page-email .email-list-item[aria-pressed=true] { background:var(--blue-soft); }
.app-shell #page-email .email-list-item strong { font-size:14px; font-weight:600; }
.app-shell #page-email .email-list-item span { color:var(--muted); font-size:12px; }
.app-shell #page-email .email-list-item small { grid-column:2; grid-row:1 / span 2; color:var(--muted); font-size:11px; }
.app-shell #page-email .email-composer { padding:20px; border-top:1px solid var(--line); }
.app-shell #page-email .email-thread h2,.app-shell #page-email .email-composer h2 { margin:0 0 12px; font-size:18px; }
.app-shell #page-email .email-thread > button { margin:0 8px 12px 0; }
.app-shell #page-email .email-message { padding:14px 0; border-top:1px solid var(--line); }
.app-shell #page-email .email-message-body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; }
.app-shell #page-email .email-composer form { display:grid; gap:9px; max-width:720px; }
.app-shell #page-email .email-composer textarea { min-height:120px; }
.app-shell #settings-panel-account .email-account-settings { margin:0 0 20px; padding:20px; }
.app-shell #settings-panel-account .email-account-settings h2 { margin:0 0 8px; font-size:17px; }
.app-shell #settings-panel-account .email-account-settings form { display:grid; gap:8px; max-width:600px; }
.app-shell #settings-panel-account .email-setup-controls { display:flex; flex-wrap:wrap; gap:8px; }
.app-shell #settings-panel-account #email-connection-details { margin-top:12px; }
.app-shell #settings-panel-account #email-connection-details dd { overflow-wrap:anywhere; }
@media(max-width:600px) {
 .app-shell #page-email .email-composer { padding:16px; }
 .app-shell #page-email .email-list-item { padding:14px; }
 .app-shell #page-email .email-list-item small { grid-column:1 / -1; grid-row:auto; }
 .app-shell #settings-panel-account .email-setup-controls { align-items:stretch; flex-direction:column; }
}
.email-setup-controls,.email-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.email-setup-controls input { flex:1; min-width:0; }
#email-connection-details dd,#email-connection-details code { overflow-wrap:anywhere; margin:8px 0 14px; }
.email-message-body,.email-review p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; }
.email-addresses { overflow-wrap:anywhere; font-size:12px; }
#email-compose-form { display:grid; gap:10px; }

/* Google inbox remains a distinct surface from the native Postal Email page. */
.app-shell #page-google-inbox .google-gmail-workspace { display:grid; grid-template-columns:minmax(250px, 0.36fr) minmax(0, 0.64fr); min-height:520px; padding:0; overflow:hidden; }
.app-shell #page-google-inbox .google-gmail-list-panel { min-width:0; border-right:1px solid var(--line); }
.app-shell #page-google-inbox .google-gmail-controls { display:flex; gap:8px; padding:14px; border-bottom:1px solid var(--line); }
.app-shell #page-google-inbox .google-gmail-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; width:100%; padding:14px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.app-shell #page-google-inbox .google-gmail-item:hover { background:var(--blue-soft); }
.app-shell #page-google-inbox .google-gmail-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-shell #page-google-inbox .google-gmail-item span { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.app-shell #page-google-inbox .google-gmail-item small { grid-column:2; grid-row:1 / span 2; color:var(--muted); font-size:11px; }
.app-shell #page-google-inbox .google-gmail-detail { min-width:0; padding:22px; overflow-wrap:anywhere; }
.app-shell #page-google-inbox .google-gmail-detail h2 { margin:0 0 16px; font-size:20px; }
.app-shell #page-google-inbox .google-gmail-composer { margin-top:16px; padding:20px; }
.app-shell #page-google-inbox .google-gmail-composer form { display:grid; gap:9px; max-width:720px; }
.app-shell #page-google-inbox .google-gmail-composer textarea { min-height:120px; }
.app-shell #page-google-inbox .google-gmail-page-actions { display:flex; gap:8px; }
@media(max-width:720px) {
 .app-shell #page-google-inbox .google-gmail-workspace { grid-template-columns:minmax(0,1fr); }
 .app-shell #page-google-inbox .google-gmail-list-panel { border-right:0; border-bottom:1px solid var(--line); }
 .app-shell #page-google-inbox .google-gmail-page-actions { flex-wrap:wrap; justify-content:flex-end; }
}
#email-compose-form label { font-size:12px; color:#53607b; }
.email-review { padding:0; border:0; }
.email-editor { display:grid; gap:18px; }
.email-field { display:grid; gap:7px; }
.app-shell #page-email .email-composer textarea { min-height:220px; line-height:1.65; resize:vertical; }
.app-shell #page-email .email-composer #email-sender { margin:0 0 22px; overflow-wrap:anywhere; line-height:1.6; }
.email-review-address { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--line); font-size:12px; }
.email-review-address dt { color:var(--muted); }
.email-review-address dd { margin:0; overflow-wrap:anywhere; }
.email-review h3 { margin:0 0 18px; font-size:17px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.email-review-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.75; min-height:180px; }
.email-composer .email-actions { margin-top:12px; padding-top:18px; border-top:1px solid var(--line); }
.email-composer #email-draft-status:empty { display:none; }
.email-review strong { font-size:12px; }
.app-shell #page-calls .call-outcome-facts{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px 14px;margin:0;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.5}.call-outcome-facts dt{color:#8590a3;font-weight:400}.call-outcome-facts dd{margin:0;color:#172152;overflow-wrap:anywhere}.app-shell #page-calls #detail-call-facts{order:0}.app-shell #page-calls .detail-header{margin-bottom:0}

/* Email follows the Calls master/detail layout. */
.app-shell #page-email .email-list-item{position:relative;grid-template-columns:minmax(0,1fr) auto;padding:14px 12px;border:0;border-radius:10px;gap:5px 10px;margin-bottom:4px}
.app-shell #page-email .email-list-item strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell #page-email .email-list-item span{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-shell #page-email .email-list-item time{grid-column:2;grid-row:1;font-size:11px;color:var(--muted)}
.app-shell #page-email .email-message{padding:18px 0;border-bottom:1px solid var(--line)}

/* User-requested removal of automatic customer status indicators. Explicit action errors and Admin readiness retain their own elements. */
.app-shell .page-view:not(#page-admin) :is(.state-chip,.workspace-recovery,#sms-status,#preview-state,#session-help,#audio-feedback,#voice-tuning-unavailable,#voice-tuning-state,#knowledge-base-status,#paid-number-message,#setup-guide-status,#subscription-credit-state,#email-settings-status){display:none!important}


/* Structure and empty states are emitted by ContactLayoutTemplate.cs for all four pages. */
#main-content .record-panel[data-record-template] {max-width:1160px;padding:15px 19px;border:1px solid var(--line);border-radius:12px;background:var(--white);box-shadow:none}
#main-content .record-panel[data-record-template] .record-toolbar {flex-wrap:wrap}
#main-content .record-panel[data-record-template] .contact-search {flex:1 1 220px;width:auto}
#main-content .record-panel[data-record-template] [data-record-count] {white-space:nowrap}
.record-pagination {display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.record-pagination label {display:flex;align-items:center;gap:6px}
.record-pagination select,.record-pagination button {min-height:30px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:inherit}
.record-pagination button {cursor:pointer}
.record-pagination button:disabled {opacity:.45;cursor:default}
.record-pagination select:focus-visible,.record-pagination button:focus-visible {outline:2px solid #849bb5;outline-offset:2px}
#main-content .record-panel[data-record-template]>.record-layout {display:grid;grid-template-columns:minmax(255px,.8fr) minmax(0,1.2fr);min-height:430px;gap:0;align-items:stretch;border:0;border-radius:0;padding:0;background:transparent}
#main-content .record-panel[data-record-template]>.record-layout>.record-list {grid-column:1;grid-row:1;display:block;min-width:0;padding:6px 14px 0 0;border-right:1px solid var(--line)}
#main-content .record-panel[data-record-template]>.record-layout>.record-detail {grid-column:2;grid-row:1;min-width:0;padding:22px 24px;border:0;background:transparent}
#main-content .record-panel[data-record-template]>.record-layout>.record-detail.is-record-detail-actionable {cursor:pointer;transition:background-color .14s ease,box-shadow .14s ease}
#main-content .record-panel[data-record-template]>.record-layout>.record-detail.is-record-detail-actionable:hover {background:#f8f9fb}
#main-content .record-panel[data-record-template]>.record-layout>.record-detail.is-record-detail-actionable:focus-visible {outline:2px solid #849bb5;outline-offset:-2px}
#main-content .record-panel :is(#email-list,#email-thread,#email-composer,#call-detail,#contact-detail,#followup-detail,.conversation-list-pane) {display:block;grid-column:auto;grid-row:auto;min-width:0;min-height:0;padding:0;border:0;background:transparent}
#main-content .record-panel .record-list>.contact-list {padding:0;border:0}
#main-content .record-panel .history-list {max-height:none}
#main-content .record-panel :is(.history-row,.email-list-item) {min-height:69px;padding:10px 8px;border:0;border-bottom:1px solid #edf0f3;border-radius:7px;background:transparent}
#main-content .record-panel .followup-list-row {grid-template-columns:minmax(0,1fr)}
#main-content .record-panel #followup-detail .callback-row {display:block;padding:0;border:0}
#main-content .record-panel #followup-detail .callback-actions {margin-top:20px}
#main-content .record-panel :is(.record-empty,#email-detail-empty) {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:360px;margin:0;padding:32px 24px;text-align:center;background:transparent;border:0;box-shadow:none}
#main-content .record-panel .record-empty h2 {margin:0;font-size:15px;font-weight:600;color:var(--ink)}
#main-content .record-panel .record-empty p {max-width:260px;margin:0;color:var(--muted);font-size:12px;line-height:1.6}
#main-content .record-panel .record-empty-symbol {display:grid;place-items:center;width:48px;height:48px;margin-bottom:8px;border-radius:50%;background:var(--blue-soft);color:var(--muted)}
#main-content .record-panel .record-empty-symbol svg {width:24px;height:24px;stroke-width:1.5}
#main-content .record-panel [hidden] {display:none!important}
@media(max-width:600px){#main-content .record-panel #conversations-shell:not(.mobile-detail-open) #call-detail {display:none}#main-content .record-panel #conversations-shell.mobile-detail-open .conversation-list-pane {display:none}#main-content .record-panel #conversations-shell.mobile-detail-open #call-detail {display:block}}
#main-content .record-panel .record-layout:has(.record-list :is(.empty,.record-empty)):not(.email-detail-open) {grid-template-columns:minmax(0,1fr)}
#main-content .record-panel .record-layout:has(.record-list :is(.empty,.record-empty)):not(.email-detail-open)>.record-list {display:none}
#main-content .record-panel .record-layout:has(.record-list :is(.empty,.record-empty)):not(.email-detail-open)>.record-detail {grid-column:1/-1}
@media(max-width:760px){#main-content .record-panel[data-record-template]>.record-layout {grid-template-columns:minmax(0,1fr);min-height:0}#main-content .record-panel[data-record-template]>.record-layout>.record-list {grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid var(--line)}#main-content .record-panel[data-record-template]>.record-layout>.record-detail {grid-column:1;grid-row:2}}
@media(max-width:600px){.record-pagination{width:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap}.record-pagination [data-record-page-label]{flex:1;text-align:center}}

/* Email uses the same persistent list and selected-detail layout as Calls. */
.app-shell #page-email .email-thread{min-height:360px;overflow-wrap:anywhere}
.app-shell #page-email .email-thread-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.app-shell #page-email .email-thread-header h2{min-width:0;margin:0;font-size:20px;line-height:1.35;overflow-wrap:anywhere}
.app-shell #page-email .email-thread-header .detail-close{display:none}
@media(max-width:760px){.app-shell #page-email .email-thread-header{align-items:flex-start;flex-direction:column}.app-shell #page-email .email-thread-header .detail-close{display:inline-flex}.app-shell #page-email .email-workspace.email-detail-open>.record-list{display:none}.app-shell #page-email .email-workspace.email-detail-open>.record-detail{grid-row:1}}