/* Final CRM showcase layer: these rules intentionally come after the legacy
   showcase stylesheet, so the mobile CRM composition remains deterministic. */
.showcase-crm-profile.showcase-crm-mobile-profile { position: relative; isolation: isolate; overflow-y: auto !important; }
.showcase-crm-workspace > .showcase-crm-profile.showcase-crm-mobile-profile > .showcase-crm-mobile-hero {
  position: sticky !important; top: 0; z-index: 0; flex: none;
}
.showcase-crm-workspace > .showcase-crm-profile.showcase-crm-mobile-profile > .showcase-crm-mobile-sheet {
  position: relative; z-index: 1;
}
/* The source photos are portrait selfies: keep each face above the rising sheet. */
.showcase-crm-workspace > .showcase-crm-profile.showcase-crm-mobile-profile > .showcase-crm-mobile-hero > img {
  object-position: center 62% !important;
}
.showcase-crm-mobile-score {
  display: inline-flex; flex: 0 0 76px; align-items: center; justify-content: center; min-width: 76px; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 999px; background: rgb(245 250 250 / 70%);
  color: #849094; font: 800 11px Arial, Helvetica, sans-serif; cursor: pointer;
}
.showcase-crm-mobile-score:hover { color: #526066; }
.showcase-crm-mobile-score span { white-space: nowrap; }
.showcase-crm-detail-overlay, .showcase-crm-contact-overlay {
  position: fixed; z-index: 90; display: grid; min-width: 0; min-height: 0; box-sizing: border-box;
  padding: 16px; background: rgb(35 46 51 / 22%); opacity: 0; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .18s ease;
}
.showcase-crm-detail-overlay { align-items: end; }
.showcase-crm-contact-overlay { align-items: start; }
.showcase-crm-detail-overlay.is-open, .showcase-crm-contact-overlay.is-open { opacity: 1; pointer-events: auto; }
.showcase-crm-detail-overlay[hidden], .showcase-crm-contact-overlay[hidden] { display: none; }
.showcase-crm-detail-overlay .showcase-crm-mobile-widget-detail {
  width: 100%; max-height: calc(100% - 18px); box-sizing: border-box; margin: 0; overflow-y: auto;
  transform: translateY(26px); transition: transform .22s ease; box-shadow: 0 -12px 34px rgb(29 42 47 / 16%);
}
.showcase-crm-detail-overlay.is-open .showcase-crm-mobile-widget-detail { transform: translateY(0); }
.showcase-crm-contact-overlay > article {
  position: relative; width: min(100%, 330px); padding: 18px; border-radius: 22px; background: #fff;
  box-shadow: 0 12px 30px rgb(29 42 47 / 15%); transform: translateY(-10px); transition: transform .18s ease;
}
.showcase-crm-contact-overlay.is-open > article { transform: translateY(0); }
.showcase-crm-contact-overlay > article > button:first-child {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: #eef1f1; color: #344348; font: 400 20px/1 Arial; cursor: pointer;
}
.showcase-crm-contact-overlay small { display: block; color: #77858a; font: 900 9px Arial, Helvetica, sans-serif; letter-spacing: .12em; }
.showcase-crm-contact-overlay h3 { margin: 8px 0 13px; color: #26353a; font: 800 19px/1.2 Arial, Helvetica, sans-serif; }
.showcase-crm-contact-overlay dl { display: grid; gap: 8px; margin: 0; }
.showcase-crm-contact-overlay dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid #e6ebeb; }
.showcase-crm-contact-overlay dt { color: #849094; font: 800 9px Arial, Helvetica, sans-serif; }
.showcase-crm-contact-overlay dd { overflow: hidden; margin: 0; color: #344348; font: 700 10px/1.3 Arial, Helvetica, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.showcase-crm-contact-edit { width: 100%; height: 36px; margin-top: 16px; border: 1px solid #dce2e3; border-radius: 10px; background: #f2f4f4; color: #98a2a5; font: 800 9px Arial, Helvetica, sans-serif; cursor: default; }
.showcase-crm-score-list time { color: #68777b !important; font-weight: 800 !important; }