/* chat.css — sezione Chat: lista "roster di menti", thread, composer,
   messaggio vocale, traccia Duetto. Riferimenti: mockup chat-lista.html,
   chat-thread-v3.html. */

/* ============ Schermata lista ============ */
.chat-screen { max-width: 720px; margin: 0 auto; }

.chat-hd {
  padding: 20px 18px 14px;
  background: linear-gradient(180deg, #16121f, #0d0d12);
}
.chat-hd-top {
  display: flex; align-items: center; justify-content: space-between;
}
.chat-hd-brand { display: flex; align-items: center; gap: 10px; }
.chat-hd-logo { width: 30px; height: 30px; flex-shrink: 0; }
.chat-hd-brand h1 {
  margin: 0; font-size: 24px; font-weight: 800;
  color: #fff; letter-spacing: -0.5px;
}
.chat-hd-search-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 0;
  color: rgba(255, 255, 255, 0.55); font-size: 16px; cursor: pointer;
}
.chat-hd-search-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.chat-hd-sub { margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); }
.chat-hd-sub b { color: #a78bfa; font-weight: 600; }
.chat-search {
  width: 100%; margin-top: 12px;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--panel-border);
  color: var(--text); font-size: 14px; outline: none;
}
.chat-search:focus { border-color: rgba(124, 58, 237, 0.6); }

