:root {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #1a2940;
  background: #f3f6fb;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.shell {
  min-height: 100vh;
  display: flex;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 244px;
  flex-shrink: 0;
  background: #092445;
  color: #fff;
  padding: 25px 17px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 7px 28px;
}
.brand-icon {
  background: #2175bd;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-weight: 900;
  letter-spacing: -1px;
}
.brand strong {
  display: block;
  font-size: 17px;
}
.brand small {
  display: block;
  color: #a5c0da;
  font-size: 12px;
  margin-top: 4px;
}
nav {
  display: grid;
  gap: 8px;
}
.navbtn {
  border: 0;
  text-align: left;
  border-radius: 11px;
  padding: 13px 15px;
  background: transparent;
  color: #c6d8e8;
  font-weight: 600;
  display: flex;
  gap: 15px;
  align-items: center;
}
.navbtn.active,
.navbtn:hover {
  background: #17436d;
  color: #fff;
}
.asidefoot {
  margin-top: auto;
  border-top: 1px solid #2a4b69;
  padding: 20px 9px 0;
  font-size: 12px;
  line-height: 1.8;
  color: #dce9f4;
}
.asidefoot small {
  color: #a5c0da;
}
.dot {
  display: inline-block;
  background: #e9a448;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.main {
  width: 100%;
  max-width: 1370px;
  padding: 35px clamp(17px, 4vw, 60px) 22px;
  margin: auto;
  align-self: stretch;
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 28px;
}
.eyebrow {
  color: #57728e;
  letter-spacing: 1.5px;
  font-size: 10px;
  font-weight: 800;
  margin: 0 0 7px;
}
.topbar h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -1px;
}
.top-actions {
  display: flex;
  gap: 9px;
  align-items: center;
}
.pill {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: #246088;
  background: #e8f3fd;
  border-radius: 100px;
  padding: 9px 13px;
  font-weight: 700;
}
.welcome {
  border-radius: 19px;
  background: linear-gradient(125deg, #113d70, #0b2b51 75%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  margin-bottom: 21px;
}
.welcome p {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: #97caec;
}
.welcome h2 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 9px 0 10px;
}
.welcome span {
  color: #c3d9ea;
  font-size: 14px;
}
.button {
  border: 0;
  padding: 11px 15px;
  border-radius: 10px;
  background: #1669ac;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.button:hover {
  filter: brightness(0.96);
}
.button.white {
  background: white;
  color: #103c6b;
}
.button.ghost {
  background: #e8f0fa;
  color: #1c5485;
}
.button.secondary {
  background: #e9f3fc;
  color: #1b5e94;
}
.button.danger {
  background: #fff0ee;
  color: #b43730;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.metric {
  background: white;
  border: 1px solid #e6edf5;
  border-radius: 15px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px #17365e08;
}
.metric small {
  display: block;
  color: #64788d;
  font-size: 12px;
  font-weight: 700;
}
.metric strong {
  display: block;
  font-size: 34px;
  margin-top: 11px;
  letter-spacing: -1px;
}
.panel {
  background: #fff;
  border-radius: 17px;
  padding: 23px;
  box-shadow: 0 4px 21px #18314e0a;
  border: 1px solid #e6edf5;
}
.panelhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.panelhead h2,
.settings h2 {
  margin: 0;
  font-size: 19px;
}
.panelhead p,
.settings > p {
  margin: 6px 0 0;
  color: #718397;
  font-size: 13px;
}
.messageList {
  display: grid;
}
.message {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  border: 0;
  border-top: 1px solid #ecf0f4;
  background: white;
  padding: 16px 3px;
  width: 100%;
  color: inherit;
}
.message:hover {
  background: #f7faff;
}
.avatar {
  flex-shrink: 0;
  background: #edf4fb;
  color: #2466a1;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.messagebody {
  flex: 1;
  min-width: 0;
}
.messagetitle {
  font-weight: 800;
  font-size: 14px;
}
.messagesub {
  margin-top: 5px;
  color: #718397;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageright {
  text-align: right;
  flex-shrink: 0;
}
.messageright time {
  font-size: 12px;
  color: #8090a0;
  display: block;
  margin-bottom: 7px;
}
.tag {
  font-size: 10px;
  border-radius: 100px;
  padding: 5px 9px;
  background: #f5ede1;
  color: #92631d;
  font-weight: 750;
}
.tag.done {
  background: #e9f6ef;
  color: #347c55;
}
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.filters input,
.filters select {
  border: 1px solid #dfe7ef;
  padding: 12px 13px;
  border-radius: 10px;
  background: #fff;
  color: #243951;
}
.filters input {
  flex: 1;
  min-width: 0;
}
.empty {
  padding: 36px;
  text-align: center;
  color: #8190a1;
}
.settings > .settingrow {
  border-top: 1px solid #eaf0f5;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.settingrow strong {
  font-size: 14px;
}
.settingrow p {
  font-size: 13px;
  color: #6d8298;
  line-height: 1.55;
  margin: 6px 0 0;
  max-width: 600px;
}
.notice {
  background: #fff6e7;
  color: #825b23;
  border-radius: 10px;
  padding: 15px;
  font-size: 13px;
  line-height: 1.6;
}
.upload {
  cursor: pointer;
}
footer {
  color: #8799a9;
  font-size: 11px;
  text-align: center;
  margin-top: 24px;
}
dialog {
  border: 0;
  border-radius: 18px;
  width: min(560px, calc(100% - 32px));
  padding: 0;
  box-shadow: 0 20px 70px #102c4b50;
}
dialog::backdrop {
  background: #0d264c90;
}
.dialoginner {
  padding: 25px;
}
.dialogheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.dialogheader h2 {
  margin: 0;
}
.close {
  border: 0;
  background: #edf2f6;
  font-size: 26px;
  border-radius: 10px;
  width: 38px;
  height: 38px;
}
.muted {
  font-size: 13px;
  color: #7f8e9c;
  line-height: 1.6;
}
.sectionLabel {
  font-size: 10px;
  letter-spacing: 1px;
  color: #617e95;
  font-weight: 800;
  margin-top: 25px;
}
.transcript {
  line-height: 1.65;
  background: #f3f7fb;
  border-radius: 12px;
  padding: 17px;
  font-size: 14px;
}
audio {
  width: 100%;
  margin: 10px 0;
}
.dialogactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.toast {
  position: fixed;
  bottom: 22px;
  right: 22px;
  border-radius: 12px;
  background: #102e51;
  color: white;
  padding: 13px 18px;
  box-shadow: 0 7px 30px #1429453b;
  font-size: 13px;
  display: none;
}
.toast.visible {
  display: block;
}
@media (max-width: 790px) {
  .shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: relative;
    width: 100%;
    padding: 12px 14px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .brand {
    padding: 0;
  }
  .brand small,
  .asidefoot,
  .navbtn span {
    display: none;
  }
  .sidebar nav {
    display: flex;
    gap: 4px;
  }
  .navbtn {
    padding: 11px 12px;
  }
  .main {
    padding: 24px 16px;
  }
  .welcome {
    align-items: stretch;
    flex-direction: column;
    padding: 23px;
  }
  .welcome h2 {
    font-size: 22px;
  }
  .topbar h1 {
    font-size: 28px;
  }
  .metrics {
    gap: 8px;
  }
  .metric {
    padding: 15px 12px;
  }
  .metric strong {
    font-size: 27px;
  }
  .panel {
    padding: 16px;
  }
  .panelhead {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .top-actions .pill {
    display: none;
  }
  .message {
    gap: 9px;
  }
  .messageright time {
    font-size: 10px;
  }
  .settings > .settingrow {
    align-items: flex-start;
    flex-direction: column;
  }
  .topbar {
    margin-bottom: 20px;
  }
}
@media (max-width: 360px) {
  .metrics {
    grid-template-columns: 1fr;
  }
  .metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .metric strong {
    margin: 0;
  }
}

.voice-card {
  margin: 20px 0;
  padding: 22px;
  border-radius: 18px;
  background: #ecf3fc;
  text-align: center;
}
.voice-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: white;
  background: linear-gradient(140deg, #123a70, #2180ba);
  font-weight: 800;
  letter-spacing: 0.07em;
}
.voice-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}
.voice-transcript {
  min-height: 120px;
  max-height: 330px;
  overflow: auto;
  background: #f8fafc;
  border: 1px solid #dae3ec;
  border-radius: 12px;
  padding: 15px;
  margin: 15px 0;
  color: #203145;
  line-height: 1.5;
}
.voice-transcript p {
  margin: 5px 0 12px;
}

