/* ============================================================
   ACID PANEL — video-derived refinements for the enhancer panel
   Loads AFTER acid-terminal.css. Additive override layer only.
   Source of truth: docs/design.md (Acid Terminal system)
   ============================================================ */

/* ---- framework chips: square terminal tags ---- */
body.dashboard-page .fw-chip {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--line-strong) !important;
}
body.dashboard-page .fw-chip:hover {
  color: var(--acid) !important;
  border-color: var(--acid-dim) !important;
  background: transparent !important;
}
body.dashboard-page .fw-chip.active {
  background: var(--acid) !important;
  color: #000 !important;
  border-color: var(--acid) !important;
  font-weight: 500 !important;
}

/* ---- metrics tiles: black, hairline, square ---- */
body.dashboard-page #metrics > div {
  background: #000 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
}
body.dashboard-page #metrics > div:hover {
  border-color: var(--acid-dim) !important;
}
body.dashboard-page #metrics span {
  color: var(--text-muted) !important;
  letter-spacing: .1em !important;
}

/* ---- framework badge: ✓ ACID OUTLINE (video style) ---- */
body.dashboard-page #frameworkBadge {
  background: transparent !important;
  color: var(--acid) !important;
  border: 1px solid var(--acid-dim) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
}
body.dashboard-page #frameworkBadge::before {
  content: "✓ ";
}

/* ---- output block: pure black terminal pane ---- */
body.dashboard-page #outputContent {
  background: #000 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
}
body.dashboard-page #outputSection {
  background: rgba(5,5,5,.9) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
}

/* ---- quality scorebar (injected by acid-panel.js) ---- */
.acid-scorebar {
  border: 1px solid var(--line);
  background: rgba(5,5,5,.7);
  padding: 16px 18px;
  margin: 14px 0 18px;
}
.acid-scorebar__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.acid-scorebar__label {
  font: 400 11px/1 var(--font-mono);
  color: var(--acid);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.acid-scorebar__num {
  margin-left: auto;
  font: 500 28px/1 var(--font-display);
  color: var(--text-primary);
}
.acid-scorebar__num small {
  font: 400 13px/1 var(--font-mono);
  color: var(--text-muted);
}
.acid-scorebar__meter {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}
.acid-scorebar__seg {
  flex: 1;
  height: 14px;
  background: #101010;
  border: 1px solid var(--line);
  transition: background .18s var(--ease-system), border-color .18s var(--ease-system);
}
.acid-scorebar__seg.f {
  background: var(--acid);
  border-color: var(--acid);
}
.acid-scorebar__sub {
  font: 400 11px/1 var(--font-mono);
  color: var(--text-secondary);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 10px;
}
.acid-scorebar__sub b {
  color: var(--acid);
  font-weight: 400;
}

/* ---- composer: label + textarea polish ---- */
body.dashboard-page #task {
  background: #000 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: 300 !important;
}
body.dashboard-page #task:focus {
  border-color: var(--acid) !important;
  outline: none !important;
  box-shadow: none !important;
}
body.dashboard-page #charCount {
  font-family: var(--font-mono) !important;
  letter-spacing: .08em;
}

/* ---- enhance button: ensure full video treatment ---- */
body.dashboard-page #magicWandBtn {
  background: var(--acid) !important;
  color: #000 !important;
  border: 1px solid var(--acid) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body.dashboard-page #magicWandBtn:hover:not(:disabled) {
  background: transparent !important;
  color: var(--acid) !important;
}
body.dashboard-page #magicWandBtn:disabled {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: var(--line-strong) !important;
  cursor: not-allowed;
}

/* small quality tile superseded by .acid-scorebar (element stays in DOM for JS) */
body.dashboard-page #metrics > div[aria-label="Quality score"] { display: none !important; }

/* ---- structured output lines (reel-style stagger) ---- */
#generatedContent .acid-line {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0;
  animation: acidLineIn .333s var(--ease-system) both;
  margin-bottom: 6px;
}
#generatedContent .acid-line--gap { height: 8px; animation: none; opacity: 1; margin: 0 }
#generatedContent .acid-line b {
  color: var(--acid);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
@keyframes acidLineIn {
  from { opacity: 0; transform: translateX(32px) }
  to   { opacity: 1; transform: translateX(0) }
}