/* ============================================================================
   UI 3 - Chat Assistente (Studio Daniele - Inbox)
   Stile specifico di questa variante. Le variabili, i badge, i chip, i bottoni,
   .draft / .transcript / .callout / .wave / .avatar arrivano da ../shared/theme.css.
   Qui definisco solo il guscio conversazionale (header, thread, bolle, composer).
   ==========================================================================*/

html, body { height: 100%; }
body { overflow: hidden; }

.app {
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* ============================== Header ================================= */
.topbar {
  position: relative;
  z-index: 40;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(10,10,18,.94), rgba(10,10,18,.80));
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: 980px;
  margin-inline: auto;
  padding: 12px clamp(16px, 4vw, 32px) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, var(--gold-soft), var(--gold) 55%, #8a7030);
  box-shadow: 0 4px 16px rgba(201,169,97,.32), inset 0 1px 0 rgba(255,255,255,.4);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #1a1408;
}
.brand__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-strong); line-height: 1.1; }
.brand__sub  { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-top: 2px; }

.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi {
  min-width: 66px;
  padding: 7px 13px 8px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: right;
}
.kpi__val { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kpi__lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-top: 5px; }
.kpi--todo  .kpi__val { color: var(--gold); }
.kpi--urg   .kpi__val { color: var(--red); }
.kpi--done  .kpi__val { color: var(--green); }

.progress {
  max-width: 980px;
  margin-inline: auto;
  padding: 11px clamp(16px, 4vw, 32px) 12px;
  display: flex; align-items: center; gap: 14px;
}
.progress .meter { flex: 1; }
.progress__txt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--text-dim); white-space: nowrap; }
.progress__txt b { color: var(--gold); font-weight: 700; }

/* ============================== Thread ================================= */
.chat {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.chat__wrap {
  max-width: 980px;
  margin-inline: auto;
  padding: 26px clamp(16px, 4vw, 32px) 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Riga messaggio */
.msg { display: flex; gap: 12px; max-width: 100%; align-items: flex-end; }
.msg--assistant { justify-content: flex-start; }
.msg--user { justify-content: flex-end; }

.msg__av {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-1);
  align-self: flex-start;
  margin-top: 2px;
}
.msg__av--eva {
  background: radial-gradient(120% 120% at 30% 20%, var(--gold-soft), var(--gold) 55%, #8a7030);
  color: #1a1408;
}
.msg--user .msg__av {
  background: linear-gradient(140deg, var(--teal-soft), var(--teal));
  color: #04222a;
}

/* Bolla */
.bubble {
  position: relative;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-1);
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.58;
}
.bubble--assistant { border-top-left-radius: 5px; }
.bubble--user {
  border-top-right-radius: 5px;
  background: linear-gradient(180deg, rgba(0,188,212,.13), rgba(0,188,212,.06));
  border-color: rgba(0,188,212,.32);
  color: var(--text-strong);
}
.bubble p:last-child { margin-bottom: 0; }
.bubble strong { color: var(--text-strong); font-weight: 600; }
.bubble--user strong { color: var(--teal-soft); }

/* Bolla larga che ospita il dossier di un item */
.bubble--item { max-width: 700px; width: 100%; }
.msg--assistant.msg--wide { width: 100%; }

.say { margin-bottom: 12px; }
.say:last-child { margin-bottom: 0; }
.say--urg { color: var(--text); }
.say--urg .flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); margin-right: 6px;
}
.say--urg .flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse-dot 1.8s var(--ease) infinite; }

/* ============================== Dossier item ========================== */
.itemcard {
  margin-top: 2px;
  background: var(--bg-veil);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 15px 15px;
}
.itemcard__head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.itemcard__sender { font-weight: 600; color: var(--text-strong); font-size: 14px; line-height: 1.3; }
.itemcard__meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.itemcard__tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }

.itemcard > * + * { margin-top: 11px; }

.sintesi { line-height: 1.55; }
.sintesi .callout__title { margin-bottom: 5px; }

/* blocco originale / vocale */
.source__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.voce-note { font-size: 12px; color: var(--text-mute); font-style: italic; margin-top: 7px; }
.type-tag .wave { margin-right: 2px; }
.type-tag .wave i { height: 10px; }

