/* chat.css — lista contatti, conversazione, bolle */

.chat-list{ display:flex; flex-direction:column; gap:0; }
.chat-peer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:48px; box-sizing:border-box;
  padding:13px 12px; cursor:pointer;
  border:1.5px solid rgba(0,0,0,0.16); margin-bottom:8px;
  background:#fff; user-select:none;
  font:700 12px/1.25 'Space Mono',monospace;
  text-transform:lowercase; color:rgba(0,0,0,0.72);
  transition:border-color .12s, background .12s;
}
.chat-peer:hover{ border-color:#000; }
.chat-peer .cp-sig{
  font:400 10px/1 'Space Mono',monospace; color:rgba(0,0,0,0.4); letter-spacing:0.06em;
}
.chat-peer .cp-n{
  font:400 10px/1 'Space Mono',monospace; color:rgba(0,0,0,0.35);
}
.chat-empty{
  font:400 11px/1.55 'Space Mono',monospace; color:rgba(0,0,0,0.45);
  padding:8px 2px;
}
.chat-head{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1.5px solid #000;
}
.chat-back{
  cursor:pointer; font:700 14px/1 'Space Mono',monospace; color:#000;
  padding:8px 10px; user-select:none; min-width:36px; text-align:center;
}
.chat-back:hover{ background:rgba(0,0,0,0.05); }
.chat-who{
  font:700 13px/1.25 'Space Mono',monospace; text-transform:lowercase; color:#000;
}
.chat-who .cw-sig{
  display:block; font:400 10px/1 'Space Mono',monospace;
  color:rgba(0,0,0,0.4); letter-spacing:0.06em; margin-top:4px;
}
/* avviso di corrispondenza non ancora reciproca — compare dove si sta
   per scrivere, non in un tutorial iniziale che verrebbe dimenticato */
.chat-link{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:12px;
  border:1.5px dashed rgba(0,0,0,0.35);
  font:400 11px/1.5 'Space Mono',monospace; color:rgba(0,0,0,0.7);
  text-transform:lowercase; letter-spacing:0.02em;
}
.chat-link span{ flex:1; min-width:180px; }
.chat-link-sconosciuto{ border-style:dotted; color:rgba(0,0,0,0.5); }
/* la domanda pesa meno dell'avviso: non è un problema, è un'informazione
   che manca a noi */
.chat-link-incerto{
  border-style:dotted; border-color:rgba(0,0,0,0.25); color:rgba(0,0,0,0.6);
}
.chat-link-act{
  font:700 10px/1 'Space Mono',monospace; letter-spacing:0.06em;
  text-transform:lowercase; cursor:pointer; white-space:nowrap;
  padding:9px 12px; min-height:34px;
  background:#000; color:#fff; border:none; border-radius:2px;
}
.chat-link-act:hover{ background:rgba(0,0,0,0.8); }
.chat-link-alt{
  background:transparent; color:rgba(0,0,0,0.7); font-weight:400;
  border:1px solid rgba(0,0,0,0.3);
}
.chat-link-alt:hover{ background:rgba(0,0,0,0.06); color:#000; }

/* stato nella lista conversazioni */
.chat-peer .cp-link{
  font:400 9px/1 'Space Mono',monospace; letter-spacing:0.08em;
  color:rgba(0,0,0,0.6); padding:3px 6px; border-radius:2px;
  border:1px dashed rgba(0,0,0,0.35);
}
.chat-peer .cp-link-sconosciuto{ border-style:dotted; color:rgba(0,0,0,0.35); }

/* trascinamento di una tela sulla sezione chat: bordo tratteggiato che
   accetta png. Monocromo come il resto, nessuna tinta. */
section.sec[data-sec="chat"]{ position:relative; }
section.sec[data-sec="chat"].drop-on::after{
  content:'lascia qui il png';
  position:absolute; inset:6px; z-index:40; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  border:2px dashed rgba(0,0,0,0.45); border-radius:3px;
  background:rgba(255,255,255,0.82);
  font:400 11px/1 'Space Mono',monospace; letter-spacing:0.08em;
  text-transform:lowercase; color:rgba(0,0,0,0.7);
}

.chat-flow{ display:flex; flex-direction:column; gap:10px; }
.bubble{
  max-width:88%; padding:11px 12px;
  border:1.5px solid rgba(0,0,0,0.16);
  font:400 12px/1.5 'Space Mono',monospace; color:rgba(0,0,0,0.84);
  cursor:pointer; word-break:break-word;
  transition:border-color .12s, background .12s;
}
.bubble:hover{ border-color:#000; }
.bubble.out{ align-self:flex-end; background:#000; color:#fff; border-color:#000; }
.bubble.out:hover{ background:#1a1a1a; }
.bubble.in{ align-self:flex-start; background:#fff; }
.bubble .b-txt{ display:block; }
.bubble .b-lab{
  display:block; margin-top:6px;
  font:400 9px/1 'Space Mono',monospace;
  letter-spacing:0.08em; text-transform:lowercase;
}
.bubble.out .b-lab{ color:rgba(255,255,255,0.55); }
.bubble.in .b-lab{ color:rgba(0,0,0,0.4); }
.bubble.in.sealed .b-txt{ color:rgba(0,0,0,0.32); letter-spacing:0.2em; }

.chat-acts{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:14px;
}
.chat-act{
  display:block; width:100%; box-sizing:border-box;
  min-height:44px; padding:12px 12px;
  border:1.5px solid rgba(0,0,0,0.16); background:#fff;
  font:700 12px/1.25 'Space Mono',monospace;
  text-transform:lowercase; color:rgba(0,0,0,0.72);
  text-align:left; cursor:pointer; user-select:none;
  transition:border-color .12s, background .12s, color .12s;
}
.chat-act:hover,.chat-act.on{ border-color:#000; color:#000; }
.chat-act.on{ background:rgba(0,0,0,0.04); }
.chat-tele-pick{
  display:flex; flex-direction:column; gap:6px;
  max-height:220px; overflow:auto;
  padding:2px 0 4px;
}
.chat-tele-row{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  width:100%; box-sizing:border-box;
  padding:10px 12px; cursor:pointer; user-select:none;
  border:1.5px solid rgba(0,0,0,0.12); background:#fff;
  font:700 11px/1.25 'Space Mono',monospace;
  text-transform:lowercase; color:rgba(0,0,0,0.72);
  text-align:left;
  transition:border-color .12s;
}
.chat-tele-row:hover{ border-color:#000; }
.chat-tele-row .ct-title{ display:block; }
.chat-tele-row .ct-meta{
  font:400 10px/1 'Space Mono',monospace; color:rgba(0,0,0,0.4);
}