/* =====================================================================
 * MBIT Community — Shared Intelligence Reports (styles) v1.0.0
 * Fully scoped. Uses existing --mbit-* tokens with safe fallbacks so it
 * works in both dark (default) and light themes without !important.
 * Also contains the robust glitch-eye mobile sizing fix and targeted
 * mobile docs hardening (root-cause overflow handling).
 * ===================================================================== */

/* ---- shared tone tokens (resolve even if host tokens are absent) ---- */
.mbit-reportcard,
.mbit-scans-section,
.mbit-share-modal,
.mbit-snap-modal {
  --rc-gold: #d9a441;
  --rc-cyan: #9fb4c0;
  --rc-ok: var(--mbit-success, #36c98b);
  --rc-warn: var(--mbit-orange, #e6a23c);
  --rc-danger: var(--mbit-danger, #ff5d6c);
  --rc-info: var(--mbit-cyan, #4fb0d8);
  --rc-surface: var(--mbit-surface, rgba(255,255,255,.03));
  --rc-border: var(--mbit-border, rgba(255,255,255,.10));
  --rc-text: var(--mbit-text, #dfe7f1);
  --rc-muted: var(--mbit-text-muted, #8fa0b4);
}

/* ============================ FORUM REPORT CARD ============================ */
.mbit-reportcard.mbit-casecard {
  border-left: 3px solid var(--rc-gold);
  background:
    linear-gradient(180deg, rgba(217,164,65,.05), rgba(217,164,65,0) 70px),
    var(--rc-surface);
}
.mbit-rc-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mbit-tag-report {
  background: rgba(217,164,65,.14);
  color: var(--rc-gold);
  border: 1px solid rgba(217,164,65,.35);
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.mbit-rc-title {
  font-size: 14px; font-weight: 800; color: var(--rc-text);
  line-height: 1.25; margin: 2px 0 8px; word-break: break-word;
}
.mbit-rc-ca {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 11px; color: var(--rc-muted);
}
.mbit-rc-ca-k { letter-spacing: .1em; opacity: .8; }
.mbit-rc-ca-v {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  background: rgba(255,255,255,.05); border: 1px solid var(--rc-border);
  padding: 2px 7px; border-radius: 6px; color: var(--rc-text);
  max-width: 100%; overflow-wrap: anywhere;
}
.mbit-rc-copy {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--rc-border);
  color: var(--rc-cyan); border-radius: 6px; padding: 2px 7px; cursor: pointer;
}
.mbit-rc-copy:hover { border-color: var(--rc-cyan); }

.mbit-rc-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.mbit-rc-metric {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255,255,255,.025); border: 1px solid var(--rc-border);
  border-radius: 8px; padding: 7px 9px;
}
.mbit-rc-mk { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-muted); }
.mbit-rc-mv { font-size: 13px; font-weight: 800; color: var(--rc-text); }
.mbit-rc-ok { color: var(--rc-ok); }
.mbit-rc-warn { color: var(--rc-warn); }
.mbit-rc-danger { color: var(--rc-danger); }
.mbit-rc-info { color: var(--rc-info); }

.mbit-rc-summary {
  font-size: 12px; line-height: 1.55; color: var(--rc-muted);
  margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mbit-rc-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 10.5px; color: var(--rc-muted); margin-bottom: 10px;
}
.mbit-rc-meta b { color: var(--rc-text); font-weight: 700; }
.mbit-rc-snap {
  color: var(--rc-gold); border: 1px dashed rgba(217,164,65,.4);
  padding: 0 6px; border-radius: 5px; letter-spacing: .06em;
}
.mbit-rc-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* in-thread report bar (CR6 reader) */
.mbit-thread-reportbar {
  --rc-gold: #d9a441; --rc-cyan: #9fb4c0;
  border: 1px solid rgba(217,164,65,.32);
  border-left: 3px solid var(--rc-gold);
  background: linear-gradient(180deg, rgba(217,164,65,.06), rgba(217,164,65,0) 60px), rgba(255,255,255,.02);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 14px;
}
.mbit-trb-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.mbit-trb-title { font-size: 13.5px; font-weight: 800; color: #eef4ff; margin-bottom: 6px; word-break: break-word; }
.mbit-trb-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: #9fb0c4; margin-bottom: 10px; }
.mbit-trb-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* pills */
.mbit-pill-ok { color: var(--rc-ok); border-color: rgba(54,201,139,.4) !important; }
.mbit-pill-warn { color: var(--rc-warn); border-color: rgba(230,162,60,.4) !important; }
.mbit-pill-danger { color: var(--rc-danger); border-color: rgba(255,93,108,.4) !important; }
.mbit-pill-info { color: var(--rc-info); }
.mbit-pill-saved { color: var(--rc-cyan); border-color: rgba(159,180,192,.4) !important; }
.mbit-pill-muted { color: var(--rc-muted); opacity: .85; }

/* button variants reused from .mbit-mini-btn */
.mbit-mini-btn.primary { border-color: rgba(159,180,192,.45); color: var(--rc-cyan); }
.mbit-mini-btn.primary:hover { border-color: var(--rc-cyan); }
.mbit-mini-btn.is-saved { border-color: rgba(54,201,139,.5); color: var(--rc-ok); }
.mbit-mini-btn.danger-ghost { border-color: rgba(255,93,108,.4); color: var(--rc-danger); }
.mbit-mini-btn.danger-ghost:hover { border-color: var(--rc-danger); }

/* ============================ SCANS PAGE ============================ */
.mbit-scans-filterbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px;
}
.mbit-segbtn {
  font-size: 11px; letter-spacing: .04em; padding: 7px 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--mbit-border, rgba(255,255,255,.1));
  color: var(--mbit-text-muted, #8fa0b4); border-radius: 8px; cursor: pointer;
}
.mbit-segbtn:hover { color: var(--mbit-text, #dfe7f1); }
.mbit-segbtn.is-active {
  color: #06222a; background: var(--rc-cyan, #9fb4c0);
  border-color: var(--rc-cyan, #9fb4c0); font-weight: 800;
}
.mbit-scan-share.is-shared { color: var(--rc-ok, #36c98b) !important; font-weight: 700; }
.mbit-scan-shared-badge {
  display: inline-block; margin-left: 8px; font-size: 9px; font-weight: 800;
  letter-spacing: .1em; color: #06222a; background: var(--rc-ok, #36c98b);
  border-radius: 5px; padding: 1px 6px; vertical-align: middle;
}

.mbit-scans-section { display: flex; flex-direction: column; gap: 10px; }
.mbit-scans-loading, .mbit-scans-empty {
  padding: 22px 16px; text-align: center; color: var(--mbit-text-muted, #8fa0b4);
  font-size: 12.5px; border: 1px dashed var(--mbit-border, rgba(255,255,255,.12));
  border-radius: 12px; background: rgba(255,255,255,.015); line-height: 1.6;
}
.mbit-scans-empty b { color: var(--mbit-text, #dfe7f1); }

.mbit-scrow {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  background: var(--mbit-surface, rgba(255,255,255,.03));
  border: 1px solid var(--mbit-border, rgba(255,255,255,.1));
  border-left: 3px solid var(--rc-gold, #d9a441);
  border-radius: 12px; padding: 12px 14px;
}
.mbit-scrow-main { min-width: 0; flex: 1; }
.mbit-scrow-top { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mbit-scrow-title { font-size: 13px; font-weight: 800; color: var(--mbit-text, #dfe7f1); word-break: break-word; }
.mbit-scrow-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 10.5px; color: var(--mbit-text-muted, #8fa0b4); margin-top: 4px; }
.mbit-scrow-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; align-items: flex-end; }

/* ============================ SHARE DIALOG ============================ */
.mbit-share-overlay, .mbit-snap-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(2, 6, 12, .72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.mbit-share-modal {
  width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: var(--mbit-bg, #0c1118); color: var(--mbit-text, #dfe7f1);
  border: 1px solid var(--mbit-border, rgba(255,255,255,.12));
  border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.55); padding: 18px 18px 16px;
}
.mbit-share-head, .mbit-snap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mbit-share-title, .mbit-snap-title { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.mbit-share-close, .mbit-snap-close {
  background: transparent; border: 1px solid var(--mbit-border, rgba(255,255,255,.12));
  color: var(--mbit-text-muted, #8fa0b4); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px;
}
.mbit-share-desc { font-size: 12px; line-height: 1.6; color: var(--mbit-text-muted, #8fa0b4); margin-bottom: 12px; }
.mbit-share-desc b { color: var(--mbit-text, #dfe7f1); }
.mbit-share-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mbit-text-muted, #8fa0b4); margin-bottom: 6px; }
.mbit-share-note {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 78px;
  background: rgba(255,255,255,.04); border: 1px solid var(--mbit-border, rgba(255,255,255,.12));
  color: var(--mbit-text, #dfe7f1); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13px;
}
.mbit-share-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ============================ SNAPSHOT FALLBACK MODAL ============================ */
.mbit-snap-modal {
  width: min(960px, 100%); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--mbit-bg, #0c1118); color: var(--mbit-text, #dfe7f1);
  border: 1px solid var(--mbit-border, rgba(255,255,255,.12)); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55); padding: 16px;
}
.mbit-snap-note {
  font-size: 11px; color: var(--rc-gold, #d9a441); border: 1px dashed rgba(217,164,65,.4);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 10px;
}
.mbit-snap-body { overflow: auto; -webkit-overflow-scrolling: touch; }
.mbit-snap-body img, .mbit-snap-body table, .mbit-snap-body pre { max-width: 100%; }

/* ============================ TOASTS ============================ */
#mbit-community-toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 100001; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.mbit-ctoast {
  background: rgba(8,12,18,.96); color: #eef4f3; border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transition: opacity .35s ease, transform .35s ease; max-width: 92vw; text-align: center;
}
.mbit-ctoast.is-ok { border-color: rgba(54,201,139,.5); }
.mbit-ctoast.is-err { border-color: rgba(255,93,108,.5); }
.mbit-ctoast.is-warn { border-color: rgba(230,162,60,.5); }
.mbit-ctoast.is-out { opacity: 0; transform: translateY(6px); }

/* light theme adjustments */
body.mbit-theme-light .mbit-ctoast { background: #0c1118; }
body.mbit-theme-light .mbit-segbtn.is-active { color: #04161b; }

/* ============================ MOBILE: report cards / scans ============================ */
@media (max-width: 560px) {
  .mbit-rc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbit-rc-actions .mbit-mini-btn { flex: 1 1 auto; text-align: center; }
  .mbit-scrow { flex-direction: column; }
  .mbit-scrow-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%; }
  .mbit-scrow-actions .mbit-mini-btn { flex: 1 1 auto; text-align: center; }
  .mbit-segbtn { flex: 1 1 auto; text-align: center; }
}

/* =====================================================================
 * GLITCH-EYE — robust cross-browser mobile sizing fix
 *
 * Consume the JS-measured scale with the original cqw formula as fallback.
 * Higher specificity than the base `.mbit-ge-scaler` rule so this wins.
 * ===================================================================== */
.mbit-glitcheye { max-width: min(100%, 600px); box-sizing: border-box; }
.mbit-glitcheye .mbit-ge-scaler {
  transform: scale(var(--mbit-ge-scale, calc(100cqw / 600)));
}
/* Keep ancestors from forcing horizontal overflow that pushes the eye off-screen. */
.legal-logo-container.legal-page-logo { max-width: 100%; box-sizing: border-box; overflow: hidden; }

/* On small / touch screens: keep the EYE fully visible and proportional, but
   calm the heaviest secondary CRT motion for stability + GPU cost. The eye,
   iris, pupil, blink and RGB split remain — identity is preserved. */
@media (max-width: 560px) {
  .mbit-glitcheye .mbit-ge-eye { animation: none; }            /* stop the shake that can nudge the eye */
  .mbit-glitcheye .mbit-ge-scan,
  .mbit-glitcheye .mbit-ge-scanlines,
  .mbit-glitcheye .mbit-ge-bar { display: none; }              /* drop moving overlays (perf + steadiness) */
  .mbit-glitcheye .mbit-ge-layer--red,
  .mbit-glitcheye .mbit-ge-layer--blue { animation-duration: 4s; } /* slower jitter */
}
@media (prefers-reduced-motion: reduce) {
  /* base sheet already kills animation; ensure our scaler stays applied. */
  .mbit-glitcheye .mbit-ge-scaler { transform: scale(var(--mbit-ge-scale, calc(100cqw / 600))); }
}

/* =====================================================================
 * MOBILE DOCS — root-cause overflow hardening
 *
 * The docs layout already has breakpoints; the remaining mobile issues are
 * wide code blocks, tables and long unbroken tokens forcing horizontal
 * overflow. Contain them at the content level (safe on desktop too).
 * ===================================================================== */
.mbit-docs-main, .mbit-docs-section, .mbit-docs-scroll { min-width: 0; }
.mbit-docs-section img { max-width: 100%; height: auto; }
.mbit-docs-section pre,
.mbit-docs-main pre {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: pre; word-break: normal; box-sizing: border-box;
}
.mbit-docs-section code { overflow-wrap: anywhere; word-break: break-word; }
.mbit-docs-section pre code { overflow-wrap: normal; word-break: normal; }
.mbit-docs-section table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mbit-docs-section p,
.mbit-docs-section li { overflow-wrap: anywhere; }
.mbit-docs-section a { word-break: break-word; }

@media (max-width: 780px) {
  /* Belt-and-suspenders: the docs overlay content must never scroll the page
     sideways. Contain horizontal overflow at the shell while preserving
     vertical scroll and the existing mobile layout. */
  #docs-overlay .mbit-docs-shell,
  #docs-overlay .mbit-docs-layout,
  #docs-overlay .mbit-docs-main { max-width: 100%; overflow-x: hidden; }
  #docs-overlay .mbit-docs-main { overflow-x: hidden; }
  #docs-overlay .mbit-docs-section pre,
  #docs-overlay .mbit-docs-section table { overflow-x: auto; }
}