/* --- Fase 2: correzioni e aggiunte --- */
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.transcript {
  white-space: pre-wrap;
}
.voice-timer {
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 800;
  color: #123a70;
  margin-top: 10px;
}
.voice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.logout {
  margin-top: 10px;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.75;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
}
.loginpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #f3f6fb;
}
.logincard {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 10px 40px #14294522;
  display: grid;
  gap: 16px;
}
.logincard .brand {
  color: #0b2851;
  margin-bottom: 6px;
}
.logincard label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #42566e;
}
.logincard input {
  border: 1px solid #cdd9e5;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
}
.logincard .button {
  padding: 13px;
  font-size: 15px;
}
.loginerror {
  margin: 0;
  min-height: 1.2em;
  color: #b43730;
  font-size: 13px;
}
@media (max-width: 790px) {
  .logout {
    display: none;
  }
}
.logincard .brand-icon {
  color: #fff;
}
.logincard .brand {
  padding: 0;
}
/* l'attributo hidden deve vincere su .button {display:inline-flex} */
[hidden] {
  display: none !important;
}
.messagetitle,
.messagesub {
  display: block;
}
.messagetitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageright {
  flex-shrink: 0;
}
.voice-actions {
  margin-bottom: 16px;
}
/* evita che le righe dei messaggi allarghino la pagina su iPhone */
.messageList {
  min-width: 0;
}
.message {
  min-width: 0;
  max-width: 100%;
}
.messageList > * {
  min-width: 0;
}
.main {
  min-width: 0;
}

