/* ═══════════════════════════════════════════════════════════
   ENGYNE SIDE-PANEL MOCKUP (.em-*)
   Faithful static replica of the real extension UI
   (Universal side-panel v1.0.98.x, popup.html/popup.css).
   All classes are namespaced `em-` to avoid site-CSS clashes.
   Colors are hard-coded from the extension's design tokens.
═══════════════════════════════════════════════════════════ */

.em-panel {
  --em-bg: #090C16;
  --em-surface: rgba(255, 255, 255, 0.035);
  --em-surface-2: rgba(255, 255, 255, 0.06);
  --em-hero: #10152A;
  --em-hero-running: #0F1D17;
  --em-border: rgba(255, 255, 255, 0.07);
  --em-border-2: rgba(255, 255, 255, 0.13);
  --em-text: rgba(234, 240, 255, 0.96);
  --em-muted: rgba(234, 240, 255, 0.6);
  --em-muted-2: rgba(234, 240, 255, 0.4);
  --em-accent: #6E5EF2;
  --em-accent-soft: rgba(110, 94, 242, 0.14);
  --em-accent-line: rgba(110, 94, 242, 0.30);
  --em-accent-text: #C7BFFF;
  --em-success: #34D399;
  --em-success-text: #6EE7B7;
  --em-danger: #FB7185;
  --em-danger-text: #FDA4AF;

  width: min(100%, 372px);
  margin: 0 auto;
  background:
    radial-gradient(320px 190px at 18% -8%, rgba(110, 94, 242, 0.16), transparent 60%),
    radial-gradient(270px 170px at 110% 4%, rgba(52, 211, 153, 0.07), transparent 55%),
    var(--em-bg);
  border: 1px solid var(--em-border-2);
  border-radius: 18px;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--em-text);
  text-align: left;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 50px rgba(110, 94, 242, 0.18);
  user-select: none;
}

.em-panel * { box-sizing: border-box; }

.em-ic {
  width: 15px; height: 15px; display: inline-block; vertical-align: middle; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
}

/* Top bar */
.em-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.em-brand-mark svg { border-radius: 8px; display: block; }
.em-brand-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.em-brand-name { font-size: 14px; font-weight: 600; letter-spacing: 0.2px; line-height: 1.1; color: var(--em-text); }
.em-brand-sub { font-size: 10.5px; color: var(--em-muted-2); letter-spacing: 0.3px; }
.em-version { font-size: 10.5px; color: var(--em-muted); background: var(--em-surface-2);
  border: 1px solid var(--em-border); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.em-icon-btn { display: inline-flex; align-items: center; justify-content: center;
  background: var(--em-surface); border: 1px solid var(--em-border); color: var(--em-muted);
  width: 28px; height: 28px; border-radius: 9px; }

/* Hero */
.em-hero { background: var(--em-hero-running); border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 14px; padding: 13px; margin-bottom: 11px; }
.em-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.em-status { display: flex; align-items: center; gap: 8px; }
.em-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--em-success);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); animation: emPulse 2s infinite; }
@keyframes emPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.em-status-text { font-size: 15px; font-weight: 600; letter-spacing: 0.2px; }
.em-pill { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--em-success-text); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.28); }
.em-stop-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(251, 113, 133, 0.12); color: var(--em-danger-text);
  border: 1px solid rgba(251, 113, 133, 0.32); padding: 11px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; }
.em-hero-meta { display: flex; align-items: center; gap: 11px; margin-top: 11px; font-size: 10.5px; color: var(--em-muted); }
.em-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.em-meta-item .em-ic { width: 13px; height: 13px; color: var(--em-muted-2); }
.em-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--em-muted-2); }

/* License */
.em-license { background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px; }
.em-license .em-ic { color: var(--em-success); }
.em-license-badge { font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(52, 211, 153, 0.16); color: var(--em-success-text); }
.em-license-text { font-size: 11.5px; color: var(--em-muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stats strip */
.em-stats { display: flex; align-items: stretch; background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: 11px; padding: 4px; margin-bottom: 11px; }
.em-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; }
.em-stat-value { font-size: 17px; font-weight: 600; letter-spacing: 0.3px; color: var(--em-text); }
.em-stat-value.green { color: var(--em-success-text); }
.em-stat-label { font-size: 10.5px; color: var(--em-muted-2); }
.em-stat-sep { width: 1px; background: var(--em-border); margin: 7px 0; }

/* Blocks */
.em-block { margin-bottom: 13px; }
.em-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.em-block-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: var(--em-muted); }
.em-block-hint { font-size: 10.5px; color: var(--em-muted-2); }