/* lista dati mancanti */
.missing ul { margin: 4px 0 0; padding-left: 18px; }
.missing li { margin: 3px 0; color: var(--text); }
.missing li::marker { color: var(--yellow); }

/* bozza vuota */
.draft--empty { font-size: 13.5px; }
.draft--richiesta::before { content: "RICHIESTA AL CLIENTE"; color: var(--teal); }
.reqfield { min-height: 118px; }

/* ============================== Azioni ================================ */
.itemcard__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.actrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.smista { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.smista__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); margin-right: 2px;
}
.chip[data-act] { cursor: pointer; }
.chip.is-suggested {
  border-color: rgba(201,169,97,.6);
  box-shadow: 0 0 0 1px rgba(201,169,97,.35), 0 4px 14px rgba(201,169,97,.12);
}
.chip.is-suggested::after {
  content: "suggerito";
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-left: 5px; opacity: .9;
}
.chip.is-learned::after { content: "come l'ultima volta"; color: var(--teal); }

/* stato risolto (dopo un'azione) */
.resolved {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 9px 13px;
  border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: var(--r-md); background: var(--green-bg);
  font-size: 13px; color: var(--text);
}
.resolved__ic {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--green); color: #0a1a12;
  font-size: 11px; font-weight: 800;
}
.resolved--route { border-left-color: var(--teal); background: var(--teal-bg); }
.resolved--route .resolved__ic { background: var(--teal); color: #04222a; }
.resolved--skip { border-left-color: var(--yellow); background: var(--yellow-bg); }
.resolved--skip .resolved__ic { background: var(--yellow); color: #1a1408; }

/* riepilogo in-chat */
.recap { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.recap__cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; }
.recap__val { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--gold); line-height: 1; }
.recap__lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-top: 6px; }
.recap__cell--red .recap__val { color: var(--red); }
.recap__cell--green .recap__val { color: var(--green); }
.recap__cell--violet .recap__val { color: var(--violet); }
.recap__list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.recap__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.recap__line .count { flex: none; }

/* indicatore "sta scrivendo" */
.typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); animation: blink 1.2s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ============================== Composer ============================== */
.composer {
  position: relative; z-index: 30;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(10,10,18,.96), rgba(10,10,18,.80));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.composer__inner {
  max-width: 980px; margin-inline: auto;
  padding: 12px clamp(16px, 4vw, 32px) 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.quick { display: flex; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.quick__chip {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quick__chip:hover { color: var(--text-strong); background: var(--raised); border-color: var(--border-strong); transform: translateY(-1px); }
.quick__chip:active { transform: translateY(0); }
.quick__chip--primary { color: #1a1408; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: rgba(201,169,97,.6); font-weight: 600; }
.quick__chip--primary:hover { filter: brightness(1.05); color: #1a1408; }

.inputrow {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--bg-veil); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 7px 7px 7px 16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.inputrow:focus-within { border-color: rgba(201,169,97,.5); box-shadow: 0 0 0 3px rgba(201,169,97,.10); }
.inputrow textarea {
  flex: 1; background: transparent; border: 0; outline: none; resize: none;
  color: var(--text-strong); font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  max-height: 140px; padding: 6px 0;
}
.inputrow textarea::placeholder { color: var(--text-mute); }
.send {
  flex: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid rgba(201,169,97,.6);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #1a1408;
  box-shadow: 0 6px 18px rgba(201,169,97,.20), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.send:hover { filter: brightness(1.05); }
.send:active { transform: translateY(1px); }
.send svg { width: 19px; height: 19px; }

/* ============================== Responsive =========================== */
@media (max-width: 720px) {
  .topbar__inner { gap: 12px; }
  .kpi { min-width: 58px; padding: 6px 10px 7px; }
  .kpi__val { font-size: 19px; }
  .bubble { max-width: 100%; }
  .bubble--item { max-width: 100%; }
  .itemcard__head { flex-wrap: wrap; }
  .itemcard__tags { flex-direction: row; align-items: center; }
  .msg { gap: 9px; }
}