/* --- v3: archivio server, schede Susanna --- */
.dot { background: #3fbf7f; }
.dot.off { background: #e05a4f; }
.navbtn { position: relative; }
.navbadge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 100px;
  background: #e05a4f;
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.pill.ok { background: #e9f6ef; color: #347c55; }
.pill.warn { background: #fdecea; color: #b43730; }
.metrics { grid-template-columns: repeat(4, 1fr); }
.metric.urgent strong { color: #c4432f; }
.headactions { display: flex; gap: 8px; flex-wrap: wrap; }
.filters { flex-wrap: wrap; }
.filters input { flex: 1 1 200px; }
.tag { display: inline-block; }
.tag + .tag { margin-left: 4px; }
.tag.urg-alta { background: #fff1e0; color: #b55d00; }
.tag.urg-emergenza { background: #fde4e1; color: #b42318; }
.avatar.src-telefono { background: #e6f5ee; color: #2b7a52; }
.avatar.src-prova { background: #f1ecfb; color: #6342a8; }
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.facts div { background: #f3f7fb; border-radius: 10px; padding: 9px 12px; min-width: 0; }
.facts small { display: block; font-size: 10px; letter-spacing: 0.6px; color: #617e95; font-weight: 800; text-transform: uppercase; }
.facts strong { display: block; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.facts .urg-alta { color: #b55d00; }
.facts .urg-emergenza { color: #b42318; }
.transcriptbox { margin-top: 12px; }
.transcriptbox summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #1c5485; padding: 6px 0; }
.transcriptbox .transcript { max-height: 280px; overflow: auto; }
#detailNotes,
.formgrid input,
.formgrid select,
.formgrid textarea {
  width: 100%;
  border: 1px solid #cdd9e5;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  background: #fff;
}
#detailNotes { resize: vertical; }
.formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.formgrid .dialogheader,
.formgrid .wide { grid-column: 1 / -1; }
.formgrid label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: #42566e; }
.formgrid .dialogactions { margin-top: 4px; }
a.button { text-decoration: none; }
code { background: #eef3f8; padding: 1px 5px; border-radius: 5px; font-size: 0.92em; }
dialog { max-height: calc(100dvh - 32px); overflow: auto; }
@media (max-width: 790px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .top-actions .pill.warn { display: inline-block; }
  .navbadge { position: absolute; top: 2px; right: 0; padding: 1px 5px; font-size: 10px; }
  .formgrid { grid-template-columns: 1fr; }
  .dialoginner { padding: 20px 16px; }
}
.messageright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.messageright time { margin-bottom: 2px; }
.tag + .tag { margin-left: 0; }