/* Prompt Optimizer: found/missing chips, before/after, "What changed and why". Builds on ../tools.css. */
.op-controls { margin-top: 1rem; margin-bottom: 0; align-items: flex-end; }
.op-go { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.op-live { font-size: 0.85rem; color: var(--ink-muted); }

.op-result { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border-line); }
.op-result[hidden] { display: none; }
.op-h { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink-primary); }

.op-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.op-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500; }
.op-chip b { font-weight: 700; }
.op-found { background: var(--success-bg); color: var(--success); }
.op-partly { background: var(--highlighter-bg); color: #6E4A00; }
.op-missing { background: var(--cat-photo); color: var(--cat-photo-accent); }
[data-theme="dark"] .op-partly { color: #FFD76A; }
.op-compare { margin-top: 1.25rem; }
.op-compare .compare-header { flex-wrap: wrap; gap: 0.4rem 0.75rem; }
.op-meta { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--ink-muted); }
.op-score { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-line); font-weight: 700; color: var(--ink-secondary); }
.compare-col.optimized .op-score { border-color: rgba(0, 113, 227, 0.3); color: var(--accent-ink); }
.op-compare .compare-box { min-height: 300px; }
.op-after { display: block; width: 100%; box-sizing: border-box; resize: vertical; margin: 0; }
.op-after:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18); }
.compare-col.optimized label.compare-tag { cursor: text; }

.op-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.op-ai { display: inline-flex; align-items: center; gap: 0.45rem; }
.op-ai img { width: 16px; height: 16px; flex: none; }

.op-why { margin-top: 1.5rem; padding: 1.25rem 1.35rem; border: 1px solid var(--border-line); border-radius: 16px; background: var(--bg-paper); }
.op-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.op-changes li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-secondary); }
.op-changes strong { color: var(--ink-primary); }
.op-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-light); color: var(--accent-ink); font-weight: 800; font-size: 0.85rem; }
.op-note { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px dashed var(--border-line); font-size: 0.86rem; line-height: 1.55; color: var(--ink-muted); }
.op-note a { color: var(--accent-ink); }

@media (max-width: 640px) {
  .op-go { margin-left: 0; width: 100%; }
  .op-go .btn { flex: 1; justify-content: center; }
  .op-controls .control-group { flex: 1 1 140px; }
  .op-compare .compare-box { min-height: 160px; }
  .op-actions .btn { flex: 1 1 auto; justify-content: center; }
}