/* grafici nella chat (meteo, make_chart): colori del brand, nitidi, chiaro e scuro */
:root { --chart-1: #2F6BFF; --chart-2: #38BDF8; --chart-3: #7DD3FC; --chart-4: #12A56A; --chart-5: #F5B941; --chart-6: #7C5CFF; }
.chat-chart { margin: .6rem 0 .2rem; padding: .8rem .9rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); max-width: 100%; overflow: hidden; }
.msg.assistant .chat-chart { color: var(--ink); }
.chat-chart figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); margin-bottom: .35rem; }
.chat-chart svg { width: 100%; height: auto; display: block; }
.chat-chart .cc-grid { stroke: var(--line); stroke-width: 1; }
.chat-chart .cc-ax { fill: var(--muted); stroke: none; font-size: var(--fs-xs); font-weight: 500; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chat-chart .cc-val { fill: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; font-family: var(--font);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.chat-chart .cc-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-chart .cc-dot { fill: var(--surface); stroke-width: 2.2; }
.chat-chart .cc-bar { opacity: .55; stroke: none; }
.chat-chart .cc-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--fs-sm); color: var(--ink-2); margin-top: .35rem; }
.chat-chart .cc-legend i { display: inline-block; width: .75rem; height: .3rem; border-radius: var(--radius); margin-right: .35rem; vertical-align: middle; }
.chat-chart .cc-note { color: var(--muted); margin-left: auto; }
.chat-chart .cc-table summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); margin-top: .3rem; }

/* screenshot e immagini fatte dall'assistente, dentro la risposta */
.chat-shot { display: block; margin: .5rem 0 .3rem; }
.chat-shot img { max-width: min(100%, 44rem); max-height: 30rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: block; }
/* «N passi fatti» sotto la risposta */
.msg .trace { margin-top: .35rem; font-size: var(--fs-sm); }
.msg .trace > summary { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; color: var(--muted); font-weight: 600;
  padding: .15rem .55rem; border-radius: var(--radius); border: 1px solid var(--line); list-style: none; }
.msg .trace > summary::-webkit-details-marker { display: none; }
.msg .trace > summary svg { width: var(--ic-xs); height: var(--ic-xs); }
.msg .trace[open] > summary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.msg .trace ol { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.msg .trace li b { display: block; font-weight: 600; color: var(--ink); }
.msg .trace .tr-args { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.msg .trace .tr-res { display: block; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.msg .trace .tr-shot img { margin-top: .3rem; max-width: min(100%, 22rem); border-radius: var(--radius); border: 1px solid var(--line); display: block; }