:root{
  --bg:#fff;
  --ink:#000;
  --outer-dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#000;
    --ink:#fff;
    --outer-dither:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
.istruzioni{display:flex;flex-wrap:wrap;gap:8px 20px;padding:10px;background:var(--bg);border-bottom:1px solid var(--ink);font-size:12px;line-height:1.5}
.istruzioni a{color:inherit;text-underline-offset:3px}
.istruzioni span{font-size:11px}
.nota-inattivita{font-size:11px;line-height:1.5}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink)}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;padding:18px;font-family:"Courier New",Courier,"Nimbus Mono PS","Liberation Mono",monospace}
button,textarea{font:inherit;color:inherit}

.schermo{
  width:min(1120px,100%);
  min-height:calc(100vh - 36px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  border:1px solid var(--ink);
  background-color:var(--bg);
  background-image:var(--outer-dither);
}
.barra-titolo{
  min-height:28px;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-bottom:1px solid var(--ink);
  background:var(--bg);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
}
.testata{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:5px 10px;
  border-bottom:1px solid var(--ink);
  background:var(--bg);
}
.stato,.seduta{font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.stato::before{display:inline-block;width:10px;margin-right:9px;font-size:13px;line-height:1}
.stato[data-state="awake"]::before{content:"■"}
.stato[data-state="sleeping"]::before{content:"□"}

.conversazione{
  flex:1;
  min-height:420px;
  max-height:calc(100vh - 220px);
  margin:0 30px;
  padding:22px 20px 8px;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-color:var(--ink) var(--bg);
  background-color:var(--bg);
  background-image:conic-gradient(var(--ink) 0 25%,var(--bg) 0 100%);
  background-size:2px 2px;
  border:1px solid var(--ink);
  border-top:0;
}
.conversazione:empty{display:none}
.conversazione::-webkit-scrollbar{width:16px}
.conversazione::-webkit-scrollbar-track{border-left:1px solid var(--ink);background-color:var(--bg);background-image:conic-gradient(var(--ink) 0 25%,var(--bg) 0 100%);background-size:2px 2px}
.conversazione::-webkit-scrollbar-thumb{border:1px solid var(--ink);background:var(--bg)}

.turno{
  position:relative;
  width:82%;
  margin:0 0 26px;
  padding:30px 15px 13px;
  border:1px solid var(--ink);
  background:var(--bg);
  font-size:13px;
  font-weight:400;
  line-height:1.52;
  overflow-wrap:anywhere;
}
.turno.macchina{margin-right:auto;text-align:left}
.turno.umano{margin-left:auto;text-align:right}
.turno .etichetta{
  position:absolute;
  top:-1px;
  left:-1px;
  padding:5px 9px 4px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.turno.umano .etichetta{right:-1px;left:auto;font-size:12px}
.turno .testo{display:block;white-space:pre-wrap}

.soglia{
  width:100%;
  margin:0 0 26px;
  border:1px solid var(--ink);
  background:var(--bg);
  font-size:13px;
  line-height:1.5;
}
.soglia-testa{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:5px 9px;
  border-bottom:1px solid var(--ink);
  background:var(--ink);
  color:var(--bg);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.soglia-corpo{padding:14px 15px}
.soglia-corpo p{margin:0 0 10px}
.soglia-corpo p:last-child{margin-bottom:0}
.nome-assegnato{font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.apertura-iniziale{width:auto;margin:0 30px;border-top:0}
.apertura-iniziale .azione{margin-top:18px}

.attesa-box{width:auto;margin:0 0 18px;padding:8px 10px;border:1px solid var(--ink);background:var(--bg)}
.attesa::before{content:"■ ";animation:lampeggia 1s steps(1) infinite}
@keyframes lampeggia{50%{opacity:0}}

.esito-finale{border:2px solid var(--ink)}
.esito-finale .soglia-testa{
  color:var(--ink);
  background-color:var(--ink);
  background-image:conic-gradient(var(--bg) 0 25%,var(--ink) 0 100%);
  background-size:2px 2px;
}
.esito-finale .soglia-testa{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.esito-codice{margin-left:auto;text-align:right;font-size:10px}
.esito-voce{font-size:11px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}
.esito-nota{display:block;margin-top:14px;font-size:10px}
.esito-contenuti .esito-soglia-riquadro{grid-column:1 / -1;border-left:0;border-top:1px solid var(--ink)}
.esito-finale .soglia-testa span{padding:1px 4px;background:var(--bg)}
.esito-messaggio{padding:14px 15px;border-bottom:1px solid var(--ink)}
.esito-contenuti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.esito-sezione{padding:22px 20px;min-width:0;overflow-wrap:anywhere}
.esito-sezione+.esito-sezione{border-left:1px solid var(--ink)}
.esito-etichetta{margin-bottom:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.esito-poesia,.esito-soglia{font-weight:400;white-space:pre-line;font-size:16px;line-height:1.65}
.esito-archivio{margin:0;padding:9px 20px;border-top:1px solid var(--ink);font-size:10px;line-height:1.4}
.esito-strofa{margin:0 0 1em}.esito-strofa:last-child{margin-bottom:0}

.comandi{margin-top:auto}
.compositore{
  margin:0 30px 28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:0;
  background-color:var(--bg);
  background-image:conic-gradient(var(--ink) 25%,var(--bg) 0 50%,var(--ink) 0 75%,var(--bg) 0);
  background-size:2px 2px;
}
.risposta{min-height:96px;display:grid;grid-template-columns:minmax(0,1fr) 132px;border:1px solid var(--ink);border-top:0}
.risposta-corpo{padding:10px 12px;background:var(--bg)}
.risposta-etichetta{display:block;margin-bottom:7px;font-size:12px;font-weight:700;letter-spacing:.08em}
textarea{width:100%;height:52px;resize:none;border:0;outline:0;background:var(--bg);color:var(--ink);font-size:14px;font-weight:400;line-height:1.4}
textarea::placeholder{color:var(--ink);opacity:.55}
.invia{display:grid;place-items:center;border:0;border-left:1px solid var(--ink);background-color:var(--ink);background-image:conic-gradient(var(--bg) 0 25%,var(--ink) 0 100%);background-size:2px 2px;cursor:pointer}
.invia span,.chiudi span,.azione span{display:grid;place-items:center;min-height:38px;padding:6px 10px;font-size:12px;font-weight:700;line-height:1.25;text-align:center}
.invia span{width:100px;border:1px solid var(--ink);background:var(--bg);color:var(--ink)}
.invia:hover span,.invia:focus-visible span{background:var(--ink);color:var(--bg)}
.azioni-seduta{display:grid;place-items:center;border:1px solid var(--ink);border-top:0;border-left:0;background-color:var(--bg);background-image:conic-gradient(var(--ink) 25%,var(--bg) 0 50%,var(--ink) 0 75%,var(--bg) 0);background-size:2px 2px}
.chiudi{width:132px;min-height:52px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.chiudi span{width:100px;border:0;background:var(--ink);color:var(--bg)}
.chiudi:hover span,.chiudi:focus-visible span{background:var(--bg);color:var(--ink)}
.azione{display:grid;place-items:center;border:0;background:transparent;color:inherit;cursor:pointer}
.azione span{min-width:190px;border:1px solid var(--ink);background:var(--ink);color:var(--bg)}
.azione:hover span,.azione:focus-visible span{background:var(--bg);color:var(--ink)}
button:disabled{opacity:.45;cursor:wait}
.suggerimento{grid-column:1/-1;margin:0;padding:6px 10px;border:1px solid var(--ink);border-top:0;background:var(--bg);font-size:11px;font-weight:700}
.retino-fondo{height:9px;margin-top:auto;border-top:1px solid var(--ink);background-color:var(--bg);background-image:conic-gradient(var(--ink) 25%,var(--bg) 0 50%,var(--ink) 0 75%,var(--bg) 0);background-size:2px 2px}

.superficie-sonno{flex:1;display:grid;place-items:center;padding:clamp(24px,7vw,72px)}
.pannello-sonno{width:min(610px,100%);border:1px solid var(--ink);background:var(--bg)}
.pannello-titolo{padding:7px 10px;border-bottom:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.08em}
.pannello-corpo{padding:clamp(22px,5vw,42px);font-size:14px;line-height:1.6}
.pannello-corpo p{margin:0 0 14px}.pannello-corpo p:last-child{margin-bottom:0}
.nota-sonno{font-size:12px;font-weight:700}

@media(max-width:760px){
  body{padding:7px}
  .schermo{min-height:calc(100vh - 14px)}
  .barra-titolo{font-size:11px}
  .testata{gap:8px;padding:5px 8px}
  .stato,.seduta{font-size:10px;letter-spacing:.02em}
  .conversazione{min-height:360px;max-height:calc(100vh - 245px);margin:0 12px;padding:16px 10px 4px;scrollbar-width:thin}
  .conversazione::-webkit-scrollbar{width:8px}
  .turno{width:92%;margin-bottom:20px;font-size:14px}
  .soglia{font-size:14px}
  .apertura-iniziale{margin:0 12px}
  .esito-contenuti{grid-template-columns:1fr}
  .esito-sezione+.esito-sezione{border-left:0;border-top:1px solid var(--ink)}
  .compositore{margin:0 12px 28px;grid-template-columns:minmax(0,1fr)}
  .risposta{grid-template-columns:minmax(0,1fr)}
  textarea{font-size:16px}
  .invia{min-height:52px;border-left:0;border-top:1px solid var(--ink)}
  .azioni-seduta{min-height:52px;border-top:0;border-left:1px solid var(--ink)}
  .chiudi{min-height:52px}
  .superficie-sonno{padding:18px 12px}
}

@media(prefers-reduced-motion:reduce){.attesa{animation:none}.conversazione{scroll-behavior:auto}}

/* Durante la veglia il dialogo è l'unica superficie di scorrimento.
   Il compositore e gli avvisi restano fuori dal pannello che scorre. */
body.veglia-attiva{height:100vh;height:100dvh;min-height:0;overflow:hidden}
.veglia-attiva .schermo{height:100%;min-height:0}
.veglia-attiva .schermo > :not(.conversazione){flex-shrink:0}
.veglia-attiva .conversazione{
  flex:1 1 0;min-height:0;max-height:none;
  padding-bottom:24px;overflow-y:auto;overscroll-behavior-y:contain;
}
.veglia-attiva .conversazione > :last-child{margin-bottom:0}
.veglia-attiva .comandi{margin-top:18px}
.veglia-attiva .compositore{margin-bottom:14px}
.veglia-attiva .risposta,.veglia-attiva .azioni-seduta{border-top:1px solid var(--ink)}
.compositore > .nota-inattivita{
  grid-column:1/-1;margin:0;padding:6px 10px;background:var(--bg);
  border:1px solid var(--ink);border-top:0;
}
@media(max-width:760px){
  .veglia-attiva .comandi{margin-top:12px}
  .veglia-attiva .compositore{grid-template-columns:minmax(0,1fr) 68px;margin-bottom:8px}
  .veglia-attiva .risposta{grid-template-columns:minmax(0,1fr) 64px}
  .veglia-attiva .invia{border-top:0;border-left:1px solid var(--ink)}
  .veglia-attiva .invia span,.veglia-attiva .chiudi span{width:auto;padding:6px;font-size:10px}
  .veglia-attiva .azioni-seduta{border-left:0}
  .veglia-attiva .chiudi{width:100%}
  .veglia-attiva .istruzioni{gap:4px 12px;padding:6px 8px;font-size:10px}
  .veglia-attiva .istruzioni span{display:none}
}