/* Control rows */
.em-control-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--em-surface); border: 1px solid var(--em-border); border-radius: 11px;
  padding: 10px 12px; margin-bottom: 7px; }
.em-control-row:last-child { margin-bottom: 0; }
.em-control-text { display: flex; flex-direction: column; gap: 2px; }
.em-control-title { font-size: 12.5px; font-weight: 500; color: var(--em-text); }
.em-control-sub { font-size: 10.5px; color: var(--em-muted-2); }
.em-num { width: 66px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--em-border-2); color: var(--em-text);
  padding: 7px 9px; border-radius: 9px; font-size: 12.5px; text-align: center; }

/* Switch */
.em-switch { width: 34px; height: 19px; border-radius: 999px; background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--em-border-2); position: relative; display: inline-block; flex-shrink: 0; }
.em-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; }
.em-switch.on { background: var(--em-success); border-color: transparent; }
.em-switch.on::after { transform: translateX(14px); background: #06281C; }

/* Rule grid */
.em-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.em-rule { display: flex; align-items: center; gap: 8px; background: var(--em-surface);
  border: 1px solid var(--em-border); border-radius: 10px; padding: 9px 10px; }
.em-rule.wide { grid-column: 1 / -1; }
.em-rule .em-ic { width: 15px; height: 15px; color: var(--em-muted-2); }
.em-rule-label { flex: 1; font-size: 11.5px; font-weight: 500; color: var(--em-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-rule .em-switch { width: 28px; height: 16px; }
.em-rule .em-switch::after { width: 11px; height: 11px; }
.em-rule .em-switch.on::after { transform: translateX(11px); }
.em-rule.on { background: var(--em-accent-soft); border-color: var(--em-accent-line); }
.em-rule.on .em-ic { color: var(--em-accent-text); }
.em-rule.on .em-rule-label { color: var(--em-text); }

/* Segmented log filter */
.em-seg { display: flex; background: var(--em-surface); border: 1px solid var(--em-border); border-radius: 9px;
  padding: 3px; margin-bottom: 8px; gap: 2px; }
.em-seg-btn { flex: 1; text-align: center; color: var(--em-muted); font-size: 10.5px; font-weight: 500;
  padding: 5px 4px; border-radius: 6px; }
.em-seg-btn.active { background: var(--em-accent); color: #fff; }

/* Log */
.em-log { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--em-border); border-radius: 11px;
  padding: 7px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.em-log-entry { display: flex; gap: 7px; align-items: flex-start; padding: 6px 8px;
  border-radius: 0 7px 7px 0; animation: emLogIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.em-log-entry:nth-child(1) { animation-delay: 0.3s; }
.em-log-entry:nth-child(2) { animation-delay: 0.9s; }
.em-log-entry:nth-child(3) { animation-delay: 1.5s; }
.em-log-entry:nth-child(4) { animation-delay: 2.1s; }
@keyframes emLogIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.em-log-entry.picked { background: rgba(52, 211, 153, 0.1); border-left: 2px solid var(--em-success); }
.em-log-entry.rejected { background: rgba(251, 113, 133, 0.1); border-left: 2px solid var(--em-danger); }
.em-log-entry.info { background: var(--em-accent-soft); border-left: 2px solid var(--em-accent); }
.em-log-time { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 10.5px; color: var(--em-muted-2);
  flex-shrink: 0; padding-top: 1px; }
.em-log-text { flex: 1; min-width: 0; font-size: 11px; color: rgba(234, 240, 255, 0.85); line-height: 1.4; }
.em-log-text strong { font-weight: 600; color: var(--em-text); }

/* Support link */
.em-support { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px;
  margin-top: 3px; font-size: 11.5px; color: var(--em-muted); }

/* Compact variant: hides deeper blocks so fragments fit small spots */
.em-panel.compact .em-license,
.em-panel.compact .em-run-controls,
.em-panel.compact .em-support { display: none; }

@media (prefers-reduced-motion: reduce) {
  .em-status-dot { animation: none; }
  .em-log-entry { animation: none; }
}