.chart-review-preview-group {
  width: 100%;
  min-width: 0;
}

.chart-review-preview {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 350px;
  aspect-ratio: 1.42;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: #081525;
  color: #dce7f8;
  font: inherit;
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
}

.chart-review-preview-fallback,
.chart-review-preview-app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chart-review-preview-fallback {
  display: block;
  object-fit: cover;
  opacity: 1;
  transition: opacity 280ms ease-out;
}

.chart-review-preview-app {
  display: grid;
  grid-template-rows: 36px 32px 48px minmax(0,1fr);
  min-width: 0;
  min-height: 0;
  background: #0a1628;
  opacity: 1;
  transition: opacity 280ms ease-out;
  font-size: 11px;
  line-height: 1.35;
}

.chart-review-preview[data-enhanced="true"] .chart-review-preview-fallback { opacity: 0; }
.chart-review-preview[data-enhanced="true"] .chart-review-preview-app { opacity: 1; }
.chart-review-preview[data-preview-stage="reset"] .chart-review-preview-app { opacity: 0; }

.cr-preview-topbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #07101d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #dce7f8;
}
.cr-preview-brand { width: 84px; height: auto; flex: none; }
.hero .col-graphic .cr-preview-brand { width: 84px; height: auto; border: 0; border-radius: 0; }
.hero .col-graphic .chart-review-preview-fallback { border: 0; border-radius: 0; }
.cr-preview-product { border-left: 1px solid rgba(255,255,255,.15); padding-left: 10px; white-space: nowrap; }
.cr-preview-recent { margin-left: auto; color: #9db4d4; font-size: 10px; white-space: nowrap; }

.cr-preview-status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: #102035;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #c9d6ee;
}
.cr-preview-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #0e9b86;
}
[data-preview-stage="searching"] .cr-preview-status-dot,
[data-preview-stage="loading"] .cr-preview-status-dot,
[data-preview-stage="assessing"] .cr-preview-status-dot {
  background: #67cdbb;
  box-shadow: 0 0 0 3px rgba(14,155,134,.16);
}
.cr-preview-stage-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-preview-count { margin-left: auto; color: #aabbd1; font: 10px 'DM Mono', monospace; white-space: nowrap; }

.cr-preview-patient {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.cr-preview-patient-name { overflow: hidden; color: #eef4ff; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cr-preview-patient-source { margin-top: 2px; overflow: hidden; color: #9db4d4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cr-preview-sample-tag {
  flex: none;
  border: 1px solid rgba(14,155,134,.4);
  border-radius: 3px;
  padding: 3px 6px;
  color: #76d8c7;
  font-size: 9px;
  white-space: nowrap;
}

.cr-preview-main {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0,1.15fr) minmax(145px,.85fr);
}
.cr-preview-assessment,
.cr-preview-sources { min-width: 0; min-height: 0; padding: 9px 11px; overflow: hidden; }
.cr-preview-assessment { border-right: 1px solid rgba(255,255,255,.1); }
.cr-preview-section-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 2px; }
.cr-preview-section-title { color: #e8eef8; font-size: 12px; font-weight: 600; }
.cr-preview-review-status { color: #68d4c2; font-size: 9px; white-space: nowrap; }
.cr-preview-assessment-intro { margin-bottom: 4px; color: #9db4d4; font-size: 9px; }
.cr-preview-findings { display: grid; min-height: 0; }
.cr-preview-finding {
  min-width: 0;
  min-height: 57px;
  padding: 6px 0 5px;
  border-top: 1px solid rgba(255,255,255,.1);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 340ms ease-out, transform 340ms cubic-bezier(.16,1,.3,1);
}
.cr-preview-finding.is-visible,
.cr-preview-record.is-visible { opacity: 1; transform: none; }
.cr-preview-finding-title { color: #e4ecf8; font-size: 10px; font-weight: 600; line-height: 1.2; }
.cr-preview-finding-copy { display: -webkit-box; overflow: hidden; color: #aabbd1; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cr-preview-source-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  overflow: hidden;
  color: #55cfbb;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-preview-source-link svg { width: 10px; height: 10px; flex: none; }

.cr-preview-sources { background: rgba(5,14,27,.18); }
.cr-preview-source-heading { color: #e8eef8; font-size: 11px; font-weight: 600; }
.cr-preview-source-subtitle { margin: 2px 0 6px; color: #9db4d4; font-size: 8px; }
.cr-preview-records { display: grid; gap: 4px; }
.cr-preview-record {
  display: flex;
  min-width: 0;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid rgba(14,155,134,.5);
  border-radius: 5px;
  background: rgba(14,155,134,.1);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease-out, transform 300ms cubic-bezier(.16,1,.3,1);
}
.cr-preview-record-icon { width: 10px; height: 10px; flex: none; color: #65d1be; }
.cr-preview-record-title { display: block; min-width: 0; overflow: hidden; color: #e0eafa; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; }

.chart-review-preview-controls {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 6px;
}
.chart-review-preview-controls[hidden] { display: none; }
.chart-review-preview-toggle[hidden] { display: none; }
.chart-review-preview-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 4px;
  background: #0b1b3a;
  color: #c9d6ee;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.chart-review-preview-toggle:hover { border-color: #0e9b86; color: #fff; }
.chart-review-preview-toggle:focus-visible { outline: 2px solid #52cdbb; outline-offset: 3px; }
.chart-review-preview-toggle svg { width: 13px; height: 13px; flex: none; }
.chart-review-preview-summary {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 520px) {
  .chart-review-preview { min-height: 360px; aspect-ratio: auto; }
  .chart-review-preview-app { grid-template-rows: 34px 32px 46px minmax(0,1fr); font-size: 10px; }
  .cr-preview-topbar { gap: 7px; padding: 0 9px; }
  .cr-preview-brand { width: 73px; }
  .hero .col-graphic .cr-preview-brand { width: 73px; }
  .cr-preview-product { padding-left: 7px; font-size: 9px; }
  .cr-preview-recent { font-size: 8px; }
  .cr-preview-status { gap: 6px; padding: 0 9px; }
  .cr-preview-count { font-size: 8px; }
  .cr-preview-patient { padding: 5px 9px; }
  .cr-preview-patient-name { font-size: 12px; }
  .cr-preview-main { grid-template-columns: minmax(0,1.12fr) minmax(112px,.88fr); }
  .cr-preview-assessment,.cr-preview-sources { padding: 7px 7px; }
  .cr-preview-section-title { font-size: 10px; }
  .cr-preview-review-status { font-size: 8px; }
  .cr-preview-assessment-intro { font-size: 8px; }
  .cr-preview-finding { min-height: 62px; padding: 5px 0 4px; }
  .cr-preview-finding-title { font-size: 10px; }
  .cr-preview-finding-copy { font-size: 10px; }
  .cr-preview-source-link { font-size: 10px; }
  .cr-preview-source-heading { font-size: 10px; }
  .cr-preview-source-subtitle { font-size: 7px; }
  .cr-preview-records { gap: 3px; }
  .cr-preview-record { min-height: 24px; padding: 3px 4px; }
  .cr-preview-record-title { font-size: 10px; }
}

@media (max-width: 360px) {
  .chart-review-preview { min-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-review-preview-fallback,
  .chart-review-preview-app,
  .cr-preview-finding,
  .cr-preview-record { transition: none !important; }
}

/* The complete HTML preview remains readable before enhancement or without JavaScript. */
.chart-review-preview:not([data-enhanced="true"]) .cr-preview-record,
.chart-review-preview:not([data-enhanced="true"]) .cr-preview-finding {
  opacity: 1;
  transform: none;
}