/* 35-quad-visual-tools.css — in-chat QUAD visual tool renderers */
.quad-tool {
  margin: 12px 0;
  border: none;
  border-radius: 0;
  /* slight tint, frameless */
  background: rgba(236, 230, 219, 0.035);
  background: color-mix(in srgb, var(--text, #ece6db) 3.5%, transparent);
  color: var(--text, #ece6db);
  overflow: visible;
}
.quad-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px 4px;
  border-bottom: none;
  background: transparent;
}
.quad-tool-title { font-weight: 600; font-size: 13px; opacity: 0.92; }
.quad-tool-meta { display: flex; gap: 6px; align-items: center; }
.quad-tool-alpha {
  font: 700 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .06em;
  color: #d4a86a;
  background: rgba(204,144,80,.12);
  border-radius: 0;
  padding: 2px 5px;
}
.quad-tool-badge {
  font: 600 10px/1 var(--mono, 'JetBrains Mono', monospace);
  color: var(--c-accent, #cc9050);
  border: 1px solid rgba(204,144,80,.18);
  border-radius: 0;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: 0.78;
}
.quad-tool-body { padding: 8px 2px 2px; }
.quad-tool-note, .quad-tool-error {
  font-size: 12px; color: var(--text-dim, #b7aa98);
  background: rgba(255,255,255,.03); border-radius: 0; padding: 8px 10px;
}
.quad-tool-error { color: #e06c75; border: 1px solid rgba(224,108,117,.22); }
.quad-tool-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.quad-tool button, .quad-tool .quad-btn {
  appearance:none; border:1px solid rgba(204,144,80,.24); background:rgba(204,144,80,.08);
  color:var(--text,#ece6db); border-radius:0; padding:6px 10px; font:500 12px/1.2 inherit; cursor:pointer;
}
.quad-tool button:hover { background:rgba(204,144,80,.15); }
.quad-tool button:disabled { opacity:.5; cursor:default; }
.quad-tool input[type=range] { width:180px; max-width:100%; accent-color: var(--c-accent,#cc9050); }
.quad-tool label { font-size:12px; color:var(--text-dim,#b7aa98); }
.quad-tool .quad-val { font:600 12px var(--mono,monospace); color:var(--c-accent,#cc9050); min-width:52px; display:inline-block; }
.quad-tool canvas, .quad-tool svg.quad-plot { width:100%; max-width:100%; height:auto; border-radius:0; background:rgba(0,0,0,.12); }
.quad-chart-wrap { position:relative; width:100%; min-height:220px; border-radius:0; }
.quad-figure { margin:0; }
.quad-figure-media { display:block; width:100%; border-radius:0; background:rgba(0,0,0,.12); }
.quad-figure img.quad-figure-media { max-height:360px; object-fit:contain; }
.quad-figcaption { margin-top:8px; font-size:13px; color:var(--text,#ece6db); }
.quad-sources { margin:8px 0 0; padding-left:18px; font-size:12px; color:var(--text-dim,#b7aa98); }
.quad-sources a { color:var(--c-accent,#cc9050); word-break:break-all; }
.quad-stroke-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.quad-stroke-card { border:1px solid rgba(204,144,80,.12); border-radius:0; padding:8px; background:rgba(255,255,255,.02); }
.quad-stroke-char { min-height:110px; display:flex; align-items:center; justify-content:center; }
.quad-stroke-meta { font-size:11px; color:var(--text-dim,#b7aa98); margin-top:6px; text-align:center; }
.quad-pron-list { display:grid; gap:8px; }
.quad-pron-item { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; border:1px solid rgba(204,144,80,.1); border-radius:0; }
.quad-pron-text { font-size:18px; font-weight:600; }
.quad-pron-ipa { font:500 12px var(--mono,monospace); color:var(--c-accent,#cc9050); }
.quad-timer-display { font:700 28px var(--mono,monospace); color:var(--c-accent,#cc9050); margin:8px 0; }
.quad-lrc { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; max-height:220px; overflow:auto; }
.quad-timer-line { padding:4px 8px; border-radius:0; font-size:13px; color:var(--text-dim,#b7aa98); }
.quad-timer-line.active { background:rgba(204,144,80,.12); color:var(--text,#ece6db); border-radius:0; }
.quad-embed-frame { width:100%; border:0; border-radius:0; background:#000; min-height:180px; }
.quad-quote { margin:0; padding:14px 16px; border-left:3px solid var(--c-accent,#cc9050); background:rgba(204,144,80,.05); border-radius:0; }
.quad-quote p { margin:0; font-size:15px; line-height:1.5; }
.quad-quote footer { margin-top:8px; font-size:12px; color:var(--text-dim,#b7aa98); }
.quad-sim-grid { display:grid; gap:8px; }
.quad-sim-result { font-size:13px; padding:8px 10px; background:rgba(255,255,255,.03); border-radius:0; }

/* paced/pronunciation feedback */

.quad-paced { padding:10px 12px; border-radius:0; background:rgba(255,255,255,0.02); min-height:2.2em; }
.quad-paced-text { font-size:16px; line-height:1.6; color:var(--text,#ece6db); white-space:pre-wrap; word-break:break-word; }
.quad-paced-status { margin-left:6px; }
.quad-pron-status { min-height:1.2em; margin-top:6px; }
.quad-stroke-char canvas { display:block; width:100%; max-width:220px; height:auto; }
.quad-stroke-char { color:#e8dcc8; }
.quad-stroke-char > div { color:#e8dcc8; }