/* readgrade.css – nút 🎤 cạnh câu hội thoại và thẻ kết quả chấm đọc (readgrade.js). Chỉ dùng token của web. */
.rg,.dlg{--rg-ok:#1B7F3B;--rg-mid:#9A6700;--rg-no:#C62828}
:root[data-theme="dark"] .rg,html[data-theme="dark"] .rg,:root[data-theme="dark"] .dlg,html[data-theme="dark"] .dlg{--rg-ok:#6FD39A;--rg-mid:#F2C14E;--rg-no:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rg,:root:not([data-theme="light"]) .dlg{--rg-ok:#6FD39A;--rg-mid:#F2C14E;--rg-no:#FF8A80}}

/* hàng điều khiển */
.dg-me{display:inline-flex;align-items:center;gap:8px}
.dg-me select{font:inherit;font-size:14px;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--ink);max-width:11em}
.dg-opt .dg-bar{margin:10px 0}
.dg-avg{color:var(--accent-dark)}

/* nút 🎤 trên mỗi câu (nút ▶ nghe mẫu nằm bên trái nó) */
.dg-l{padding-left:60px}
.dg-mic{position:absolute;left:30px;top:5px;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--sunk);color:var(--ink);cursor:pointer;padding:0;line-height:1}
.dg-mic::before{content:"🎤";font-size:12px}
.dg-mic:hover:not(:disabled){background:var(--accent-soft)}
.dg-mic:disabled{opacity:.4;cursor:not-allowed}
.dg-mic.on{background:var(--rg-no);border-color:var(--rg-no);animation:rg-pulse 1.1s ease-in-out infinite}
.dg-mic.on::before{content:"⏹";color:#fff}
.dg-l:not(.mine) .dg-mic{opacity:.65}
.dg-l.mine{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dg-res{margin:0 0 10px 60px}
.dg-res:empty{display:none}
.dg-doc.copying .dg-res,.dg-doc.copying .dg-mic,.dg-doc.copying .dg-say{display:none}
@keyframes rg-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rg-no) 50%,transparent)}50%{box-shadow:0 0 0 7px transparent}}

/* thẻ kết quả */
.rg{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:12px 14px;font-size:14px;line-height:1.55;color:var(--ink)}
.rg.ok{border-color:color-mix(in srgb,var(--rg-ok) 55%,var(--border))}
.rg.mid{border-color:color-mix(in srgb,var(--rg-mid) 55%,var(--border))}
.rg.no{border-color:color-mix(in srgb,var(--rg-no) 45%,var(--border))}
.rg-msg{background:var(--accent-soft)}
.rg-live{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--accent-soft)}
.rg-dot{width:10px;height:10px;border-radius:50%;background:var(--rg-no);animation:rg-pulse 1.1s ease-in-out infinite}
.rg-lv{flex:0 0 90px;height:6px;border-radius:9px;background:var(--sunk);overflow:hidden}
.rg-lv i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s}
.rg-lt{flex:1 1 100%;font-size:13px;min-height:1.4em}
.rg-top{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.rg-sc{font:800 30px/1 var(--display,inherit)}
.rg.ok .rg-sc{color:var(--rg-ok)}.rg.mid .rg-sc{color:var(--rg-mid)}.rg.no .rg-sc{color:var(--rg-no)}
.rg-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:10px}
.rg-m{position:relative;padding:7px 10px 9px;border-radius:10px;background:var(--sunk);display:grid;gap:1px}
.rg-mk{font-size:12px;color:var(--muted);font-weight:600}
.rg-m b{font-size:19px;line-height:1.15}
.rg-m small{font-size:11.5px;color:var(--muted);line-height:1.3}
.rg-m i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);border-radius:0 3px 0 0;background:var(--rg-ok)}
.rg-m.mid i{background:var(--rg-mid)}.rg-m.no i{background:var(--rg-no)}.rg-m.na{opacity:.6}
.rg-m.ok b{color:var(--rg-ok)}.rg-m.mid b{color:var(--rg-mid)}.rg-m.no b{color:var(--rg-no)}
.rg-ws{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:baseline;margin:2px 0 6px;font-size:15px}
.rg-w{padding:1px 6px;border-radius:7px;border:1px solid transparent}
.rg-w.ok{background:color-mix(in srgb,var(--rg-ok) 14%,transparent)}
.rg-w.mid{background:color-mix(in srgb,var(--rg-mid) 20%,transparent);border-color:color-mix(in srgb,var(--rg-mid) 60%,transparent)}
.rg-w.no{background:color-mix(in srgb,var(--rg-no) 16%,transparent);border-color:color-mix(in srgb,var(--rg-no) 60%,transparent)}
.rg-w small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.rg-brk{font-style:normal;font-weight:900;color:var(--rg-mid);margin:0 -1px}
.rg-brk.link{color:var(--rg-no)}
.rg-hd{margin:0 0 4px}
.rg-svg{display:block;width:100%;max-width:340px;height:auto;margin:6px 0;border-radius:8px;background:var(--sunk)}
.rg-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rg-end{fill:none;stroke:var(--rg-mid);stroke-width:3.2;stroke-linecap:round}
.rg-g{fill:var(--rg-mid);opacity:.22}.rg-g.link{fill:var(--rg-no);opacity:.28}.rg-g.punct{fill:var(--muted);opacity:.14}
.rg-tips{margin:6px 0 0;padding-left:20px}.rg-tips li{margin:3px 0}
.rg-good{margin:6px 0 0;color:var(--rg-ok);font-weight:600}
.rg-note{margin:8px 0 0}
@media (max-width:640px){.dg-l{padding-left:56px}.dg-res{margin-left:0}.dg-mic{left:28px}}
@media (prefers-reduced-motion:reduce){.dg-mic.on,.rg-dot{animation:none}}
@media print{.dg-mic,.dg-say,.dg-res,.dg-opt,.dg-me{display:none!important}.dg-l{padding-left:0}}