/* ============ Righe agente ============ */
.chat-list { padding: 6px 0 24px; }
.chat-row {
  display: flex; gap: 13px; align-items: center;
  width: 100%; padding: 13px 16px;
  position: relative; background: transparent; border: 0;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.chat-row::before {
  content: ''; position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--c, #7c3aed);
}
.chat-row:hover { background: rgba(255, 255, 255, 0.03); }
.row-av {
  position: relative; width: 50px; height: 50px;
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(255, 255, 255, 0.05);
}
.row-av::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 2px solid var(--c, #7c3aed); opacity: 0.55;
}
.row-av.pulse::after { animation: rowPulse 1.6s ease-in-out infinite; }
@keyframes rowPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.09); }
}
.row-info { flex: 1; min-width: 0; }
.row-top { display: flex; align-items: center; gap: 6px; }
.row-name { font-size: 15.5px; font-weight: 700; color: #f3f3f5; }
.row-time {
  margin-left: auto; font-size: 11px;
  color: rgba(255, 255, 255, 0.3); font-weight: 500;
}
.row-state {
  margin-top: 3px; font-size: 12.7px;
  color: rgba(255, 255, 255, 0.36);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-state.live { color: var(--c, #7c3aed); font-weight: 600; }
.dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c, #7c3aed);
  margin-right: 5px; vertical-align: middle;
}
.dot.beat { animation: dotBeat 1.3s ease-in-out infinite; }
@keyframes dotBeat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.row-badge {
  margin-left: auto; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 11px;
  background: var(--c, #7c3aed); color: #fff;
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* FAB "Evoca" */
.fab {
  position: fixed; right: 18px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  height: 54px; padding: 0 20px 0 17px;
  border-radius: 27px; border: 0;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex; align-items: center; gap: 9px;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
  cursor: pointer; z-index: 70;
}
.fab-plus { font-size: 23px; color: #fff; font-weight: 300; line-height: 1; }
.fab-lbl { font-size: 14px; font-weight: 700; color: #fff; }

.chat-loading, .chat-empty, .chat-msg-warn, .chat-msg-err {
  text-align: center; font-size: 13.5px; padding: 32px 24px;
  line-height: 1.5;
}
.chat-loading, .chat-empty { color: rgba(255, 255, 255, 0.4); }
.chat-msg-warn { color: #fcd34d; }
.chat-msg-err { color: #fda4af; }

/* ============ Thread ============ */
.thread {
  display: flex; flex-direction: column;
  height: 100dvh;
}
.thread-hd {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  padding-top: calc(13px + env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #241a3a, #15101f);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.thread-back {
  font-size: 24px; line-height: 1; color: #cfc6e6;
  background: 0; border: 0; cursor: pointer; padding: 0 2px;
}
.thread-hd-tap {
  display: flex; align-items: center; gap: 11px;
  flex: 1; min-width: 0; cursor: pointer;
}
.thread-av { width: 40px; height: 40px; flex-shrink: 0; }
.thread-hd-info { min-width: 0; }
.thread-name { font-size: 15.5px; font-weight: 800; color: #fff; }
.thread-state {
  font-size: 11.5px; color: rgba(255, 255, 255, 0.4);
  font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.thread-state .d {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.thread-state.live { color: var(--c, #a78bfa); }
.thread-state.live .d { background: var(--c, #a78bfa); animation: dotBeat 1.2s infinite; }
.thread-menu {
  color: rgba(255, 255, 255, 0.4); font-size: 20px;
  background: 0; border: 0; cursor: pointer; padding: 0 4px;
}

/* ============ Messaggi ============ */
.msgs {
  flex: 1; overflow-y: auto;
  padding: 14px 12px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 9px;
}
.chat-skel { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }

.b {
  max-width: 80%; padding: 9px 12px;
  font-size: 13.5px; line-height: 1.5; border-radius: 15px;
  /* I messaggi NON devono restringersi: in un flex-column un figlio con
     overflow:hidden ha min-height auto azzerato e verrebbe schiacciato dal
     flex-shrink (era il bug "vedo solo la prima riga della risposta"). La
     lista .msgs deve scrollare, non comprimere le bolle. */
  flex-shrink: 0;
}
/* Il pre-wrap vive SOLO sul testo del messaggio, non sul contenitore .b:
   così gli a-capo del template letterale non diventano righe vuote. */
.b-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.b-me {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #9d5cf0);
  color: #fff; border-bottom-right-radius: 5px;
}
.b-time {
  font-size: 9.5px; opacity: 0.6; margin-top: 3px;
  text-align: right; white-space: normal;
}
.b-tick.pending { opacity: 0.7; }
.b-tick.running { color: #fcd34d; }
.b-tick.done { color: #6ee7b7; }
.b-tick.failed { color: #fda4af; }
.b-cancel {
  background: 0; border: 0; color: #fda4af;
  cursor: pointer; font-size: 10px; padding: 0 2px;
}

/* Bolla stato-live dell'agente */
.b-live {
  flex-shrink: 0;
  align-self: flex-start; max-width: 80%;
  background: #17141f; border: 1px solid rgba(124, 58, 237, 0.27);
  border-radius: 15px; border-bottom-left-radius: 5px;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
}
.b-live .lab { font-size: 12.5px; color: #c9b6f0; font-weight: 600; }
.dots span {
  display: inline-block; width: 4px; height: 4px; margin: 0 1px;
  border-radius: 50%; background: #a78bfa; animation: dotJump 1.1s infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotJump {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
.duo-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  color: #fbbf24; background: rgba(251, 191, 36, 0.13);
  border: 1px solid rgba(251, 191, 36, 0.33);
  padding: 2px 6px; border-radius: 6px;
}

/* Bolla risultato + traccia Duetto */
.b-result {
  flex-shrink: 0;
  align-self: flex-start; max-width: 84%;
  background: #1c1c24; border-radius: 15px;
  border-bottom-left-radius: 5px; overflow: hidden;
}
.b-result.b-error { background: rgba(159, 18, 57, 0.3); }
.b-result .b-body {
  padding: 9px 12px; font-size: 13.5px; line-height: 1.5;
  color: #e6e6ea; white-space: pre-wrap; word-wrap: break-word;
}
.b-result .b-time { padding: 0 12px 7px; }
.trace { background: #121119; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.trace-h {
  font-size: 10.5px; font-weight: 700; color: #8f86a6;
  padding: 8px 11px; cursor: pointer; user-select: none;
}
.trace-body { display: none; padding: 0 11px 8px; }
.trace.open .trace-body { display: block; }
.trace-step { display: flex; gap: 7px; margin-bottom: 6px; font-size: 11px; line-height: 1.45; }
.trace-step .who {
  flex-shrink: 0; font-weight: 800; font-size: 9.5px;
  padding: 2px 5px; border-radius: 5px; height: fit-content;
}
.who.ex { background: rgba(124, 58, 237, 0.13); color: #b79af2; }
.who.re { background: rgba(52, 211, 153, 0.13); color: #5fd9af; }
.trace-step .txt { color: #9b95a8; }

/* ============ Composer (host fisso in fondo) ============ */
#ctrlComposerHost { display: none; }
body.chat-thread-open #ctrlComposerHost {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #13111b; border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.chat-thread-open .bnav { display: none; }
body.chat-thread-open .tab-content { padding-bottom: 0; }

/* Duetto: l'interruttore e' nascosto finche' la modalita' (Esecutore +
   Revisore) non e' davvero implementata nel runner. Un interruttore che
   non fa niente e' peggio di nessun interruttore. La traccia Duetto sulle
   bolle storiche resta visibile. */
.duetto-row {
  display: none;
  align-items: center; gap: 8px;
  padding: 7px 14px; background: #0f0e14;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.duetto-row .duetto-ico { font-size: 13px; }
.duetto-txt .t1 { font-size: 11.5px; color: #cfc6e6; font-weight: 700; }
.duetto-txt .t2 { font-size: 10px; color: rgba(255, 255, 255, 0.27); }
.switch {
  margin-left: auto; width: 38px; height: 21px;
  border-radius: 11px; background: rgba(255, 255, 255, 0.12);
  position: relative; flex-shrink: 0; transition: background 180ms;
}
.switch::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 2.5px; left: 2.5px; transition: left 180ms;
}
.switch.on { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.switch.on::after { left: 19.5px; }

.composer {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 10px 12px;
}
.cmp-ico {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 0;
  color: #cfc6e6; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cmp-input {
  flex: 1; min-width: 0; resize: none;
  background: #070709; border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px; padding: 9px 14px;
  color: var(--text); font-size: 14px; font-family: inherit;
  line-height: 1.4; max-height: 120px; outline: none;
}
.cmp-input:focus { border-color: rgba(124, 58, 237, 0.5); }
.cmp-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.5);
}
/* Un tasto, due icone: vuoto → mic, con testo → invia. */
.cmp-btn .ic-send { display: none; }
.cmp-btn .ic-mic { display: block; }
.cmp-btn.has-text .ic-send { display: block; }
.cmp-btn.has-text .ic-mic { display: none; }

/* ============ Barra di registrazione vocale ============ */
.recbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
}
.rec-ic {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 14px;
}
.rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ec4899; flex-shrink: 0;
  animation: dotBeat 1.1s infinite;
}
.rec-time {
  font-size: 12px; color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 20px; }
.wave i {
  flex: 1; background: #ec4899; border-radius: 2px; height: 30%;
  animation: waveJump 0.9s ease-in-out infinite;
}
.wave i:nth-child(2n) { animation-delay: 0.15s; }
.wave i:nth-child(3n) { animation-delay: 0.3s; }
.wave i:nth-child(4n) { animation-delay: 0.45s; }
@keyframes waveJump { 0%, 100% { height: 25%; } 50% { height: 90%; } }
.rec-lock {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(236, 72, 153, 0.13);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 13px;
}
.recbar.locked .rec-lock { background: rgba(236, 72, 153, 0.4); }
.rec-send {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; color: #fff; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ============ Lista chat dentro un progetto ============ */
.proj-chats { padding: 12px; overflow-y: auto; }
.proj-chat-new {
  display: block; width: 100%; padding: 11px;
  margin-bottom: 12px; border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.proj-chat-list { display: flex; flex-direction: column; gap: 8px; }
.proj-chat-row {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; border-radius: 11px;
  background: #15141d; border: 1px solid rgba(255, 255, 255, 0.06);
  color: #e6e6ea; cursor: pointer;
}
.proj-chat-row:hover { background: rgba(124, 58, 237, 0.13); }
.proj-chat-row-name { font-size: 13.5px; font-weight: 700; color: #f3f3f5; }
.proj-chat-row-last { font-size: 12px; color: #b8b3c4; margin-top: 3px; max-height: 36px; overflow: hidden; }
.proj-chat-row-meta { font-size: 10.5px; color: #8f86a6; margin-top: 4px; }

/* ============ Sheet overlay (Includi progetto + Import) ============ */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 600px;
  background: #15141d; border-top-left-radius: 16px; border-top-right-radius: 16px;
  max-height: 85vh; display: flex; flex-direction: column;
}
.sheet-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sheet-title { font-size: 15px; font-weight: 700; color: #f3f3f5; }
.sheet-x { background: 0; border: 0; color: #cfc6e6; font-size: 18px; cursor: pointer; }
.sheet-body { flex: 1; overflow-y: auto; padding: 12px; }
.sheet-row {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
  color: #e6e6ea; cursor: pointer;
}
.sheet-row:hover { background: rgba(124, 58, 237, 0.15); }
.sheet-row-name { font-size: 13.5px; font-weight: 700; }
.sheet-row-sub { font-size: 11.5px; color: #8f86a6; margin-top: 2px; }

.imp-step { display: flex; flex-direction: column; gap: 9px; }
.imp-label { font-size: 12.5px; color: #cfc6e6; font-weight: 600; }
.imp-step textarea {
  width: 100%; min-height: 80px; resize: vertical; padding: 10px; border-radius: 10px;
  background: #070709; border: 1px solid rgba(255, 255, 255, 0.07);
  color: #e6e6ea; font-size: 13.5px; outline: none; font-family: inherit;
}
.imp-go {
  align-self: flex-end; padding: 8px 18px; border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.imp-go:disabled { opacity: 0.6; cursor: default; }
.imp-permission {
  margin-top: 14px; padding: 13px; border-radius: 11px;
  background: #1c1b26; border: 1px solid rgba(124, 58, 237, 0.32);
}
.imp-perm-text { font-size: 12px; color: #8f86a6; margin-bottom: 7px; }
.imp-perm-q { font-size: 13px; font-weight: 700; color: #f3f3f5; margin-top: 12px; }
.imp-perm-actions { display: flex; gap: 8px; margin-top: 10px; }
.imp-confirm {
  padding: 8px 16px; border-radius: 9px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.imp-confirm:disabled { opacity: 0.6; cursor: default; }
.imp-deny {
  padding: 8px 13px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.05); border: 0;
  color: #cfc6e6; font-size: 12px; cursor: pointer;
}
.imp-empty, .imp-err {
  margin-top: 12px; padding: 11px; border-radius: 9px; text-align: center; font-size: 12.5px;
}
.imp-empty { background: rgba(255, 255, 255, 0.04); color: #b8b3c4; }
.imp-err { background: rgba(159, 18, 57, 0.25); color: #fda4af; }

/* ============ Chip cross-progetto (Includi) ============ */
.include-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 12px 0; }
.inc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(52, 211, 153, 0.13); border: 1px solid rgba(52, 211, 153, 0.35);
  font-size: 11px; color: #5fd9af; font-weight: 700;
}
.inc-chip button { background: 0; border: 0; color: #5fd9af; cursor: pointer; font-size: 11px; padding: 0; }

/* ============ Azioni dell'header progetto (Ristudia, ecc.) ============ */
.proj-actions {
  display: flex; gap: 6px; padding: 8px 12px;
  background: #0f0e14; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
}
.proj-actions button {
  flex-shrink: 0; padding: 6px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cfc6e6; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.proj-actions button:hover { background: rgba(124, 58, 237, 0.18); }
.proj-actions button:disabled { opacity: 0.6; cursor: default; }

/* ============ Import progetti ============ */
.plus-menu {
  position: absolute; left: 12px; bottom: 60px; z-index: 90;
  background: #1c1b26; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.plus-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; background: 0; border: 0;
  color: #e6e6ea; font-size: 13.5px; cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.plus-menu button:last-child { border-bottom: 0; }
.plus-menu button:hover { background: rgba(124, 58, 237, 0.18); }

.import-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 0; padding: 5px 10px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 9px; width: fit-content;
  font-size: 11.5px; font-weight: 700; color: #c9b6f0;
}
.import-chip button {
  background: 0; border: 0; color: #c9b6f0;
  cursor: pointer; font-size: 11px; padding: 0;
}

.cand-card {
  margin: 8px 10px 0; padding: 10px 12px;
  background: #15141d; border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
}
.cand-name { font-size: 13.5px; font-weight: 700; color: #f3f3f5; }
.cand-path {
  font-size: 11px; color: #8f86a6; margin-top: 2px;
  font-family: ui-monospace, monospace; word-break: break-all;
}
.cand-desc { font-size: 12px; color: #b8b3c4; margin-top: 5px; }
.cand-import {
  margin-top: 9px; padding: 6px 16px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border: 0; border-radius: 8px; color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.cand-import:disabled { opacity: 0.5; cursor: default; }

/* ============ Skeleton shimmer (condiviso) ============ */
.skel {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 14px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}