:root {
  --bg: #eef4f3;
  --panel: #fff;
  --line: #cfdcde;
  --text: #10231d;
  --muted: #5c6d69;
  --green: #1f7a5c;
  --green-dark: #0d3f2d;
  --amber: #a86d00;
  --red: #b84444;
  --blue: #245f88;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}
.assist-header {
  align-items: center;
  background: var(--green-dark);
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
}
.assist-header strong {
  display: block;
  font-size: 24px;
}
.assist-header span {
  color: #d6efe5;
  display: block;
  margin-top: 4px;
}
button, .assist-nav a {
  background: var(--green);
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 15px;
  text-decoration: none;
}
button:hover, .assist-nav a:hover { background: #176348; }
.assist-nav {
  background: #dff0ea;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px;
}
.assist-nav a.active { background: #f2a900; color: #14261f; }
main {
  margin: 0 auto;
  max-width: 1240px;
  padding: 22px;
}
.panel, .chat-layout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(20, 44, 48, .08);
  padding: 20px;
}
.login-panel { max-width: 620px; margin: 50px auto; }
h1 { margin: 0 0 10px; }
p { color: var(--muted); line-height: 1.45; }
.flash {
  background: #fff8df;
  border: 1px solid #e0c36d;
  border-radius: 7px;
  color: #59420a;
  margin-bottom: 14px;
  padding: 12px 14px;
}
.form-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
label {
  color: var(--muted);
  display: grid;
  font-weight: 700;
  gap: 5px;
}
input, textarea, select {
  border: 1px solid #b9c8cb;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  padding: 11px 12px;
  width: 100%;
}
textarea { resize: vertical; }
.chat-layout {
  display: grid;
  gap: 14px;
  min-height: calc(100vh - 170px);
}
.chat-shell {
  display: grid;
  gap: 14px;
  grid-template-columns: 310px minmax(0, 1fr);
}
.agent-sidebar {
  align-content: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(20, 44, 48, .08);
  display: grid;
  gap: 12px;
  padding: 16px;
}
.agent-sidebar h2 {
  font-size: 17px;
  margin: 0;
}
.agent-mini-list,
.question-list {
  display: grid;
  gap: 8px;
}
.agent-mini {
  align-items: center;
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: 16px 1fr;
  padding: 9px;
}
.agent-mini strong,
.agent-mini small {
  grid-column: 2;
}
.agent-mini small,
.question-card small,
.agent-card small {
  color: var(--muted);
}
.question-card {
  background: #fff8df;
  border: 1px solid #e0c36d;
  border-radius: 7px;
  display: grid;
  gap: 5px;
  padding: 10px;
}
.question-card span {
  line-height: 1.35;
}
.chat-feed {
  align-content: start;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding-right: 6px;
}
.bubble {
  border-radius: 8px;
  line-height: 1.45;
  max-width: 76%;
  padding: 13px 15px;
  white-space: pre-wrap;
}
.bubble small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.bubble.utente {
  background: #e1f2eb;
  border: 1px solid #acd5c5;
  justify-self: end;
}
.bubble.assistente, .bubble.assistant {
  background: #f6f8f8;
  border: 1px solid var(--line);
}
.bubble.latest {
  box-shadow: 0 0 0 3px rgba(47, 168, 86, .14);
}
.composer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 14px;
}
.agent-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}
.agent-card {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}
.agent-card-head {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px 1fr;
}
.agent-card-head strong {
  display: block;
  font-size: 20px;
}
.agent-card p {
  margin: 0;
}
.agent-state {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 9px;
}
.agent-state span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.agent-state b {
  font-weight: 700;
}
.agent-dot {
  align-self: center;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  width: 12px;
}
.agent-dot.pronto { background: #2fa856; box-shadow: 0 0 0 4px #dff5e8; }
.agent-dot.in_valutazione { background: var(--blue); box-shadow: 0 0 0 4px #dceeff; }
.agent-dot.domanda,
.agent-dot.in_attesa_conferma { background: #d18a00; box-shadow: 0 0 0 4px #fff2cb; }
.agent-dot.in_attesa { background: #8a96a3; box-shadow: 0 0 0 4px #edf0f2; }
.agent-dot.errore { background: var(--red); box-shadow: 0 0 0 4px #f7dddd; }
.inline-question {
  background: #fff8df;
  border: 1px solid #e0c36d;
  border-radius: 6px;
  color: #59420a;
  margin-top: 8px;
  padding: 8px;
}
.table-scroll { overflow: auto; }
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #eef4f3;
  font-size: 13px;
}
td small {
  color: var(--muted);
  display: block;
  max-width: 520px;
}
.status {
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
}
.status.aperta { background: #fff2cb; color: #644700; }
.status.in_corso { background: #dceeff; color: #174364; }
.status.in_attesa { background: #f3e5ff; color: #4e2d69; }
.status.completata { background: #ddf4e6; color: #176348; }
.status.annullata { background: #f2dddd; color: #8a2727; }
.inline-form {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 260px;
}
.status-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.status-card {
  background: #f8fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: 20px 1fr;
  padding: 14px;
}
.status-card small {
  color: var(--muted);
  grid-column: 2;
  overflow-wrap: anywhere;
}
.lamp {
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  margin-top: 4px;
  width: 12px;
}
.lamp.ok { background: #2fa856; box-shadow: 0 0 0 4px #dff5e8; }
.lamp.ko { background: var(--red); box-shadow: 0 0 0 4px #f7dddd; }
@media (max-width: 760px) {
  .assist-header { align-items: flex-start; flex-direction: column; }
  main { padding: 14px; }
  .chat-shell,
  .agent-grid { grid-template-columns: 1fr; }
  .bubble { max-width: 100%; }
  .status-grid { grid-template-columns: 1fr; }
  .inline-form { align-items: stretch; flex-direction: column; min-width: 0; }
}