/* ─────────────────────────────────────────────────────────────────────
 * App Preview (screenshot panel) — styles
 *
 * Loaded on any page that renders a <div id="appPreviewPanel"></div>
 * host (view_report.php, app_history.php, …). Pairs with
 * assets/app_preview.js which fills the host with the actual markup.
 *
 * Also includes the shared console-logs pill + container styles
 * because the renderLogsPanel() helper in app_preview.js is reused
 * by the per-screen capture surface in view_report.js, and BOTH
 * surfaces need the same chrome.
 * ───────────────────────────────────────────────────────────────────── */

/* ── Card surface + content ─────────────────────────────────────────── */
.appPreviewCard {
  background: color-mix(in srgb, var(--panel, #16161e), black 4%);
  border: 1px solid var(--border, rgba(0,229,212,0.14));
  border-radius: 14px;
  padding: 14px 16px;
}
.appPreviewHead {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--text, #e8e8f0);
  margin-bottom: 12px;
}
.appPreviewHead > i.fa-regular,
.appPreviewHead > i.fa-solid { color: var(--accent, #00e5d4); }
.appPreviewBadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border, rgba(0,229,212,0.14));
  background: rgba(0,229,212,0.06);
  color: var(--accent, #00e5d4);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.appPreviewBadgeMode {
  color: var(--blue, #00e5d4);
  border-color: rgba(0,229,212,0.35);
  background: rgba(0,229,212,0.08);
}
.appPreviewBadgeFresh {
  color: var(--green, #4ef0a8);
  border-color: rgba(78,240,168,0.45);
  background: rgba(78,240,168,0.08);
}
.appPreviewBadgeLoading {
  color: var(--muted, #8888aa);
  border-color: var(--border, rgba(0,229,212,0.14));
  background: transparent;
}
.appPreviewMeta {
  margin-left: auto;
  font-size: 12px; color: var(--muted, #8888aa);
  font-family: 'Fira Code', ui-monospace, monospace;
}
.appPreviewBody {
  display: flex; justify-content: center;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 14px;
  min-height: 200px;
}
/* Mobile capture — render as a phone preview. */
.appPreviewBody_mobile .appPreviewImg {
  max-height: 600px;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
}
/* Web capture — render full-width. */
.appPreviewBody_web .appPreviewImg {
  max-height: 520px;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.appPreviewSkeleton {
  width: 320px;
  height: 480px;
  max-width: 100%;
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: appPreviewShimmer 1.6s ease-in-out infinite;
}
@keyframes appPreviewShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .appPreviewSkeleton { animation: none; }
}

/* Mode toggle — sits at the right edge of the panel head. */
.appPreviewToggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,212,0.35);
  background: rgba(0,229,212,0.06);
  color: var(--accent, #00e5d4);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.appPreviewToggle:hover {
  background: rgba(0,229,212,0.14);
  border-color: rgba(0,229,212,0.55);
}
.appPreviewToggle:active { transform: translateY(1px); }
.appPreviewToggle:disabled { opacity: 0.5; cursor: not-allowed; }
.appPreviewToggleHint {
  color: var(--yellow, #ffb84d);
  font-size: 10px;
  opacity: 0.85;
}
/* The meta span and toggle both want margin-left:auto. Reset meta so
   the toggle sticks to the right and meta sits inline. */
.appPreviewHead .appPreviewMeta { margin-left: 0; }

/* ── Collapsible shell (native <details>) ───────────────────────────── */
.appPreviewDetails {
  background: color-mix(in srgb, var(--panel, #16161e), black 4%);
  border: 1px solid var(--border, rgba(0,229,212,0.14));
  border-radius: 14px;
  overflow: hidden;
}
.appPreviewSummary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text, #e8e8f0);
  user-select: none;
  transition: background 120ms ease;
}
.appPreviewSummary::-webkit-details-marker { display: none; }
.appPreviewSummary:hover { background: rgba(255,255,255,0.03); }
.appPreviewChevron {
  color: var(--muted, #8888aa);
  font-size: 11px;
  transition: transform 180ms ease;
}
.appPreviewDetails[open] .appPreviewChevron { transform: rotate(90deg); }
.appPreviewSummary > .fa-regular.fa-image { color: var(--accent, #00e5d4); }
.appPreviewSummaryLabel { color: var(--text, #e8e8f0); }
.appPreviewSummaryHint {
  margin-left: auto;
  font-size: 11px; font-weight: 400; font-style: italic;
  color: var(--muted, #8888aa);
}
.appPreviewDetails[open] .appPreviewSummaryHint { display: none; }

/* Body wrapper — holds the .appPreviewCard once the screenshot loads.
   Suppress the inner card's border/padding so it doesn't double up
   with the outer details wrapper. */
.appPreviewDetailsBody { padding: 0 14px 14px; }
.appPreviewDetailsBody .appPreviewCard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Outdated card — deliberate refusal, not a real failure. Yellow
   palette (warning, not error) since the user can still take action
   by opening the latest scan. */
.appPreviewOutdated { padding: 0; }
.appPreviewOutdatedBody {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,184,77,0.06);
  border: 1px solid rgba(255,184,77,0.30);
  border-radius: 10px;
  color: var(--text, #e8e8f0);
}
.appPreviewOutdatedBody > i.fa-clock-rotate-left {
  color: var(--yellow, #ffb84d); font-size: 18px; margin-top: 2px;
  flex: 0 0 auto;
}
.appPreviewOutdatedTitle { font-weight: 600; font-size: 13px; }
.appPreviewOutdatedHint {
  color: var(--muted, #8888aa); font-size: 12px; margin-top: 4px;
  line-height: 1.5;
}
.appPreviewOutdatedCta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,184,77,0.45);
  background: rgba(255,184,77,0.10);
  color: var(--yellow, #ffb84d);
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.appPreviewOutdatedCta:hover {
  background: rgba(255,184,77,0.18);
  border-color: var(--yellow, #ffb84d);
  color: var(--yellow, #ffb84d);
}

/* Failure card. */
.appPreviewFailed { padding: 0; }
.appPreviewFailedBody {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,109,136,0.06);
  border: 1px solid rgba(255,109,136,0.25);
  border-radius: 10px;
  color: var(--text, #e8e8f0);
}
.appPreviewFailedBody > i.fa-triangle-exclamation {
  color: var(--red, #ff6d88); font-size: 18px; margin-top: 2px;
  flex: 0 0 auto;
}
.appPreviewFailedTitle { font-weight: 600; font-size: 13px; }
.appPreviewFailedHint {
  color: var(--muted, #8888aa); font-size: 12px; margin-top: 2px;
  font-family: 'Fira Code', ui-monospace, monospace; word-break: break-word;
}

/* Summary status slot — tracks the auto-load capture state. */
.appPreviewSummaryStatus {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  min-width: 16px;
  justify-content: center;
}
.appPreviewSummaryStatus.appPreviewStatusLoading { color: var(--accent, #00e5d4); }
.appPreviewSummaryStatus.appPreviewStatusReady   { /* slot is empty */ }
.appPreviewSummaryStatus.appPreviewStatusFailed  { color: var(--red, #ff6d88); }

/* ── Capture-time console + network logs (shared with per-screen) ──── */
/* "Console (N)" pill — sits in the meta line (per-screen) or in the
   appPreviewHead (app-level). Compact, button-styled. Error variant
   gets a red highlight. */
.scrShotLogsPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border, rgba(0,229,212,0.25));
  background: rgba(0,229,212,0.06);
  color: var(--text, #e8e8f0);
  transition: background 120ms ease, border-color 120ms ease;
}
.scrShotLogsPill:hover {
  background: rgba(0,229,212,0.12);
  border-color: var(--accent, #00e5d4);
}
.scrShotLogsPill i { color: var(--accent, #00e5d4); }
.scrShotLogsPill_err {
  border-color: rgba(255,109,136,0.45);
  background: rgba(255,109,136,0.10);
}
.scrShotLogsPill_err i { color: var(--red, #ff6d88); }
.scrShotLogsPill_err:hover {
  background: rgba(255,109,136,0.18);
  border-color: var(--red, #ff6d88);
}
.scrShotLogsCount {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  font-size: 10px;
  text-align: center;
}
.scrShotLogsErrBadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,109,136,0.20);
  color: var(--red, #ff6d88);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Logs container — collapsed by default. Monospace, terminal-ish. */
.scrShotLogsContainer {
  margin-top: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border, rgba(0,229,212,0.14));
  border-radius: 8px;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}
.scrShotLogsHidden { display: none; }

.scrShotLogEntry {
  display: grid;
  grid-template-columns: 64px 92px 1fr;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: start;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.scrShotLogEntry:last-child { border-bottom: none; }
.scrShotLogTs   { color: var(--muted, #8888aa); font-size: 10px; }
.scrShotLogKind {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  text-align: center;
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  color: var(--text, #e8e8f0);
}
.scrShotLogBody { color: var(--text, #e8e8f0); }
.scrShotLogText { white-space: pre-wrap; }
.scrShotLogUrl {
  color: var(--accent, #00e5d4);
  text-decoration: underline;
  text-decoration-color: rgba(0,229,212,0.4);
}
.scrShotLogUrl:hover { text-decoration-color: var(--accent, #00e5d4); }
.scrShotLogLoc { font-size: 10px; }

.scrShotLogStack {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted, #8888aa);
}
.scrShotLogStack summary { cursor: pointer; user-select: none; }
.scrShotLogStack pre {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.35);
  border-radius: 4px;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* Per-level coloring on the kind chip + a soft tinted left border. */
.scrShotLogEntry_error  { border-left: 3px solid var(--red, #ff6d88); }
.scrShotLogEntry_error  .scrShotLogKind { background: rgba(255,109,136,0.18); color: var(--red, #ff6d88); }
.scrShotLogEntry_warn   { border-left: 3px solid var(--yellow, #ffd166); }
.scrShotLogEntry_warn   .scrShotLogKind { background: rgba(255,209,102,0.18); color: var(--yellow, #ffd166); }
.scrShotLogEntry_info   .scrShotLogKind { background: rgba(0,229,212,0.16); color: var(--accent, #00e5d4); }
.scrShotLogEntry_log    .scrShotLogKind { /* default neutral chip */ }

.scrShotMetaSpacer { margin-left: 4px; }

/* Print: hide the logs panel + pill. Debug tool, not archival. */
@media print {
  .scrShotLogsPill,
  .scrShotLogsContainer { display: none !important; }
}