/* ============================================================================
   library-saved.css — "you already ran this" prompt + saved-results list.
   Tokens only; themes with the rest of the app in light and dark.
   ========================================================================== */

/* ---- the pre-run prompt ---- */
.mvsv-back {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  background: rgba(5, 2, 14, 0.62); backdrop-filter: blur(6px);
}
.mvsv-card {
  width: 520px; max-width: 96vw;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: mvsv-in .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes mvsv-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.mvsv-head {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.mvsv-ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 92, 252, 0.14); border: 1px solid rgba(124, 92, 252, 0.30);
  color: var(--purple-bright);
}
.mvsv-ic svg { width: 20px; height: 20px; }
.mvsv-h { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.mvsv-sub { font-size: 13px; line-height: 1.55; color: var(--text-3); margin: 0; }

.mvsv-meta {
  margin: 0 var(--space-6) var(--space-5);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.mvsv-meta .k {
  display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.mvsv-meta .v { font-size: 13px; font-weight: 700; color: var(--text); word-break: break-word; }

.mvsv-acts { display: flex; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); flex-wrap: wrap; }
.mvsv-primary {
  flex: 1; min-width: 180px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gradient); color: #fff; border: 0; border-radius: var(--radius);
  font-family: var(--font); font-size: 13.5px; font-weight: 700; padding: 12px 18px;
}
.mvsv-secondary {
  flex: 1; min-width: 180px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, 0.04); color: var(--text-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-family: var(--font); font-size: 13.5px; font-weight: 700; padding: 12px 18px;
}
.mvsv-secondary:hover { color: var(--text); border-color: var(--purple); }
.mvsv-primary svg, .mvsv-secondary svg { width: 15px; height: 15px; }
.mvsv-close {
  width: 100%; text-align: center; cursor: pointer; background: none; border: 0;
  font-family: var(--font); font-size: 12px; color: var(--muted); padding: 0 0 var(--space-5);
}
.mvsv-close:hover { color: var(--text-2); }

/* ---- saved results list inside the Library ---- */
.mvsv-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mvsv-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .15s, transform .15s;
}
.mvsv-row:hover { border-color: rgba(124, 92, 252, 0.35); transform: translateY(-1px); }
.mvsv-row .tool {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--purple-bright);
  background: rgba(124, 92, 252, 0.12); border: 1px solid rgba(124, 92, 252, 0.28);
  border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}
.mvsv-row .q { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.mvsv-row .when { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mvsv-row .cr { font-family: var(--font-mono); font-size: 11.5px; color: var(--green); white-space: nowrap; }
.mvsv-open {
  cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--purple-bright); background: rgba(124, 92, 252, 0.10);
  border: 1px solid rgba(124, 92, 252, 0.32); border-radius: var(--radius-sm); padding: 8px 14px;
  white-space: nowrap;
}
.mvsv-open:hover { background: rgba(124, 92, 252, 0.2); }

@media (max-width: 720px) {
  .mvsv-row { flex-wrap: wrap; }
  .mvsv-meta { grid-template-columns: 1fr 1fr; }
}

/* ---- saved-results section inside the Library ---- */
.mvlib-saved { margin: var(--space-6) 0 var(--space-8); }
.mvlib-saved-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  margin-bottom: 6px;
}
.mvlib-saved-h svg { width: 15px; height: 15px; color: var(--purple-bright); }
.mvlib-saved-h small {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: none;
}
.mvlib-saved-sub { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 var(--space-4); }

/* ============================================================================
   Saved-result viewer — a wide, share-link-style report rather than a narrow
   side panel, so the saved run reads the same as the live one.
   ========================================================================== */
.mvsv-view {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-6) var(--space-5);
  background: rgba(5, 2, 14, 0.72); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.mvsv-view-card {
  width: 1120px; max-width: 100%; margin: auto;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  animation: mvsv-in .24s cubic-bezier(.16, 1, .3, 1);
  overflow: hidden;
}
.mvsv-view-h {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-2); border-bottom: 1px solid var(--hairline);
}
.mvsv-view-h .mvsv-ic { width: 36px; height: 36px; }
.mvsv-view-h h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 800;
  color: var(--text); margin: 0 0 2px; text-transform: capitalize;
}
.mvsv-view-h p { font-size: 12.5px; color: var(--muted); margin: 0; }
.mvsv-view-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mvsv-x {
  cursor: pointer; width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05); color: var(--text-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1;
}
.mvsv-x:hover { color: var(--text); border-color: var(--purple); }
.mvsv-view-b { padding: var(--space-6); }
.mvsv-freebadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  background: rgba(20, 184, 127, 0.12); border: 1px solid rgba(20, 184, 127, 0.32);
  border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}
.mvsv-raw {
  margin-top: var(--space-5); border-top: 1px solid var(--hairline); padding-top: var(--space-4);
}
.mvsv-raw summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.mvsv-raw pre {
  margin-top: var(--space-3); max-height: 340px; overflow: auto;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  color: var(--text-3); background: var(--bg-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--space-4);
}
@media (max-width: 720px) {
  .mvsv-view { padding: var(--space-3); }
  .mvsv-view-b { padding: var(--space-4); }
}

/* ----------------------------------------------------------------------------
   Replayed report.
   A saved run is the exact HTML a share link serves. The viewer card already
   supplies the surrounding panel, so only the rules the report itself needs are
   carried over: charts were captured as images and must not overflow.
   -------------------------------------------------------------------------- */
.mvsv-view-b .share-content > *:first-child { margin-top: 0; }
.mvsv-view-b .share-content canvas { max-width: 100% !important; }
.mvsv-view-b .mvshare-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }