/* La Sala agenti (agentroom.js): chat di gruppo degli agenti con il Cervello e il capo, e «Chi fa cosa».
   Solo classi «ar-…» e i token della pagina (--surface, --ink, --accent…): il tema chiaro/scuro vale anche qui. */
.ar-pane { min-width: 0; }
.ar-top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.ar-top select { width: auto; min-width: 0; max-width: 12rem; min-height: 2.3rem; padding: .3rem .6rem; font-size: var(--fs-base); }
.ar-top .ar-halt { margin-left: auto; }
.ar-top .hidden, .ar-pane .hidden { display: none; }
.ar-halted { margin: 0 0 .6rem; padding: .45rem .7rem; border-radius: var(--radius); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--danger, #d6343f) 12%, var(--surface)); color: var(--ink); }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); gap: .8rem; min-width: 0; }
.ar-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.ar-list { height: min(64vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: .8rem .7rem;
  display: flex; flex-direction: column; gap: .55rem; }
.ar-empty { margin: auto; text-align: center; max-width: 22rem; }
.ar-empty p { margin: .3rem 0 0; }

.ar-msg { display: flex; gap: .45rem; align-items: flex-end; max-width: 92%; min-width: 0; }
.ar-msg.k-boss { align-self: flex-end; }
.ar-av { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c, #64748b); color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.ar-bubble { min-width: 0; padding: .45rem .7rem .5rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent); overflow-wrap: anywhere; }
.ar-msg.k-boss .ar-bubble { border-radius: var(--radius); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
.ar-msg.k-brain .ar-bubble { border-color: color-mix(in srgb, var(--c) 45%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface) 70%);
  box-shadow: inset 3px 0 0 var(--c); }
.ar-msg.k-brain .ar-av, .ar-card[data-ar-agent="cervello"] header .ar-av { background: transparent; }   /* la G 3D, da sola */
.ar-msg.k-collab .ar-bubble { border-style: dashed; }
.ar-head { display: flex; align-items: baseline; gap: .4rem; font-size: var(--fs-sm); margin-bottom: .15rem; }
.ar-head b { color: var(--c, var(--ink)); }
.ar-msg.k-boss .ar-head b { color: var(--accent); }
.ar-head time { margin-left: auto; color: var(--muted); font-size: var(--fs-2xs); padding-left: .5rem; }
.ar-tag { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ar-text { font-size: var(--fs-md); line-height: 1.42; color: var(--ink); }
.ar-at { color: var(--accent); font-weight: 600; }
.ar-sys { align-self: center; max-width: 92%; text-align: center; font-size: var(--fs-xs); color: var(--muted);
  padding: .2rem .7rem; border-radius: var(--radius); background: var(--surface-3); overflow-wrap: anywhere; }
.ar-voice { display: grid; gap: .2rem; margin-top: .25rem; }
.ar-voice audio { width: min(16rem, 100%); height: 2.2rem; }
.ar-voice p { margin: 0; font-size: var(--fs-sm); font-style: italic; }
.ar-file { display: inline-block; margin-top: .3rem; font-size: var(--fs-sm); }

.ar-chip { display: inline-flex; max-width: 100%; margin-top: .35rem; min-height: 1.8rem; padding: .15rem .6rem;
  border-radius: var(--radius); font-size: var(--fs-2xs); font-weight: 600;
  border: 1px solid transparent; background: var(--surface-2); color: var(--ink-2); overflow-wrap: anywhere; }
.ar-chip.s-in_corso, .ar-n.s-in_corso { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.ar-chip.s-fatto, .ar-n.s-fatto { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ar-chip.s-bloccato, .ar-n.s-bloccato { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ar-chip.s-in_attesa, .ar-n.s-in_attesa { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }

.ar-compose { position: relative; display: flex; gap: .4rem; align-items: flex-end; padding: .5rem;
  border-top: 1px solid var(--line); background: var(--surface); }
.ar-compose textarea { flex: 1; min-width: 0; resize: none; min-height: 2.6rem; max-height: 10rem; padding: .55rem .75rem;
  border-radius: var(--radius); font-size: var(--fs-md); line-height: 1.35; }
.ar-mic, .ar-send { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: var(--radius); }
.ar-mic svg, .ar-send svg { width: var(--ic-sm); height: var(--ic-sm); }
.ar-mic.on { background: var(--danger); border-color: var(--danger); color: #fff; animation: ar-pulse 1.2s infinite; }
@keyframes ar-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } }
.ar-ac { position: absolute; left: .5rem; right: .5rem; bottom: calc(100% + .3rem); z-index: 5; display: grid;
  max-height: 15rem; overflow-y: auto; padding: .25rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .15)); }
.ar-ac button { display: flex; align-items: center; gap: .45rem; justify-content: flex-start; border: 0; min-height: 2.3rem;
  padding: .3rem .55rem; background: transparent; text-align: left; font-size: var(--fs-base); overflow: hidden; white-space: nowrap; }
.ar-ac button .meta { overflow-wrap: anywhere; }
.ar-ac button.on { background: var(--accent-soft); }
.ar-ac i { flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }

.ar-side { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.ar-side h4 { margin: 0 0 .1rem; }
.ar-board { display: grid; gap: .5rem; max-height: min(64vh, 620px); overflow-y: auto; }
.ar-card { padding: .55rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: box-shadow .2s; min-width: 0; }
.ar-card.ar-flash { box-shadow: 0 0 0 3px var(--accent-soft); }
.ar-card header { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.ar-card header div { display: grid; min-width: 0; }
.ar-card header b { font-size: var(--fs-base); }
.ar-doing { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ar-doing.on { color: var(--accent); }
.ar-counts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.ar-n { font-size: var(--fs-2xs); padding: .05rem .45rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--surface-2); color: var(--muted); }
.ar-card ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.ar-card li { display: flex; gap: .3rem; align-items: center; min-width: 0; }
.ar-card li .ar-chip { margin-top: 0; flex: 1; min-width: 0; }
.ar-st { width: auto; flex: none; min-height: 1.8rem; padding: .1rem .3rem; font-size: var(--fs-2xs); }
.ar-set summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.ar-set-form { display: grid; gap: .4rem; margin-top: .4rem; font-size: var(--fs-sm); }
.ar-set-form label { display: grid; gap: .15rem; }
.ar-side-btn { display: none; }

/* i poteri nel modulo di un agente */
.ar-powers { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .65rem .6rem; margin: .2rem 0; min-width: 0; }
.ar-powers legend { font-size: var(--fs-sm); font-weight: 600; padding: 0 .3rem; }
.ar-powers label { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 400; min-width: 0; }
.ar-powers input[type=checkbox] { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent); }
.ar-powers .ar-tg { margin-top: .3rem; }

@media (max-width: 760px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr); }
  .ar-side { display: none; }
  .ar-pane.ar-side-on .ar-side { display: flex; }
  .ar-side-btn { display: inline-flex; }
  .ar-list { height: 58vh; padding: .6rem .45rem; }
  .ar-msg { max-width: 100%; }
  .ar-top select { max-width: 9rem; }
  .ar-board { max-height: none; }
}

/* chi parla si capisce da dove sta: il Cervello a sinistra, gli agenti (squadra e collaboratori) a destra con l'avatar
   dalla loro parte, il capo al centro */
.ar-msg.k-agent, .ar-msg.k-team, .ar-msg.k-collab { align-self: flex-end; flex-direction: row-reverse; }
.ar-msg.k-agent .ar-bubble, .ar-msg.k-team .ar-bubble, .ar-msg.k-collab .ar-bubble { border-radius: var(--radius); }
.ar-msg.k-brain { align-self: flex-start; }
.ar-msg.k-boss { align-self: center; max-width: 78%; }
.ar-msg.k-boss .ar-bubble { border-radius: var(--radius); text-align: left; }
@media (max-width: 720px) { .ar-msg.k-boss { max-width: 92%; } }