/* Audit chat (ui/chat.js) and the score ring (also on the plain report). Colours come from site.css tokens only. */

/* ---- score ring ---- */
.dc-ring{position:relative;width:128px;height:128px;flex:none;--dc-tone:var(--warn)}
.dc-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.dc-ring circle{fill:none;stroke-width:10}
.dc-trk{stroke:var(--line2)} /* visible on a card and on the raised /start panel */
.dc-arc{stroke:var(--dc-tone);stroke-linecap:round;animation:dc-fill 1.1s var(--ease) .15s both}
.dc-good{--dc-tone:var(--pos)}.dc-ok{--dc-tone:var(--warn)}.dc-poor{--dc-tone:var(--neg)}
.dc-zero .dc-arc{stroke-opacity:0}
@keyframes dc-fill{from{stroke-dashoffset:var(--dc-c)}}
.dc-live .dc-arc{animation:none;transition:stroke-dashoffset .7s var(--ease),stroke .3s var(--ease)}
.dc-v{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dc-v b{font:500 44px/1 var(--disp);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.dc-v small{display:block;margin-top:4px;font:500 13px var(--sans);color:var(--mute)}

/* ---- chat ---- */
.dc{display:grid;gap:20px;min-width:0}
/* The ring stays in view while the chat streams: the head sticks under the site nav. */
.dc-head{display:flex;gap:24px;align-items:center;min-width:0;position:sticky;top:var(--dc-top,72px);z-index:3;background:var(--dc-bg,var(--card));padding:8px 0;margin:-8px 0}
.dc-head .dc-ring{width:104px;height:104px}
.dc-head .dc-v b{font-size:34px}
.dc-cap{display:grid;gap:6px;min-width:0}
.dc .dc-title{margin:0;font:500 clamp(22px,2.4vw,28px)/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.dc .dc-status{margin:0;color:var(--body);line-height:1.5}
.dc [tabindex="-1"]:focus,.dc [tabindex="-1"]:focus-visible{outline:none}
/* The page scrolls, not the log: no inner scroll box to jump. chat.js reserves its height while a run streams. */
.dc-log{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.dc-log:empty{display:none}
.dc-msg{max-width:min(560px,92%);padding:10px 14px;border-radius:14px;line-height:1.5;font-size:15px;overflow-wrap:anywhere;scroll-margin:120px 0 72px;animation:dc-in .28s var(--ease) both}
@keyframes dc-in{from{opacity:0;transform:translateY(8px)}}
.dc-more{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:500 14px var(--sans);cursor:pointer;box-shadow:0 4px 16px color-mix(in srgb,var(--ink) 18%,transparent)}
.dc-more:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.dc .dc-report{margin-left:4px;font-size:14px;color:var(--or-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.dc-me{justify-self:end;background:var(--ink);color:var(--bg);border-bottom-right-radius:4px}
.dc-bot{justify-self:start;display:flex;gap:10px;align-items:baseline;background:var(--raised);color:var(--ink);border-bottom-left-radius:4px}
.dc-bot::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pos);transform:translateY(-1px)}
.dc-warn::before{background:var(--warn)}
.dc-fail::before{background:var(--neg)}
.dc-run{color:var(--body)}
.dc-run::before{background:none;box-shadow:inset 0 0 0 2px var(--mute);border-top-color:transparent;animation:dc-spin 1s linear infinite;width:10px;height:10px}
@keyframes dc-spin{50%{opacity:.25}}
.dc-compose{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dc-compose input{flex:1 1 240px;min-width:0;height:44px;font:16px var(--sans);padding:0 16px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card);color:var(--ink)}
.dc-compose input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dc-end{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.dc .dc-endh{margin:0;font:500 19px/1.3 var(--disp);color:var(--ink)}
.dc-fixes{margin:0;padding-left:20px;display:grid;gap:10px}
.dc-fixes b{display:block;font-weight:600;color:var(--ink)}
.dc-fixes span{display:block;color:var(--body);font-size:14px;line-height:1.5}
.dc-fixes .dc-handled{color:var(--or-ink);font-weight:600}
/* One button row at the end of the /audit chat: the single primary, right-aligned; full width on phones. */
.dc-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
@media (max-width:600px){
  .dc-ring{width:104px;height:104px}
  .dc-v b{font-size:36px}
  .dc-head{gap:16px}
  .dc{--dc-top:64px}
  .dc-head .dc-ring{width:72px;height:72px}
  .dc-head .dc-v b{font-size:22px}
  .dc-head .dc-v small{font-size:10px}
  .dc-running .dc-title{font-size:19px}
  .dc-msg{max-width:100%}
  .dc-actions{flex-direction:column;align-items:stretch}
  .dc-actions>*{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .dc-arc{animation:none!important;transition:none!important}
  .dc-run::before{animation:none}
  .dc-msg{animation:none}
}